合并
This commit is contained in:
castleiMac
commit
71c9de04f1
@ -16,51 +16,51 @@
|
|||||||
<div class="anim">
|
<div class="anim">
|
||||||
<ul class="layui-border-box site-doc-icon site-doc-anim">
|
<ul class="layui-border-box site-doc-icon site-doc-anim">
|
||||||
<li style="height:auto">
|
<li style="height:auto">
|
||||||
<div class="layui-anim layui-anim-down">顶部往下滑入</div>
|
<div class="layui-anim layui-anim-down" @click="replay">顶部往下滑入</div>
|
||||||
<div class="code">layui-anim-down</div>
|
<div class="code">layui-anim-down</div>
|
||||||
</li>
|
</li>
|
||||||
<li style="height:auto">
|
<li style="height:auto">
|
||||||
<div class="layui-anim layui-anim-downbit">微微往下滑入</div>
|
<div class="layui-anim layui-anim-downbit" @click="replay">微微往下滑入</div>
|
||||||
<div class="code">layui-anim-downbit</div>
|
<div class="code">layui-anim-downbit</div>
|
||||||
</li>
|
</li>
|
||||||
<li style="height:auto">
|
<li style="height:auto">
|
||||||
<div class="layui-anim layui-anim-up">底部往上滑入</div>
|
<div class="layui-anim layui-anim-up" @click="replay">底部往上滑入</div>
|
||||||
<div class="code">layui-anim-up</div>
|
<div class="code">layui-anim-up</div>
|
||||||
</li>
|
</li>
|
||||||
<li style="height:auto">
|
<li style="height:auto">
|
||||||
<div class="layui-anim layui-anim-upbit">微微往上滑入</div>
|
<div class="layui-anim layui-anim-upbit" @click="replay">微微往上滑入</div>
|
||||||
<div class="code">layui-anim-upbit</div>
|
<div class="code">layui-anim-upbit</div>
|
||||||
</li>
|
</li>
|
||||||
<li style="height:auto">
|
<li style="height:auto">
|
||||||
<div class="layui-anim layui-anim-scale">平滑放大</div>
|
<div class="layui-anim layui-anim-scale" @click="replay">平滑放大</div>
|
||||||
<div class="code">layui-anim-scale</div>
|
<div class="code">layui-anim-scale</div>
|
||||||
</li>
|
</li>
|
||||||
<li style="height:auto">
|
<li style="height:auto">
|
||||||
<div class="layui-anim layui-anim-scaleSpring">弹簧式放大</div>
|
<div class="layui-anim layui-anim-scaleSpring" @click="replay">弹簧式放大</div>
|
||||||
<div class="code">layui-anim-scaleSpring</div>
|
<div class="code">layui-anim-scaleSpring</div>
|
||||||
</li>
|
</li>
|
||||||
<li style="height:auto">
|
<li style="height:auto">
|
||||||
<div class="layui-anim layui-anim-scalesmall">平滑放小</div>
|
<div class="layui-anim layui-anim-scalesmall" @click="replay">平滑放小</div>
|
||||||
<div class="code">layui-anim-scalesmall</div>
|
<div class="code">layui-anim-scalesmall</div>
|
||||||
</li>
|
</li>
|
||||||
<li style="height:auto">
|
<li style="height:auto">
|
||||||
<div class="layui-anim layui-anim-scalesmall-spring">弹簧式放小</div>
|
<div class="layui-anim layui-anim-scalesmall-spring" @click="replay">弹簧式放小</div>
|
||||||
<div class="code">layui-anim-scalesmall-spring</div>
|
<div class="code">layui-anim-scalesmall-spring</div>
|
||||||
</li>
|
</li>
|
||||||
<li style="height:auto">
|
<li style="height:auto">
|
||||||
<div class="layui-anim layui-anim-fadein">渐现</div>
|
<div class="layui-anim layui-anim-fadein" @click="replay">渐现</div>
|
||||||
<div class="code">layui-anim-fadein</div>
|
<div class="code">layui-anim-fadein</div>
|
||||||
</li>
|
</li>
|
||||||
<li style="height:auto">
|
<li style="height:auto">
|
||||||
<div class="layui-anim layui-anim-fadeout">渐隐</div>
|
<div class="layui-anim layui-anim-fadeout" @click="replay">渐隐</div>
|
||||||
<div class="code">layui-anim-fadeout</div>
|
<div class="code">layui-anim-fadeout</div>
|
||||||
</li>
|
</li>
|
||||||
<li style="height:auto">
|
<li style="height:auto">
|
||||||
<div class="layui-anim layui-anim-rotate">360度旋转</div>
|
<div class="layui-anim layui-anim-rotate" @click="replay">360度旋转</div>
|
||||||
<div class="code">layui-anim-rotate</div>
|
<div class="code">layui-anim-rotate</div>
|
||||||
</li>
|
</li>
|
||||||
<li style="height:auto">
|
<li style="height:auto">
|
||||||
<div class="layui-anim layui-anim-rotate layui-anim-loop">循环动画</div>
|
<div class="layui-anim layui-anim-rotate layui-anim-loop" @click="replay">循环动画</div>
|
||||||
<div class="code">追加：layui-anim-loop</div>
|
<div class="code">追加：layui-anim-loop</div>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -72,7 +72,16 @@ import { ref } from 'vue'
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
|
const replay = (e) => {
|
||||||
|
const el = e.currentTarget;
|
||||||
|
const targetClass = el.classList[1];
|
||||||
|
el.classList.remove(targetClass);
|
||||||
|
setTimeout(() => {
|
||||||
|
el.classList.add(targetClass);
|
||||||
|
},100)
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
|
replay
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -102,7 +111,5 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
::: previousNext animation
|
::: previousNext animation
|
||||||
:::
|
:::
|
||||||
@ -135,7 +135,5 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
::: previousNext avatar
|
::: previousNext avatar
|
||||||
:::
|
:::
|
||||||
|
|||||||
@ -37,7 +37,7 @@ export default {
|
|||||||
::: title 简约按钮
|
::: title 简约按钮
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 使用 `border` 属性设置边框主题
|
::: demo 使用 `border` 属性设置边框颜色
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-button>原始按钮</lay-button>
|
<lay-button>原始按钮</lay-button>
|
||||||
|
|||||||
@ -217,7 +217,7 @@ export default {
|
|||||||
| default | 默认插槽 | -- |
|
| default | 默认插槽 | -- |
|
||||||
| header | 头部插槽 | -- |
|
| header | 头部插槽 | -- |
|
||||||
| body | 内容插槽 | -- |
|
| body | 内容插槽 | -- |
|
||||||
|
| extra | 扩展插槽 | -- |
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -116,7 +116,69 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: title 时间选择
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-date-picker type="time" v-model="endTime5"></lay-date-picker>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
const endTime5 = ref("2022-03-04 17:35:00");
|
||||||
|
|
||||||
|
return {
|
||||||
|
endTime5
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 年月选择
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-date-picker type="yearmonth" v-model="endTime6"></lay-date-picker>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
const endTime6 = ref("2022-03-04 17:35:00");
|
||||||
|
|
||||||
|
return {
|
||||||
|
endTime6
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title Date Picker 属性
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: table
|
||||||
|
|
||||||
|
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
|
||||||
|
| ------------- | ------------------------------------------------------------ | -------------- | ------ | -------------- |
|
||||||
|
| v-model | 当前时间 | `string` | -- | — |
|
||||||
|
| type | 选择类型 | `string` | `date` | `date` `datetime` `year` `month` `time` `yearmonth` |
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
::: previousNext transfer
|
::: previousNext transfer
|
||||||
:::
|
:::
|
||||||
@ -53,6 +53,33 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: title 扩展插槽
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-empty description="刷新试试">
|
||||||
|
<template #extra>
|
||||||
|
<lay-button>刷新页面</lay-button>
|
||||||
|
</template>
|
||||||
|
</lay-empty>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
::: title Empty 属性
|
::: title Empty 属性
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -64,7 +91,16 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: title Empty 插槽
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: table
|
||||||
|
|
||||||
|
| 属性 | 描述 | 可选值 |
|
||||||
|
| ----------- | -------- | ------ |
|
||||||
|
| extra | 扩展插槽 | -- |
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
::: previousNext empty
|
::: previousNext empty
|
||||||
:::
|
:::
|
||||||
@ -14,7 +14,7 @@
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-exception status="401" title="401" describe="暂无相关权限">
|
<lay-exception status="401" title="401" describe="暂无相关权限">
|
||||||
<template #action>
|
<template #extra>
|
||||||
<lay-button>刷新</lay-button>
|
<lay-button>刷新</lay-button>
|
||||||
<lay-button type="primary">返回</lay-button>
|
<lay-button type="primary">返回</lay-button>
|
||||||
</template>
|
</template>
|
||||||
@ -42,7 +42,7 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-exception status="403" title="403" describe="暂无相关权限">
|
<lay-exception status="403" title="403" describe="暂无相关权限">
|
||||||
<template #action>
|
<template #extra>
|
||||||
<lay-button>刷新</lay-button>
|
<lay-button>刷新</lay-button>
|
||||||
<lay-button type="primary">返回</lay-button>
|
<lay-button type="primary">返回</lay-button>
|
||||||
</template>
|
</template>
|
||||||
@ -70,7 +70,7 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-exception status="404" title="404" describe="跳转页面失败">
|
<lay-exception status="404" title="404" describe="跳转页面失败">
|
||||||
<template #action>
|
<template #extra>
|
||||||
<lay-button>刷新</lay-button>
|
<lay-button>刷新</lay-button>
|
||||||
<lay-button type="primary">返回</lay-button>
|
<lay-button type="primary">返回</lay-button>
|
||||||
</template>
|
</template>
|
||||||
@ -99,7 +99,7 @@ export default {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-exception status="500" title="500" describe="服务发生错误">
|
<lay-exception status="500" title="500" describe="服务发生错误">
|
||||||
<template #action>
|
<template #extra>
|
||||||
<lay-button>刷新</lay-button>
|
<lay-button>刷新</lay-button>
|
||||||
<lay-button type="primary">返回</lay-button>
|
<lay-button type="primary">返回</lay-button>
|
||||||
</template>
|
</template>
|
||||||
@ -140,7 +140,7 @@ export default {
|
|||||||
|
|
||||||
| 属性 | 描述 | 可选值 |
|
| 属性 | 描述 | 可选值 |
|
||||||
| ----------- | -------- | ------ |
|
| ----------- | -------- | ------ |
|
||||||
| action | 操作 | -- |
|
| extra | 操作 | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -116,7 +116,7 @@ npm install @layui/icons-vue
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ul class="site-doc-icon">
|
<ul class="site-doc-icon">
|
||||||
<li v-for="(layIcon, index) of LayIconList" @click="copyIconClass(layIcon.class)">
|
<li v-for="(layIcon, index) of LayIconList" @click="copy(layIcon.class)">
|
||||||
<i :class="[`layui-icon ${layIcon.class}`]"></i>
|
<i :class="[`layui-icon ${layIcon.class}`]"></i>
|
||||||
<div class="doc-icon-name">{{ layIcon.name }}</div>
|
<div class="doc-icon-name">{{ layIcon.name }}</div>
|
||||||
<div class="doc-icon-code">&#x{{ iconsUnicode[index] }};</div>
|
<div class="doc-icon-code">&#x{{ iconsUnicode[index] }};</div>
|
||||||
@ -133,7 +133,7 @@ npm install @layui/icons-vue
|
|||||||
|
|
||||||
const iconsUnicode = reactive([]);
|
const iconsUnicode = reactive([]);
|
||||||
|
|
||||||
function copyIconClass(iconClass) {
|
function copy(iconClass) {
|
||||||
const { isSupported, copy, copied } = useClipboard()
|
const { isSupported, copy, copied } = useClipboard()
|
||||||
const permissionWrite = usePermission('clipboard-write')
|
const permissionWrite = usePermission('clipboard-write')
|
||||||
if (isSupported && permissionWrite.value === 'granted') {
|
if (isSupported && permissionWrite.value === 'granted') {
|
||||||
|
|||||||
@ -311,12 +311,12 @@ export default {
|
|||||||
| zIndex | 自定义层级 | -- |
|
| zIndex | 自定义层级 | -- |
|
||||||
| type | 类型 | `1: component` `2: iframe` |
|
| type | 类型 | `1: component` `2: iframe` |
|
||||||
| closeBtn | 显示关闭 | true |
|
| closeBtn | 显示关闭 | true |
|
||||||
| btn | 按钮 | |
|
| btn | 按钮 格式:{text:"",callback:function(){}} | -- |
|
||||||
| btnAlign | 按钮布局 | `l` `r` `c` |
|
| btnAlign | 按钮布局 | `l` `r` `c` |
|
||||||
| anim | 入场动画 | `0` `-` `6` |
|
| anim | 入场动画 | `0` `-` `6` |
|
||||||
| isOutAnim | 关闭动画 | `true` `false` |
|
| isOutAnim | 关闭动画 | `true` `false` |
|
||||||
| success | 显示回调 | -- |
|
| success | 显示回调 | -- |
|
||||||
| end | 关闭回调 | -- |
|
| close | 关闭回调 | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -53,6 +53,34 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: title 完整
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo 使用 `lay-result` 标签, 创建一个结果页面
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-result status="failure">
|
||||||
|
<template #extra>
|
||||||
|
<lay-button type="primary">再来一次</lay-button>
|
||||||
|
<lay-button >返回首页</lay-button>
|
||||||
|
</template>
|
||||||
|
</lay-result>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
::: title Result 属性
|
::: title Result 属性
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -74,7 +102,7 @@ export default {
|
|||||||
| 属性 | 描述 | 可选值 |
|
| 属性 | 描述 | 可选值 |
|
||||||
| ----------- | -------- | ------ |
|
| ----------- | -------- | ------ |
|
||||||
| content | 内容 | -- |
|
| content | 内容 | -- |
|
||||||
| action | 操作 | -- |
|
| extra | 扩展 | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -146,6 +146,32 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: title 自定义值
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-switch v-model="active6" onswitch-value="dark" unswitch-value="light"></lay-switch>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
const active6 = ref('dark')
|
||||||
|
|
||||||
|
return {
|
||||||
|
active6
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
::: title Switch 属性
|
::: title Switch 属性
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -156,8 +182,10 @@ export default {
|
|||||||
| name | 原生 name 属性 | -- |
|
| name | 原生 name 属性 | -- |
|
||||||
| v-model | 是否启用 | `true` `false` |
|
| v-model | 是否启用 | `true` `false` |
|
||||||
| disabled | 禁用 | `true` `false` |
|
| disabled | 禁用 | `true` `false` |
|
||||||
| active-text | 启用描述 | `启动` |
|
| onswitch-text | 启用描述 | `启动` |
|
||||||
| inactive-text | 禁用描述 | `禁用` |
|
| unswitch-text | 禁用描述 | `禁用` |
|
||||||
|
| onswitch-value | 启用值 | `true` |
|
||||||
|
| unswitch-value | 禁用值 | `false` |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -173,6 +201,16 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
::: title Switch 插槽
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: table
|
||||||
|
|
||||||
|
| 属性 | 描述 | 参数 |
|
||||||
|
| ------ | -------- | ---------------- |
|
||||||
|
| onswitch-icon | 启用图标 | -- |
|
||||||
|
| unswitch-icon | 禁用图标 | -- |
|
||||||
|
:::
|
||||||
|
|
||||||
::: previousNext switch
|
::: previousNext switch
|
||||||
:::
|
:::
|
||||||
@ -111,6 +111,44 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title 水平方向
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-timeline direction="horizontal">
|
||||||
|
<lay-timeline-item title="2015年" >2015年，layui 孵化</lay-timeline-item>
|
||||||
|
<lay-timeline-item title="2016年" >2016年，layui 首个版本发布</lay-timeline-item>
|
||||||
|
<lay-timeline-item title="2017年" >layui里程碑版本1.0发布</lay-timeline-item>
|
||||||
|
<lay-timeline-item title="2021年" >layui里程碑版本2.0发布</lay-timeline-item>
|
||||||
|
</lay-timeline>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: title Timeline 属性
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: table
|
||||||
|
|
||||||
|
| 属性 | 描述 | 可选值 |
|
||||||
|
|-----------|------|-----|
|
||||||
|
| direction | 排列方向 | `horizontal` `vertical` |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -119,10 +157,10 @@ export default {
|
|||||||
|
|
||||||
::: table
|
::: table
|
||||||
|
|
||||||
| | | |
|
| 属性 | 描述 | 可选值 |
|
||||||
| ------ | -------- | --- |
|
|--------|------|-----|
|
||||||
| simple | 简单模式 | -- |
|
| simple | 简单模式 | -- |
|
||||||
| title | 标题 | -- |
|
| title | 标题 | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -131,9 +169,9 @@ export default {
|
|||||||
|
|
||||||
::: table
|
::: table
|
||||||
|
|
||||||
| | | |
|
| 插槽名 | 描述 | |
|
||||||
| ------ | -------- | --- |
|
|-----|-----| --- |
|
||||||
| dot | 节点 | -- |
|
| dot | 节点 | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -238,6 +238,7 @@ function handleClick(node) {
|
|||||||
| onlyIconControl | 是否仅允许节点左侧图标控制展开收缩 | false |
|
| onlyIconControl | 是否仅允许节点左侧图标控制展开收缩 | false |
|
||||||
| showLine | 是否开启连接线 | true |
|
| showLine | 是否开启连接线 | true |
|
||||||
| checkedKeys(v-model:checkedKeys) | 开启 showCheckbox 后, 选中的节点 | [] |
|
| checkedKeys(v-model:checkedKeys) | 开启 showCheckbox 后, 选中的节点 | [] |
|
||||||
|
| collapse-transition | 是否开启展示收起动画 | false |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -253,7 +254,6 @@ function handleClick(node) {
|
|||||||
| children | 子节点 | [] |
|
| children | 子节点 | [] |
|
||||||
| disabled | 该节点是否禁用 | false |
|
| disabled | 该节点是否禁用 | false |
|
||||||
| spread | 该节点是否展开 | false |
|
| spread | 该节点是否展开 | false |
|
||||||
| collapse-transition | 是否开启展示收起动画 | false |
|
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -106,13 +106,13 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: title 自定义预览
|
::: title 自定义预览/上传禁用
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互
|
::: demo 使用 `lay-upload` 标签, 使用 `#preview` 自定义预览的UI交互,使用 `disabled` 添加上传禁用
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<lay-upload @done="getUploadFile2">
|
<lay-upload @done="getUploadFile2" :disabled="true">
|
||||||
<template #preview>
|
<template #preview>
|
||||||
<div class="easy-wrap">
|
<div class="easy-wrap">
|
||||||
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
|
<img src="https://chixian.oss-cn-hangzhou.aliyuncs.com/20211023003617_0706a.jpg" style="width:62.9px;height:63.2px"/>
|
||||||
@ -141,6 +141,47 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: title 提供默认剪裁功能
|
||||||
|
|
||||||
|
::: demo 使用 `lay-upload` 标签, 添加 `cut` 开启 选择文件后剪裁功能
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-upload @cutdone="getCutDone" @cutcancel="getCutCancel" :cut="true" :multiple="false" @done="getFileDone">
|
||||||
|
<template #preview>
|
||||||
|
<div class="easy-wrap" v-if="cutUrl">
|
||||||
|
<img :src="cutUrl"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</lay-upload>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
const cutUrl = ref("");
|
||||||
|
const getCutDone=(res)=>{
|
||||||
|
console.log("getCutDone",res);
|
||||||
|
cutUrl.value = res.msg;
|
||||||
|
};
|
||||||
|
const getCutCancel=(res)=>{
|
||||||
|
console.log("getCutCancel",res);
|
||||||
|
};
|
||||||
|
const getFileDone=(res)=>{
|
||||||
|
console.log("getFileDone",res);
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
getCutDone,
|
||||||
|
getCutCancel,
|
||||||
|
getFileDone,
|
||||||
|
cutUrl
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
::: title Upload 属性
|
::: title Upload 属性
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -157,6 +198,9 @@ export default {
|
|||||||
| multiple | 是否允许多文件上传。设置 true即可开启。不支持ie8/9 | boolean | false | -- |
|
| multiple | 是否允许多文件上传。设置 true即可开启。不支持ie8/9 | boolean | false | -- |
|
||||||
| number | 设置同时可上传的文件数量，一般配合 multiple 参数出现。 | number | `0(不限制)` | -- |
|
| number | 设置同时可上传的文件数量，一般配合 multiple 参数出现。 | number | `0(不限制)` | -- |
|
||||||
| drag | 是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9 | boolean | true | -- |
|
| drag | 是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9 | boolean | true | -- |
|
||||||
|
| disabled | 设置文件禁用 | boolean | false | -- |
|
||||||
|
| cut | 是否开启选择图片后检测,设置true可开启 | boolean | false | -- |
|
||||||
|
| cutOptions | 开启剪裁的模态弹窗与剪裁框的配置 | object | { layerOption,copperOption } | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -182,7 +226,8 @@ export default {
|
|||||||
| before | 上传事务开启前的回调 | -- |
|
| before | 上传事务开启前的回调 | -- |
|
||||||
| done | 上传事务结束的回调 | -- |
|
| done | 上传事务结束的回调 | -- |
|
||||||
| error | 上传事务中出现错误的回调 | -- |
|
| error | 上传事务中出现错误的回调 | -- |
|
||||||
|
| cutdown | 剪裁完成 | -- |
|
||||||
|
| cutclose | 剪裁取消 | -- |
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -10,22 +10,47 @@
|
|||||||
::: demo
|
::: demo
|
||||||
<template>
|
<template>
|
||||||
<lay-timeline>
|
<lay-timeline>
|
||||||
<lay-timeline-item title="0.4.0">
|
<lay-timeline-item title="1.0.x">
|
||||||
<ul>
|
<ul>
|
||||||
<a name="0-4-5"> </a>
|
<a name="1-0-1"> </a>
|
||||||
<li>
|
<li>
|
||||||
<h3>0.4.4 <span class="layui-badge-rim">2022-03-29</span></h3>
|
<h3>1.0.1 <span class="layui-badge-rim">2022-04-03</span></h3>
|
||||||
<ul>
|
<ul>
|
||||||
<li>[新增] tab 组件 position 属性, 不同方向的选项卡标题。</li>
|
<li>[新增] upload 组件 cut cutOptions 属性, 支持上传裁剪。</li>
|
||||||
|
<li>[新增] timeline 组件 direction 属性, 支持垂直与水平布局。</li>
|
||||||
|
<li>[新增] config-proivder 组件 global-dark-background-color 夜间模式背景颜色变量。</li>
|
||||||
|
<li>[新增] config-proivder 组件 global-dark-text-color 夜间模式文字颜色变量。</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<a name="1-0-0"> </a>
|
||||||
|
<li>
|
||||||
|
<h3>1.0.0 <span class="layui-badge-rim">2022-04-02</span></h3>
|
||||||
|
<ul>
|
||||||
|
<li>[重要] 修订 version 为 1.0.0。</li>
|
||||||
|
<li>[新增] empty 组件 extra 插槽, 支持扩展内容。</li>
|
||||||
|
<li>[新增] result 组件 extra 插槽, 支持扩展内容。</li>
|
||||||
|
<li>[新增] exception 组件 extra 插槽, 支持扩展内容。</li>
|
||||||
|
<li>[新增] switch 组件 onswitch-value 属性, 默认为 true。</li>
|
||||||
|
<li>[新增] switch 组件 unswitch-value 属性, 默认为 false。</li>
|
||||||
|
<li>[新增] date-picker 组件 time 属性, 支持 时 分 秒 选择。</li>
|
||||||
|
<li>[新增] date-picker 组件 yearmonth 属性, 支持 年 月 选择。</li>
|
||||||
|
<li>[新增] tab 组件 position 属性, 用于支持不同方向的选项卡标题。</li>
|
||||||
|
<li>[修复] date-picker 组件 type 属性为 time 时, v-model 默认不生效。</li>
|
||||||
|
<li>[修复] date-picker 组件 12 小时制为 24 小时制。</li>
|
||||||
<li>[修复] transfer 组件 showSearch 属性类型警告。</li>
|
<li>[修复] transfer 组件 showSearch 属性类型警告。</li>
|
||||||
<li>[修复] upload 组件 number 属性必填警告。</li>
|
<li>[修复] upload 组件 number 属性必填警告。</li>
|
||||||
<li>[修复] variable 全局变量重复导入的问题。</li>
|
<li>[修复] variable 全局变量重复导入的问题。</li>
|
||||||
<li>[修复] menu 组件 openKeys 属性失效。</li>
|
<li>[修复] menu 组件 openKeys 属性失效。</li>
|
||||||
|
<li>[支持] animation 点击演示。</li>
|
||||||
<li>[支持] icon 列表复制。</li>
|
<li>[支持] icon 列表复制。</li>
|
||||||
<li>[支持] 夜间模式。</li>
|
<li>[支持] 夜间模式。</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</lay-timeline-item>
|
||||||
|
<lay-timeline-item title="0.4.x">
|
||||||
<ul>
|
<ul>
|
||||||
<a name="0-4-4"> </a>
|
<a name="0-4-4"> </a>
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
@ -1,10 +1,13 @@
|
|||||||
::: title 夜间模式
|
::: title 夜间模式
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: describe 默认情况下, 网站主题为日间模式。若需启用深夜模式, 使用 config-provider 组件。
|
::: describe 默认情况下, 网站主题为日间模式。
|
||||||
:::
|
:::
|
||||||
|
|
||||||
```
|
::: describe 若启用夜间模式, 使用 "全局配置" 组件配合 theme 属性, 设置为 `dark` 值。
|
||||||
|
:::
|
||||||
|
|
||||||
|
```vue
|
||||||
<template>
|
<template>
|
||||||
<lay-config-provider :theme="theme">
|
<lay-config-provider :theme="theme">
|
||||||
<App />
|
<App />
|
||||||
|
|||||||
@ -10,6 +10,7 @@
|
|||||||
<lay-icon :type="iconType" size="40"> </lay-icon>
|
<lay-icon :type="iconType" size="40"> </lay-icon>
|
||||||
</lay-button>
|
</lay-button>
|
||||||
</div>
|
</div>
|
||||||
|
<lay-scroll :scrollWidth="0">
|
||||||
<ul>
|
<ul>
|
||||||
<li
|
<li
|
||||||
v-for="(anchor, index) in anchorList"
|
v-for="(anchor, index) in anchorList"
|
||||||
@ -26,6 +27,7 @@
|
|||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</lay-scroll>
|
||||||
</aside>
|
</aside>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|||||||
@ -34,6 +34,18 @@ onMounted(() => {
|
|||||||
--docsearch-searchbox-background: rgba(255, 255, 255, 0.02);
|
--docsearch-searchbox-background: rgba(255, 255, 255, 0.02);
|
||||||
--docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.02);
|
--docsearch-searchbox-focus-background: rgba(255, 255, 255, 0.02);
|
||||||
--docsearch-container-background: rgba(0, 0, 0, 0.1);
|
--docsearch-container-background: rgba(0, 0, 0, 0.1);
|
||||||
|
--docsearch-searchbox-shadow: inset 0 0 0 1px var(--docsearch-primary-color);
|
||||||
|
}
|
||||||
|
.DocSearch-Button{
|
||||||
|
width: 150px;
|
||||||
|
border-radius: 50px;
|
||||||
|
}
|
||||||
|
.DocSearch-Button-Container {
|
||||||
|
padding-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DocSearch-Button-Placeholder {
|
||||||
|
padding-left: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.DocSearch-Button,
|
.DocSearch-Button,
|
||||||
@ -55,4 +67,8 @@ onMounted(() => {
|
|||||||
.DocSearch-Button-Placeholder {
|
.DocSearch-Button-Placeholder {
|
||||||
color: rgba(0, 0, 0, 0.6);
|
color: rgba(0, 0, 0, 0.6);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.DocSearch-Button-Keys {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -14,18 +14,18 @@
|
|||||||
class="layui-nav layui-layout-left"
|
class="layui-nav layui-layout-left"
|
||||||
style="margin-top: 0px; margin-bottom: 0px"
|
style="margin-top: 0px; margin-bottom: 0px"
|
||||||
>
|
>
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item" :class="{ 'layui-active':currentPath.includes('/zh-CN/index') }">
|
||||||
<router-link to="/zh-CN/index"> {{ t("nav.home") }} </router-link>
|
<router-link to="/zh-CN/index"> {{ t("nav.home") }} </router-link>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item" :class="{ 'layui-active':currentPath.includes('/zh-CN/guide') }">
|
||||||
<router-link to="/zh-CN/guide"> {{ t("nav.guide") }} </router-link>
|
<router-link to="/zh-CN/guide"> {{ t("nav.guide") }} </router-link>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item" :class="{ 'layui-active':currentPath.includes('/zh-CN/components') }">
|
||||||
<router-link to="/zh-CN/components">
|
<router-link to="/zh-CN/components">
|
||||||
{{ t("nav.components") }}
|
{{ t("nav.components") }}
|
||||||
</router-link>
|
</router-link>
|
||||||
</li>
|
</li>
|
||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item" :class="{ 'layui-active':currentPath.includes('/zh-CN/resources') }">
|
||||||
<router-link to="/zh-CN/resources">
|
<router-link to="/zh-CN/resources">
|
||||||
{{ t("nav.resources") }}
|
{{ t("nav.resources") }}
|
||||||
</router-link>
|
</router-link>
|
||||||
@ -109,7 +109,15 @@
|
|||||||
<lay-color-picker
|
<lay-color-picker
|
||||||
v-model="themeVariable['--global-neutral-color-8']"
|
v-model="themeVariable['--global-neutral-color-8']"
|
||||||
></lay-color-picker>
|
></lay-color-picker>
|
||||||
<lay-button fluid>导 出 配 置</lay-button>
|
<lay-color-picker
|
||||||
|
v-model="themeVariable['--global-dark-text-color']"
|
||||||
|
></lay-color-picker
|
||||||
|
>
|
||||||
|
<lay-color-picker
|
||||||
|
v-model="themeVariable['--global-dark-background-color']"
|
||||||
|
></lay-color-picker>
|
||||||
|
|
||||||
|
<lay-button fluid="true">导 出 配 置</lay-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</lay-dropdown>
|
</lay-dropdown>
|
||||||
@ -140,8 +148,10 @@
|
|||||||
<li class="layui-nav-item">
|
<li class="layui-nav-item">
|
||||||
<a href="javascript:void(0)">
|
<a href="javascript:void(0)">
|
||||||
<lay-switch
|
<lay-switch
|
||||||
v-model="isDark"
|
v-model="theme"
|
||||||
class="switch"
|
class="switch"
|
||||||
|
onswitch-value="dark"
|
||||||
|
unswitch-value="light"
|
||||||
onswitch-color="rgba(255, 255, 255, 0.05)"
|
onswitch-color="rgba(255, 255, 255, 0.05)"
|
||||||
unswitch-color="rgba(255, 255, 255, 0.05)"
|
unswitch-color="rgba(255, 255, 255, 0.05)"
|
||||||
>
|
>
|
||||||
@ -216,7 +226,6 @@ import menu from "../view/utils/menus";
|
|||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import zh_CN from "../locales/zh_CN.ts";
|
import zh_CN from "../locales/zh_CN.ts";
|
||||||
import en_US from "../locales/en_US.ts";
|
import en_US from "../locales/en_US.ts";
|
||||||
import { getLayuiVueVersion } from "../../../src/utils/getLayuiVueVersion.ts"
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
@ -224,13 +233,14 @@ export default {
|
|||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const locale = ref("zh_CN");
|
const locale = ref("zh_CN");
|
||||||
const currentPath = ref("/zh-CN/guide");
|
|
||||||
const isDark = ref(false);
|
|
||||||
const locales = [
|
const locales = [
|
||||||
{ name: "zh_CN", locale: zh_CN, merge: true },
|
{ name: "zh_CN", locale: zh_CN, merge: true },
|
||||||
{ name: "en_US", locale: en_US, merge: true },
|
{ name: "en_US", locale: en_US, merge: true },
|
||||||
];
|
];
|
||||||
const theme = ref("light");
|
let isDark = (localStorage.getItem('layui-vue-theme-dark') !== "false") ||
|
||||||
|
window.matchMedia('prefers-color-scheme: dark').matches;
|
||||||
|
|
||||||
|
const theme = ref(isDark ? "dark":"light");
|
||||||
const themeVariable = ref({
|
const themeVariable = ref({
|
||||||
"--global-primary-color": "#009688",
|
"--global-primary-color": "#009688",
|
||||||
"--global-normal-color": "#1e9fff",
|
"--global-normal-color": "#1e9fff",
|
||||||
@ -246,30 +256,32 @@ export default {
|
|||||||
"--global-neutral-color-6": "#d2d2d2",
|
"--global-neutral-color-6": "#d2d2d2",
|
||||||
"--global-neutral-color-7": "#cccccc",
|
"--global-neutral-color-7": "#cccccc",
|
||||||
"--global-neutral-color-8": "#c2c2c2",
|
"--global-neutral-color-8": "#c2c2c2",
|
||||||
|
"--global-dark-text-color": "#FFFFFFc9",
|
||||||
|
"--global-dark-background-color": "#22272E",
|
||||||
});
|
});
|
||||||
|
|
||||||
const menus = [];
|
const menus = [];
|
||||||
|
const currentPath = ref("/zh-CN/guide");
|
||||||
|
watch(
|
||||||
|
() => route.path,
|
||||||
|
(val) => {
|
||||||
|
currentPath.value = val;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
}
|
||||||
|
);
|
||||||
menu.forEach((m) => {
|
menu.forEach((m) => {
|
||||||
m.children.forEach((c) => {
|
m.children.forEach((c) => {
|
||||||
menus.push(c);
|
menus.push(c);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
const latestVer = getLayuiVueVersion();
|
|
||||||
const layuiVueVersion = computed(() =>
|
const layuiVueVersion = computed(() =>
|
||||||
latestVer.value
|
import.meta.env.LAYUI_VUE_VERSION
|
||||||
?? import.meta.env.LAYUI_VUE_VERSION
|
|
||||||
)
|
)
|
||||||
|
|
||||||
watch(isDark, () => {
|
|
||||||
if (isDark.value) {
|
|
||||||
theme.value = "dark";
|
|
||||||
} else {
|
|
||||||
theme.value = "light";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => route.path,
|
() => route.path,
|
||||||
(val) => {
|
(val) => {
|
||||||
@ -286,7 +298,9 @@ export default {
|
|||||||
locale.value = lang;
|
locale.value = lang;
|
||||||
};
|
};
|
||||||
|
|
||||||
provide("isDark",isDark);
|
window.matchMedia('(prefers-color-scheme: dark)')
|
||||||
|
.addListener(e => theme.value = e.matches ? "dark" : "light");
|
||||||
|
|
||||||
provide("theme",theme);
|
provide("theme",theme);
|
||||||
provide('LayuiVueVersion', layuiVueVersion);
|
provide('LayuiVueVersion', layuiVueVersion);
|
||||||
|
|
||||||
@ -295,12 +309,12 @@ export default {
|
|||||||
menus,
|
menus,
|
||||||
theme,
|
theme,
|
||||||
locale,
|
locale,
|
||||||
isDark,
|
|
||||||
locales,
|
locales,
|
||||||
currentPath,
|
currentPath,
|
||||||
handleClick,
|
handleClick,
|
||||||
changeLocale,
|
changeLocale,
|
||||||
themeVariable,
|
themeVariable,
|
||||||
|
currentPath,
|
||||||
layuiVueVersion,
|
layuiVueVersion,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -308,6 +322,7 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
||||||
.layui-layout-document > .layui-header {
|
.layui-layout-document > .layui-header {
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -358,6 +373,10 @@ export default {
|
|||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-header > .layui-nav .layui-active * {
|
||||||
|
color: var(--global-checked-color)!important;
|
||||||
|
}
|
||||||
|
|
||||||
.layui-header .layui-local-badge {
|
.layui-header .layui-local-badge {
|
||||||
font-size: 12.4px;
|
font-size: 12.4px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|||||||
@ -16,17 +16,19 @@
|
|||||||
<router-link class="layui-inline site-down" to="/zh-CN/guide">
|
<router-link class="layui-inline site-down" to="/zh-CN/guide">
|
||||||
Get Started
|
Get Started
|
||||||
</router-link>
|
</router-link>
|
||||||
<a class="layui-inline site-down" href="javascript:void(0);" @click="changeTheme">
|
<a
|
||||||
|
class="layui-inline site-down"
|
||||||
{{ isDark ? 'Turn Off' : 'Turn On'}}
|
href="javascript:void(0);"
|
||||||
|
@click="changeTheme"
|
||||||
|
>
|
||||||
|
{{ theme === "dark" ? "Turn Off" : "Turn On" }}
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="site-version">
|
<div class="site-version">
|
||||||
<span>{{ t('home.version') }}：v<cite class="site-showv">{{ layuiVueVersion }}</cite></span>
|
|
||||||
<span
|
<span
|
||||||
>{{ t("home.version") }}：<cite class="site-showv"
|
>{{ t("home.version") }}：<cite class="site-showv">{{
|
||||||
>1.0.0</cite
|
layuiVueVersion
|
||||||
></span
|
}}</cite></span
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
>{{ t("home.download") }}：<em class="site-showdowns"
|
>{{ t("home.download") }}：<em class="site-showdowns"
|
||||||
@ -34,32 +36,32 @@
|
|||||||
></span
|
></span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="site-banner-other">
|
||||||
<div class="site-banner-other">
|
<a
|
||||||
<a
|
href="https://gitee.com/layui-vue"
|
||||||
href="https://gitee.com/layui-vue"
|
target="_blank"
|
||||||
target="_blank"
|
rel="nofollow"
|
||||||
rel="nofollow"
|
class="site-star"
|
||||||
class="site-star"
|
>
|
||||||
>
|
<i class="layui-icon"></i> Star <cite id="getStars">746</cite>
|
||||||
<i class="layui-icon"></i> Star <cite id="getStars">741</cite>
|
</a>
|
||||||
</a>
|
<a
|
||||||
<a
|
href="https://gitee.com/layui-vue"
|
||||||
href="https://gitee.com/layui-vue"
|
target="_blank"
|
||||||
target="_blank"
|
rel="nofollow"
|
||||||
rel="nofollow"
|
class="site-fork"
|
||||||
class="site-fork"
|
>
|
||||||
>
|
Gitee
|
||||||
Gitee
|
</a>
|
||||||
</a>
|
<a
|
||||||
<a
|
href="https://github.com/layui-vue"
|
||||||
href="https://github.com/layui-vue"
|
target="_blank"
|
||||||
target="_blank"
|
rel="nofollow"
|
||||||
rel="nofollow"
|
class="site-fork"
|
||||||
class="site-fork"
|
>
|
||||||
>
|
Github
|
||||||
Github
|
</a>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-left: 10%; margin-right: 10%; margin-top: 40px">
|
<div style="margin-left: 10%; margin-right: 10%; margin-top: 40px">
|
||||||
@ -109,31 +111,28 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { inject, provide } from 'vue';
|
import { inject, provide } from "vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
export default {
|
export default {
|
||||||
name: "index",
|
name: "index",
|
||||||
setup() {
|
setup() {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const layuiVueVersion = inject('LayuiVueVersion')
|
const layuiVueVersion = inject("LayuiVueVersion");
|
||||||
const isDark = inject("isDark");
|
|
||||||
const theme = inject("theme");
|
const theme = inject("theme");
|
||||||
|
|
||||||
const changeTheme = () => {
|
const changeTheme = () => {
|
||||||
isDark.value = !isDark.value;
|
if (theme.value === "dark") {
|
||||||
if(theme.value === 'dark') {
|
theme.value = "light";
|
||||||
theme.value = 'light';
|
|
||||||
} else {
|
} else {
|
||||||
theme.value = 'dark';
|
theme.value = "dark";
|
||||||
}
|
}
|
||||||
}
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
t,
|
t,
|
||||||
isDark,
|
|
||||||
theme,
|
theme,
|
||||||
changeTheme,
|
changeTheme,
|
||||||
layuiVueVersion
|
layuiVueVersion,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@ -187,7 +186,9 @@ body {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #476582;
|
color: #476582;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||||
|
Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue",
|
||||||
|
sans-serif;
|
||||||
transition: all 0.5s;
|
transition: all 0.5s;
|
||||||
-webkit-transition: all 0.5s;
|
-webkit-transition: all 0.5s;
|
||||||
letter-spacing: 0.2px;
|
letter-spacing: 0.2px;
|
||||||
@ -199,7 +200,7 @@ body {
|
|||||||
background: #009688;
|
background: #009688;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
.site-download a+a {
|
.site-download a + a {
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
}
|
}
|
||||||
.site-zfj {
|
.site-zfj {
|
||||||
@ -273,8 +274,9 @@ body {
|
|||||||
margin-top: -4px;
|
margin-top: -4px;
|
||||||
}
|
}
|
||||||
.site-banner-other {
|
.site-banner-other {
|
||||||
position: absolute;
|
position: relative;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
top: 40px;
|
||||||
bottom: 90px;
|
bottom: 90px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|||||||
@ -12,5 +12,16 @@ export default defineConfig({
|
|||||||
define: {
|
define: {
|
||||||
'import.meta.env.LAYUI_VUE_VERSION': JSON.stringify(pkg.version),
|
'import.meta.env.LAYUI_VUE_VERSION': JSON.stringify(pkg.version),
|
||||||
},
|
},
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
output: {
|
||||||
|
manualChunks(id) {
|
||||||
|
if (id.includes("node_modules")) {
|
||||||
|
return id.toString().split("node_modules/")[1].split("/")[0].toString();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
plugins,
|
plugins,
|
||||||
})
|
})
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@layui/layui-vue",
|
"name": "@layui/layui-vue",
|
||||||
"version": "0.4.5-alpha.5",
|
"version": "1.0.0",
|
||||||
"author": "就眠儀式",
|
"author": "就眠儀式",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"description": "a component library for Vue 3 base on layui-vue",
|
"description": "a component library for Vue 3 base on layui-vue",
|
||||||
@ -43,6 +43,7 @@
|
|||||||
"@layui/layer-vue": "^1.3.11",
|
"@layui/layer-vue": "^1.3.11",
|
||||||
"@vueuse/core": "^7.6.2",
|
"@vueuse/core": "^7.6.2",
|
||||||
"async-validator": "^4.0.7",
|
"async-validator": "^4.0.7",
|
||||||
|
"cropperjs": "^1.5.12",
|
||||||
"darkreader": "^4.9.46",
|
"darkreader": "^4.9.46",
|
||||||
"evtd": "^0.2.3",
|
"evtd": "^0.2.3",
|
||||||
"moment": "^2.29.1",
|
"moment": "^2.29.1",
|
||||||
|
|||||||
@ -55,7 +55,7 @@ export default (): UserConfigExport => {
|
|||||||
entryFileNames: ({ name }) => {
|
entryFileNames: ({ name }) => {
|
||||||
return name === 'index' ? 'index.js' : '[name]/index.js'
|
return name === 'index' ? 'index.js' : '[name]/index.js'
|
||||||
},
|
},
|
||||||
assetFileNames: '[name]/index.css'
|
assetFileNames: '[name]/index.css',
|
||||||
},
|
},
|
||||||
external: ['vue', 'vue-router']
|
external: ['vue', 'vue-router']
|
||||||
}
|
}
|
||||||
|
|||||||
@ -13,7 +13,7 @@ import {
|
|||||||
ButtonSize,
|
ButtonSize,
|
||||||
ButtonType,
|
ButtonType,
|
||||||
} from "./interface";
|
} from "./interface";
|
||||||
import { BooleanOrString, String } from "../../types";
|
import { Boolean, BooleanOrString, String } from "../../types";
|
||||||
|
|
||||||
export interface LayButtonProps {
|
export interface LayButtonProps {
|
||||||
type?: ButtonType;
|
type?: ButtonType;
|
||||||
|
|||||||
@ -1,211 +1,168 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<lay-dropdown ref="dropdownRef">
|
<lay-dropdown ref="dropdownRef">
|
||||||
<lay-input :name="name" :value="dateValue" readonly="readonly">
|
<<<<<<< HEAD <lay-input :name="name" :value="dateValue" readonly="readonly"> ======= <lay-input :name="name"
|
||||||
<template #prefix>
|
:value="dateValue || modelValue" readonly> >>>>>>> 4c653112a2fca8ef40349518d79c58ec7105e032 <template #prefix>
|
||||||
<lay-icon type="layui-icon-date"></lay-icon>
|
<lay-icon type="layui-icon-date"></lay-icon>
|
||||||
</template>
|
</template>
|
||||||
</lay-input>
|
</lay-input>
|
||||||
<template #content>
|
<template #content>
|
||||||
<!-- 日期选择 -->
|
<!-- 日期选择 -->
|
||||||
<div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
|
<div class="layui-laydate" v-show="showPane === 'date' || showPane === 'datetime'">
|
||||||
<div class="layui-laydate-main laydate-main-list-0">
|
<div class="layui-laydate-main laydate-main-list-0">
|
||||||
<div class="layui-laydate-header">
|
<div class="layui-laydate-header">
|
||||||
<i
|
<i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i><i
|
||||||
class="layui-icon laydate-icon laydate-prev-y"
|
class="layui-icon laydate-icon laydate-prev-m" @click="changeYearOrMonth('month', -1)"></i>
|
||||||
@click="changeYearOrMonth('year', -1)"
|
<div class="laydate-set-ym">
|
||||||
></i>
|
<span @click="showYearPanel">{{ currentYear }} 年</span><span
|
||||||
<i
|
@click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
|
||||||
class="layui-icon laydate-icon laydate-prev-m"
|
</div>
|
||||||
@click="changeYearOrMonth('month', -1)"
|
<i class="layui-icon laydate-icon laydate-next-m" @click="changeYearOrMonth('month', 1)"></i><i
|
||||||
></i>
|
class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
|
||||||
<div class="laydate-set-ym">
|
|
||||||
<span @click="showYearPanel">{{ currentYear }} 年</span>
|
|
||||||
<span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
|
|
||||||
</div>
|
</div>
|
||||||
<i
|
<div class="layui-laydate-content">
|
||||||
class="layui-icon laydate-icon laydate-next-m"
|
<table>
|
||||||
@click="changeYearOrMonth('month', 1)"
|
<thead>
|
||||||
></i>
|
|
||||||
<i
|
|
||||||
class="layui-icon laydate-icon laydate-next-y"
|
|
||||||
@click="changeYearOrMonth('year', 1)"
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
<div class="layui-laydate-content">
|
|
||||||
<table>
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<template
|
|
||||||
v-for="(o, i) of dateList.length % 7 == 0
|
|
||||||
? dateList.length / 7
|
|
||||||
: Math.floor(dateList.length / 7) + 1"
|
|
||||||
:key="i"
|
|
||||||
>
|
|
||||||
<tr>
|
<tr>
|
||||||
<td
|
<th v-for="item of WEEK_NAME" :key="item">{{ item }}</th>
|
||||||
v-for="(item, index) of dateList.slice(
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<template v-for="(o, i) of dateList.length % 7 == 0
|
||||||
|
? dateList.length / 7
|
||||||
|
: Math.floor(dateList.length / 7) + 1" :key="i">
|
||||||
|
<tr>
|
||||||
|
<td v-for="(item, index) of dateList.slice(
|
||||||
i * 7,
|
i * 7,
|
||||||
i * 7 + 7
|
i * 7 + 7
|
||||||
)"
|
)" :key="index" :data-unix="item.value" :class="{
|
||||||
:key="index"
|
'laydate-day-prev': item.type !== 'current',
|
||||||
:data-unix="item.value"
|
'layui-this': item.value === currentDay,
|
||||||
:class="{
|
}" @click="handleDayClick(item)">
|
||||||
'laydate-day-prev': item.type !== 'current',
|
{{ item.day }}
|
||||||
'layui-this': item.value === currentDay,
|
</td>
|
||||||
}"
|
</tr>
|
||||||
@click="handleDayClick(item)"
|
</template>
|
||||||
>{{ item.day }}</td>
|
</tbody>
|
||||||
</tr>
|
</table>
|
||||||
</template>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="layui-laydate-footer">
|
|
||||||
<span
|
|
||||||
v-if="type === 'datetime'"
|
|
||||||
@click="showPane = 'time'"
|
|
||||||
class="laydate-btns-time"
|
|
||||||
>选择时间</span>
|
|
||||||
<div class="laydate-footer-btns">
|
|
||||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
|
|
||||||
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
|
|
||||||
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 年份选择器 -->
|
|
||||||
<div class="layui-laydate" v-show="showPane === 'year'">
|
|
||||||
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
|
|
||||||
<div class="layui-laydate-header">
|
|
||||||
<div class="laydate-set-ym">
|
|
||||||
<span class="laydate-time-text">选择年份</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
|
<div class="layui-laydate-footer">
|
||||||
<ul class="layui-laydate-list laydate-year-list">
|
<span v-if="type === 'datetime'" @click="showPane = 'time'" class="laydate-btns-time">选择时间</span>
|
||||||
<li
|
<div class="laydate-footer-btns">
|
||||||
v-for="item of yearList"
|
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
|
||||||
:key="item"
|
class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
|
||||||
:class="[{ 'layui-this': currentYear === item }]"
|
@click="ok">确定</span>
|
||||||
@click="handleYearClick(item)"
|
</div>
|
||||||
>{{ item }}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-laydate-footer">
|
<!-- 年份选择器 -->
|
||||||
<!-- <span
|
<div class="layui-laydate" v-show="showPane === 'year' || showPane === 'yearmonth'">
|
||||||
|
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
|
||||||
|
<div class="layui-laydate-header">
|
||||||
|
<div class="laydate-set-ym">
|
||||||
|
<span class="laydate-time-text">选择年份</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-laydate-content" style="height: 220px; overflow-y: auto">
|
||||||
|
<ul class="layui-laydate-list laydate-year-list">
|
||||||
|
<li v-for="item of yearList" :key="item" :class="[{ 'layui-this': currentYear === item }]"
|
||||||
|
@click="handleYearClick(item)">
|
||||||
|
{{ item }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-laydate-footer">
|
||||||
|
<!-- <span
|
||||||
class="layui-laydate-preview"
|
class="layui-laydate-preview"
|
||||||
title="当前选中的结果"
|
title="当前选中的结果"
|
||||||
style="color: rgb(102, 102, 102)"
|
style="color: rgb(102, 102, 102)"
|
||||||
>2022</span>-->
|
>2022</span>-->
|
||||||
<div class="laydate-footer-btns">
|
<div class="laydate-footer-btns">
|
||||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
|
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
|
||||||
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
|
class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
|
||||||
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
|
@click="ok">确定</span>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 月份选择器 -->
|
|
||||||
<div class="layui-laydate" v-show="showPane === 'month'">
|
|
||||||
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
|
|
||||||
<div class="layui-laydate-header">
|
|
||||||
<i
|
|
||||||
class="layui-icon laydate-icon laydate-prev-y"
|
|
||||||
@click="changeYearOrMonth('year', -1)"
|
|
||||||
></i>
|
|
||||||
<div class="laydate-set-ym">
|
|
||||||
<span
|
|
||||||
@click="showYearPanel"
|
|
||||||
v-if="showPane === 'date' || showPane === 'datetime'"
|
|
||||||
>{{ currentYear }} 年</span>
|
|
||||||
<span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
|
|
||||||
</div>
|
</div>
|
||||||
<i
|
|
||||||
class="layui-icon laydate-icon laydate-next-y"
|
|
||||||
@click="changeYearOrMonth('year', 1)"
|
|
||||||
></i>
|
|
||||||
</div>
|
|
||||||
<div class="layui-laydate-content" style="height: 220px">
|
|
||||||
<ul class="layui-laydate-list laydate-month-list">
|
|
||||||
<li
|
|
||||||
v-for="item of MONTH_NAME"
|
|
||||||
:key="item"
|
|
||||||
:class="[
|
|
||||||
{ 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
|
|
||||||
]"
|
|
||||||
@click="handleMonthClick(item)"
|
|
||||||
>{{ item.slice(0, 3) }}</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-laydate-footer">
|
<!-- 月份选择器 -->
|
||||||
<!-- <span
|
<div class="layui-laydate" v-show="showPane === 'month'">
|
||||||
|
<div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
|
||||||
|
<div class="layui-laydate-header">
|
||||||
|
<i class="layui-icon laydate-icon laydate-prev-y" @click="changeYearOrMonth('year', -1)"></i>
|
||||||
|
<div class="laydate-set-ym">
|
||||||
|
<span @click="showYearPanel" v-if="showPane === 'date' || showPane === 'datetime'">{{ currentYear }}
|
||||||
|
年</span>
|
||||||
|
<span @click="showPane = 'month'">{{ currentMonth + 1 }} 月</span>
|
||||||
|
</div>
|
||||||
|
<i class="layui-icon laydate-icon laydate-next-y" @click="changeYearOrMonth('year', 1)"></i>
|
||||||
|
</div>
|
||||||
|
<div class="layui-laydate-content" style="height: 220px">
|
||||||
|
<ul class="layui-laydate-list laydate-month-list">
|
||||||
|
<li v-for="item of MONTH_NAME" :key="item" :class="[
|
||||||
|
{ 'layui-this': MONTH_NAME.indexOf(item) === currentMonth },
|
||||||
|
]" @click="handleMonthClick(item)">
|
||||||
|
{{ item.slice(0, 3) }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-laydate-footer">
|
||||||
|
<!-- <span
|
||||||
class="layui-laydate-preview"
|
class="layui-laydate-preview"
|
||||||
title="当前选中的结果"
|
title="当前选中的结果"
|
||||||
style="color: rgb(102, 102, 102)"
|
style="color: rgb(102, 102, 102)"
|
||||||
>2021-03</span>-->
|
>2021-03</span>-->
|
||||||
<div class="laydate-footer-btns">
|
<div class="laydate-footer-btns">
|
||||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
|
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
|
||||||
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
|
class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
|
||||||
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
|
@click="ok">确定</span>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 时间选择器 -->
|
|
||||||
<div class="layui-laydate" v-if="showPane == 'time'">
|
|
||||||
<div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
|
|
||||||
<div class="layui-laydate-header">
|
|
||||||
<div class="laydate-set-ym">
|
|
||||||
<span class="laydate-time-text">选择时间</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-laydate-content" style="height: 210px">
|
</div>
|
||||||
<ul class="layui-laydate-list laydate-time-list">
|
<!-- 时间选择器 -->
|
||||||
<li class="num-list" v-for="item in els" :key="item.type">
|
<div class="layui-laydate" v-if="showPane == 'time'">
|
||||||
<ol class="scroll" @click="choseTime">
|
<div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
|
||||||
<li
|
<div class="layui-laydate-header">
|
||||||
v-for="(it, index) in item.count"
|
<div class="laydate-set-ym">
|
||||||
:id="item.type + index.toString()"
|
<span class="laydate-time-text">选择时间</span>
|
||||||
:data-value="index.toString().padStart(2, '0')"
|
</div>
|
||||||
:data-type="item.type"
|
</div>
|
||||||
:key="it"
|
<div class="layui-laydate-content" style="height: 210px">
|
||||||
:class="[
|
<ul class="layui-laydate-list laydate-time-list">
|
||||||
'num',
|
<li class="num-list" v-for="item in els" :key="item.type">
|
||||||
index.toString().padStart(2, '0') == hms[item.type]
|
<ol class="scroll" @click="choseTime">
|
||||||
? 'layui-this'
|
<li v-for="(it, index) in item.count" :id="item.type + index.toString()"
|
||||||
: '',
|
:data-value="index.toString().padStart(2, '0')" :data-type="item.type" :key="it" :class="[
|
||||||
]"
|
'num',
|
||||||
>{{ index.toString().padStart(2, "0") }}</li>
|
index.toString().padStart(2, '0') == hms[item.type]
|
||||||
</ol>
|
? 'layui-this'
|
||||||
</li>
|
: '',
|
||||||
</ul>
|
]">
|
||||||
|
{{ index.toString().padStart(2, "0") }}
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-laydate-footer">
|
||||||
|
<span @click="showPane = 'date'" v-if="type != 'time'" class="laydate-btns-time">返回日期</span>
|
||||||
|
<div class="laydate-footer-btns">
|
||||||
|
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span><span lay-type="now"
|
||||||
|
class="laydate-btns-now" @click="now">现在</span><span lay-type="confirm" class="laydate-btns-confirm"
|
||||||
|
@click="ok">确定</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-laydate-footer">
|
</template>
|
||||||
<span @click="showPane = 'date'" class="laydate-btns-time">返回日期</span>
|
|
||||||
<div class="laydate-footer-btns">
|
|
||||||
<span lay-type="clear" class="laydate-btns-clear" @click="clear">清空</span>
|
|
||||||
<span lay-type="now" class="laydate-btns-now" @click="now">现在</span>
|
|
||||||
<span lay-type="confirm" class="laydate-btns-confirm" @click="ok">确定</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</lay-dropdown>
|
</lay-dropdown>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, nextTick, ref, watch, defineProps, defineEmits } from "vue";
|
import { ref, watch, computed, defineProps, defineEmits, onMounted } from "vue";
|
||||||
|
|
||||||
import moment from "moment";
|
import moment from "moment";
|
||||||
import LayIcon from "../icon/index";
|
import LayIcon from "../icon/index";
|
||||||
@ -213,6 +170,17 @@ import LayInput from "../input/index.vue";
|
|||||||
import LayDropdown from "../dropdown/index.vue";
|
import LayDropdown from "../dropdown/index.vue";
|
||||||
import { getDayLength, getYears, getMonth, getYear } from "./day";
|
import { getDayLength, getYears, getMonth, getYear } from "./day";
|
||||||
|
|
||||||
|
export interface LayDatePickerProps {
|
||||||
|
modelValue?: string;
|
||||||
|
type?: "date" | "datetime" | "year" | "time" | "month" | "yearmonth";
|
||||||
|
name?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<LayDatePickerProps>(), {
|
||||||
|
modelValue: "",
|
||||||
|
type: "date",
|
||||||
|
});
|
||||||
|
|
||||||
const dropdownRef = ref(null);
|
const dropdownRef = ref(null);
|
||||||
const $emits = defineEmits(["update:modelValue"]);
|
const $emits = defineEmits(["update:modelValue"]);
|
||||||
|
|
||||||
@ -232,24 +200,17 @@ const MONTH_NAME = [
|
|||||||
"12月",
|
"12月",
|
||||||
];
|
];
|
||||||
|
|
||||||
const hms = ref({ hh: 0, mm: 0, ss: 0 });
|
const hms = ref({
|
||||||
|
hh: moment(props.modelValue).hour(),
|
||||||
|
mm: moment(props.modelValue).minute(),
|
||||||
|
ss: moment(props.modelValue).second(),
|
||||||
|
});
|
||||||
const els = [
|
const els = [
|
||||||
{ count: 24, type: "hh" },
|
{ count: 24, type: "hh" },
|
||||||
{ count: 60, type: "mm" },
|
{ count: 60, type: "mm" },
|
||||||
{ count: 60, type: "ss" },
|
{ count: 60, type: "ss" },
|
||||||
];
|
];
|
||||||
|
|
||||||
export interface LayDatePickerProps {
|
|
||||||
modelValue?: string;
|
|
||||||
type?: "date" | "datetime" | "year" | "time" | "month";
|
|
||||||
name?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<LayDatePickerProps>(), {
|
|
||||||
modelValue: "",
|
|
||||||
type: "date",
|
|
||||||
});
|
|
||||||
|
|
||||||
const currentYear = ref(getYear());
|
const currentYear = ref(getYear());
|
||||||
const currentMonth = ref(getMonth());
|
const currentMonth = ref(getMonth());
|
||||||
const currentDay = ref<number>();
|
const currentDay = ref<number>();
|
||||||
@ -265,14 +226,13 @@ watch(
|
|||||||
},
|
},
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
);
|
);
|
||||||
// 格式化
|
|
||||||
const fmtMap = {
|
onMounted(() => {
|
||||||
date: 'YYYY-MM-DD',
|
hms.value.hh = moment(props.modelValue).hour();
|
||||||
datetime: 'YYYY-MM-DD hh:mm:ss',
|
hms.value.mm = moment(props.modelValue).minute();
|
||||||
year: 'YYYY',
|
hms.value.ss = moment(props.modelValue).second();
|
||||||
month: 'MM',
|
});
|
||||||
'': '',
|
|
||||||
}
|
|
||||||
// 计算结果日期
|
// 计算结果日期
|
||||||
const dateValue = computed<string>(() => {
|
const dateValue = computed<string>(() => {
|
||||||
if (currentDay.value === -1) {
|
if (currentDay.value === -1) {
|
||||||
@ -347,6 +307,9 @@ const ok = () => {
|
|||||||
// 现在时间
|
// 现在时间
|
||||||
const now = () => {
|
const now = () => {
|
||||||
currentDay.value = moment().valueOf();
|
currentDay.value = moment().valueOf();
|
||||||
|
hms.value.hh = moment().hour();
|
||||||
|
hms.value.mm = moment().minute();
|
||||||
|
hms.value.ss = moment().second();
|
||||||
};
|
};
|
||||||
|
|
||||||
// 清空日期
|
// 清空日期
|
||||||
@ -381,6 +344,9 @@ const handleYearClick = (item: any) => {
|
|||||||
currentYear.value = item;
|
currentYear.value = item;
|
||||||
if (props.type === "year") {
|
if (props.type === "year") {
|
||||||
currentDay.value = moment().year(item).valueOf();
|
currentDay.value = moment().year(item).valueOf();
|
||||||
|
} else if (props.type === "yearmonth") {
|
||||||
|
currentDay.value = moment().year(item).valueOf();
|
||||||
|
showPane.value = "month";
|
||||||
} else {
|
} else {
|
||||||
showPane.value = "date";
|
showPane.value = "date";
|
||||||
}
|
}
|
||||||
@ -390,7 +356,13 @@ const handleYearClick = (item: any) => {
|
|||||||
const handleMonthClick = (item: any) => {
|
const handleMonthClick = (item: any) => {
|
||||||
currentMonth.value = MONTH_NAME.indexOf(item);
|
currentMonth.value = MONTH_NAME.indexOf(item);
|
||||||
if (props.type === "month") {
|
if (props.type === "month") {
|
||||||
currentDay.value = moment().month(MONTH_NAME.indexOf(item)).valueOf();
|
currentDay.value = moment(currentDay.value)
|
||||||
|
.month(MONTH_NAME.indexOf(item))
|
||||||
|
.valueOf();
|
||||||
|
} else if (props.type === "yearmonth") {
|
||||||
|
currentDay.value = moment(currentDay.value)
|
||||||
|
.month(MONTH_NAME.indexOf(item))
|
||||||
|
.valueOf();
|
||||||
} else {
|
} else {
|
||||||
showPane.value = "date";
|
showPane.value = "date";
|
||||||
}
|
}
|
||||||
@ -410,7 +382,6 @@ const choseTime = (e: any) => {
|
|||||||
if (e.target.nodeName == "LI") {
|
if (e.target.nodeName == "LI") {
|
||||||
let { value, type } = e.target.dataset;
|
let { value, type } = e.target.dataset;
|
||||||
hms.value[type as keyof typeof hms.value] = value;
|
hms.value[type as keyof typeof hms.value] = value;
|
||||||
e.target.scrollIntoView({ behavior: "smooth" });
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -20,3 +20,7 @@
|
|||||||
.layui-empty-description {
|
.layui-empty-description {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-empty-extra {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
|||||||
@ -24,5 +24,8 @@ const props = withDefaults(defineProps<LayEmptyProps>(), {
|
|||||||
<img class="layui-empty-image-default" src="./index.svg" />
|
<img class="layui-empty-image-default" src="./index.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-empty-description">{{ description }}</div>
|
<div class="layui-empty-description">{{ description }}</div>
|
||||||
|
<div class="layui-empty-extra">
|
||||||
|
<slot name="extra"></slot>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -35,8 +35,8 @@ const props = withDefaults(defineProps<LayDropdownProps>(), {
|
|||||||
<div class="layui-exception-details-content">
|
<div class="layui-exception-details-content">
|
||||||
<div class="layui-exception-details-title">{{ title }}</div>
|
<div class="layui-exception-details-title">{{ title }}</div>
|
||||||
<div class="layui-exception-details-describe">{{ describe }}</div>
|
<div class="layui-exception-details-describe">{{ describe }}</div>
|
||||||
<div class="layui-exception-details-operate">
|
<div class="layui-exception-details-extra">
|
||||||
<slot name="action"></slot>
|
<slot name="extra"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -32,7 +32,6 @@ const props = withDefaults(defineProps<LayMenuProps>(), {
|
|||||||
collapseTransition: true,
|
collapseTransition: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const isTree = computed(() => props.tree);
|
const isTree = computed(() => props.tree);
|
||||||
const isCollapse = computed(() => props.collapse);
|
const isCollapse = computed(() => props.collapse);
|
||||||
const isCollapseTransition = computed(() => props.collapseTransition);
|
const isCollapseTransition = computed(() => props.collapseTransition);
|
||||||
@ -67,7 +66,8 @@ watch(
|
|||||||
// 赋值所有打开
|
// 赋值所有打开
|
||||||
emit("update:openKeys", oldOpenKeys.value);
|
emit("update:openKeys", oldOpenKeys.value);
|
||||||
}
|
}
|
||||||
}, { immediate: true }
|
},
|
||||||
|
{ immediate: true }
|
||||||
);
|
);
|
||||||
|
|
||||||
provide("isTree", isTree);
|
provide("isTree", isTree);
|
||||||
|
|||||||
@ -26,10 +26,10 @@
|
|||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
background-color: whitesmoke;
|
background-color: white;
|
||||||
margin-left: 10%;
|
margin-left: 10%;
|
||||||
}
|
}
|
||||||
.result .action {
|
.result .extra {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
border-top: 1px whitesmoke solid;
|
border-top: 1px whitesmoke solid;
|
||||||
margin-top: 25px;
|
margin-top: 25px;
|
||||||
|
|||||||
@ -71,8 +71,8 @@ const props = withDefaults(defineProps<LayResultProps>(), {
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<slot name="content"></slot>
|
<slot name="content"></slot>
|
||||||
</div>
|
</div>
|
||||||
<div class="action">
|
<div class="extra">
|
||||||
<slot name="action"></slot>
|
<slot name="extra"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -29,7 +29,9 @@ const isTree: Ref<boolean> = inject("isTree") as Ref<boolean>;
|
|||||||
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
|
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
|
||||||
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
|
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
|
||||||
const isCollapse: Ref<boolean> = inject("isCollapse") as Ref<boolean>;
|
const isCollapse: Ref<boolean> = inject("isCollapse") as Ref<boolean>;
|
||||||
const isCollapseTransition: Ref<boolean> = inject("isCollapseTransition") as Ref<boolean>;
|
const isCollapseTransition: Ref<boolean> = inject(
|
||||||
|
"isCollapseTransition"
|
||||||
|
) as Ref<boolean>;
|
||||||
|
|
||||||
const isOpen = computed(() => {
|
const isOpen = computed(() => {
|
||||||
return openKeys.value.includes(props.id);
|
return openKeys.value.includes(props.id);
|
||||||
|
|||||||
@ -10,26 +10,35 @@ import "./index.less";
|
|||||||
|
|
||||||
export interface LaySwitchProps {
|
export interface LaySwitchProps {
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
modelValue?: boolean;
|
modelValue?: string | number | boolean;
|
||||||
onswitchText?: string;
|
onswitchText?: string;
|
||||||
unswitchText?: string;
|
unswitchText?: string;
|
||||||
onswitchColor?: string;
|
onswitchColor?: string;
|
||||||
unswitchColor?: string;
|
unswitchColor?: string;
|
||||||
|
onswitchValue?: string | number | boolean;
|
||||||
|
unswitchValue?: string | number | boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<LaySwitchProps>(), {
|
const props = withDefaults(defineProps<LaySwitchProps>(), {
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
onswitchValue: true,
|
||||||
|
unswitchValue: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const emit = defineEmits(["update:modelValue", "change"]);
|
const emit = defineEmits(["update:modelValue", "change"]);
|
||||||
|
|
||||||
const isActive = computed({
|
const isActive = computed({
|
||||||
get() {
|
get() {
|
||||||
return props.modelValue;
|
return props.modelValue === props.onswitchValue;
|
||||||
},
|
},
|
||||||
set(val) {
|
set(val) {
|
||||||
emit("change", val);
|
if (val) {
|
||||||
emit("update:modelValue", val);
|
emit("change", props.onswitchValue);
|
||||||
|
emit("update:modelValue", props.onswitchValue);
|
||||||
|
} else {
|
||||||
|
emit("change", props.unswitchValue);
|
||||||
|
emit("update:modelValue", props.unswitchValue);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -9,6 +9,22 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-tab.is-right {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
justify-content: space-between
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab.is-bottom {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column-reverse
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-head {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: @global-neutral-color-1;
|
||||||
|
}
|
||||||
|
|
||||||
.layui-tab-title {
|
.layui-tab-title {
|
||||||
position: relative;
|
position: relative;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -37,15 +53,17 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 位置开始 */
|
.layui-tab-title li a {
|
||||||
.layui-tab.is-right {
|
display: block;
|
||||||
display: flex;
|
padding: 0 15px;
|
||||||
flex-direction: row-reverse;
|
margin: 0 -15px;
|
||||||
justify-content: space-between
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-tab-head{
|
.layui-tab-head.is-top,
|
||||||
display: inline-block;
|
.layui-tab-head.is-bottom,
|
||||||
|
.layui-tab-title.is-top,
|
||||||
|
.layui-tab-title.is-bottom {
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-tab-title.is-right,
|
.layui-tab-title.is-right,
|
||||||
@ -63,48 +81,9 @@
|
|||||||
display: list-item;
|
display: list-item;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-tab-head.is-right + .layui-tab-content,
|
|
||||||
.layui-tab-head.is-left + .layui-tab-content {
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 10px;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-more li.layui-this:after,
|
|
||||||
.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-title .layui-this:after {
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
border-right: 2px solid @global-checked-color;
|
|
||||||
margin-left: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-more li.layui-this:after,
|
|
||||||
.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-title .layui-this:after {
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
border-left: 2px solid @global-checked-color;
|
|
||||||
margin-right: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-title{
|
|
||||||
border-left: 1px solid @global-neutral-color-3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-title{
|
|
||||||
border-right: 1px solid @global-neutral-color-3;
|
|
||||||
}
|
|
||||||
|
|
||||||
/** 位置结束*/
|
|
||||||
|
|
||||||
.layui-tab-title li a {
|
|
||||||
display: block;
|
|
||||||
padding: 0 15px;
|
|
||||||
margin: 0 -15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-title .layui-this {
|
.layui-tab-title .layui-this {
|
||||||
color: #000;
|
color: #000;
|
||||||
|
background-color: #fff
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-tab-title .layui-this:after {
|
.layui-tab-title .layui-this:after {
|
||||||
@ -132,6 +111,101 @@
|
|||||||
border-left-color: #FFF;
|
border-left-color: #FFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-tab-brief>.layui-tab-head{
|
||||||
|
background-color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this {
|
||||||
|
color: @global-primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-brief>.layui-tab-head>.layui-tab-more li.layui-this:after,
|
||||||
|
.layui-tab-brief>.layui-tab-head>.layui-tab-title .layui-this:after {
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
border-bottom: 2px solid @global-checked-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-brief>.layui-tab-head.is-right>.layui-tab-title,
|
||||||
|
.layui-tab-brief>.layui-tab-head.is-left>.layui-tab-title {
|
||||||
|
border-right: 1px solid @global-neutral-color-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-brief[overflow]>.layui-tab-head>.layui-tab-title .layui-this:after {
|
||||||
|
top: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-more li.layui-this:after,
|
||||||
|
.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-title .layui-this:after {
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
border-right: 2px solid @global-checked-color;
|
||||||
|
margin-left: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-more li.layui-this:after,
|
||||||
|
.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-title .layui-this:after {
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
border-left: 2px solid @global-checked-color;
|
||||||
|
margin-right: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-card {
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-radius: 2px;
|
||||||
|
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-card>.layui-tab-head>.layui-tab-title li {
|
||||||
|
margin-right: -1px;
|
||||||
|
margin-left: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-left li,
|
||||||
|
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-right li {
|
||||||
|
margin-top: -1px;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-top .layui-this:after {
|
||||||
|
border: 1px solid @global-neutral-color-3;
|
||||||
|
border-bottom-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-bottom .layui-this:after {
|
||||||
|
border: 1px solid @global-neutral-color-3;
|
||||||
|
border-top-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-left .layui-this:after {
|
||||||
|
border: 1px solid @global-neutral-color-3;
|
||||||
|
border-right-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-card>.layui-tab-head>.layui-tab-title.is-right .layui-this:after {
|
||||||
|
border: 1px solid @global-neutral-color-3;
|
||||||
|
border-left-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-card>.layui-tab-head>.layui-tab-title .layui-tab-bar {
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
border-radius: 0;
|
||||||
|
border-top: none;
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-card>.layui-tab-more .layui-this {
|
||||||
|
background: 0 0;
|
||||||
|
color: @global-checked-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tab-card>.layui-tab-more .layui-this:after {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
.layui-tab-bar {
|
.layui-tab-bar {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -182,10 +256,6 @@
|
|||||||
top: -2px\0 / IE9;
|
top: -2px\0 / IE9;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-tab-content {
|
|
||||||
padding: 15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-title li .layui-tab-close {
|
.layui-tab-title li .layui-tab-close {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
@ -207,87 +277,14 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-tab-brief > .layui-tab-head > .layui-tab-title .layui-this {
|
.layui-tab-content {
|
||||||
color: @global-primary-color;
|
padding: 15px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-tab-brief > .layui-tab-head > .layui-tab-more li.layui-this:after,
|
.layui-tab.is-right>.layui-tab-content,
|
||||||
.layui-tab-brief > .layui-tab-head > .layui-tab-title .layui-this:after {
|
.layui-tab.is-left>.layui-tab-content {
|
||||||
border: none;
|
height: 100%;
|
||||||
border-radius: 0;
|
padding: 0 10px;
|
||||||
border-bottom: 2px solid @global-checked-color;
|
display: inline-block;
|
||||||
}
|
vertical-align: top;
|
||||||
|
|
||||||
.layui-tab-brief[overflow] > .layui-tab-head > .layui-tab-title .layui-this:after {
|
|
||||||
top: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-card {
|
|
||||||
border-width: 1px;
|
|
||||||
border-style: solid;
|
|
||||||
border-radius: 2px;
|
|
||||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-head.is-top,
|
|
||||||
.layui-tab-card > .layui-tab-head.is-bottom {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-top,
|
|
||||||
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-bottom {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-head > .layui-tab-title {
|
|
||||||
background-color: @global-neutral-color-1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-head > .layui-tab-title li {
|
|
||||||
margin-right: -1px;
|
|
||||||
margin-left: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-left li,
|
|
||||||
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-right li{
|
|
||||||
margin-top: -1px;
|
|
||||||
margin-bottom: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-this {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-top .layui-this:after {
|
|
||||||
border: 1px solid @global-neutral-color-3;
|
|
||||||
border-bottom-color: #fff;
|
|
||||||
}
|
|
||||||
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-bottom .layui-this:after {
|
|
||||||
border: 1px solid @global-neutral-color-3;
|
|
||||||
border-top-color: #fff;
|
|
||||||
}
|
|
||||||
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-left .layui-this:after {
|
|
||||||
border: 1px solid @global-neutral-color-3;
|
|
||||||
border-right-color: #fff;
|
|
||||||
}
|
|
||||||
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-right .layui-this:after {
|
|
||||||
border: 1px solid @global-neutral-color-3;
|
|
||||||
border-left-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-tab-bar {
|
|
||||||
height: 40px;
|
|
||||||
line-height: 40px;
|
|
||||||
border-radius: 0;
|
|
||||||
border-top: none;
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-more .layui-this {
|
|
||||||
background: 0 0;
|
|
||||||
color: @global-checked-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layui-tab-card > .layui-tab-more .layui-this:after {
|
|
||||||
border: none;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -104,10 +104,6 @@ provide("slotsChange", slotsChange);
|
|||||||
]"
|
]"
|
||||||
v-if="active"
|
v-if="active"
|
||||||
>
|
>
|
||||||
<div v-if="tabPosition === 'bottom'" class="layui-tab-content">
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
:class="['layui-tab-head', props.tabPosition ? `is-${tabPosition}` : '']"
|
:class="['layui-tab-head', props.tabPosition ? `is-${tabPosition}` : '']"
|
||||||
>
|
>
|
||||||
@ -133,7 +129,7 @@ provide("slotsChange", slotsChange);
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="tabPosition != 'bottom'" class="layui-tab-content">
|
<div class="layui-tab-content">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -59,3 +59,42 @@
|
|||||||
.layui-timeline-item:before {
|
.layui-timeline-item:before {
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-timeline-horizontal .layui-timeline-item {
|
||||||
|
display: inline-block;
|
||||||
|
width: 25%;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 10px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-timeline-horizontal .layui-timeline-axis {
|
||||||
|
left: 47%;
|
||||||
|
top: -4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-timeline-horizontal .layui-timeline-item:before {
|
||||||
|
left: 0px;
|
||||||
|
top: 5px;
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-timeline-horizontal .layui-timeline-item:first-child:before {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-timeline-horizontal .layui-timeline-item:last-child:before {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-timeline-horizontal .layui-timeline-content {
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-timeline-horizontal .layui-timeline-title {
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
line-height: 22px;
|
||||||
|
}
|
||||||
|
|||||||
@ -6,10 +6,24 @@ export default {
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
import { computed, withDefaults } from "vue";
|
||||||
|
|
||||||
|
export interface LayTimelineProps {
|
||||||
|
direction: "horizontal" | "vertical";
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<LayTimelineProps>(), {
|
||||||
|
direction: "vertical",
|
||||||
|
});
|
||||||
|
|
||||||
|
const timeLineClass = computed(() => [
|
||||||
|
"layui-timeline",
|
||||||
|
props.direction === "horizontal" ? "layui-timeline-horizontal" : "",
|
||||||
|
]);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ul class="layui-timeline">
|
<ul :class="timeLineClass">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -17,8 +17,8 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import LayCollapseTransition from "./collapseTransition.vue";
|
import LayCollapseTransition from "./transitions/collapseTransition.vue";
|
||||||
import LayFadeTransition from "./fadeTransition.vue";
|
import LayFadeTransition from "./transitions/fadeTransition.vue";
|
||||||
|
|
||||||
export interface LayTransitionProps {
|
export interface LayTransitionProps {
|
||||||
type?: string;
|
type?: string;
|
||||||
|
|||||||
9
src/component/upload/cropper.min.css
vendored
Normal file
9
src/component/upload/cropper.min.css
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
/*!
|
||||||
|
* Cropper.js v1.5.12
|
||||||
|
* https://fengyuanchen.github.io/cropperjs
|
||||||
|
*
|
||||||
|
* Copyright 2015-present Chen Fengyuan
|
||||||
|
* Released under the MIT license
|
||||||
|
*
|
||||||
|
* Date: 2021-06-12T08:00:11.623Z
|
||||||
|
*/.cropper-container{direction:ltr;font-size:0;line-height:0;position:relative;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cropper-container img{image-orientation:0deg;display:block;height:100%;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;width:100%}.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box{bottom:0;left:0;position:absolute;right:0;top:0}.cropper-canvas,.cropper-wrap-box{overflow:hidden}.cropper-drag-box{background-color:#fff;opacity:0}.cropper-modal{background-color:#000;opacity:.5}.cropper-view-box{display:block;height:100%;outline:1px solid #39f;outline-color:rgba(51,153,255,.75);overflow:hidden;width:100%}.cropper-dashed{border:0 dashed #eee;display:block;opacity:.5;position:absolute}.cropper-dashed.dashed-h{border-bottom-width:1px;border-top-width:1px;height:33.33333%;left:0;top:33.33333%;width:100%}.cropper-dashed.dashed-v{border-left-width:1px;border-right-width:1px;height:100%;left:33.33333%;top:0;width:33.33333%}.cropper-center{display:block;height:0;left:50%;opacity:.75;position:absolute;top:50%;width:0}.cropper-center:after,.cropper-center:before{background-color:#eee;content:" ";display:block;position:absolute}.cropper-center:before{height:1px;left:-3px;top:0;width:7px}.cropper-center:after{height:7px;left:0;top:-3px;width:1px}.cropper-face,.cropper-line,.cropper-point{display:block;height:100%;opacity:.1;position:absolute;width:100%}.cropper-face{background-color:#fff;left:0;top:0}.cropper-line{background-color:#39f}.cropper-line.line-e{cursor:ew-resize;right:-3px;top:0;width:5px}.cropper-line.line-n{cursor:ns-resize;height:5px;left:0;top:-3px}.cropper-line.line-w{cursor:ew-resize;left:-3px;top:0;width:5px}.cropper-line.line-s{bottom:-3px;cursor:ns-resize;height:5px;left:0}.cropper-point{background-color:#39f;height:5px;opacity:.75;width:5px}.cropper-point.point-e{cursor:ew-resize;margin-top:-3px;right:-3px;top:50%}.cropper-point.point-n{cursor:ns-resize;left:50%;margin-left:-3px;top:-3px}.cropper-point.point-w{cursor:ew-resize;left:-3px;margin-top:-3px;top:50%}.cropper-point.point-s{bottom:-3px;cursor:s-resize;left:50%;margin-left:-3px}.cropper-point.point-ne{cursor:nesw-resize;right:-3px;top:-3px}.cropper-point.point-nw{cursor:nwse-resize;left:-3px;top:-3px}.cropper-point.point-sw{bottom:-3px;cursor:nesw-resize;left:-3px}.cropper-point.point-se{bottom:-3px;cursor:nwse-resize;height:20px;opacity:1;right:-3px;width:20px}@media (min-width:768px){.cropper-point.point-se{height:15px;width:15px}}@media (min-width:992px){.cropper-point.point-se{height:10px;width:10px}}@media (min-width:1200px){.cropper-point.point-se{height:5px;opacity:.75;width:5px}}.cropper-point.point-se:before{background-color:#39f;bottom:-50%;content:" ";display:block;height:200%;opacity:0;position:absolute;right:-50%;width:200%}.cropper-invisible{opacity:0}.cropper-bg{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")}.cropper-hide{display:block;height:0;position:absolute;width:0}.cropper-hidden{display:none!important}.cropper-move{cursor:move}.cropper-crop{cursor:crosshair}.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point{cursor:not-allowed}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
@import (reference) "../../theme/variable.less";
|
@import (reference) "../../theme/variable.less";
|
||||||
|
@import "./cropper.min.css";
|
||||||
.layui-upload-file {
|
.layui-upload-file {
|
||||||
// display: none !important;
|
// display: none !important;
|
||||||
opacity: 0.01;
|
opacity: 0.01;
|
||||||
@ -85,3 +85,17 @@
|
|||||||
.layui-btn-container .layui-upload-choose {
|
.layui-btn-container .layui-upload-choose {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.layui-upload-drag-disable{
|
||||||
|
opacity:0.8;
|
||||||
|
z-index:1;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.copper-container{
|
||||||
|
// width:1000px;
|
||||||
|
}
|
||||||
|
._lay_upload_img{
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
@ -7,11 +7,49 @@ export default {
|
|||||||
import "./index.less";
|
import "./index.less";
|
||||||
import { Recordable } from "../../types";
|
import { Recordable } from "../../types";
|
||||||
import { layer } from "@layui/layer-vue";
|
import { layer } from "@layui/layer-vue";
|
||||||
import { ref, useSlots, withDefaults } from "vue";
|
import {
|
||||||
|
computed,
|
||||||
|
ComputedRef,
|
||||||
|
getCurrentInstance,
|
||||||
|
nextTick,
|
||||||
|
ref,
|
||||||
|
toRaw,
|
||||||
|
useSlots,
|
||||||
|
withDefaults,
|
||||||
|
} from "vue";
|
||||||
import { templateRef } from "@vueuse/core";
|
import { templateRef } from "@vueuse/core";
|
||||||
|
import { LayLayer } from "@layui/layer-vue";
|
||||||
|
import Cropper from "cropperjs";
|
||||||
// 组件的参数字段类型
|
// 组件的参数字段类型
|
||||||
//https://www.layuiweb.com/doc/modules/upload.html#options
|
//https://www.layuiweb.com/doc/modules/upload.html#options
|
||||||
|
export interface LayerButton {
|
||||||
|
text: string;
|
||||||
|
callback: Function;
|
||||||
|
}
|
||||||
|
export interface LayerModal {
|
||||||
|
title?: string;
|
||||||
|
resize?: boolean;
|
||||||
|
move?: boolean;
|
||||||
|
maxmin?: boolean;
|
||||||
|
offset?: string[];
|
||||||
|
content?: string;
|
||||||
|
shade?: boolean;
|
||||||
|
shadeClose?: boolean;
|
||||||
|
shadeOpacity?: number;
|
||||||
|
zIndex?: number;
|
||||||
|
type?: "component" | "iframe";
|
||||||
|
closeBtn?: boolean;
|
||||||
|
area: string[];
|
||||||
|
btn?: LayerButton[];
|
||||||
|
btnAlign?: "l" | "r" | "c";
|
||||||
|
anim?: boolean;
|
||||||
|
isOutAnim?: boolean;
|
||||||
|
}
|
||||||
|
export interface cutOptions {
|
||||||
|
layerOption: LayerModal;
|
||||||
|
copperOption?: typeof Cropper;
|
||||||
|
}
|
||||||
|
|
||||||
export interface LayUploadProps {
|
export interface LayUploadProps {
|
||||||
url?: string;
|
url?: string;
|
||||||
data?: any;
|
data?: any;
|
||||||
@ -22,8 +60,50 @@ export interface LayUploadProps {
|
|||||||
multiple?: boolean;
|
multiple?: boolean;
|
||||||
number?: number;
|
number?: number;
|
||||||
drag?: boolean;
|
drag?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
cut?: boolean;
|
||||||
|
cutOptions: cutOptions;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const getCutDownResult = () => {
|
||||||
|
if (_cropper) {
|
||||||
|
const canvas = _cropper.getCroppedCanvas();
|
||||||
|
let imgData = canvas.toDataURL('"image/png"');
|
||||||
|
let currentTimeStamp = new Date().valueOf();
|
||||||
|
emit("cutdone", Object.assign({ currentTimeStamp, msg: imgData }));
|
||||||
|
let newFile = dataURLtoFile(imgData);
|
||||||
|
commonUploadTransaction([newFile]);
|
||||||
|
nextTick(() => clearAllCutEffect());
|
||||||
|
} else {
|
||||||
|
errorF(cutInitErrorMsg);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const closeCutDownModal = () => {
|
||||||
|
let currentTimeStamp = new Date().valueOf();
|
||||||
|
emit("cutcancel", Object.assign({ currentTimeStamp }));
|
||||||
|
nextTick(() => clearAllCutEffect());
|
||||||
|
};
|
||||||
|
const clearAllCutEffect = () => {
|
||||||
|
activeUploadFiles.value = [];
|
||||||
|
activeUploadFilesImgs.value = [];
|
||||||
|
innerCutVisible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
let defaultCutLayerOption: LayerModal = {
|
||||||
|
title: "标题",
|
||||||
|
move: true,
|
||||||
|
maxmin: false,
|
||||||
|
offset: [],
|
||||||
|
btn: [
|
||||||
|
{ text: "导出", callback: getCutDownResult },
|
||||||
|
{ text: "取消", callback: closeCutDownModal },
|
||||||
|
],
|
||||||
|
area: ["640px", "640px"],
|
||||||
|
content: "11",
|
||||||
|
shade: true,
|
||||||
|
shadeClose: true,
|
||||||
|
type: "component",
|
||||||
|
};
|
||||||
const props = withDefaults(defineProps<LayUploadProps>(), {
|
const props = withDefaults(defineProps<LayUploadProps>(), {
|
||||||
acceptMime: "images",
|
acceptMime: "images",
|
||||||
field: "file",
|
field: "file",
|
||||||
@ -31,22 +111,48 @@ const props = withDefaults(defineProps<LayUploadProps>(), {
|
|||||||
multiple: false,
|
multiple: false,
|
||||||
number: 0,
|
number: 0,
|
||||||
drag: false,
|
drag: false,
|
||||||
|
disabled: false,
|
||||||
|
cut: false,
|
||||||
|
cutOptions: void 0,
|
||||||
});
|
});
|
||||||
|
|
||||||
const slot = useSlots();
|
const slot = useSlots();
|
||||||
const slots = slot.default && slot.default();
|
const slots = slot.default && slot.default();
|
||||||
const emit = defineEmits(["choose", "before", "done", "error"]);
|
const context = getCurrentInstance();
|
||||||
|
const emit = defineEmits([
|
||||||
|
"choose",
|
||||||
|
"before",
|
||||||
|
"done",
|
||||||
|
"error",
|
||||||
|
"cutdone",
|
||||||
|
"cutcancel",
|
||||||
|
]);
|
||||||
|
|
||||||
// 内部变量
|
// 内部变量
|
||||||
const isDragEnter = ref(false);
|
const isDragEnter = ref(false);
|
||||||
|
// 待处理的上传文件
|
||||||
|
const activeUploadFiles = ref<any[]>([]);
|
||||||
|
// 待处理的上传图片
|
||||||
|
const activeUploadFilesImgs = ref<any[]>([]);
|
||||||
const orgFileInput = templateRef<HTMLElement>("orgFileInput");
|
const orgFileInput = templateRef<HTMLElement>("orgFileInput");
|
||||||
|
let _cropper: any = null;
|
||||||
|
let computedCutLayerOption: ComputedRef<LayerModal>;
|
||||||
|
if (props.cutOptions && props.cutOptions.layerOption) {
|
||||||
|
computedCutLayerOption = computed(() =>
|
||||||
|
Object.assign(defaultCutLayerOption, props.cutOptions.layerOption)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
computedCutLayerOption = computed(() => defaultCutLayerOption);
|
||||||
|
}
|
||||||
|
|
||||||
// 统一异常提示的常量
|
// 统一异常提示的常量
|
||||||
const defaultErrorMsg = "上传失败";
|
const defaultErrorMsg = "上传失败";
|
||||||
const urlErrorMsg = "上传地址格式不合法";
|
const urlErrorMsg = "上传地址格式不合法";
|
||||||
const numberErrorMsg = "文件上传超过规定的个数";
|
const numberErrorMsg = "文件上传超过规定的个数";
|
||||||
const sizeErrorMsg = "文件大小超过限制";
|
const sizeErrorMsg = "文件大小超过限制";
|
||||||
const uploadRemoteErrorMsg = "请求上传接口出现异常";
|
const uploadRemoteErrorMsg = "请求上传接口出现异常";
|
||||||
|
const cutInitErrorMsg = "剪裁插件初始化失败";
|
||||||
|
// 统一成功提示
|
||||||
const uploadSuccess = "上传成功";
|
const uploadSuccess = "上传成功";
|
||||||
|
|
||||||
//内部方法 -> start
|
//内部方法 -> start
|
||||||
@ -56,6 +162,8 @@ interface localUploadTransaction {
|
|||||||
files: File[] | Blob[];
|
files: File[] | Blob[];
|
||||||
[propMame: string]: any;
|
[propMame: string]: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const innerCutVisible = ref<boolean>(false);
|
||||||
const localUploadTransaction = (option: localUploadTransaction) => {
|
const localUploadTransaction = (option: localUploadTransaction) => {
|
||||||
const { url, files } = option;
|
const { url, files } = option;
|
||||||
let formData = new FormData();
|
let formData = new FormData();
|
||||||
@ -88,6 +196,20 @@ interface localUploadOption {
|
|||||||
url: string;
|
url: string;
|
||||||
[propMame: string]: any;
|
[propMame: string]: any;
|
||||||
}
|
}
|
||||||
|
const dataURLtoFile = (dataurl: string) => {
|
||||||
|
let arr: any[] = dataurl.split(",");
|
||||||
|
let mime: string = "";
|
||||||
|
if (arr.length > 0) {
|
||||||
|
mime = arr[0].match(/:(.*?);/)[1];
|
||||||
|
}
|
||||||
|
let bstr = atob(arr[1]);
|
||||||
|
let n = bstr.length;
|
||||||
|
let u8arr = new Uint8Array(n);
|
||||||
|
while (n--) {
|
||||||
|
u8arr[n] = bstr.charCodeAt(n);
|
||||||
|
}
|
||||||
|
return new Blob([u8arr], { type: mime });
|
||||||
|
};
|
||||||
|
|
||||||
const errorF = (errorText: string) => {
|
const errorF = (errorText: string) => {
|
||||||
let currentTimeStamp = new Date().valueOf();
|
let currentTimeStamp = new Date().valueOf();
|
||||||
@ -139,7 +261,13 @@ const localUpload = (option: localUploadOption, callback: Function) => {
|
|||||||
cb();
|
cb();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
const filetoDataURL = (file: File, fn: Function) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onloadend = function (e: any) {
|
||||||
|
fn(e.target.result);
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
};
|
||||||
const getUploadChange = (e: any) => {
|
const getUploadChange = (e: any) => {
|
||||||
const files = e.target.files;
|
const files = e.target.files;
|
||||||
const _files = [...files];
|
const _files = [...files];
|
||||||
@ -165,17 +293,43 @@ const getUploadChange = (e: any) => {
|
|||||||
_sizeErrorFile.name
|
_sizeErrorFile.name
|
||||||
} ${sizeErrorMsg},文件最大不可超过${props.size * 1000}kb`;
|
} ${sizeErrorMsg},文件最大不可超过${props.size * 1000}kb`;
|
||||||
errorF(errorMsg);
|
errorF(errorMsg);
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
for (let item of _files) {
|
||||||
|
activeUploadFiles.value.push(item);
|
||||||
|
filetoDataURL(item, function (res: any) {
|
||||||
|
activeUploadFilesImgs.value.push(res);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let arm1 = props.cut && props.acceptMime == "images" && !props.multiple;
|
||||||
|
let arm2 = props.cut && props.acceptMime == "images" && props.multiple;
|
||||||
|
if (arm1) {
|
||||||
|
innerCutVisible.value = true;
|
||||||
|
setTimeout(() => {
|
||||||
|
let _imgs = document.getElementsByClassName("_lay_upload_img");
|
||||||
|
let _img = _imgs[0];
|
||||||
|
_cropper = new Cropper(_img, {
|
||||||
|
aspectRatio: 16 / 9,
|
||||||
|
});
|
||||||
|
}, 400);
|
||||||
|
} else {
|
||||||
|
if (arm2) {
|
||||||
|
console.warn(
|
||||||
|
"layui-vue:当前版本暂不支持单次多文件剪裁,尝试设置 multiple 为false,通过@done获取返回文件对象"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
commonUploadTransaction(_files);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const commonUploadTransaction = (_files: any[]) => {
|
||||||
if (props.url) {
|
if (props.url) {
|
||||||
// 表单提交
|
|
||||||
localUploadTransaction({
|
localUploadTransaction({
|
||||||
url: props.url,
|
url: props.url,
|
||||||
files: _files,
|
files: _files,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
// 抛出上传文件信息
|
|
||||||
emit("done", _files);
|
emit("done", _files);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -188,21 +342,9 @@ const chooseFile = () => {
|
|||||||
};
|
};
|
||||||
const clickOrgInput = () => {
|
const clickOrgInput = () => {
|
||||||
let currentTimeStamp = new Date().valueOf();
|
let currentTimeStamp = new Date().valueOf();
|
||||||
//console.log(currentTimeStamp);
|
|
||||||
emit("choose", currentTimeStamp);
|
emit("choose", currentTimeStamp);
|
||||||
};
|
};
|
||||||
const uploadDragOver = (e: any) => {};
|
const cutTransaction = () => {};
|
||||||
const uploadDragDrop = (e: any) => {
|
|
||||||
isDragEnter.value = false;
|
|
||||||
console.log(e);
|
|
||||||
};
|
|
||||||
const uploadDragStop = (e: any) => {};
|
|
||||||
const uploadDragEnter = (e: any) => {
|
|
||||||
isDragEnter.value = true;
|
|
||||||
};
|
|
||||||
const uploadDragLeave = (e: any) => {
|
|
||||||
isDragEnter.value = false;
|
|
||||||
};
|
|
||||||
//内部方法 -> end
|
//内部方法 -> end
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
@ -216,11 +358,12 @@ const uploadDragLeave = (e: any) => {
|
|||||||
:name="field"
|
:name="field"
|
||||||
@change="getUploadChange"
|
@change="getUploadChange"
|
||||||
:field="field"
|
:field="field"
|
||||||
|
:disabled="disabled"
|
||||||
ref="orgFileInput"
|
ref="orgFileInput"
|
||||||
/>
|
/>
|
||||||
<div v-if="!drag">
|
<div v-if="!drag">
|
||||||
<div class="layui-upload-btn-box">
|
<div class="layui-upload-btn-box">
|
||||||
<lay-button type="primary" @click.stop="chooseFile"
|
<lay-button type="primary" @click.stop="chooseFile" :disabled="disabled"
|
||||||
>上传图片</lay-button
|
>上传图片</lay-button
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
@ -228,11 +371,13 @@ const uploadDragLeave = (e: any) => {
|
|||||||
<div
|
<div
|
||||||
v-else
|
v-else
|
||||||
class="layui-upload-drag"
|
class="layui-upload-drag"
|
||||||
:class="isDragEnter ? 'layui-upload-drag-draging' : ''"
|
:class="
|
||||||
@dragleave.stop="uploadDragLeave"
|
disabled
|
||||||
@dragenter.stop="uploadDragEnter"
|
? 'layui-upload-drag-disable'
|
||||||
@dragover.stop="uploadDragOver"
|
: isDragEnter
|
||||||
@drop="uploadDragDrop"
|
? 'layui-upload-drag-draging'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
@click.stop="chooseFile"
|
@click.stop="chooseFile"
|
||||||
>
|
>
|
||||||
<i class="layui-icon"></i>
|
<i class="layui-icon"></i>
|
||||||
@ -242,6 +387,34 @@ const uploadDragLeave = (e: any) => {
|
|||||||
<img src="" alt="上传成功后渲染" style="max-width: 196px" />
|
<img src="" alt="上传成功后渲染" style="max-width: 196px" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<lay-layer
|
||||||
|
:title="computedCutLayerOption.title"
|
||||||
|
:move="computedCutLayerOption.move"
|
||||||
|
:resize="computedCutLayerOption.resize"
|
||||||
|
:shade="computedCutLayerOption.shade"
|
||||||
|
:shadeClose="computedCutLayerOption.shadeClose"
|
||||||
|
:shadeOpacity="computedCutLayerOption.shadeOpacity"
|
||||||
|
:zIndex="computedCutLayerOption.zIndex"
|
||||||
|
:btnAlign="computedCutLayerOption.btnAlign"
|
||||||
|
:area="computedCutLayerOption.area"
|
||||||
|
:anim="computedCutLayerOption.anim"
|
||||||
|
:isOutAnim="computedCutLayerOption.isOutAnim"
|
||||||
|
:btn="computedCutLayerOption.btn"
|
||||||
|
v-model="innerCutVisible"
|
||||||
|
@close="clearAllCutEffect"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="copper-container"
|
||||||
|
v-for="(base64str, index) in activeUploadFilesImgs"
|
||||||
|
:key="`file${index}`"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="base64str"
|
||||||
|
:id="`_lay_upload_img${index}`"
|
||||||
|
class="_lay_upload_img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</lay-layer>
|
||||||
<div class="layui-upload-list">
|
<div class="layui-upload-list">
|
||||||
<slot name="preview"></slot>
|
<slot name="preview"></slot>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -46,8 +46,12 @@ const changeTheme = (theme: string) => {
|
|||||||
brightness: 100,
|
brightness: 100,
|
||||||
contrast: 90,
|
contrast: 90,
|
||||||
sepia: 0,
|
sepia: 0,
|
||||||
// darkSchemeTextColor: 'rgba(255, 255, 255, 0.9)',
|
darkSchemeTextColor: getComputedStyle(
|
||||||
// darkSchemeBackgroundColor: '#22272E'
|
document.documentElement
|
||||||
|
).getPropertyValue("--global-dark-text-color"),
|
||||||
|
darkSchemeBackgroundColor: getComputedStyle(
|
||||||
|
document.documentElement
|
||||||
|
).getPropertyValue("--global-dark-background-color"),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
invert: [],
|
invert: [],
|
||||||
@ -60,8 +64,10 @@ const changeTheme = (theme: string) => {
|
|||||||
disableStyleSheetsProxy: false,
|
disableStyleSheetsProxy: false,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
localStorage.setItem("layui-vue-theme-dark", "true");
|
||||||
} else {
|
} else {
|
||||||
disableDarkMode();
|
disableDarkMode();
|
||||||
|
localStorage.setItem("layui-vue-theme-dark", "false");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -60,4 +60,8 @@
|
|||||||
|
|
||||||
--global-neutral-color-8: #c2c2c2;
|
--global-neutral-color-8: #c2c2c2;
|
||||||
|
|
||||||
|
--global-dark-text-color: #FFFFFFc9;
|
||||||
|
|
||||||
|
--global-dark-background-color: #22272E;
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -1,13 +0,0 @@
|
|||||||
import { useFetch } from "@vueuse/core";
|
|
||||||
|
|
||||||
export function getLayuiVueVersion() {
|
|
||||||
const { data } = useFetch(
|
|
||||||
`https://data.jsdelivr.com/v1/package/npm/@layui/layui-vue`,
|
|
||||||
{
|
|
||||||
timeout: 1000 * 2,
|
|
||||||
initialData: "",
|
|
||||||
afterFetch: (ctx) => ((ctx.data = ctx.data.tags.latest), ctx),
|
|
||||||
}
|
|
||||||
).json();
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user