style(prettier): reset code style with prettier
This commit is contained in:
落小梅
parent
aee99c49c9
commit
2b59e008f3
60
.eslintrc.js
60
.eslintrc.js
@ -1,26 +1,66 @@
|
|||||||
|
// module.exports = {
|
||||||
|
// env: {
|
||||||
|
// browser: true,
|
||||||
|
// node: true,
|
||||||
|
// },
|
||||||
|
// parser: 'vue-eslint-parser',
|
||||||
|
// parserOptions: {
|
||||||
|
// parser: '@typescript-eslint/parser',
|
||||||
|
// sourceType: 'module',
|
||||||
|
// ecmaVersion: 10,
|
||||||
|
// },
|
||||||
|
// plugins: ['@typescript-eslint', 'prettier'],
|
||||||
|
// extends: [
|
||||||
|
// 'eslint:recommended',
|
||||||
|
// 'plugin:vue/vue3-recommended',
|
||||||
|
// 'plugin:@typescript-eslint/recommended',
|
||||||
|
// ],
|
||||||
|
// rules: {
|
||||||
|
// 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||||
|
// 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||||
|
// quotes: ['error', 'single'],
|
||||||
|
// semi: ['error', 'never'],
|
||||||
|
// 'no-unused-vars': 'off',
|
||||||
|
// '@typescript-eslint/no-unused-vars': 'off',
|
||||||
|
// },
|
||||||
|
// }
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
root: true,
|
||||||
env: {
|
env: {
|
||||||
browser: true,
|
browser: true,
|
||||||
|
es2021: true,
|
||||||
node: true,
|
node: true,
|
||||||
},
|
},
|
||||||
|
globals: {
|
||||||
|
defineProps: 'readonly',
|
||||||
|
defineEmits: 'readonly',
|
||||||
|
defineExpose: 'readonly',
|
||||||
|
withDefaults: 'readonly',
|
||||||
|
},
|
||||||
parser: 'vue-eslint-parser',
|
parser: 'vue-eslint-parser',
|
||||||
|
plugins: ['@typescript-eslint', 'prettier'],
|
||||||
|
extends: [
|
||||||
|
'plugin:vue/vue3-recommended',
|
||||||
|
'eslint:recommended',
|
||||||
|
'@vue/typescript/recommended',
|
||||||
|
'@vue/prettier',
|
||||||
|
'@vue/prettier/@typescript-eslint',
|
||||||
|
],
|
||||||
parserOptions: {
|
parserOptions: {
|
||||||
parser: '@typescript-eslint/parser',
|
parser: '@typescript-eslint/parser',
|
||||||
sourceType: 'module',
|
sourceType: 'module',
|
||||||
ecmaVersion: 10,
|
ecmaVersion: 10,
|
||||||
},
|
},
|
||||||
plugins: ['@typescript-eslint', 'prettier'],
|
|
||||||
extends: [
|
|
||||||
'eslint:recommended',
|
|
||||||
'plugin:vue/vue3-recommended',
|
|
||||||
'plugin:@typescript-eslint/recommended',
|
|
||||||
],
|
|
||||||
rules: {
|
rules: {
|
||||||
|
'vue/valid-template-root': 'off',
|
||||||
|
'@typescript-eslint/no-explicit-any': 'off',
|
||||||
|
'@typescript-eslint/no-unused-vars': 'off',
|
||||||
|
'@typescript-eslint/no-var-requires': 'off',
|
||||||
|
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||||
|
'vue/one-component-per-file': 'off',
|
||||||
|
'@typescript-eslint/no-non-null-assertion': 'off',
|
||||||
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||||
quotes: ['error', 'single'],
|
|
||||||
semi: ['error', 'never'],
|
|
||||||
'no-unused-vars': 'off',
|
|
||||||
'@typescript-eslint/no-unused-vars': 'off',
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,4 +2,4 @@
|
|||||||
. "$(dirname "$0")/_/husky.sh"
|
. "$(dirname "$0")/_/husky.sh"
|
||||||
|
|
||||||
pnpx pretty-quick --staged
|
pnpx pretty-quick --staged
|
||||||
pnpx lint-staged
|
#pnpx lint-staged
|
||||||
|
|||||||
13
README.md
13
README.md
@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a href="http://www.layui.com">
|
<a href="http://www.layui.com">
|
||||||
<img src="https://sentsin.gitee.io/res/images/layui/layui.png" alt="layui" width="360">
|
<img src="https://sentsin.gitee.io/res/images/layui/layui.png" alt="layui" width="360">
|
||||||
@ -26,7 +25,6 @@
|
|||||||
|
|
||||||
Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
|
Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
|
||||||
|
|
||||||
|
|
||||||
## 快速上手 : Beta
|
## 快速上手 : Beta
|
||||||
|
|
||||||
获得 layui-vue 你只需要使用 npm 引入下述文件：
|
获得 layui-vue 你只需要使用 npm 引入下述文件：
|
||||||
@ -43,10 +41,7 @@ import Layui from '@layui/layui-vue'
|
|||||||
import '@layui/layui-vue/lib/layui.css'
|
import '@layui/layui-vue/lib/layui.css'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
|
||||||
createApp(App)
|
createApp(App).use(Layui).mount('#app')
|
||||||
.use(Layui)
|
|
||||||
.mount('#app')
|
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
这是一个基本的入门页面：
|
这是一个基本的入门页面：
|
||||||
@ -64,10 +59,10 @@ createApp(App)
|
|||||||
<lay-footer>pearadmin.com</lay-footer>
|
<lay-footer>pearadmin.com</lay-footer>
|
||||||
</lay-layout>
|
</lay-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## [阅读文档](http://layui-vue.pearadmin.com/)
|
## [阅读文档](http://layui-vue.pearadmin.com/)
|
||||||
|
|
||||||
从现在开始，尽情地拥抱 layui 吧！但愿她能成为你长远的开发伴侣，化作你方寸屏幕前的亿万字节！
|
从现在开始，尽情地拥抱 layui 吧！但愿她能成为你长远的开发伴侣，化作你方寸屏幕前的亿万字节！
|
||||||
|
|
||||||
## 使用趋势
|
## 使用趋势
|
||||||
@ -75,6 +70,7 @@ createApp(App)
|
|||||||
[](https://giteye.net/chart/5ZQ67WWS)
|
[](https://giteye.net/chart/5ZQ67WWS)
|
||||||
|
|
||||||
## 贡献者
|
## 贡献者
|
||||||
|
|
||||||
> 大概是因为 layui - vue 让开发者变得更懒，所以贡献者才这么少？
|
> 大概是因为 layui - vue 让开发者变得更懒，所以贡献者才这么少？
|
||||||
> 好的，姑且就这样认为吧。
|
> 好的，姑且就这样认为吧。
|
||||||
|
|
||||||
@ -82,7 +78,8 @@ createApp(App)
|
|||||||
|
|
||||||
## 交流群
|
## 交流群
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 相关
|
## 相关
|
||||||
|
|
||||||
[官网](http://layui-vue.pearadmin.com/)、[更新日志](http://layui-vue.pearadmin.com/zh-CN/guide/changelog)、[交流群](https://jq.qq.com/?_wv=1027&k=ffiUQgnE)
|
[官网](http://layui-vue.pearadmin.com/)、[更新日志](http://layui-vue.pearadmin.com/zh-CN/guide/changelog)、[交流群](https://jq.qq.com/?_wv=1027&k=ffiUQgnE)
|
||||||
@ -65,19 +65,20 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| --------------------------------- | ------------ | ---------------------------------------------- |
|
||||||
| layui-anim-down | 顶部往下滑入 | `layui-anim layui-anim-down` |
|
| layui-anim-down | 顶部往下滑入 | `layui-anim layui-anim-down` |
|
||||||
| layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` |
|
| layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` |
|
||||||
| layui-anim-up | 底部往上滑入 | `layui-anim layui-anim-up` |
|
| layui-anim-up | 底部往上滑入 | `layui-anim layui-anim-up` |
|
||||||
| layui-anim-upbit | 微微往上滑入 | `layui-anim ayui-anim-upbit` |
|
| layui-anim-upbit | 微微往上滑入 | `layui-anim ayui-anim-upbit` |
|
||||||
| layui-anim-scale | 平滑放大 | `layui-anim layui-anim-scale` |
|
| layui-anim-scale | 平滑放大 | `layui-anim layui-anim-scale` |
|
||||||
| layui-anim-scaleSpring | 弹簧式放大 | `layui-anim layui-anim-scaleSpring` |
|
| layui-anim-scaleSpring | 弹簧式放大 | `layui-anim layui-anim-scaleSpring` |
|
||||||
| layui-anim-scalesmall | 平滑放小 |`layui-anim layui-anim-scalesmall`|
|
| layui-anim-scalesmall | 平滑放小 | `layui-anim layui-anim-scalesmall` |
|
||||||
| layui-anim-scalesmall-spring | 弹簧式放小 | `layui-anim layui-anim-scalesmall-spring`|
|
| layui-anim-scalesmall-spring | 弹簧式放小 | `layui-anim layui-anim-scalesmall-spring` |
|
||||||
| layui-anim-fadein | 渐现 | `layui-anim layui-anim-fadein`|
|
| layui-anim-fadein | 渐现 | `layui-anim layui-anim-fadein` |
|
||||||
| layui-anim-fadeout | 渐隐 | `layui-anim layui-anim-fadeout`|
|
| layui-anim-fadeout | 渐隐 | `layui-anim layui-anim-fadeout` |
|
||||||
| layui-anim-rotate | 360度旋转 | `layui-anim layui-anim-rotate`|
|
| layui-anim-rotate | 360 度旋转 | `layui-anim layui-anim-rotate` |
|
||||||
| layui-anim-rotate layui-anim-loop | 循环动画 | `layui-anim layui-anim-rotate layui-anim-loop`|
|
| layui-anim-rotate layui-anim-loop | 循环动画 | `layui-anim layui-anim-rotate layui-anim-loop` |
|
||||||
|
|||||||
@ -68,10 +68,11 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ------ | ---- | -------------- |
|
||||||
| src | 图源 | -- |
|
| src | 图源 | -- |
|
||||||
| size | 尺寸 | `xs` `sm` `lg`|
|
| size | 尺寸 | `xs` `sm` `lg` |
|
||||||
| radius | 圆形 | `true` `false`|
|
| radius | 圆形 | `true` `false` |
|
||||||
|
|||||||
@ -34,6 +34,6 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ----- | ---- | --------------------------------------------- |
|
||||||
| type | 类型 | `dot` `rim` |
|
| type | 类型 | `dot` `rim` |
|
||||||
| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|
|
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
|
||||||
|
|||||||
@ -47,5 +47,5 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| --------- | ------ | --- |
|
||||||
| separator | 分割符 | `/` |
|
| separator | 分割符 | `/` |
|
||||||
@ -48,7 +48,6 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
::: demo 传入 columns 数据，自动生成表格
|
::: demo 传入 columns 数据，自动生成表格
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -74,7 +73,6 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
::: demo 传入 columns 数据，自动生成表格
|
::: demo 传入 columns 数据，自动生成表格
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -177,7 +175,6 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
::: demo 传入 columns 数据，自动生成表格
|
::: demo 传入 columns 数据，自动生成表格
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -203,8 +200,8 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ------ | ------ | --------------------------------------------- |
|
||||||
| type | 主题 | `primary` `normal` `warm` `danger` `disabled`|
|
| type | 主题 | `primary` `normal` `warm` `danger` `disabled` |
|
||||||
| size | 尺寸 | `lg` `sm` `xs` |
|
| size | 尺寸 | `lg` `sm` `xs` |
|
||||||
| fluid | 最大化 | `true` `false` |
|
| fluid | 最大化 | `true` `false` |
|
||||||
| radius | 圆角 | `true` `false` |
|
| radius | 圆角 | `true` `false` |
|
||||||
|
|||||||
@ -50,6 +50,6 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ------ | ---- | ------ |
|
||||||
| header | 插槽 | `内容` |
|
| header | 插槽 | `内容` |
|
||||||
| body | 插槽 | `内容` |
|
| body | 插槽 | `内容` |
|
||||||
@ -40,6 +40,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo
|
::: demo
|
||||||
@ -84,6 +85,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo
|
::: demo
|
||||||
@ -130,4 +132,5 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
:::
|
:::
|
||||||
@ -60,5 +60,5 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ----- | ------ | -------------- |
|
||||||
| fluid | 流模式 | `true` `false` |
|
| fluid | 流模式 | `true` `false` |
|
||||||
@ -61,7 +61,6 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ------- | -------- | --------------- |
|
||||||
| trigger | 触发方式 | `click` `hover` |
|
| trigger | 触发方式 | `click` `hover` |
|
||||||
@ -39,5 +39,5 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ----------- | -------- | --- |
|
||||||
| description | 描述信息 | -- |
|
| description | 描述信息 | -- |
|
||||||
@ -39,5 +39,5 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ----- | ---- | --- |
|
||||||
| title | 标题 | -- |
|
| title | 标题 | -- |
|
||||||
@ -71,6 +71,7 @@ export default {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
::: demo
|
::: demo
|
||||||
@ -124,12 +125,12 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | | |
|
| | | | |
|
||||||
|--|--|--|--|
|
| -------- | ---- | ----------------------- | --- |
|
||||||
| xs | 尺寸 | 超小屏幕 (手机<768px) | 12 |
|
| xs | 尺寸 | 超小屏幕 (手机<768px) | 12 |
|
||||||
| sm | 尺寸 | 小屏幕 (平板≥768px) | 12 |
|
| sm | 尺寸 | 小屏幕 (平板 ≥768px) | 12 |
|
||||||
| md | 尺寸 | 中等屏幕 (桌面≥992px) | 12 |
|
| md | 尺寸 | 中等屏幕 (桌面 ≥992px) | 12 |
|
||||||
| lg | 尺寸 | 大型屏幕 (桌面≥1200px) | 12 |
|
| lg | 尺寸 | 大型屏幕 (桌面 ≥1200px) | 12 |
|
||||||
| xsOffset | 偏移 | 超小屏幕 (手机<768px) | 12 |
|
| xsOffset | 偏移 | 超小屏幕 (手机<768px) | 12 |
|
||||||
| smOffset | 偏移 | 小屏幕 (平板≥768px) | 12 |
|
| smOffset | 偏移 | 小屏幕 (平板 ≥768px) | 12 |
|
||||||
| mdOffset | 偏移 | 中等屏幕 (桌面≥992px) | 12 |
|
| mdOffset | 偏移 | 中等屏幕 (桌面 ≥992px) | 12 |
|
||||||
| lgOffset | 偏移 | 大型屏幕 (桌面≥1200px) | 12 |
|
| lgOffset | 偏移 | 大型屏幕 (桌面 ≥1200px) | 12 |
|
||||||
|
|||||||
@ -1048,5 +1048,5 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ---- | ---- | ----------------- |
|
||||||
| type | 图标 | `layui-icon-home` |
|
| type | 图标 | `layui-icon-home` |
|
||||||
|
|||||||
@ -87,7 +87,7 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ---------- | -------- | --- |
|
||||||
| v-model | 默认值 | -- |
|
| v-model | 默认值 | -- |
|
||||||
| page | 开启分页 | -- |
|
| page | 开启分页 | -- |
|
||||||
| showSearch | 启用搜索 | -- |
|
| showSearch | 启用搜索 | -- |
|
||||||
@ -20,7 +20,7 @@ layui 之所以赢得如此多人的青睐，更多是在于它「前后界面
|
|||||||
```
|
```
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ---------- | ---- | --- |
|
||||||
| lay-layout | 容器 | -- |
|
| lay-layout | 容器 | -- |
|
||||||
| lay-header | 顶部 | -- |
|
| lay-header | 顶部 | -- |
|
||||||
| lay-logo | 图标 | -- |
|
| lay-logo | 图标 | -- |
|
||||||
|
|||||||
@ -32,5 +32,5 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ----- | ---- | --------------------------------------------- |
|
||||||
| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|
|
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
|
||||||
|
|||||||
@ -56,7 +56,6 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ----------- | -------- | --- |
|
||||||
| selectedKey | 默认选择 | -- |
|
| selectedKey | 默认选择 | -- |
|
||||||
|
|||||||
@ -108,7 +108,7 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ----------- | ------------ | ------- |
|
||||||
| limit | 每页数量 | -- |
|
| limit | 每页数量 | -- |
|
||||||
| total | 总条数 | -- |
|
| total | 总条数 | -- |
|
||||||
| jump | 切换回调 | -- |
|
| jump | 切换回调 | -- |
|
||||||
|
|||||||
@ -7,7 +7,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
@ -20,7 +20,6 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
::: demo
|
::: demo
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -68,12 +67,11 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| -------- | -------- | --------------------------------------------- |
|
||||||
| percent | 进度 | -- |
|
| percent | 进度 | -- |
|
||||||
| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|
|
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
|
||||||
| size | 尺寸 | `big` |
|
| size | 尺寸 | `big` |
|
||||||
| text | 提示 | -- |
|
| text | 提示 | -- |
|
||||||
| color| 颜色 | -- |
|
| color | 颜色 | -- |
|
||||||
| showText | 展示描述 | -- |
|
| showText | 展示描述 | -- |
|
||||||
@ -5,7 +5,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
@ -48,12 +48,12 @@ export default {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
|
|
||||||
const all2 = ref(4)
|
const all2 = ref(4);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
all2
|
all2
|
||||||
@ -64,8 +64,7 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ------- | -------- | --- |
|
||||||
| v-model | 评分值 | -- |
|
| v-model | 评分值 | -- |
|
||||||
| length | 评分长度 | -- |
|
| length | 评分长度 | -- |
|
||||||
@ -77,6 +77,6 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| ------- | -------- | -------------- |
|
||||||
| v-model | 当前激活 | -- |
|
| v-model | 当前激活 | -- |
|
||||||
| type | 主题样式 | `card` `brief` |
|
| type | 主题样式 | `card` `brief` |
|
||||||
@ -194,7 +194,7 @@ export default {
|
|||||||
:::
|
:::
|
||||||
|
|
||||||
| | | |
|
| | | |
|
||||||
|--|--|--|
|
| --------------- | ---------- | --- |
|
||||||
| columns | 列配置 | -- |
|
| columns | 列配置 | -- |
|
||||||
| dataSource | 数据源 | -- |
|
| dataSource | 数据源 | -- |
|
||||||
| checkbox | 开启复现框 | -- |
|
| checkbox | 开启复现框 | -- |
|
||||||
|
|||||||
@ -1,23 +1,24 @@
|
|||||||
<br>
|
<br>
|
||||||
|
|
||||||
使用 npm 下载
|
使用 npm 下载
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install @layui/layui-vue --save
|
npm install @layui/layui-vue --save
|
||||||
```
|
```
|
||||||
|
|
||||||
在 main.ts 中
|
在 main.ts 中
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import Layui from '@layui/layui-vue'
|
import Layui from '@layui/layui-vue'
|
||||||
import '@layui/layui-vue/lib/layui.css'
|
import '@layui/layui-vue/lib/layui.css'
|
||||||
|
|
||||||
createApp(App)
|
createApp(App).use(Layui).mount('#app')
|
||||||
.use(Layui)
|
|
||||||
.mount('#app')
|
|
||||||
```
|
```
|
||||||
|
|
||||||
这是一个基本的入门页面：
|
这是一个基本的入门页面：
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<lay-layout>
|
<lay-layout>
|
||||||
<lay-header>
|
<lay-header>
|
||||||
@ -30,4 +31,5 @@ createApp(App)
|
|||||||
<lay-footer>pearadmin.com</lay-footer>
|
<lay-footer>pearadmin.com</lay-footer>
|
||||||
</lay-layout>
|
</lay-layout>
|
||||||
```
|
```
|
||||||
|
|
||||||
完整案例, 前往: [layui-vue-sample](https://gitee.com/layui-vue/layui-vue-sample)
|
完整案例, 前往: [layui-vue-sample](https://gitee.com/layui-vue/layui-vue-sample)
|
||||||
@ -1,7 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
@ -9,17 +8,19 @@
|
|||||||
<meta name="force-rendering" content="webkit" />
|
<meta name="force-rendering" content="webkit" />
|
||||||
<meta name="applicable-device" content="pc,mobile" />
|
<meta name="applicable-device" content="pc,mobile" />
|
||||||
<meta name="author" content="Jmys <jmys1992@gmail.com>" />
|
<meta name="author" content="Jmys <jmys1992@gmail.com>" />
|
||||||
<meta name="keywords" content="element-pro,pro-components,admin,element-plus,components,vue,ui" />
|
<meta
|
||||||
|
name="keywords"
|
||||||
|
content="element-pro,pro-components,admin,element-plus,components,vue,ui"
|
||||||
|
/>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<title>Layui - Vue 开源前端 UI 框架</title>
|
<title>Layui - Vue 开源前端 UI 框架</title>
|
||||||
<!--preload-links-->
|
<!--preload-links-->
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<!--app-html-->
|
<!--app-html-->
|
||||||
</div>
|
</div>
|
||||||
<script type="module" src="/src/entry-client.ts"></script>
|
<script type="module" src="/src/entry-client.ts"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
@ -3,14 +3,8 @@
|
|||||||
<div class="source">
|
<div class="source">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div ref="meta" class="meta">
|
||||||
ref="meta"
|
<div v-if="$slots.description" class="description">
|
||||||
class="meta"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
v-if="$slots.description"
|
|
||||||
class="description"
|
|
||||||
>
|
|
||||||
<slot name="description" />
|
<slot name="description" />
|
||||||
</div>
|
</div>
|
||||||
<div class="language-html">
|
<div class="language-html">
|
||||||
@ -22,7 +16,11 @@
|
|||||||
class="control"
|
class="control"
|
||||||
@click="toggleShow"
|
@click="toggleShow"
|
||||||
>
|
>
|
||||||
<i :class="[show ? 'layui-icon layui-icon-up' : 'layui-icon layui-icon-down']" />
|
<i
|
||||||
|
:class="[
|
||||||
|
show ? 'layui-icon layui-icon-up' : 'layui-icon layui-icon-down',
|
||||||
|
]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -34,10 +32,10 @@ const meta = ref<HTMLElement>({} as HTMLElement)
|
|||||||
const isFixContorl = ref(false)
|
const isFixContorl = ref(false)
|
||||||
const codeAreaHeight = ref(0)
|
const codeAreaHeight = ref(0)
|
||||||
|
|
||||||
const show = ref(false);
|
const show = ref(false)
|
||||||
|
|
||||||
const toggleShow = function() {
|
const toggleShow = function () {
|
||||||
show.value = !show.value;
|
show.value = !show.value
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
|||||||
@ -1,33 +1,33 @@
|
|||||||
<template>
|
<template>
|
||||||
<select :name="name" lay-verify="required"></select>
|
<select :name="name" lay-verify="required" />
|
||||||
<div
|
<div
|
||||||
class="layui-unselect layui-form-select"
|
class="layui-unselect layui-form-select"
|
||||||
@click="open"
|
|
||||||
:class="[openState ? 'layui-form-selected' : '']"
|
:class="[openState ? 'layui-form-selected' : '']"
|
||||||
|
@click="open"
|
||||||
>
|
>
|
||||||
<div class="layui-select-title">
|
<div class="layui-select-title">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Search"
|
placeholder="Search"
|
||||||
class="layui-input layui-unselect"
|
class="layui-input layui-unselect"
|
||||||
@input="change"
|
|
||||||
:value="name"
|
:value="name"
|
||||||
style="
|
style="
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
border: none;
|
border: none;
|
||||||
color: whitesmoke;
|
color: whitesmoke;
|
||||||
"
|
"
|
||||||
/><i class="layui-edge"></i>
|
@input="change"
|
||||||
|
/><i class="layui-edge" />
|
||||||
</div>
|
</div>
|
||||||
<dl class="layui-anim layui-anim-upbit" style="">
|
<dl class="layui-anim layui-anim-upbit" style="">
|
||||||
<dd v-if="menus.length <= 0" class="layui-select-tips">无内容</dd>
|
<dd v-if="menus.length <= 0" class="layui-select-tips">无内容</dd>
|
||||||
<dd
|
<dd
|
||||||
v-else
|
|
||||||
v-for="data in menus"
|
v-for="data in menus"
|
||||||
:value = "name"
|
v-else
|
||||||
@click="jump(data)"
|
|
||||||
:key="data"
|
:key="data"
|
||||||
|
:value="name"
|
||||||
class="layui-select-tips"
|
class="layui-select-tips"
|
||||||
|
@click="jump(data)"
|
||||||
>
|
>
|
||||||
{{ data.title }}
|
{{ data.title }}
|
||||||
</dd>
|
</dd>
|
||||||
@ -38,11 +38,11 @@
|
|||||||
<script setup name="LaySelect" lang="ts">
|
<script setup name="LaySelect" lang="ts">
|
||||||
import { defineProps, Ref, ref } from 'vue'
|
import { defineProps, Ref, ref } from 'vue'
|
||||||
import { useRouter, useRoute } from 'vue-router'
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
|
import { Recordable } from '/@src/module/type'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
datas?: Recordable[]
|
||||||
datas?: object[]
|
}>()
|
||||||
}>()
|
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -60,16 +60,16 @@ const jump = function (data: any) {
|
|||||||
router.push(data.path)
|
router.push(data.path)
|
||||||
}
|
}
|
||||||
|
|
||||||
const change = function(e: any) {
|
const change = function (e: any) {
|
||||||
name.value = e.target.value
|
name.value = e.target.value
|
||||||
if(e.target.value === ""){
|
if (e.target.value === '') {
|
||||||
menus.value = props.datas
|
menus.value = props.datas
|
||||||
}else{
|
} else {
|
||||||
menus.value = searchList(e.target.value, props.datas);
|
menus.value = searchList(e.target.value, props.datas)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const searchList = function (str: String, container: any) {
|
const searchList = function (str: string, container: any) {
|
||||||
var newList = []
|
var newList = []
|
||||||
var startChar = str.charAt(0)
|
var startChar = str.charAt(0)
|
||||||
var strLen = str.length
|
var strLen = str.length
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||||
|
// @ts-nocheck
|
||||||
import { createApp } from './main'
|
import { createApp } from './main'
|
||||||
import { renderToString } from '@vue/server-renderer'
|
import { renderToString } from '@vue/server-renderer'
|
||||||
|
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="width:100%;height:300px">
|
<div class="width:100%;height:300px">
|
||||||
<lay-layout>
|
<lay-layout>
|
||||||
<lay-header style="background:#393D49">
|
<lay-header style="background: #393d49">
|
||||||
<lay-logo>
|
<lay-logo>
|
||||||
<img src="../assets/logo.png" />
|
<img src="../assets/logo.png" />
|
||||||
</lay-logo>
|
</lay-logo>
|
||||||
@ -10,7 +10,7 @@
|
|||||||
style="margin-top: 10px; margin-bottom: 0px"
|
style="margin-top: 10px; margin-bottom: 0px"
|
||||||
>
|
>
|
||||||
<lay-form>
|
<lay-form>
|
||||||
<lay-search :datas="menus"></lay-search>
|
<lay-search :datas="menus" />
|
||||||
</lay-form>
|
</lay-form>
|
||||||
</ul>
|
</ul>
|
||||||
<ul
|
<ul
|
||||||
@ -38,8 +38,8 @@
|
|||||||
style="padding: 6px"
|
style="padding: 6px"
|
||||||
>
|
>
|
||||||
<li
|
<li
|
||||||
:key="menu"
|
|
||||||
v-for="menu in menus"
|
v-for="menu in menus"
|
||||||
|
:key="menu"
|
||||||
:class="[
|
:class="[
|
||||||
currentPath === menu.path ? 'layui-menu-item-checked2' : '',
|
currentPath === menu.path ? 'layui-menu-item-checked2' : '',
|
||||||
]"
|
]"
|
||||||
@ -58,7 +58,7 @@
|
|||||||
</lay-side>
|
</lay-side>
|
||||||
<lay-body>
|
<lay-body>
|
||||||
<div style="padding: 20px">
|
<div style="padding: 20px">
|
||||||
<router-view></router-view>
|
<router-view />
|
||||||
</div>
|
</div>
|
||||||
</lay-body>
|
</lay-body>
|
||||||
</lay-layout>
|
</lay-layout>
|
||||||
@ -254,7 +254,8 @@ export default {
|
|||||||
title: '图标选择',
|
title: '图标选择',
|
||||||
subTitle: 'iconPicker',
|
subTitle: 'iconPicker',
|
||||||
path: '/zh-CN/components/iconPicker',
|
path: '/zh-CN/components/iconPicker',
|
||||||
},{
|
},
|
||||||
|
{
|
||||||
id: 29,
|
id: 29,
|
||||||
title: '分页',
|
title: '分页',
|
||||||
subTitle: 'page',
|
subTitle: 'page',
|
||||||
@ -304,19 +305,19 @@ export default {
|
|||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width:768px) {
|
@media screen and (max-width: 768px) {
|
||||||
.layui-side {
|
.layui-side {
|
||||||
width: 0px!important;
|
width: 0px !important;
|
||||||
}
|
}
|
||||||
.layui-body {
|
.layui-body {
|
||||||
left: 0px!important;
|
left: 0px !important;
|
||||||
width: 100%!important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
.layui-logo {
|
.layui-logo {
|
||||||
display: none!important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
.layui-layout-left {
|
.layui-layout-left {
|
||||||
left: 0px!important;
|
left: 0px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -11,6 +11,6 @@ export function createRouter(): Router {
|
|||||||
const baseUrl = import.meta.env.BASE_URL
|
const baseUrl = import.meta.env.BASE_URL
|
||||||
return _createRouter({
|
return _createRouter({
|
||||||
history: createWebHashHistory(baseUrl),
|
history: createWebHashHistory(baseUrl),
|
||||||
routes: routes
|
routes: routes,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -16,7 +16,8 @@ const zhCN = [
|
|||||||
path: '/zh-CN/guide/install',
|
path: '/zh-CN/guide/install',
|
||||||
component: () => import('../../docs/zh-CN/guide/install.md'),
|
component: () => import('../../docs/zh-CN/guide/install.md'),
|
||||||
meta: { title: '安装' },
|
meta: { title: '安装' },
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
path: '/zh-CN/guide/changelog',
|
path: '/zh-CN/guide/changelog',
|
||||||
component: () => import('../../docs/zh-CN/guide/changelog.md'),
|
component: () => import('../../docs/zh-CN/guide/changelog.md'),
|
||||||
meta: { title: '更新' },
|
meta: { title: '更新' },
|
||||||
@ -43,7 +44,8 @@ const zhCN = [
|
|||||||
path: '/zh-CN/components/container',
|
path: '/zh-CN/components/container',
|
||||||
component: () => import('../../docs/zh-CN/components/container.md'),
|
component: () => import('../../docs/zh-CN/components/container.md'),
|
||||||
meta: { title: '容器' },
|
meta: { title: '容器' },
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
path: '/zh-CN/components/breadcrumb',
|
path: '/zh-CN/components/breadcrumb',
|
||||||
component: () => import('../../docs/zh-CN/components/breadcrumb.md'),
|
component: () => import('../../docs/zh-CN/components/breadcrumb.md'),
|
||||||
meta: { title: '面包屑' },
|
meta: { title: '面包屑' },
|
||||||
@ -52,27 +54,33 @@ const zhCN = [
|
|||||||
path: '/zh-CN/components/button',
|
path: '/zh-CN/components/button',
|
||||||
component: () => import('../../docs/zh-CN/components/button.md'),
|
component: () => import('../../docs/zh-CN/components/button.md'),
|
||||||
meta: { title: '按钮' },
|
meta: { title: '按钮' },
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
path: '/zh-CN/components/icon',
|
path: '/zh-CN/components/icon',
|
||||||
component: () => import('../../docs/zh-CN/components/icon.md'),
|
component: () => import('../../docs/zh-CN/components/icon.md'),
|
||||||
meta: { title: '图标' },
|
meta: { title: '图标' },
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
path: '/zh-CN/components/panel',
|
path: '/zh-CN/components/panel',
|
||||||
component: () => import('../../docs/zh-CN/components/panel.md'),
|
component: () => import('../../docs/zh-CN/components/panel.md'),
|
||||||
meta: { title: '面板' },
|
meta: { title: '面板' },
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
path: '/zh-CN/components/animation',
|
path: '/zh-CN/components/animation',
|
||||||
component: () => import('../../docs/zh-CN/components/animation.md'),
|
component: () => import('../../docs/zh-CN/components/animation.md'),
|
||||||
meta: { title: '动画' },
|
meta: { title: '动画' },
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
path: '/zh-CN/components/card',
|
path: '/zh-CN/components/card',
|
||||||
component: () => import('../../docs/zh-CN/components/cards.md'),
|
component: () => import('../../docs/zh-CN/components/cards.md'),
|
||||||
meta: { title: '卡片' },
|
meta: { title: '卡片' },
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
path: '/zh-CN/components/grid',
|
path: '/zh-CN/components/grid',
|
||||||
component: () => import('../../docs/zh-CN/components/grid.md'),
|
component: () => import('../../docs/zh-CN/components/grid.md'),
|
||||||
meta: { title: '栅格' },
|
meta: { title: '栅格' },
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
path: '/zh-CN/components/form',
|
path: '/zh-CN/components/form',
|
||||||
component: () => import('../../docs/zh-CN/components/form.md'),
|
component: () => import('../../docs/zh-CN/components/form.md'),
|
||||||
meta: { title: '表单' },
|
meta: { title: '表单' },
|
||||||
@ -136,22 +144,26 @@ const zhCN = [
|
|||||||
path: '/zh-CN/components/rate',
|
path: '/zh-CN/components/rate',
|
||||||
component: () => import('../../docs/zh-CN/components/rate.md'),
|
component: () => import('../../docs/zh-CN/components/rate.md'),
|
||||||
meta: { title: '评分' },
|
meta: { title: '评分' },
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
path: '/zh-CN/components/dropdown',
|
path: '/zh-CN/components/dropdown',
|
||||||
component: () => import('../../docs/zh-CN/components/dropdown.md'),
|
component: () => import('../../docs/zh-CN/components/dropdown.md'),
|
||||||
meta: { title: '下拉' },
|
meta: { title: '下拉' },
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
path: '/zh-CN/components/tab',
|
path: '/zh-CN/components/tab',
|
||||||
component: () => import('../../docs/zh-CN/components/tab.md'),
|
component: () => import('../../docs/zh-CN/components/tab.md'),
|
||||||
meta: { title: '选项卡' },
|
meta: { title: '选项卡' },
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
path: '/zh-CN/components/iconPicker',
|
path: '/zh-CN/components/iconPicker',
|
||||||
component: () => import('../../docs/zh-CN/components/iconPicker.md'),
|
component: () => import('../../docs/zh-CN/components/iconPicker.md'),
|
||||||
meta: { title: '图标选择' },
|
meta: { title: '图标选择' },
|
||||||
}, {
|
},
|
||||||
|
{
|
||||||
path: '/zh-CN/components/tree',
|
path: '/zh-CN/components/tree',
|
||||||
component: () => import('../../docs/zh-CN/components/tree.md'),
|
component: () => import('../../docs/zh-CN/components/tree.md'),
|
||||||
meta: { title: '树形组件' }
|
meta: { title: '树形组件' },
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/zh-CN/components/page',
|
path: '/zh-CN/components/page',
|
||||||
@ -162,7 +174,7 @@ const zhCN = [
|
|||||||
path: '/zh-CN/components/transfer',
|
path: '/zh-CN/components/transfer',
|
||||||
component: () => import('../../docs/zh-CN/components/transfer.md'),
|
component: () => import('../../docs/zh-CN/components/transfer.md'),
|
||||||
meta: { title: '穿梭框' },
|
meta: { title: '穿梭框' },
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|||||||
@ -62,7 +62,6 @@ h1 {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
h3 {
|
h3 {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -159,7 +158,8 @@ table td {
|
|||||||
font-size: 0;
|
font-size: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-doc-icon li .doc-icon-name, .site-doc-icon li .doc-icon-code {
|
.site-doc-icon li .doc-icon-name,
|
||||||
|
.site-doc-icon li .doc-icon-code {
|
||||||
color: #c2c2c2;
|
color: #c2c2c2;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -184,8 +184,8 @@ table td {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #666;
|
color: #666;
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
-webkit-transition: all .3s;
|
-webkit-transition: all 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-doc-icon li .layui-icon {
|
.site-doc-icon li .layui-icon {
|
||||||
@ -199,7 +199,7 @@ table td {
|
|||||||
|
|
||||||
.site-doc-necolor li div {
|
.site-doc-necolor li div {
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
color: #000!important;
|
color: #000 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.site-doc-color li div {
|
.site-doc-color li div {
|
||||||
@ -268,8 +268,8 @@ table td {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #666;
|
color: #666;
|
||||||
transition: all .3s;
|
transition: all 0.3s;
|
||||||
-webkit-transition: all .3s;
|
-webkit-transition: all 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.anim .site-doc-icon li .layui-anim {
|
.anim .site-doc-icon li .layui-anim {
|
||||||
|
|||||||
@ -60,6 +60,7 @@
|
|||||||
"@vitejs/plugin-vue": "^1.9.3",
|
"@vitejs/plugin-vue": "^1.9.3",
|
||||||
"@vue/compiler-sfc": "^3.2.20",
|
"@vue/compiler-sfc": "^3.2.20",
|
||||||
"@vue/eslint-config-prettier": "^6.0.0",
|
"@vue/eslint-config-prettier": "^6.0.0",
|
||||||
|
"@vue/eslint-config-typescript": "^7.0.0",
|
||||||
"@vue/server-renderer": "^3.2.20",
|
"@vue/server-renderer": "^3.2.20",
|
||||||
"@vue/test-utils": "^2.0.0-rc.15",
|
"@vue/test-utils": "^2.0.0-rc.15",
|
||||||
"babel-jest": "^26.6.3",
|
"babel-jest": "^26.6.3",
|
||||||
@ -88,8 +89,7 @@
|
|||||||
"types"
|
"types"
|
||||||
],
|
],
|
||||||
"lint-staged": {
|
"lint-staged": {
|
||||||
"*.{ts,vue,tsx,md}": "eslint --fix",
|
"*.{ts,vue,tsx}": "eslint --fix",
|
||||||
"*.{css,less,vue,md}": "stylelint --fix",
|
|
||||||
"*": "prettier -w -u"
|
"*": "prettier -w -u"
|
||||||
},
|
},
|
||||||
"husky": {
|
"husky": {
|
||||||
|
|||||||
23
pnpm-lock.yaml
generated
23
pnpm-lock.yaml
generated
@ -15,6 +15,7 @@ specifiers:
|
|||||||
'@vitejs/plugin-vue': ^1.9.3
|
'@vitejs/plugin-vue': ^1.9.3
|
||||||
'@vue/compiler-sfc': ^3.2.20
|
'@vue/compiler-sfc': ^3.2.20
|
||||||
'@vue/eslint-config-prettier': ^6.0.0
|
'@vue/eslint-config-prettier': ^6.0.0
|
||||||
|
'@vue/eslint-config-typescript': ^7.0.0
|
||||||
'@vue/server-renderer': ^3.2.20
|
'@vue/server-renderer': ^3.2.20
|
||||||
'@vue/test-utils': ^2.0.0-rc.15
|
'@vue/test-utils': ^2.0.0-rc.15
|
||||||
babel-jest: ^26.6.3
|
babel-jest: ^26.6.3
|
||||||
@ -59,6 +60,7 @@ devDependencies:
|
|||||||
'@vitejs/plugin-vue': 1.9.3_vite@2.5.10
|
'@vitejs/plugin-vue': 1.9.3_vite@2.5.10
|
||||||
'@vue/compiler-sfc': 3.2.20
|
'@vue/compiler-sfc': 3.2.20
|
||||||
'@vue/eslint-config-prettier': 6.0.0_b212975186fa54a111c0d83e5f3c21af
|
'@vue/eslint-config-prettier': 6.0.0_b212975186fa54a111c0d83e5f3c21af
|
||||||
|
'@vue/eslint-config-typescript': 7.0.0_b1c40b501c70e0dc0050a49887752d81
|
||||||
'@vue/server-renderer': 3.2.20_vue@3.2.20
|
'@vue/server-renderer': 3.2.20_vue@3.2.20
|
||||||
'@vue/test-utils': 2.0.0-rc.15_vue@3.2.20
|
'@vue/test-utils': 2.0.0-rc.15_vue@3.2.20
|
||||||
babel-jest: 26.6.3_@babel+core@7.15.8
|
babel-jest: 26.6.3_@babel+core@7.15.8
|
||||||
@ -2580,6 +2582,27 @@ packages:
|
|||||||
prettier: 2.4.1
|
prettier: 2.4.1
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/@vue/eslint-config-typescript/7.0.0_b1c40b501c70e0dc0050a49887752d81:
|
||||||
|
resolution:
|
||||||
|
{
|
||||||
|
integrity: sha512-UxUlvpSrFOoF8aQ+zX1leYiEBEm7CZmXYn/ZEM1zwSadUzpamx56RB4+Htdjisv1mX2tOjBegNUqH3kz2OL+Aw==,
|
||||||
|
}
|
||||||
|
engines: { node: ^10.12.0 || >=12.0.0 }
|
||||||
|
peerDependencies:
|
||||||
|
'@typescript-eslint/eslint-plugin': ^4.4.0
|
||||||
|
'@typescript-eslint/parser': ^4.4.0
|
||||||
|
eslint: ^5.0.0 || ^6.0.0 || ^7.0.0
|
||||||
|
eslint-plugin-vue: ^5.2.3 || ^6.0.0 || ^7.0.0
|
||||||
|
dependencies:
|
||||||
|
'@typescript-eslint/eslint-plugin': 4.33.0_d753869925cce96d3eb2141eeedafe57
|
||||||
|
'@typescript-eslint/parser': 4.33.0_eslint@7.32.0+typescript@4.4.3
|
||||||
|
eslint: 7.32.0
|
||||||
|
eslint-plugin-vue: 7.19.1_eslint@7.32.0
|
||||||
|
vue-eslint-parser: 7.11.0_eslint@7.32.0
|
||||||
|
transitivePeerDependencies:
|
||||||
|
- supports-color
|
||||||
|
dev: true
|
||||||
|
|
||||||
/@vue/reactivity/3.2.20:
|
/@vue/reactivity/3.2.20:
|
||||||
resolution:
|
resolution:
|
||||||
{
|
{
|
||||||
|
|||||||
2917
src/css/layui.css
2917
src/css/layui.css
File diff suppressed because it is too large
Load Diff
@ -105,7 +105,7 @@ const components: Record<string, IDefineComponent> = {
|
|||||||
LayTree,
|
LayTree,
|
||||||
LayTable,
|
LayTable,
|
||||||
LayPage,
|
LayPage,
|
||||||
LayTransfer
|
LayTransfer,
|
||||||
}
|
}
|
||||||
|
|
||||||
const install = (app: App, options?: InstallOptions): void => {
|
const install = (app: App, options?: InstallOptions): void => {
|
||||||
|
|||||||
@ -1,14 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<img :src="src" class="layui-avatar" :class="[radius ? 'layui-avatar-radius':'', size ? 'layui-avatar-' + size: '']"/>
|
<img
|
||||||
|
:src="src"
|
||||||
|
class="layui-avatar"
|
||||||
|
:class="[
|
||||||
|
radius ? 'layui-avatar-radius' : '',
|
||||||
|
size ? 'layui-avatar-' + size : '',
|
||||||
|
]"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayAvatar" lang="ts">
|
<script setup name="LayAvatar" lang="ts">
|
||||||
import { defineProps } from 'vue'
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
src?: string
|
src?: string
|
||||||
radius?: boolean
|
radius?: boolean
|
||||||
size?: string
|
size?: string
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,18 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<span :class="classList" :style="styleList">
|
<span :class="classList" :style="styleList">
|
||||||
<slot v-if="type != 'dot'"></slot>
|
<slot v-if="type != 'dot'" />
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayBadge" lang="ts">
|
<script setup name="LayBadge" lang="ts">
|
||||||
import { defineProps } from 'vue'
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
type?: string
|
type?: string
|
||||||
theme?: string
|
theme?: string
|
||||||
color?: string
|
color?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const classList = [
|
const classList = [
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,14 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<blockquote class="layui-elem-quote" :class="[nm?'layui-quote-nm':'']">
|
<blockquote class="layui-elem-quote" :class="[nm ? 'layui-quote-nm' : '']">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</blockquote>
|
</blockquote>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayBlock" lang="ts">
|
<script setup name="LayBlock" lang="ts">
|
||||||
import { defineProps } from 'vue'
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
nm?: boolean
|
nm?: boolean
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-body">
|
<div class="layui-body">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayBody" lang="ts">
|
<script setup name="LayBody" lang="ts"></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<span class="layui-breadcrumb" style="visibility: visible;">
|
<span class="layui-breadcrumb" style="visibility: visible">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -15,10 +15,9 @@ const props = withDefaults(
|
|||||||
separator?: string
|
separator?: string
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
separator: "/"
|
separator: '/',
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
provide("separator",props.separator);
|
provide('separator', props.separator)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,16 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<a href="javascript:void(0)">{{title}}</a>
|
<a href="javascript:void(0)">{{ title }}</a>
|
||||||
<span lay-separator="">{{separator}}</span>
|
<span lay-separator="">{{ separator }}</span>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayBreadcrumbItem" lang="ts">
|
<script setup name="LayBreadcrumbItem" lang="ts">
|
||||||
import { defineProps, inject } from 'vue'
|
import { defineProps, inject } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
title: string
|
title: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const separator = inject("separator");
|
|
||||||
|
|
||||||
|
const separator = inject('separator')
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -9,19 +9,18 @@
|
|||||||
border ? 'layui-border-' + border : '',
|
border ? 'layui-border-' + border : '',
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<slot></slot>
|
<slot />
|
||||||
</button>
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayButton" lang="ts">
|
<script setup name="LayButton" lang="ts">
|
||||||
import { defineProps } from 'vue'
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
type?: string
|
type?: string
|
||||||
size?: string
|
size?: string
|
||||||
fluid?: boolean
|
fluid?: boolean
|
||||||
radius?: boolean
|
radius?: boolean
|
||||||
border?: string
|
border?: string
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-btn-container">
|
<div class="layui-btn-container">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayButtonContainer" lang="ts">
|
<script setup name="LayButtonContainer" lang="ts"></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-btn-group">
|
<div class="layui-btn-group">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayButtonGroup" lang="ts">
|
<script setup name="LayButtonGroup" lang="ts"></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -1,14 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-card">
|
<div class="layui-card">
|
||||||
<div class="layui-card-header">
|
<div class="layui-card-header">
|
||||||
<slot name="header"></slot>
|
<slot name="header" />
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-card-body">
|
<div class="layui-card-body">
|
||||||
<slot name="body"></slot>
|
<slot name="body" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayCard" lang="ts">
|
<script setup name="LayCard" lang="ts"></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -12,9 +12,9 @@
|
|||||||
]"
|
]"
|
||||||
:lay-skin="skin"
|
:lay-skin="skin"
|
||||||
>
|
>
|
||||||
<span><slot></slot></span>
|
<span><slot /></span>
|
||||||
<i v-if="skin == 'primary'" class="layui-icon layui-icon-ok"></i>
|
<i v-if="skin == 'primary'" class="layui-icon layui-icon-ok" />
|
||||||
<i v-if="!skin" class="layui-icon layui-icon-ok"></i>
|
<i v-if="!skin" class="layui-icon layui-icon-ok" />
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@ -22,14 +22,13 @@
|
|||||||
<script setup name="LayCheckbox" lang="ts">
|
<script setup name="LayCheckbox" lang="ts">
|
||||||
import { defineProps, ref, watch } from 'vue'
|
import { defineProps, ref, watch } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
modelValue: string[]
|
modelValue: string[]
|
||||||
label: string
|
label: string
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
name?: string
|
name?: string
|
||||||
skin?: string
|
skin?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const hasValue = ref(false)
|
const hasValue = ref(false)
|
||||||
|
|
||||||
|
|||||||
@ -12,15 +12,14 @@
|
|||||||
lgOffset ? 'layui-col-lg-offset' + lgOffset : '',
|
lgOffset ? 'layui-col-lg-offset' + lgOffset : '',
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayCol" lang="ts">
|
<script setup name="LayCol" lang="ts">
|
||||||
import { defineProps } from 'vue'
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
md?: string
|
md?: string
|
||||||
xs?: string
|
xs?: string
|
||||||
sm?: string
|
sm?: string
|
||||||
@ -29,5 +28,5 @@ const props =
|
|||||||
xsOffset?: string
|
xsOffset?: string
|
||||||
smOffset?: string
|
smOffset?: string
|
||||||
lgOffset?: string
|
lgOffset?: string
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-collapse">
|
<div class="layui-collapse">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayCollapse" lang="ts">
|
<script setup name="LayCollapse" lang="ts"></script>
|
||||||
</script>
|
|
||||||
|
|||||||
@ -1,11 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-colla-item">
|
<div class="layui-colla-item">
|
||||||
<h2 class="layui-colla-title" @click="showHandle">
|
<h2 class="layui-colla-title" @click="showHandle">
|
||||||
{{ title }}<i class="layui-icon layui-colla-icon">{{ isShow ? "":"" }}</i>
|
{{ title
|
||||||
|
}}<i class="layui-icon layui-colla-icon">{{ isShow ? '' : '' }}</i>
|
||||||
</h2>
|
</h2>
|
||||||
<div class="layui-colla-content" :class="isShow ? 'layui-show':''">
|
<div class="layui-colla-content" :class="isShow ? 'layui-show' : ''">
|
||||||
<p>
|
<p>
|
||||||
<slot></slot>
|
<slot />
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -14,17 +15,14 @@
|
|||||||
<script setup name="LayCollapseItem" lang="ts">
|
<script setup name="LayCollapseItem" lang="ts">
|
||||||
import { defineProps, Ref, ref } from 'vue'
|
import { defineProps, Ref, ref } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
show?: boolean
|
show?: boolean
|
||||||
title?: string
|
title?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const isShow = ref(props.show) as Ref
|
const isShow = ref(props.show) as Ref
|
||||||
|
|
||||||
const showHandle = function() {
|
const showHandle = function () {
|
||||||
isShow.value = !isShow.value
|
isShow.value = !isShow.value
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,17 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div :class="classes">
|
<div :class="classes">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayContainer" lang="ts">
|
<script setup name="LayContainer" lang="ts">
|
||||||
import { defineProps } from 'vue'
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
fluid?: boolean
|
fluid?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const classes = props.fluid ? 'layui-fluid' : 'layui-container'
|
const classes = props.fluid ? 'layui-fluid' : 'layui-container'
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,9 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<span class="layui-count">
|
<span class="layui-count" />
|
||||||
|
|
||||||
</span>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayCount" lang="ts">
|
<script setup name="LayCount" lang="ts"></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -5,25 +5,25 @@
|
|||||||
:class="[openState ? 'layui-dropdown-up' : '']"
|
:class="[openState ? 'layui-dropdown-up' : '']"
|
||||||
>
|
>
|
||||||
<div @click="open">
|
<div @click="open">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<dl class="layui-anim layui-anim-upbit">
|
<dl class="layui-anim layui-anim-upbit">
|
||||||
<ul class="layui-menu layui-dropdown-menu">
|
<ul class="layui-menu layui-dropdown-menu">
|
||||||
<slot name="content"></slot>
|
<slot name="content" />
|
||||||
</ul>
|
</ul>
|
||||||
</dl>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="trigger === 'hover'"
|
v-if="trigger === 'hover'"
|
||||||
class="layui-dropdown"
|
class="layui-dropdown"
|
||||||
|
:class="[openState ? 'layui-dropdown-up' : '']"
|
||||||
@mouseenter="open"
|
@mouseenter="open"
|
||||||
@mouseleave="open"
|
@mouseleave="open"
|
||||||
:class="[openState ? 'layui-dropdown-up' : '']"
|
|
||||||
>
|
>
|
||||||
<slot></slot>
|
<slot />
|
||||||
<dl class="layui-anim layui-anim-upbit">
|
<dl class="layui-anim layui-anim-upbit">
|
||||||
<ul class="layui-menu layui-dropdown-menu">
|
<ul class="layui-menu layui-dropdown-menu">
|
||||||
<slot name="content"></slot>
|
<slot name="content" />
|
||||||
</ul>
|
</ul>
|
||||||
</dl>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,8 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<li><div class="layui-menu-body-title">
|
<li>
|
||||||
<slot></slot>
|
<div class="layui-menu-body-title">
|
||||||
</div></li>
|
<slot />
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayDropdownItem" lang="ts">
|
<script setup name="LayDropdownItem" lang="ts"></script>
|
||||||
</script>
|
|
||||||
|
|||||||
@ -3,7 +3,9 @@
|
|||||||
<div class="layui-empty-image">
|
<div class="layui-empty-image">
|
||||||
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|||||||
@ -1,15 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<fieldset class="layui-elem-field">
|
<fieldset class="layui-elem-field">
|
||||||
<legend>{{title}}</legend>
|
<legend>{{ title }}</legend>
|
||||||
<div class="layui-field-box">
|
<div class="layui-field-box">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayField" lang="ts">
|
<script setup name="LayField" lang="ts">
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
title?: string
|
title?: string
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-footer">
|
<div class="layui-footer">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayFooter" lang="ts">
|
<script setup name="LayFooter" lang="ts"></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<form class="layui-form">
|
<form class="layui-form">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</form>
|
</form>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayForm" lang="ts">
|
<script setup name="LayForm" lang="ts"></script>
|
||||||
</script>
|
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<div class="layui-form-item">
|
<div class="layui-form-item">
|
||||||
<label class="layui-form-label">{{ label }}</label>
|
<label class="layui-form-label">{{ label }}</label>
|
||||||
<div :class="[mode ? 'layui-input-' + mode : '']" class="layui-input-block">
|
<div :class="[mode ? 'layui-input-' + mode : '']" class="layui-input-block">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-header">
|
<div class="layui-header">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayHeader" lang="ts">
|
<script setup name="LayHeader" lang="ts"></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -1,12 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<i class="layui-icon" :class="[type]"></i>
|
<i class="layui-icon" :class="[type]" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayIcon" lang="ts">
|
<script setup name="LayIcon" lang="ts">
|
||||||
import { defineProps } from 'vue'
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
type?: string
|
type?: string
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -6,30 +6,30 @@
|
|||||||
"
|
"
|
||||||
>
|
>
|
||||||
<div class="layui-inline layui-iconpicker-main">
|
<div class="layui-inline layui-iconpicker-main">
|
||||||
<i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
|
<i class="layui-inline layui-icon" :class="[selectedIcon]" />
|
||||||
</div>
|
</div>
|
||||||
<span class="layui-inline layui-iconpicker-suffix"
|
<span class="layui-inline layui-iconpicker-suffix"
|
||||||
><i class="layui-icon layui-icon-down layui-anim"></i
|
><i class="layui-icon layui-icon-down layui-anim"
|
||||||
></span>
|
/></span>
|
||||||
</div>
|
</div>
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="layui-iconpicker-view layui-iconpicker-scroll">
|
<div class="layui-iconpicker-view layui-iconpicker-scroll">
|
||||||
<div class="layui-iconpicker-search" v-if="showSearch">
|
<div v-if="showSearch" class="layui-iconpicker-search">
|
||||||
<div class="layui-form layui-input-wrap layui-input-wrap-prefix">
|
<div class="layui-form layui-input-wrap layui-input-wrap-prefix">
|
||||||
<div class="layui-input-prefix">
|
<div class="layui-input-prefix">
|
||||||
<i class="layui-icon layui-icon-search"></i>
|
<i class="layui-icon layui-icon-search" />
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value=""
|
value=""
|
||||||
@input="search"
|
|
||||||
placeholder="search"
|
placeholder="search"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
class="layui-input"
|
class="layui-input"
|
||||||
lay-affix="clear"
|
lay-affix="clear"
|
||||||
|
@input="search"
|
||||||
/>
|
/>
|
||||||
<div class="layui-input-suffix layui-input-affix-event layui-hide">
|
<div class="layui-input-suffix layui-input-affix-event layui-hide">
|
||||||
<i class="layui-icon layui-icon-clear"></i>
|
<i class="layui-icon layui-icon-clear" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -38,29 +38,32 @@
|
|||||||
<li
|
<li
|
||||||
v-for="icon in icones"
|
v-for="icon in icones"
|
||||||
:key="icon"
|
:key="icon"
|
||||||
@click="selectIcon(icon.class)"
|
|
||||||
:class="[selectedIcon === icon.class ? 'layui-this' : '']"
|
:class="[selectedIcon === icon.class ? 'layui-this' : '']"
|
||||||
|
@click="selectIcon(icon.class)"
|
||||||
>
|
>
|
||||||
<i class="layui-icon" :class="[icon.class]"></i>
|
<i class="layui-icon" :class="[icon.class]" />
|
||||||
<p class="layui-elip">{{ icon.name }}</p>
|
<p class="layui-elip">
|
||||||
|
{{ icon.name }}
|
||||||
|
</p>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-iconpicker-page" v-if="page">
|
<div v-if="page" class="layui-iconpicker-page">
|
||||||
<div
|
<div
|
||||||
class="layui-box layui-laypage layui-laypage-default"
|
|
||||||
id="layui-laypage-1"
|
id="layui-laypage-1"
|
||||||
|
class="layui-box layui-laypage layui-laypage-default"
|
||||||
>
|
>
|
||||||
<span class="layui-laypage-count">共 {{ total }} 个</span
|
<span class="layui-laypage-count">共 {{ total }} 个</span
|
||||||
><a
|
><a
|
||||||
href="javascript:;"
|
href="javascript:;"
|
||||||
@click="prev()"
|
|
||||||
class="layui-laypage-prev"
|
class="layui-laypage-prev"
|
||||||
:class="[currentPage === 1 ? 'layui-disabled' : '']"
|
:class="[currentPage === 1 ? 'layui-disabled' : '']"
|
||||||
><i class="layui-icon layui-icon-left"></i></a
|
@click="prev()"
|
||||||
|
><i class="layui-icon layui-icon-left" /></a
|
||||||
><span class="layui-laypage-curr"
|
><span class="layui-laypage-curr"
|
||||||
><em class="layui-laypage-em"></em
|
><em class="layui-laypage-em" /><em
|
||||||
><em>{{ currentPage }} / {{ totalPage }}</em></span
|
>{{ currentPage }} / {{ totalPage }}</em
|
||||||
|
></span
|
||||||
><span class="layui-laypage-spr">…</span
|
><span class="layui-laypage-spr">…</span
|
||||||
><a href="javascript:;" class="layui-laypage-last" title="尾页"
|
><a href="javascript:;" class="layui-laypage-last" title="尾页"
|
||||||
>14</a
|
>14</a
|
||||||
@ -69,8 +72,8 @@
|
|||||||
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
|
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
|
||||||
class="layui-laypage-next"
|
class="layui-laypage-next"
|
||||||
@click="next()"
|
@click="next()"
|
||||||
><i class="layui-icon layui-icon-right"></i
|
><i class="layui-icon layui-icon-right"
|
||||||
></a>
|
/></a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -90,15 +93,15 @@ const props = withDefaults(
|
|||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
modelValue: 'layui-icon-face-smile',
|
modelValue: 'layui-icon-face-smile',
|
||||||
page: false
|
page: false,
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
const selectedIcon: Ref<String> = ref(props.modelValue as String)
|
const selectedIcon: Ref<string> = ref(props.modelValue as string)
|
||||||
|
|
||||||
const selectIcon = function (icon: String) {
|
const selectIcon = function (icon: string) {
|
||||||
emit('update:modelValue', icon)
|
emit('update:modelValue', icon)
|
||||||
selectedIcon.value = icon
|
selectedIcon.value = icon
|
||||||
}
|
}
|
||||||
@ -116,7 +119,7 @@ if (props.page) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const next = function () {
|
const next = function () {
|
||||||
if (currentPage.value === totalPage) {
|
if (currentPage.value === totalPage.value) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
currentPage.value = currentPage.value + 1
|
currentPage.value = currentPage.value + 1
|
||||||
@ -159,7 +162,7 @@ const search = function (e: any) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const searchList = function (str: String, container: any) {
|
const searchList = function (str: string, container: any) {
|
||||||
var newList = []
|
var newList = []
|
||||||
var startChar = str.charAt(0)
|
var startChar = str.charAt(0)
|
||||||
var strLen = str.length
|
var strLen = str.length
|
||||||
|
|||||||
@ -1,22 +1,27 @@
|
|||||||
<template>
|
<template>
|
||||||
<input :type="type" :value="modelValue" :placeholder="placeholder" :name="name" class="layui-input" @input="updateValue"/>
|
<input
|
||||||
|
:type="type"
|
||||||
|
:value="modelValue"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:name="name"
|
||||||
|
class="layui-input"
|
||||||
|
@input="updateValue"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayInput" lang="ts">
|
<script setup name="LayInput" lang="ts">
|
||||||
import { defineProps, defineEmits } from 'vue'
|
import { defineProps, defineEmits } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
name?: string
|
name?: string
|
||||||
type?: string
|
type?: string
|
||||||
modelValue?: string
|
modelValue?: string
|
||||||
placeholder?: string
|
placeholder?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
const updateValue = function(event: InputEvent) {
|
const updateValue = function (event: InputEvent) {
|
||||||
emit('update:modelValue', (event.target as HTMLInputElement).value)
|
emit('update:modelValue', (event.target as HTMLInputElement).value)
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-layout layui-layout-admin">
|
<div class="layui-layout layui-layout-admin">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayLayout" lang="ts">
|
<script setup name="LayLayout" lang="ts"></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -5,8 +5,7 @@
|
|||||||
<script setup name="LayLine" lang="ts">
|
<script setup name="LayLine" lang="ts">
|
||||||
import { defineProps } from 'vue'
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
theme?: string
|
theme?: string
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-logo">
|
<div class="layui-logo">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayLogo" lang="ts">
|
<script setup name="LayLogo" lang="ts"></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<ul class="layui-nav" :class="[tree ? 'layui-nav-tree':'']">
|
<ul class="layui-nav" :class="[tree ? 'layui-nav-tree' : '']">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -13,7 +13,7 @@ const props = withDefaults(
|
|||||||
tree?: boolean
|
tree?: boolean
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
selectedKey: "",
|
selectedKey: '',
|
||||||
tree: false,
|
tree: false,
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
@ -21,6 +21,6 @@ const props = withDefaults(
|
|||||||
const isTree = ref(props.tree)
|
const isTree = ref(props.tree)
|
||||||
const selectKey = ref(props.selectedKey)
|
const selectKey = ref(props.selectedKey)
|
||||||
|
|
||||||
provide("isTree",isTree);
|
provide('isTree', isTree)
|
||||||
provide("selectKey",selectKey)
|
provide('selectKey', selectKey)
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<dd :class="[selectKey === id ? 'layui-this':'']" @click="selectHandle()">
|
<dd :class="[selectKey === id ? 'layui-this' : '']" @click="selectHandle()">
|
||||||
<a href="javascript:void(0)">{{ title }}</a>
|
<a href="javascript:void(0)">{{ title }}</a>
|
||||||
</dd>
|
</dd>
|
||||||
</template>
|
</template>
|
||||||
@ -7,15 +7,14 @@
|
|||||||
<script setup name="LayMenuChildItem" lang="ts">
|
<script setup name="LayMenuChildItem" lang="ts">
|
||||||
import { defineProps, inject, Ref } from 'vue'
|
import { defineProps, inject, Ref } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
id: string
|
id: string
|
||||||
title: string
|
title: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const selectKey: Ref<String> = inject("selectKey") as Ref<String>
|
const selectKey: Ref<string> = inject('selectKey') as Ref<string>
|
||||||
|
|
||||||
const selectHandle = function() {
|
const selectHandle = function () {
|
||||||
selectKey.value = props.id
|
selectKey.value = props.id
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,13 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
|
|
||||||
<li
|
<li
|
||||||
|
v-if="slots.default"
|
||||||
class="layui-nav-item"
|
class="layui-nav-item"
|
||||||
:class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
|
:class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
|
||||||
v-if="slots.default"
|
|
||||||
>
|
>
|
||||||
<a href="javascript:void(0)" @click="openHandle">
|
<a href="javascript:void(0)" @click="openHandle">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
<i class="layui-icon layui-icon-down layui-nav-more"></i>
|
<i class="layui-icon layui-icon-down layui-nav-more" />
|
||||||
</a>
|
</a>
|
||||||
<dl
|
<dl
|
||||||
class="layui-nav-child"
|
class="layui-nav-child"
|
||||||
@ -16,11 +15,16 @@
|
|||||||
!isTree ? 'layui-anim layui-anim-upbit' : '',
|
!isTree ? 'layui-anim layui-anim-upbit' : '',
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<slot></slot>
|
<slot />
|
||||||
</dl>
|
</dl>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li v-else class="layui-nav-item" @click="selectHandle()" :class="[selectKey === id ? 'layui-this':'']">
|
<li
|
||||||
|
v-else
|
||||||
|
class="layui-nav-item"
|
||||||
|
:class="[selectKey === id ? 'layui-this' : '']"
|
||||||
|
@click="selectHandle()"
|
||||||
|
>
|
||||||
<a href="javascript:void(0)">{{ title }} </a>
|
<a href="javascript:void(0)">{{ title }} </a>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
@ -29,22 +33,21 @@
|
|||||||
import { defineProps, inject, Ref, ref, useSlots } from 'vue'
|
import { defineProps, inject, Ref, ref, useSlots } from 'vue'
|
||||||
const slots = useSlots()
|
const slots = useSlots()
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
id: string
|
id: string
|
||||||
title: string
|
title: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const isOpen = ref(false)
|
const isOpen = ref(false)
|
||||||
|
|
||||||
const isTree = inject('isTree')
|
const isTree = inject('isTree')
|
||||||
const selectKey: Ref<String> = inject('selectKey') as Ref<String>
|
const selectKey: Ref<string> = inject('selectKey') as Ref<string>
|
||||||
|
|
||||||
const openHandle = function () {
|
const openHandle = function () {
|
||||||
isOpen.value = !isOpen.value
|
isOpen.value = !isOpen.value
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectHandle = function() {
|
const selectHandle = function () {
|
||||||
selectKey.value = props.id
|
selectKey.value = props.id
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-box layui-laypage layui-laypage-default">
|
<div class="layui-box layui-laypage layui-laypage-default">
|
||||||
<span class="layui-laypage-count" v-if="showCount">共 {{ total }} 条</span
|
<span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span
|
||||||
><a
|
><a
|
||||||
href="javascript:;"
|
href="javascript:;"
|
||||||
class="layui-laypage-prev"
|
class="layui-laypage-prev"
|
||||||
@ -10,14 +10,13 @@
|
|||||||
>
|
>
|
||||||
<template v-if="showPage">
|
<template v-if="showPage">
|
||||||
<template v-for="index of totalPage" :key="index">
|
<template v-for="index of totalPage" :key="index">
|
||||||
<span class="layui-laypage-curr" v-if="index === currentPage"
|
<span v-if="index === currentPage" class="layui-laypage-curr"
|
||||||
><em
|
><em
|
||||||
class="layui-laypage-em"
|
class="layui-laypage-em"
|
||||||
:class="[theme ? 'layui-bg-' + theme : '']"
|
:class="[theme ? 'layui-bg-' + theme : '']"
|
||||||
></em
|
/><em>{{ index }}</em></span
|
||||||
><em>{{ index }}</em></span
|
|
||||||
>
|
>
|
||||||
<a href="javascript:;" @click="jump(index)" v-else>
|
<a v-else href="javascript:;" @click="jump(index)">
|
||||||
{{ index }}
|
{{ index }}
|
||||||
</a>
|
</a>
|
||||||
</template>
|
</template>
|
||||||
@ -29,7 +28,7 @@
|
|||||||
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
|
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
|
||||||
@click="next()"
|
@click="next()"
|
||||||
>下一页</a
|
>下一页</a
|
||||||
><span class="layui-laypage-limits" v-if="showLimit"
|
><span v-if="showLimit" class="layui-laypage-limits"
|
||||||
><select v-model="inlimit">
|
><select v-model="inlimit">
|
||||||
<option value="10">10 条/页</option>
|
<option value="10">10 条/页</option>
|
||||||
<option value="20">20 条/页</option>
|
<option value="20">20 条/页</option>
|
||||||
@ -37,12 +36,12 @@
|
|||||||
<option value="40">40 条/页</option>
|
<option value="40">40 条/页</option>
|
||||||
<option value="50">50 条/页</option>
|
<option value="50">50 条/页</option>
|
||||||
</select></span
|
</select></span
|
||||||
><a href="javascript:;" v-if="showRefresh" class="layui-laypage-refresh"
|
><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh"
|
||||||
><i class="layui-icon layui-icon-refresh"></i></a
|
><i class="layui-icon layui-icon-refresh" /></a
|
||||||
><span class="layui-laypage-skip" v-if="showSkip"
|
><span v-if="showSkip" class="layui-laypage-skip"
|
||||||
>到第<input
|
>到第<input
|
||||||
type="number"
|
|
||||||
v-model="currentPageShow"
|
v-model="currentPageShow"
|
||||||
|
type="number"
|
||||||
class="layui-input layui-input-number"
|
class="layui-input layui-input-number"
|
||||||
/>页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
|
/>页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
|
||||||
确定
|
确定
|
||||||
@ -67,7 +66,7 @@ const props = withDefaults(
|
|||||||
showRefresh?: boolean
|
showRefresh?: boolean
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
limit: 10
|
limit: 10,
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
@ -107,7 +106,6 @@ watch(inlimit, function () {
|
|||||||
|
|
||||||
watch(currentPage, function () {
|
watch(currentPage, function () {
|
||||||
currentPageShow.value = currentPage.value
|
currentPageShow.value = currentPage.value
|
||||||
emit('jump', {current: currentPage.value})
|
emit('jump', { current: currentPage.value })
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-panel">
|
<div class="layui-panel">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup name="LayPanel" lang="ts">
|
<script setup name="LayPanel" lang="ts"></script>
|
||||||
</script>
|
|
||||||
|
|||||||
@ -19,13 +19,12 @@
|
|||||||
<script setup name="LayProgress" lang="ts">
|
<script setup name="LayProgress" lang="ts">
|
||||||
import { defineProps } from 'vue'
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
percent: number | string
|
percent: number | string
|
||||||
theme?: string
|
theme?: string
|
||||||
color?: string
|
color?: string
|
||||||
size?: string
|
size?: string
|
||||||
showText?: boolean
|
showText?: boolean
|
||||||
text?: string
|
text?: string
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
@ -3,11 +3,11 @@
|
|||||||
<input type="radio" :value="label" :name="name" />
|
<input type="radio" :value="label" :name="name" />
|
||||||
<div
|
<div
|
||||||
class="layui-unselect layui-form-radio"
|
class="layui-unselect layui-form-radio"
|
||||||
@click="handleClick"
|
|
||||||
:class="{
|
:class="{
|
||||||
'layui-form-radioed': modelValue == label,
|
'layui-form-radioed': modelValue == label,
|
||||||
'layui-radio-disbaled layui-disabled': disabled,
|
'layui-radio-disbaled layui-disabled': disabled,
|
||||||
}"
|
}"
|
||||||
|
@click="handleClick"
|
||||||
>
|
>
|
||||||
<i
|
<i
|
||||||
v-if="modelValue != label"
|
v-if="modelValue != label"
|
||||||
@ -21,7 +21,7 @@
|
|||||||
:class="{ 'layui-form-radioed': modelValue == label }"
|
:class="{ 'layui-form-radioed': modelValue == label }"
|
||||||
></i
|
></i
|
||||||
>
|
>
|
||||||
<span><slot></slot></span>
|
<span><slot /></span>
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@ -29,13 +29,12 @@
|
|||||||
<script setup name="LayRadio" lang="ts">
|
<script setup name="LayRadio" lang="ts">
|
||||||
import { defineProps, defineEmits } from 'vue'
|
import { defineProps, defineEmits } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
modelValue: string
|
modelValue: string
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
label?: string
|
label?: string
|
||||||
name: string
|
name: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
|
|||||||
@ -1,19 +1,19 @@
|
|||||||
<template>
|
<template>
|
||||||
<ul class="layui-rate">
|
<ul class="layui-rate">
|
||||||
<li
|
<li
|
||||||
class="layui-inline"
|
|
||||||
@mouseenter="mouseenter(index)"
|
|
||||||
v-for="(rate, index) in rates"
|
v-for="(rate, index) in rates"
|
||||||
:key="rate"
|
:key="rate"
|
||||||
|
class="layui-inline"
|
||||||
|
@mouseenter="mouseenter(index)"
|
||||||
>
|
>
|
||||||
<i class="layui-icon" :class="[rate]"></i>
|
<i class="layui-icon" :class="[rate]" />
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineProps, Ref, ref, withDefaults } from 'vue'
|
import { defineProps, Ref, ref, withDefaults } from 'vue'
|
||||||
|
|
||||||
const rates: Ref<Array<String>> = ref([])
|
const rates: Ref<Array<string>> = ref([])
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
@ -46,7 +46,6 @@ const mouseenter = function (index: number) {
|
|||||||
|
|
||||||
// select update 时, 通知 change 事件
|
// select update 时, 通知 change 事件
|
||||||
|
|
||||||
emit('update:modelValue', index+1)
|
emit('update:modelValue', index + 1)
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,170 +1,170 @@
|
|||||||
export default [
|
export default [
|
||||||
{ name: "实心", class: "layui-icon-heart-fill" },
|
{ name: '实心', class: 'layui-icon-heart-fill' },
|
||||||
{ name: "空心", class: "layui-icon-heart" },
|
{ name: '空心', class: 'layui-icon-heart' },
|
||||||
{ name: "亮度/晴", class: "layui-icon-light" },
|
{ name: '亮度/晴', class: 'layui-icon-light' },
|
||||||
{ name: "时间/历史", class: "layui-icon-time" },
|
{ name: '时间/历史', class: 'layui-icon-time' },
|
||||||
{ name: "蓝牙", class: "layui-icon-bluetooth" },
|
{ name: '蓝牙', class: 'layui-icon-bluetooth' },
|
||||||
{ name: "@艾特", class: "layui-icon-at" },
|
{ name: '@艾特', class: 'layui-icon-at' },
|
||||||
{ name: "静音", class: "layui-icon-mute" },
|
{ name: '静音', class: 'layui-icon-mute' },
|
||||||
{ name: "录音/麦克风", class: "layui-icon-mike" },
|
{ name: '录音/麦克风', class: 'layui-icon-mike' },
|
||||||
{ name: "密钥/钥匙", class: "layui-icon-key" },
|
{ name: '密钥/钥匙', class: 'layui-icon-key' },
|
||||||
{ name: "礼物/活动", class: "layui-icon-gift" },
|
{ name: '礼物/活动', class: 'layui-icon-gift' },
|
||||||
{ name: "邮箱", class: "layui-icon-email" },
|
{ name: '邮箱', class: 'layui-icon-email' },
|
||||||
{ name: "RSS", class: "layui-icon-rss" },
|
{ name: 'RSS', class: 'layui-icon-rss' },
|
||||||
{ name: "WiFi", class: "layui-icon-wifi" },
|
{ name: 'WiFi', class: 'layui-icon-wifi' },
|
||||||
{ name: "退出/注销", class: "layui-icon-logout" },
|
{ name: '退出/注销', class: 'layui-icon-logout' },
|
||||||
{ name: "Android 安卓", class: "layui-icon-android" },
|
{ name: 'Android 安卓', class: 'layui-icon-android' },
|
||||||
{ name: "Apple IOS 苹果", class: "layui-icon-ios" },
|
{ name: 'Apple IOS 苹果', class: 'layui-icon-ios' },
|
||||||
{ name: "Windows", class: "layui-icon-windows" },
|
{ name: 'Windows', class: 'layui-icon-windows' },
|
||||||
{ name: "穿梭框", class: "layui-icon-transfer" },
|
{ name: '穿梭框', class: 'layui-icon-transfer' },
|
||||||
{ name: "客服", class: "layui-icon-service" },
|
{ name: '客服', class: 'layui-icon-service' },
|
||||||
{ name: "减", class: "layui-icon-subtraction" },
|
{ name: '减', class: 'layui-icon-subtraction' },
|
||||||
{ name: "加", class: "layui-icon-addition" },
|
{ name: '加', class: 'layui-icon-addition' },
|
||||||
{ name: "滑块", class: "layui-icon-slider" },
|
{ name: '滑块', class: 'layui-icon-slider' },
|
||||||
{ name: "打印", class: "layui-icon-print" },
|
{ name: '打印', class: 'layui-icon-print' },
|
||||||
{ name: "导出", class: "layui-icon-export" },
|
{ name: '导出', class: 'layui-icon-export' },
|
||||||
{ name: "列", class: "layui-icon-cols" },
|
{ name: '列', class: 'layui-icon-cols' },
|
||||||
{ name: "退出全屏", class: "layui-icon-screen-restore" },
|
{ name: '退出全屏', class: 'layui-icon-screen-restore' },
|
||||||
{ name: "全屏", class: "layui-icon-screen-full"},
|
{ name: '全屏', class: 'layui-icon-screen-full' },
|
||||||
{ name: "半星", class: "layui-icon-rate-half" },
|
{ name: '半星', class: 'layui-icon-rate-half' },
|
||||||
{ name: "星星-空心", class: "layui-icon-rate" },
|
{ name: '星星-空心', class: 'layui-icon-rate' },
|
||||||
{ name: "星星-实心", class: "layui-icon-rate-solid" },
|
{ name: '星星-实心', class: 'layui-icon-rate-solid' },
|
||||||
{ name: "手机", class: "layui-icon-cellphone" },
|
{ name: '手机', class: 'layui-icon-cellphone' },
|
||||||
{ name: "验证码", class: "layui-icon-vercode"},
|
{ name: '验证码', class: 'layui-icon-vercode' },
|
||||||
{ name: "微信", class: "layui-icon-login-wechat" },
|
{ name: '微信', class: 'layui-icon-login-wechat' },
|
||||||
{ name: "QQ", class: "layui-icon-login-qq" },
|
{ name: 'QQ', class: 'layui-icon-login-qq' },
|
||||||
{ name: "微博", class: "layui-icon-login-weibo" },
|
{ name: '微博', class: 'layui-icon-login-weibo' },
|
||||||
{ name: "密码", class: "layui-icon-password" },
|
{ name: '密码', class: 'layui-icon-password' },
|
||||||
{ name: "用户名", class: "layui-icon-username" },
|
{ name: '用户名', class: 'layui-icon-username' },
|
||||||
{ name: "刷新-粗", class: "layui-icon-refresh-3" },
|
{ name: '刷新-粗', class: 'layui-icon-refresh-3' },
|
||||||
{ name: "授权", class: "layui-icon-auz" },
|
{ name: '授权', class: 'layui-icon-auz' },
|
||||||
{ name: "左向右伸缩菜单", class: "layui-icon-spread-left" },
|
{ name: '左向右伸缩菜单', class: 'layui-icon-spread-left' },
|
||||||
{ name: "右向左伸缩菜单", class: "layui-icon-shrink-right" },
|
{ name: '右向左伸缩菜单', class: 'layui-icon-shrink-right' },
|
||||||
{ name: "雪花", class: "layui-icon-snowflake" },
|
{ name: '雪花', class: 'layui-icon-snowflake' },
|
||||||
{ name: "提示说明", class: "layui-icon-tips" },
|
{ name: '提示说明', class: 'layui-icon-tips' },
|
||||||
{ name: "便签", class: "layui-icon-note" },
|
{ name: '便签', class: 'layui-icon-note' },
|
||||||
{ name: "主页", class: "layui-icon-home" },
|
{ name: '主页', class: 'layui-icon-home' },
|
||||||
{ name: "高级", class: "layui-icon-senior" },
|
{ name: '高级', class: 'layui-icon-senior' },
|
||||||
{ name: "刷新", class: "layui-icon-refresh" },
|
{ name: '刷新', class: 'layui-icon-refresh' },
|
||||||
{ name: "刷新", class: "layui-icon-refresh-1" },
|
{ name: '刷新', class: 'layui-icon-refresh-1' },
|
||||||
{ name: "旗帜", class: "layui-icon-flag" },
|
{ name: '旗帜', class: 'layui-icon-flag' },
|
||||||
{ name: "主题", class: "layui-icon-theme" },
|
{ name: '主题', class: 'layui-icon-theme' },
|
||||||
{ name: "消息-通知", class: "layui-icon-notice" },
|
{ name: '消息-通知', class: 'layui-icon-notice' },
|
||||||
{ name: "网站", class: "layui-icon-website" },
|
{ name: '网站', class: 'layui-icon-website' },
|
||||||
{ name: "控制台", class: "layui-icon-console" },
|
{ name: '控制台', class: 'layui-icon-console' },
|
||||||
{ name: "表情-惊讶", class: "layui-icon-face-surprised" },
|
{ name: '表情-惊讶', class: 'layui-icon-face-surprised' },
|
||||||
{ name: "设置-空心", class: "layui-icon-set" },
|
{ name: '设置-空心', class: 'layui-icon-set' },
|
||||||
{ name: "模板", class: "layui-icon-template-1" },
|
{ name: '模板', class: 'layui-icon-template-1' },
|
||||||
{ name: "应用", class: "layui-icon-app" },
|
{ name: '应用', class: 'layui-icon-app' },
|
||||||
{ name: "模板", class: "layui-icon-template" },
|
{ name: '模板', class: 'layui-icon-template' },
|
||||||
{ name: "赞", class: "layui-icon-praise" },
|
{ name: '赞', class: 'layui-icon-praise' },
|
||||||
{ name: "踩", class: "layui-icon-tread" },
|
{ name: '踩', class: 'layui-icon-tread' },
|
||||||
{ name: "男", class: "layui-icon-male" },
|
{ name: '男', class: 'layui-icon-male' },
|
||||||
{ name: "女", class: "layui-icon-female" },
|
{ name: '女', class: 'layui-icon-female' },
|
||||||
{ name: "相机-空心", class: "layui-icon-camera" },
|
{ name: '相机-空心', class: 'layui-icon-camera' },
|
||||||
{ name: "相机-实心", class: "layui-icon-camera-fill" },
|
{ name: '相机-实心', class: 'layui-icon-camera-fill' },
|
||||||
{ name: "菜单-水平", class: "layui-icon-more" },
|
{ name: '菜单-水平', class: 'layui-icon-more' },
|
||||||
{ name: "菜单-垂直", class: "layui-icon-more-vertical" },
|
{ name: '菜单-垂直', class: 'layui-icon-more-vertical' },
|
||||||
{ name: "金额-人民币", class: "layui-icon-rmb" },
|
{ name: '金额-人民币', class: 'layui-icon-rmb' },
|
||||||
{ name: "金额-美元", class: "layui-icon-dollar" },
|
{ name: '金额-美元', class: 'layui-icon-dollar' },
|
||||||
{ name: "钻石-等级", class: "layui-icon-diamond" },
|
{ name: '钻石-等级', class: 'layui-icon-diamond' },
|
||||||
{ name: "火", class: "layui-icon-fire" },
|
{ name: '火', class: 'layui-icon-fire' },
|
||||||
{ name: "返回", class: "layui-icon-return" },
|
{ name: '返回', class: 'layui-icon-return' },
|
||||||
{ name: "位置-地图", class: "layui-icon-location" },
|
{ name: '位置-地图', class: 'layui-icon-location' },
|
||||||
{ name: "办公-阅读", class: "layui-icon-read" },
|
{ name: '办公-阅读', class: 'layui-icon-read' },
|
||||||
{ name: "调查", class: "layui-icon-survey" },
|
{ name: '调查', class: 'layui-icon-survey' },
|
||||||
{ name: "表情-微笑", class: "layui-icon-face-smile" },
|
{ name: '表情-微笑', class: 'layui-icon-face-smile' },
|
||||||
{ name: "表情-哭泣", class: "layui-icon-face-cry" },
|
{ name: '表情-哭泣', class: 'layui-icon-face-cry' },
|
||||||
{ name: "购物车", class: "layui-icon-cart-simple" },
|
{ name: '购物车', class: 'layui-icon-cart-simple' },
|
||||||
{ name: "购物车", class: "layui-icon-cart" },
|
{ name: '购物车', class: 'layui-icon-cart' },
|
||||||
{ name: "下一页", class: "layui-icon-next" },
|
{ name: '下一页', class: 'layui-icon-next' },
|
||||||
{ name: "上一页", class: "layui-icon-prev" },
|
{ name: '上一页', class: 'layui-icon-prev' },
|
||||||
{ name: "上传-空心-拖拽", class: "layui-icon-upload-drag" },
|
{ name: '上传-空心-拖拽', class: 'layui-icon-upload-drag' },
|
||||||
{ name: "上传-实心", class: "layui-icon-upload" },
|
{ name: '上传-实心', class: 'layui-icon-upload' },
|
||||||
{ name: "下载-圆圈", class: "layui-icon-download-circle" },
|
{ name: '下载-圆圈', class: 'layui-icon-download-circle' },
|
||||||
{ name: "组件", class: "layui-icon-component" },
|
{ name: '组件', class: 'layui-icon-component' },
|
||||||
{ name: "文件-粗", class: "layui-icon-file-b" },
|
{ name: '文件-粗', class: 'layui-icon-file-b' },
|
||||||
{ name: "用户", class: "layui-icon-user" },
|
{ name: '用户', class: 'layui-icon-user' },
|
||||||
{ name: "发现-实心", class: "layui-icon-find-fill" },
|
{ name: '发现-实心', class: 'layui-icon-find-fill' },
|
||||||
{ name: "loading", class: "layui-icon-loading" },
|
{ name: 'loading', class: 'layui-icon-loading' },
|
||||||
{ name: "loading", class: "layui-icon-loading-1" },
|
{ name: 'loading', class: 'layui-icon-loading-1' },
|
||||||
{ name: "添加", class: "layui-icon-add-1" },
|
{ name: '添加', class: 'layui-icon-add-1' },
|
||||||
{ name: "播放", class: "layui-icon-play" },
|
{ name: '播放', class: 'layui-icon-play' },
|
||||||
{ name: "暂停", class: "layui-icon-pause" },
|
{ name: '暂停', class: 'layui-icon-pause' },
|
||||||
{ name: "音频-耳机", class: "layui-icon-headset" },
|
{ name: '音频-耳机', class: 'layui-icon-headset' },
|
||||||
{ name: "视频", class: "layui-icon-video" },
|
{ name: '视频', class: 'layui-icon-video' },
|
||||||
{ name: "语音-声音", class: "layui-icon-voice" },
|
{ name: '语音-声音', class: 'layui-icon-voice' },
|
||||||
{ name: "消息-通知-喇叭", class: "layui-icon-speaker" },
|
{ name: '消息-通知-喇叭', class: 'layui-icon-speaker' },
|
||||||
{ name: "删除线", class: "layui-icon-fonts-del" },
|
{ name: '删除线', class: 'layui-icon-fonts-del' },
|
||||||
{ name: "代码", class: "layui-icon-fonts-code" },
|
{ name: '代码', class: 'layui-icon-fonts-code' },
|
||||||
{ name: "HTML", class: "layui-icon-fonts-html" },
|
{ name: 'HTML', class: 'layui-icon-fonts-html' },
|
||||||
{ name: "字体加粗", class: "layui-icon-fonts-strong" },
|
{ name: '字体加粗', class: 'layui-icon-fonts-strong' },
|
||||||
{ name: "删除链接", class: "layui-icon-unlink" },
|
{ name: '删除链接', class: 'layui-icon-unlink' },
|
||||||
{ name: "图片", class: "layui-icon-picture" },
|
{ name: '图片', class: 'layui-icon-picture' },
|
||||||
{ name: "链接", class: "layui-icon-link" },
|
{ name: '链接', class: 'layui-icon-link' },
|
||||||
{ name: "表情-笑-粗", class: "layui-icon-face-smile-b" },
|
{ name: '表情-笑-粗', class: 'layui-icon-face-smile-b' },
|
||||||
{ name: "左对齐", class: "layui-icon-align-left" },
|
{ name: '左对齐', class: 'layui-icon-align-left' },
|
||||||
{ name: "右对齐", class: "layui-icon-align-right" },
|
{ name: '右对齐', class: 'layui-icon-align-right' },
|
||||||
{ name: "居中对齐", class: "layui-icon-align-center" },
|
{ name: '居中对齐', class: 'layui-icon-align-center' },
|
||||||
{ name: "字体-下划线", class: "layui-icon-fonts-u" },
|
{ name: '字体-下划线', class: 'layui-icon-fonts-u' },
|
||||||
{ name: "字体-斜体", class: "layui-icon-fonts-i" },
|
{ name: '字体-斜体', class: 'layui-icon-fonts-i' },
|
||||||
{ name: "Tabs 选项卡", class: "layui-icon-tabs" },
|
{ name: 'Tabs 选项卡', class: 'layui-icon-tabs' },
|
||||||
{ name: "单选框-选中", class: "layui-icon-radio" },
|
{ name: '单选框-选中', class: 'layui-icon-radio' },
|
||||||
{ name: "单选框-候选", class: "layui-icon-circle" },
|
{ name: '单选框-候选', class: 'layui-icon-circle' },
|
||||||
{ name: "编辑", class: "layui-icon-edit" },
|
{ name: '编辑', class: 'layui-icon-edit' },
|
||||||
{ name: "分享", class: "layui-icon-share" },
|
{ name: '分享', class: 'layui-icon-share' },
|
||||||
{ name: "删除", class: "layui-icon-delete" },
|
{ name: '删除', class: 'layui-icon-delete' },
|
||||||
{ name: "表单", class: "layui-icon-form" },
|
{ name: '表单', class: 'layui-icon-form' },
|
||||||
{ name: "手机-细体", class: "layui-icon-cellphone-fine" },
|
{ name: '手机-细体', class: 'layui-icon-cellphone-fine' },
|
||||||
{ name: "聊天 对话 沟通", class: "layui-icon-dialogue" },
|
{ name: '聊天 对话 沟通', class: 'layui-icon-dialogue' },
|
||||||
{ name: "文字格式化", class: "layui-icon-fonts-clear" },
|
{ name: '文字格式化', class: 'layui-icon-fonts-clear' },
|
||||||
{ name: "窗口", class: "layui-icon-layer" },
|
{ name: '窗口', class: 'layui-icon-layer' },
|
||||||
{ name: "日期", class: "layui-icon-date" },
|
{ name: '日期', class: 'layui-icon-date' },
|
||||||
{ name: "水 下雨", class: "layui-icon-water" },
|
{ name: '水 下雨', class: 'layui-icon-water' },
|
||||||
{ name: "代码-圆圈", class: "layui-icon-code-circle" },
|
{ name: '代码-圆圈', class: 'layui-icon-code-circle' },
|
||||||
{ name: "轮播组图", class: "layui-icon-carousel" },
|
{ name: '轮播组图', class: 'layui-icon-carousel' },
|
||||||
{ name: "翻页", class: "layui-icon-prev-circle" },
|
{ name: '翻页', class: 'layui-icon-prev-circle' },
|
||||||
{ name: "布局", class: "layui-icon-layouts" },
|
{ name: '布局', class: 'layui-icon-layouts' },
|
||||||
{ name: "工具", class: "layui-icon-util" },
|
{ name: '工具', class: 'layui-icon-util' },
|
||||||
{ name: "选择模板", class: "layui-icon-templeate-1" },
|
{ name: '选择模板', class: 'layui-icon-templeate-1' },
|
||||||
{ name: "上传-圆圈", class: "layui-icon-upload-circle" },
|
{ name: '上传-圆圈', class: 'layui-icon-upload-circle' },
|
||||||
{ name: "树", class: "layui-icon-tree" },
|
{ name: '树', class: 'layui-icon-tree' },
|
||||||
{ name: "表格", class: "layui-icon-table" },
|
{ name: '表格', class: 'layui-icon-table' },
|
||||||
{ name: "图表", class: "layui-icon-chart" },
|
{ name: '图表', class: 'layui-icon-chart' },
|
||||||
{ name: "图标 报表 屏幕", class: "layui-icon-chart-screen" },
|
{ name: '图标 报表 屏幕', class: 'layui-icon-chart-screen' },
|
||||||
{ name: "引擎", class: "layui-icon-engine" },
|
{ name: '引擎', class: 'layui-icon-engine' },
|
||||||
{ name: "下三角", class: "layui-icon-triangle-d" },
|
{ name: '下三角', class: 'layui-icon-triangle-d' },
|
||||||
{ name: "右三角", class: "layui-icon-triangle-r" },
|
{ name: '右三角', class: 'layui-icon-triangle-r' },
|
||||||
{ name: "文件", class: "layui-icon-file" },
|
{ name: '文件', class: 'layui-icon-file' },
|
||||||
{ name: "设置-小型", class: "layui-icon-set-sm" },
|
{ name: '设置-小型', class: 'layui-icon-set-sm' },
|
||||||
{ name: "减少-圆圈", class: "layui-icon-reduce-circle" },
|
{ name: '减少-圆圈', class: 'layui-icon-reduce-circle' },
|
||||||
{ name: "添加-圆圈", class: "layui-icon-add-circle" },
|
{ name: '添加-圆圈', class: 'layui-icon-add-circle' },
|
||||||
{ name: "404", class: "layui-icon-404" },
|
{ name: '404', class: 'layui-icon-404' },
|
||||||
{ name: "关于", class: "layui-icon-about" },
|
{ name: '关于', class: 'layui-icon-about' },
|
||||||
{ name: "箭头 向上", class: "layui-icon-up" },
|
{ name: '箭头 向上', class: 'layui-icon-up' },
|
||||||
{ name: "箭头 向下", class: "layui-icon-down" },
|
{ name: '箭头 向下', class: 'layui-icon-down' },
|
||||||
{ name: "箭头 向左", class: "layui-icon-left" },
|
{ name: '箭头 向左', class: 'layui-icon-left' },
|
||||||
{ name: "箭头 向右", class: "layui-icon-right" },
|
{ name: '箭头 向右', class: 'layui-icon-right' },
|
||||||
{ name: "圆点", class: "layui-icon-circle-dot" },
|
{ name: '圆点', class: 'layui-icon-circle-dot' },
|
||||||
{ name: "搜索", class: "layui-icon-search" },
|
{ name: '搜索', class: 'layui-icon-search' },
|
||||||
{ name: "设置-实心", class: "layui-icon-set-fill" },
|
{ name: '设置-实心', class: 'layui-icon-set-fill' },
|
||||||
{ name: "群组", class: "layui-icon-group" },
|
{ name: '群组', class: 'layui-icon-group' },
|
||||||
{ name: "好友", class: "layui-icon-friends" },
|
{ name: '好友', class: 'layui-icon-friends' },
|
||||||
{ name: "回复 评论 实心", class: "layui-icon-reply-fill" },
|
{ name: '回复 评论 实心', class: 'layui-icon-reply-fill' },
|
||||||
{ name: "菜单 隐身 实心", class: "layui-icon-menu-fill" },
|
{ name: '菜单 隐身 实心', class: 'layui-icon-menu-fill' },
|
||||||
{ name: "记录", class: "layui-icon-log" },
|
{ name: '记录', class: 'layui-icon-log' },
|
||||||
{ name: "图片-细体", class: "layui-icon-picture-fine" },
|
{ name: '图片-细体', class: 'layui-icon-picture-fine' },
|
||||||
{ name: "表情-笑-细体", class: "layui-icon-face-smile-fine" },
|
{ name: '表情-笑-细体', class: 'layui-icon-face-smile-fine' },
|
||||||
{ name: "列表", class: "layui-icon-list" },
|
{ name: '列表', class: 'layui-icon-list' },
|
||||||
{ name: "发布 纸飞机", class: "layui-icon-release" },
|
{ name: '发布 纸飞机', class: 'layui-icon-release' },
|
||||||
{ name: "对 OK", class: "layui-icon-ok" },
|
{ name: '对 OK', class: 'layui-icon-ok' },
|
||||||
{ name: "帮助", class: "layui-icon-help" },
|
{ name: '帮助', class: 'layui-icon-help' },
|
||||||
{ name: "客服", class: "layui-icon-chat" },
|
{ name: '客服', class: 'layui-icon-chat' },
|
||||||
{ name: "top 置顶", class: "layui-icon-top" },
|
{ name: 'top 置顶', class: 'layui-icon-top' },
|
||||||
{ name: "收藏-空心", class: "layui-icon-star" },
|
{ name: '收藏-空心', class: 'layui-icon-star' },
|
||||||
{ name: "收藏-实心", class: "layui-icon-star-fill" },
|
{ name: '收藏-实心', class: 'layui-icon-star-fill' },
|
||||||
{ name: "关闭-实心", class: "layui-icon-close-fill" },
|
{ name: '关闭-实心', class: 'layui-icon-close-fill' },
|
||||||
{ name: "关闭-空心", class: "layui-icon-close" },
|
{ name: '关闭-空心', class: 'layui-icon-close' },
|
||||||
{ name: "正确", class: "layui-icon-ok-circle" },
|
{ name: '正确', class: 'layui-icon-ok-circle' },
|
||||||
{ name: "添加-圆圈-细体", class: "layui-icon-add-circle-fine" },
|
{ name: '添加-圆圈-细体', class: 'layui-icon-add-circle-fine' },
|
||||||
]
|
]
|
||||||
@ -1,14 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-row" :class="[space?'layui-col-space'+space:'']">
|
<div class="layui-row" :class="[space ? 'layui-col-space' + space : '']">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayRow" lang="ts">
|
<script setup name="LayRow" lang="ts">
|
||||||
import { defineProps } from 'vue'
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
space?: string
|
space?: string
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,7 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-side-scroll"></div>
|
<div class="layui-side-scroll" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayScroll" lang="ts">
|
<script setup name="LayScroll" lang="ts"></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -1,7 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<select :name="name" lay-verify="required">
|
<select :name="name" lay-verify="required" />
|
||||||
</select>
|
<div
|
||||||
<div class="layui-unselect layui-form-select" @click="open" :class="[openState?'layui-form-selected':'']">
|
class="layui-unselect layui-form-select"
|
||||||
|
:class="[openState ? 'layui-form-selected' : '']"
|
||||||
|
@click="open"
|
||||||
|
>
|
||||||
<div class="layui-select-title">
|
<div class="layui-select-title">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
@ -9,11 +12,11 @@
|
|||||||
:value="selectItem.label"
|
:value="selectItem.label"
|
||||||
readonly=""
|
readonly=""
|
||||||
class="layui-input layui-unselect"
|
class="layui-input layui-unselect"
|
||||||
/><i class="layui-edge"></i>
|
/><i class="layui-edge" />
|
||||||
</div>
|
</div>
|
||||||
<dl class="layui-anim layui-anim-upbit" style="">
|
<dl class="layui-anim layui-anim-upbit" style="">
|
||||||
<dd lay-value="" @click="clean" class="layui-select-tips">请选择</dd>
|
<dd lay-value="" class="layui-select-tips" @click="clean">请选择</dd>
|
||||||
<slot></slot>
|
<slot />
|
||||||
</dl>
|
</dl>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -21,32 +24,30 @@
|
|||||||
<script setup name="LaySelect" lang="ts">
|
<script setup name="LaySelect" lang="ts">
|
||||||
import { defineProps, provide, reactive, ref, watch } from 'vue'
|
import { defineProps, provide, reactive, ref, watch } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
modelValue?: string
|
modelValue?: string
|
||||||
name?: string
|
name?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const openState = ref(false)
|
const openState = ref(false)
|
||||||
|
|
||||||
const open = function() {
|
const open = function () {
|
||||||
openState.value = !openState.value
|
openState.value = !openState.value
|
||||||
}
|
}
|
||||||
|
|
||||||
const selectItem = reactive({label:"",value:props.modelValue});
|
const selectItem = reactive({ label: '', value: props.modelValue })
|
||||||
|
|
||||||
provide("selectItem",selectItem);
|
provide('selectItem', selectItem)
|
||||||
|
|
||||||
// select update 时, 通知 change 事件
|
// select update 时, 通知 change 事件
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
watch(selectItem, function(item) {
|
watch(selectItem, function (item) {
|
||||||
emit('update:modelValue', item.value)
|
emit('update:modelValue', item.value)
|
||||||
})
|
})
|
||||||
|
|
||||||
const clean = function() {
|
const clean = function () {
|
||||||
selectItem.value = "";
|
selectItem.value = ''
|
||||||
selectItem.label = "";
|
selectItem.label = ''
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,6 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<dd :value="value" @click="selectHandle" :class="[selectItem.value === value?'layui-this':'']">
|
<dd
|
||||||
{{label}}
|
:value="value"
|
||||||
|
:class="[selectItem.value === value ? 'layui-this' : '']"
|
||||||
|
@click="selectHandle"
|
||||||
|
>
|
||||||
|
{{ label }}
|
||||||
</dd>
|
</dd>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -8,24 +12,22 @@
|
|||||||
import { SelectItem } from '../type'
|
import { SelectItem } from '../type'
|
||||||
import { defineProps, inject } from 'vue'
|
import { defineProps, inject } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
value?: string
|
value?: string
|
||||||
label?: string
|
label?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const selectItem = inject("selectItem") as SelectItem
|
const selectItem = inject('selectItem') as SelectItem
|
||||||
|
|
||||||
const selectHandle = function(){
|
const selectHandle = function () {
|
||||||
selectItem.value = props.value
|
selectItem.value = props.value
|
||||||
selectItem.label = props.label
|
selectItem.label = props.label
|
||||||
}
|
}
|
||||||
|
|
||||||
// init selected
|
// init selected
|
||||||
|
|
||||||
if(selectItem.value === props.value) {
|
if (selectItem.value === props.value) {
|
||||||
selectItem.value = props.value
|
selectItem.value = props.value
|
||||||
selectItem.label = props.label
|
selectItem.label = props.label
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-side" :class="black?'layui-bg-black':''">
|
<div class="layui-side" :class="black ? 'layui-bg-black' : ''">
|
||||||
<div class="layui-side-scroll">
|
<div class="layui-side-scroll">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -9,8 +9,7 @@
|
|||||||
<script setup name="LaySide" lang="ts">
|
<script setup name="LaySide" lang="ts">
|
||||||
import { defineProps } from 'vue'
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
black?: boolean
|
black?: boolean
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,33 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<span @click="handleClick">
|
<span @click="handleClick">
|
||||||
<div class="layui-unselect layui-form-switch"
|
<div
|
||||||
|
class="layui-unselect layui-form-switch"
|
||||||
:class="{
|
:class="{
|
||||||
'layui-form-onswitch': modelValue == true,
|
'layui-form-onswitch': modelValue == true,
|
||||||
'layui-checkbox-disbaled layui-disabled': disabled
|
'layui-checkbox-disbaled layui-disabled': disabled,
|
||||||
}">
|
}"
|
||||||
<em>{{modelValue == true ? "启用" : "禁用"}}</em>
|
>
|
||||||
<i></i>
|
<em>{{ modelValue == true ? '启用' : '禁用' }}</em>
|
||||||
|
<i />
|
||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LaySwitch" lang="ts">
|
<script setup name="LaySwitch" lang="ts">
|
||||||
import { defineProps, defineEmits } from 'vue'
|
import { defineProps, defineEmits } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
modelValue: boolean
|
modelValue: boolean
|
||||||
disabled?: boolean
|
disabled?: boolean
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
const handleClick = function() {
|
const handleClick = function () {
|
||||||
if(props.disabled) {
|
if (props.disabled) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
emit('update:modelValue',!props.modelValue)
|
emit('update:modelValue', !props.modelValue)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -2,16 +2,16 @@
|
|||||||
<div class="layui-tab" :class="[type ? 'layui-tab-' + type : '']">
|
<div class="layui-tab" :class="[type ? 'layui-tab-' + type : '']">
|
||||||
<ul class="layui-tab-title">
|
<ul class="layui-tab-title">
|
||||||
<li
|
<li
|
||||||
@click="change(ss.props.id)"
|
|
||||||
v-for="ss in slots"
|
v-for="ss in slots"
|
||||||
:key="ss"
|
:key="ss"
|
||||||
:class="[ss.props.id === modelValue ? 'layui-this' : '']"
|
:class="[ss.props.id === modelValue ? 'layui-this' : '']"
|
||||||
|
@click="change(ss.props.id)"
|
||||||
>
|
>
|
||||||
{{ ss.props.title }}
|
{{ ss.props.title }}
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div class="layui-tab-content">
|
<div class="layui-tab-content">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -22,11 +22,10 @@ import { defineProps, inject, provide, ref, useSlots } from 'vue'
|
|||||||
const slot = useSlots() as any
|
const slot = useSlots() as any
|
||||||
const slots = slot.default && slot.default()
|
const slots = slot.default && slot.default()
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
type?: string
|
type?: string
|
||||||
modelValue?: string
|
modelValue?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
// select update 时, 通知 change 事件
|
// select update 时, 通知 change 事件
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
@ -38,5 +37,5 @@ const change = function (id: any) {
|
|||||||
active.value = id
|
active.value = id
|
||||||
}
|
}
|
||||||
|
|
||||||
provide("active",active)
|
provide('active', active)
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,16 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layui-tab-item" :class="[active === id?'layui-show':'']">
|
<div class="layui-tab-item" :class="[active === id ? 'layui-show' : '']">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayTabItem" lang="ts">
|
<script setup name="LayTabItem" lang="ts">
|
||||||
import { defineProps, inject, useSlots } from 'vue'
|
import { defineProps, inject, useSlots } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
id?: string
|
id?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const active = inject("active")
|
const active = inject('active')
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,24 +1,24 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<table class="layui-hide" id="test" lay-filter="test"></table>
|
<table id="test" class="layui-hide" lay-filter="test" />
|
||||||
<div
|
<div
|
||||||
class="layui-form layui-border-box layui-table-view layui-table-view-1"
|
class="layui-form layui-border-box layui-table-view layui-table-view-1"
|
||||||
>
|
>
|
||||||
<div class="layui-table-tool" v-if="defaultToolbar || slot.toolbar">
|
<div v-if="defaultToolbar || slot.toolbar" class="layui-table-tool">
|
||||||
<div class="layui-table-tool-temp">
|
<div class="layui-table-tool-temp">
|
||||||
<div class="layui-btn-container">
|
<div class="layui-btn-container">
|
||||||
<slot name="toolbar"></slot>
|
<slot name="toolbar" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-table-tool-self" v-if="defaultToolbar">
|
<div v-if="defaultToolbar" class="layui-table-tool-self">
|
||||||
<div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS">
|
<div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS">
|
||||||
<i class="layui-icon layui-icon-cols"></i>
|
<i class="layui-icon layui-icon-cols" />
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT">
|
<div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT">
|
||||||
<i class="layui-icon layui-icon-export"></i>
|
<i class="layui-icon layui-icon-export" />
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT">
|
<div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT">
|
||||||
<i class="layui-icon layui-icon-print"></i>
|
<i class="layui-icon layui-icon-print" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -27,13 +27,13 @@
|
|||||||
<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
|
<table cellspacing="0" cellpadding="0" border="0" class="layui-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="layui-table-col-special" v-if="checkbox">
|
<th v-if="checkbox" class="layui-table-col-special">
|
||||||
<div class="layui-table-cell laytable-cell-checkbox">
|
<div class="layui-table-cell laytable-cell-checkbox">
|
||||||
<lay-checkbox
|
<lay-checkbox
|
||||||
skin="primary"
|
|
||||||
v-model="allSelectedKeys"
|
v-model="allSelectedKeys"
|
||||||
|
skin="primary"
|
||||||
label="all"
|
label="all"
|
||||||
></lay-checkbox>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</th>
|
</th>
|
||||||
<th v-for="column in columns" :key="column">
|
<th v-for="column in columns" :key="column">
|
||||||
@ -53,13 +53,13 @@
|
|||||||
<tbody>
|
<tbody>
|
||||||
<template v-for="data in dataSource" :key="data">
|
<template v-for="data in dataSource" :key="data">
|
||||||
<tr>
|
<tr>
|
||||||
<td class="layui-table-col-special" v-if="checkbox">
|
<td v-if="checkbox" class="layui-table-col-special">
|
||||||
<div class="layui-table-cell laytable-cell-checkbox">
|
<div class="layui-table-cell laytable-cell-checkbox">
|
||||||
<lay-checkbox
|
<lay-checkbox
|
||||||
skin="primary"
|
|
||||||
v-model="tableSelectedKeys"
|
v-model="tableSelectedKeys"
|
||||||
|
skin="primary"
|
||||||
:label="data[id]"
|
:label="data[id]"
|
||||||
></lay-checkbox>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
@ -70,14 +70,14 @@
|
|||||||
:style="{ width: column.width }"
|
:style="{ width: column.width }"
|
||||||
style="padding: 0px 16px"
|
style="padding: 0px 16px"
|
||||||
>
|
>
|
||||||
<slot :name="column.customSlot" :data="data"></slot>
|
<slot :name="column.customSlot" :data="data" />
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template
|
<template
|
||||||
v-else
|
|
||||||
v-for="(value, key, index) in data"
|
v-for="(value, key, index) in data"
|
||||||
|
v-else
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
<td v-if="column.key == key">
|
<td v-if="column.key == key">
|
||||||
@ -86,7 +86,7 @@
|
|||||||
style="padding: 0px 16px"
|
style="padding: 0px 16px"
|
||||||
>
|
>
|
||||||
<span v-if="column.slot">
|
<span v-if="column.slot">
|
||||||
<slot :name="column.slot" :data="data"></slot>
|
<slot :name="column.slot" :data="data" />
|
||||||
</span>
|
</span>
|
||||||
<span v-else> {{ value }} </span>
|
<span v-else> {{ value }} </span>
|
||||||
</div>
|
</div>
|
||||||
@ -103,11 +103,11 @@
|
|||||||
<lay-page
|
<lay-page
|
||||||
:total="page.total"
|
:total="page.total"
|
||||||
:limit="page.limit"
|
:limit="page.limit"
|
||||||
|
show-page
|
||||||
|
show-limit
|
||||||
|
show-skip
|
||||||
@jump="change"
|
@jump="change"
|
||||||
showPage
|
/>
|
||||||
showLimit
|
|
||||||
showSkip
|
|
||||||
></lay-page>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -122,17 +122,18 @@ import {
|
|||||||
defineEmits,
|
defineEmits,
|
||||||
computed,
|
computed,
|
||||||
} from 'vue'
|
} from 'vue'
|
||||||
|
import { Recordable } from '/@src/module/type'
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
id?: string
|
id?: string
|
||||||
skin?: string
|
skin?: string
|
||||||
page?: Object
|
page?: Recordable
|
||||||
checkbox?: Boolean
|
checkbox?: boolean
|
||||||
columns?: Object[]
|
columns?: Recordable[]
|
||||||
dataSource: Object[]
|
dataSource: Recordable[]
|
||||||
defaultToolbar?: Boolean
|
defaultToolbar?: boolean
|
||||||
selectedKeys: Array<String>
|
selectedKeys: Array<string>
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
id: 'id',
|
id: 'id',
|
||||||
@ -150,13 +151,15 @@ const tableSelectedKeys = ref(props.selectedKeys)
|
|||||||
|
|
||||||
watch(
|
watch(
|
||||||
allSelectedKeys,
|
allSelectedKeys,
|
||||||
function (val: String[]) {
|
function (val: string[]) {
|
||||||
const ids = props.dataSource.map((item: any) => {
|
const ids = props.dataSource.map((item: any) => {
|
||||||
return item[props.id]
|
return item[props.id]
|
||||||
})
|
})
|
||||||
tableSelectedKeys.value.splice(0, ids.length)
|
tableSelectedKeys.value.splice(0, ids.length)
|
||||||
if (val.includes('all')) {
|
if (val.includes('all')) {
|
||||||
ids.forEach(id => { tableSelectedKeys.value.push(id) })
|
ids.forEach((id) => {
|
||||||
|
tableSelectedKeys.value.push(id)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ deep: true }
|
{ deep: true }
|
||||||
|
|||||||
@ -1,21 +1,25 @@
|
|||||||
<template>
|
<template>
|
||||||
<textarea :value="modelValue" :placeholder="placeholder" :name="name" class="layui-textarea" @input="updateValue"></textarea>
|
<textarea
|
||||||
|
:value="modelValue"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:name="name"
|
||||||
|
class="layui-textarea"
|
||||||
|
@input="updateValue"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayTextarea" lang="ts">
|
<script setup name="LayTextarea" lang="ts">
|
||||||
import { defineProps, defineEmits } from 'vue'
|
import { defineProps, defineEmits } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
name?: string
|
name?: string
|
||||||
modelValue?: string
|
modelValue?: string
|
||||||
placeholder?: string
|
placeholder?: string
|
||||||
}>()
|
}>()
|
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
const updateValue = function(event: InputEvent) {
|
const updateValue = function (event: InputEvent) {
|
||||||
emit('update:modelValue', (event.target as HTMLInputElement).value)
|
emit('update:modelValue', (event.target as HTMLInputElement).value)
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,9 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<ul class="layui-timeline">
|
<ul class="layui-timeline">
|
||||||
<slot></slot>
|
<slot />
|
||||||
</ul>
|
</ul>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup name="LayTimeline" lang="ts">
|
<script setup name="LayTimeline" lang="ts"></script>
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|||||||
@ -8,7 +8,7 @@
|
|||||||
<h3 v-else class="layui-timeline-title">
|
<h3 v-else class="layui-timeline-title">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</h3>
|
</h3>
|
||||||
<slot></slot>
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
@ -16,9 +16,8 @@
|
|||||||
<script setup name="LayTimelineItem" lang="ts">
|
<script setup name="LayTimelineItem" lang="ts">
|
||||||
import { defineProps } from 'vue'
|
import { defineProps } from 'vue'
|
||||||
|
|
||||||
const props =
|
const props = defineProps<{
|
||||||
defineProps<{
|
|
||||||
title: string
|
title: string
|
||||||
simple?: boolean
|
simple?: boolean
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -4,9 +4,9 @@
|
|||||||
<div class="layui-transfer-box" style="width: 200px; height: 360px">
|
<div class="layui-transfer-box" style="width: 200px; height: 360px">
|
||||||
<div class="layui-transfer-header">
|
<div class="layui-transfer-header">
|
||||||
<lay-checkbox
|
<lay-checkbox
|
||||||
|
v-model="allLeftSelectedKeys"
|
||||||
skin="primary"
|
skin="primary"
|
||||||
label="all"
|
label="all"
|
||||||
v-model="allLeftSelectedKeys"
|
|
||||||
>
|
>
|
||||||
<span>列表一</span>
|
<span>列表一</span>
|
||||||
</lay-checkbox>
|
</lay-checkbox>
|
||||||
@ -17,8 +17,9 @@
|
|||||||
v-model="leftSelectedKeys"
|
v-model="leftSelectedKeys"
|
||||||
skin="primary"
|
skin="primary"
|
||||||
:label="dataSource[id]"
|
:label="dataSource[id]"
|
||||||
><span>{{ dataSource.title }}</span></lay-checkbox
|
|
||||||
>
|
>
|
||||||
|
<span>{{ dataSource.title }}</span>
|
||||||
|
</lay-checkbox>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -28,21 +29,21 @@
|
|||||||
class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled"
|
class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled"
|
||||||
data-index="0"
|
data-index="0"
|
||||||
>
|
>
|
||||||
<i class="layui-icon layui-icon-next"></i></button
|
<i class="layui-icon layui-icon-next" /></button
|
||||||
><button
|
><button
|
||||||
type="button"
|
type="button"
|
||||||
class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled"
|
class="layui-btn layui-btn-sm layui-btn-primary layui-btn-disabled"
|
||||||
data-index="1"
|
data-index="1"
|
||||||
>
|
>
|
||||||
<i class="layui-icon layui-icon-prev"></i>
|
<i class="layui-icon layui-icon-prev" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-transfer-box" style="width: 200px; height: 360px">
|
<div class="layui-transfer-box" style="width: 200px; height: 360px">
|
||||||
<div class="layui-transfer-header">
|
<div class="layui-transfer-header">
|
||||||
<lay-checkbox
|
<lay-checkbox
|
||||||
|
v-model="allRightSelectedKeys"
|
||||||
skin="primary"
|
skin="primary"
|
||||||
label="all"
|
label="all"
|
||||||
v-model="allRightSelectedKeys"
|
|
||||||
>
|
>
|
||||||
<span>列表二</span>
|
<span>列表二</span>
|
||||||
</lay-checkbox>
|
</lay-checkbox>
|
||||||
@ -53,8 +54,9 @@
|
|||||||
v-model="rightSelectedKeys"
|
v-model="rightSelectedKeys"
|
||||||
skin="primary"
|
skin="primary"
|
||||||
:label="dataSource[id]"
|
:label="dataSource[id]"
|
||||||
><span>{{ dataSource.title }}</span></lay-checkbox
|
|
||||||
>
|
>
|
||||||
|
<span>{{ dataSource.title }}</span>
|
||||||
|
</lay-checkbox>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -64,12 +66,13 @@
|
|||||||
<script setup name="LayTransfer"></script>
|
<script setup name="LayTransfer"></script>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { defineProps, ref } from 'vue'
|
import { defineProps, ref } from 'vue'
|
||||||
|
import { Recordable } from '/@src/module/type'
|
||||||
|
|
||||||
const props = withDefaults(
|
const props = withDefaults(
|
||||||
defineProps<{
|
defineProps<{
|
||||||
id?: string
|
id?: string
|
||||||
dataSource: Object[]
|
dataSource: Recordable[]
|
||||||
selectedKeys: Array<String>
|
selectedKeys: Array<string>
|
||||||
}>(),
|
}>(),
|
||||||
{
|
{
|
||||||
id: 'id',
|
id: 'id',
|
||||||
|
|||||||
@ -7,7 +7,7 @@ export default {
|
|||||||
import LayIcon from '../icon'
|
import LayIcon from '../icon'
|
||||||
import { TreeNode } from '/@src/module/tree/tree.type'
|
import { TreeNode } from '/@src/module/tree/tree.type'
|
||||||
|
|
||||||
interface TreeEntityProps{
|
interface TreeEntityProps {
|
||||||
node: TreeNode
|
node: TreeNode
|
||||||
onlyIconControl: boolean
|
onlyIconControl: boolean
|
||||||
}
|
}
|
||||||
@ -26,13 +26,14 @@ const emit = defineEmits<EmitEvent>()
|
|||||||
const renderLineShort = (node: TreeNode): boolean => {
|
const renderLineShort = (node: TreeNode): boolean => {
|
||||||
return (
|
return (
|
||||||
// 没有下一个节点
|
// 没有下一个节点
|
||||||
node._nextSibling === null &&
|
(node._nextSibling === null &&
|
||||||
node._parentNode &&
|
node._parentNode &&
|
||||||
// 外层最后一个
|
// 外层最后一个
|
||||||
(node._parentNode._nextSibling === null ||
|
(node._parentNode._nextSibling === null ||
|
||||||
//上一层父级有延伸线
|
//上一层父级有延伸线
|
||||||
(node._parentNode._nextSibling && !node._parentNode._nextSibling.children))
|
(node._parentNode._nextSibling &&
|
||||||
) as boolean
|
!node._parentNode._nextSibling.children))) as boolean
|
||||||
|
)
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* 展开收起 icon样式
|
* 展开收起 icon样式
|
||||||
@ -46,7 +47,7 @@ const nodeIconType = (node: TreeNode): string => {
|
|||||||
* 发射至外层
|
* 发射至外层
|
||||||
* @param node
|
* @param node
|
||||||
*/
|
*/
|
||||||
function handleNodeClick (node: TreeNode) {
|
function handleNodeClick(node: TreeNode) {
|
||||||
emit('node-click', node)
|
emit('node-click', node)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -54,10 +55,9 @@ function handleNodeClick (node: TreeNode) {
|
|||||||
* 递归事件
|
* 递归事件
|
||||||
* @param node
|
* @param node
|
||||||
*/
|
*/
|
||||||
function innerClick (node: TreeNode) {
|
function innerClick(node: TreeNode) {
|
||||||
emit('node-click', node)
|
emit('node-click', node)
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<template v-if="node.children && node.children.length > 0">
|
<template v-if="node.children && node.children.length > 0">
|
||||||
@ -69,25 +69,31 @@ function innerClick (node: TreeNode) {
|
|||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div class="layui-tree-entry">
|
<div class="layui-tree-entry">
|
||||||
<div class="layui-tree-main" @click.prevent.stop="!onlyIconControl && handleNodeClick(node)">
|
<div
|
||||||
|
class="layui-tree-main"
|
||||||
|
@click.prevent.stop="!onlyIconControl && handleNodeClick(node)"
|
||||||
|
>
|
||||||
<span class="layui-tree-iconClick layui-tree-icon">
|
<span class="layui-tree-iconClick layui-tree-icon">
|
||||||
<LayIcon :type="nodeIconType(node)" @click.prevent.stop="handleNodeClick(node)"></LayIcon>
|
<LayIcon
|
||||||
|
:type="nodeIconType(node)"
|
||||||
|
@click.prevent.stop="handleNodeClick(node)"
|
||||||
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span class="layui-tree-txt">{{ node.title }}</span>
|
<span class="layui-tree-txt">{{ node.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
v-show="node.spread"
|
||||||
class="layui-tree-pack layui-tree-showLine"
|
class="layui-tree-pack layui-tree-showLine"
|
||||||
style="display: block"
|
style="display: block"
|
||||||
v-show="node.spread"
|
|
||||||
>
|
>
|
||||||
<LayTreeEntity
|
<LayTreeEntity
|
||||||
v-for="(item, index) in node.children"
|
v-for="(item, index) in node.children"
|
||||||
:key="index"
|
:key="index"
|
||||||
:node="item"
|
:node="item"
|
||||||
|
:only-icon-control="onlyIconControl"
|
||||||
@node-click="innerClick"
|
@node-click="innerClick"
|
||||||
:onlyIconControl="onlyIconControl"
|
/>
|
||||||
></LayTreeEntity>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -99,9 +105,15 @@ function innerClick (node: TreeNode) {
|
|||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<div class="layui-tree-entry">
|
<div class="layui-tree-entry">
|
||||||
<div class="layui-tree-main" @click.prevent.stop="!onlyIconControl && handleNodeClick(node)">
|
<div
|
||||||
|
class="layui-tree-main"
|
||||||
|
@click.prevent.stop="!onlyIconControl && handleNodeClick(node)"
|
||||||
|
>
|
||||||
<span class="layui-tree-iconClick">
|
<span class="layui-tree-iconClick">
|
||||||
<LayIcon type="layui-icon-file" @click.prevent.stop="handleNodeClick(node)"></LayIcon>
|
<LayIcon
|
||||||
|
type="layui-icon-file"
|
||||||
|
@click.prevent.stop="handleNodeClick(node)"
|
||||||
|
/>
|
||||||
</span>
|
</span>
|
||||||
<span class="layui-tree-txt">{{ node.title }}</span>
|
<span class="layui-tree-txt">{{ node.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -30,39 +30,43 @@ interface TreeData {
|
|||||||
* 点击节点弹出新窗口对应的 url。需开启 isJump 参数
|
* 点击节点弹出新窗口对应的 url。需开启 isJump 参数
|
||||||
* 废弃，通过 on-click事件用户控制
|
* 废弃，通过 on-click事件用户控制
|
||||||
*/
|
*/
|
||||||
href: string | URL
|
href?: string | URL
|
||||||
/**
|
/**
|
||||||
* 节点是否初始展开，默认 false
|
* 节点是否初始展开，默认 false
|
||||||
* 废弃：设置 v-model:spreadKeys
|
* 废弃：设置 v-model:spreadKeys
|
||||||
*/
|
*/
|
||||||
spread: boolean
|
spread?: boolean
|
||||||
/**
|
/**
|
||||||
* 节点是否初始为选中状态（如果开启复选框的话），默认 false
|
* 节点是否初始为选中状态（如果开启复选框的话），默认 false
|
||||||
* 废弃：设置 v-model:checkedKeys
|
* 废弃：设置 v-model:checkedKeys
|
||||||
*/
|
*/
|
||||||
checked: boolean
|
checked?: boolean
|
||||||
/**
|
/**
|
||||||
* 节点是否为禁用状态。默认 false
|
* 节点是否为禁用状态。默认 false
|
||||||
*/
|
*/
|
||||||
disabled: boolean
|
disabled?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export declare interface TreeProps {
|
interface TreeProps {
|
||||||
/**
|
/**
|
||||||
* 指定唯一的id
|
* 指定唯一的id
|
||||||
*/
|
*/
|
||||||
|
// eslint-disable-next-line vue/require-default-prop
|
||||||
key?: string
|
key?: string
|
||||||
/**
|
/**
|
||||||
* 选中的节点
|
* 选中的节点
|
||||||
*/
|
*/
|
||||||
|
// eslint-disable-next-line vue/require-default-prop
|
||||||
checkedKeys?: (string | number)[]
|
checkedKeys?: (string | number)[]
|
||||||
/**
|
/**
|
||||||
* 展开的节点
|
* 展开的节点
|
||||||
*/
|
*/
|
||||||
|
// eslint-disable-next-line vue/require-default-prop
|
||||||
spreadKeys?: (string | number)[]
|
spreadKeys?: (string | number)[]
|
||||||
/**
|
/**
|
||||||
* 数据源
|
* 数据源
|
||||||
*/
|
*/
|
||||||
|
// eslint-disable-next-line vue/require-default-prop
|
||||||
data?: TreeData[]
|
data?: TreeData[]
|
||||||
/**
|
/**
|
||||||
* 是否显示复选框 默认 false
|
* 是否显示复选框 默认 false
|
||||||
@ -95,6 +99,7 @@ export declare interface TreeProps {
|
|||||||
/**
|
/**
|
||||||
* 自定义各类默认文本，目前支持以下设定：
|
* 自定义各类默认文本，目前支持以下设定：
|
||||||
*/
|
*/
|
||||||
|
// eslint-disable-next-line vue/require-default-prop
|
||||||
text?: {
|
text?: {
|
||||||
/**
|
/**
|
||||||
* 节点默认名称
|
* 节点默认名称
|
||||||
@ -107,7 +112,6 @@ export declare interface TreeProps {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
interface EmitData {
|
interface EmitData {
|
||||||
/**
|
/**
|
||||||
* 当前点击的节点数据
|
* 当前点击的节点数据
|
||||||
@ -158,18 +162,16 @@ const props = withDefaults(defineProps<TreeProps>(), {
|
|||||||
|
|
||||||
const emit = defineEmits<TreeEmits>()
|
const emit = defineEmits<TreeEmits>()
|
||||||
|
|
||||||
const {
|
const { innerTreeData, updateInnerTreeData, treeWrapperClass } = useTreeData(
|
||||||
innerTreeData,
|
props,
|
||||||
updateInnerTreeData,
|
emit
|
||||||
treeWrapperClass
|
)
|
||||||
} = useTreeData(props, emit)
|
|
||||||
|
|
||||||
function handleNodeClick(node: TreeNode) {
|
function handleNodeClick(node: TreeNode) {
|
||||||
updateInnerTreeData(innerTreeData.value, node)
|
updateInnerTreeData(innerTreeData.value, node)
|
||||||
const emitNode = getEmitNode(props.data!, node)
|
const emitNode = getEmitNode(props.data!, node)
|
||||||
emit('node-click', { data: emitNode! })
|
emit('node-click', { data: emitNode! })
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
@ -179,12 +181,12 @@ export default {
|
|||||||
<template>
|
<template>
|
||||||
<div :class="treeWrapperClass">
|
<div :class="treeWrapperClass">
|
||||||
<TreeEntity
|
<TreeEntity
|
||||||
v-for="(node) in innerTreeData"
|
v-for="(node, index) in innerTreeData"
|
||||||
:key="node.id"
|
:key="node.id || index"
|
||||||
:node="node"
|
:node="node"
|
||||||
:onlyIconControl="onlyIconControl"
|
:only-icon-control="onlyIconControl"
|
||||||
@node-click="handleNodeClick"
|
@node-click="handleNodeClick"
|
||||||
></TreeEntity>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|||||||
@ -3,7 +3,14 @@
|
|||||||
* @see https://github.com/vuejs/vue-next/issues/4294
|
* @see https://github.com/vuejs/vue-next/issues/4294
|
||||||
* 暂时 在index.vue内部单独实现一份
|
* 暂时 在index.vue内部单独实现一份
|
||||||
*/
|
*/
|
||||||
import { ComputedRef, CSSProperties, Ref, UnwrapRef, VNode, VNodeChild, WritableComputedRef } from 'vue'
|
import {
|
||||||
|
ComputedRef,
|
||||||
|
Ref,
|
||||||
|
UnwrapRef,
|
||||||
|
VNode,
|
||||||
|
VNodeChild,
|
||||||
|
WritableComputedRef,
|
||||||
|
} from 'vue'
|
||||||
import { Nullable, Recordable } from '/@src/module/type'
|
import { Nullable, Recordable } from '/@src/module/type'
|
||||||
|
|
||||||
type EditAction = 'add' | 'update' | 'del'
|
type EditAction = 'add' | 'update' | 'del'
|
||||||
@ -31,21 +38,21 @@ export declare interface TreeData {
|
|||||||
* 点击节点弹出新窗口对应的 url。需开启 isJump 参数
|
* 点击节点弹出新窗口对应的 url。需开启 isJump 参数
|
||||||
* 废弃，通过 on-click事件用户控制
|
* 废弃，通过 on-click事件用户控制
|
||||||
*/
|
*/
|
||||||
href: string | URL
|
href?: string | URL
|
||||||
/**
|
/**
|
||||||
* 节点是否初始展开，默认 false
|
* 节点是否初始展开，默认 false
|
||||||
* 废弃：设置 v-model:spreadKeys
|
* 废弃：设置 v-model:spreadKeys
|
||||||
*/
|
*/
|
||||||
spread: boolean
|
spread?: boolean
|
||||||
/**
|
/**
|
||||||
* 节点是否初始为选中状态（如果开启复选框的话），默认 false
|
* 节点是否初始为选中状态（如果开启复选框的话），默认 false
|
||||||
* 废弃：设置 v-model:checkedKeys
|
* 废弃：设置 v-model:checkedKeys
|
||||||
*/
|
*/
|
||||||
checked: boolean
|
checked?: boolean
|
||||||
/**
|
/**
|
||||||
* 节点是否为禁用状态。默认 false
|
* 节点是否为禁用状态。默认 false
|
||||||
*/
|
*/
|
||||||
disabled: boolean
|
disabled?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export declare interface TreeProps {
|
export declare interface TreeProps {
|
||||||
|
|||||||
@ -6,7 +6,10 @@ import { Nullable } from '/@src/module/type'
|
|||||||
* @param data
|
* @param data
|
||||||
* @param parentId
|
* @param parentId
|
||||||
*/
|
*/
|
||||||
export const generatorTreeData = (data: TreeData[] | TreeNode[], parentId: TreeNode['parentId'] = ''): TreeNode[] => {
|
export const generatorTreeData = (
|
||||||
|
data: TreeData[] | TreeNode[],
|
||||||
|
parentId: TreeNode['parentId'] = ''
|
||||||
|
): TreeNode[] => {
|
||||||
const innerTreeData: TreeNode[] = []
|
const innerTreeData: TreeNode[] = []
|
||||||
const len = data.length
|
const len = data.length
|
||||||
for (let i = 0; i < len; i++) {
|
for (let i = 0; i < len; i++) {
|
||||||
@ -14,7 +17,7 @@ export const generatorTreeData = (data: TreeData[] | TreeNode[], parentId: TreeN
|
|||||||
const inner = {
|
const inner = {
|
||||||
...item,
|
...item,
|
||||||
parentId: parentId,
|
parentId: parentId,
|
||||||
spread: item.spread || false
|
spread: item.spread || false,
|
||||||
}
|
}
|
||||||
if (item.children && item.children.length > 0) {
|
if (item.children && item.children.length > 0) {
|
||||||
inner.children = generatorTreeData(item.children, item.id)
|
inner.children = generatorTreeData(item.children, item.id)
|
||||||
@ -31,7 +34,7 @@ export const generatorTreeData = (data: TreeData[] | TreeNode[], parentId: TreeN
|
|||||||
export const setNextSiblings = (data: TreeNode[]): void => {
|
export const setNextSiblings = (data: TreeNode[]): void => {
|
||||||
const len = data.length
|
const len = data.length
|
||||||
for (let i = 0; i < len; i++) {
|
for (let i = 0; i < len; i++) {
|
||||||
data[i]._nextSibling = (i + 1) < len ? data[i+1] : null
|
data[i]._nextSibling = i + 1 < len ? data[i + 1] : null
|
||||||
if (data[i].children && data[i].children.length > 0) {
|
if (data[i].children && data[i].children.length > 0) {
|
||||||
setNextSiblings(data[i].children)
|
setNextSiblings(data[i].children)
|
||||||
}
|
}
|
||||||
@ -43,7 +46,10 @@ export const setNextSiblings = (data: TreeNode[]): void => {
|
|||||||
* @param data
|
* @param data
|
||||||
* @param parentNode
|
* @param parentNode
|
||||||
*/
|
*/
|
||||||
export const setParentNode = (data: TreeNode[], parentNode?: TreeNode): void => {
|
export const setParentNode = (
|
||||||
|
data: TreeNode[],
|
||||||
|
parentNode?: TreeNode
|
||||||
|
): void => {
|
||||||
const len = data.length
|
const len = data.length
|
||||||
for (let i = 0; i < len; i++) {
|
for (let i = 0; i < len; i++) {
|
||||||
data[i]._parentNode = parentNode ? parentNode : null
|
data[i]._parentNode = parentNode ? parentNode : null
|
||||||
@ -71,7 +77,7 @@ export const initialTreeData = (data: TreeData[]): TreeNode[] => {
|
|||||||
* @param data
|
* @param data
|
||||||
*/
|
*/
|
||||||
export const getTreeSpreadKeys = (data: TreeData[]): (string | number)[] => {
|
export const getTreeSpreadKeys = (data: TreeData[]): (string | number)[] => {
|
||||||
let keys: (string | number) [] = []
|
let keys: (string | number)[] = []
|
||||||
const len = data.length
|
const len = data.length
|
||||||
for (let i = 0; i < len; i++) {
|
for (let i = 0; i < len; i++) {
|
||||||
const id: number | string = data[i].id
|
const id: number | string = data[i].id
|
||||||
@ -90,7 +96,10 @@ export const getTreeSpreadKeys = (data: TreeData[]): (string | number)[] => {
|
|||||||
* @param data
|
* @param data
|
||||||
* @param node
|
* @param node
|
||||||
*/
|
*/
|
||||||
export const getEmitNode = (data: TreeData[], node: TreeNode): Nullable<TreeData> => {
|
export const getEmitNode = (
|
||||||
|
data: TreeData[],
|
||||||
|
node: TreeNode
|
||||||
|
): Nullable<TreeData> => {
|
||||||
let item: Nullable<TreeData> = null
|
let item: Nullable<TreeData> = null
|
||||||
const len = data.length
|
const len = data.length
|
||||||
for (let i = 0; i < len; i++) {
|
for (let i = 0; i < len; i++) {
|
||||||
|
|||||||
@ -1,6 +1,9 @@
|
|||||||
import { TreeData, UseTreeData } from '/@src/module/tree/tree.type'
|
import { TreeData, UseTreeData } from '/@src/module/tree/tree.type'
|
||||||
import { computed, ref, unref, watch } from 'vue'
|
import { computed, ref, unref, watch } from 'vue'
|
||||||
import { getTreeSpreadKeys, initialTreeData } from '/@src/module/tree/treeHelper'
|
import {
|
||||||
|
getTreeSpreadKeys,
|
||||||
|
initialTreeData,
|
||||||
|
} from '/@src/module/tree/treeHelper'
|
||||||
import { Recordable } from '/@src/module/type'
|
import { Recordable } from '/@src/module/type'
|
||||||
|
|
||||||
export const useTreeData: UseTreeData = (props, emit) => {
|
export const useTreeData: UseTreeData = (props, emit) => {
|
||||||
@ -14,21 +17,25 @@ export const useTreeData: UseTreeData = (props, emit) => {
|
|||||||
},
|
},
|
||||||
set: (value: (string | number)[]) => {
|
set: (value: (string | number)[]) => {
|
||||||
emit('update:spreadKeys', value)
|
emit('update:spreadKeys', value)
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 渲染的data
|
* 渲染的data
|
||||||
*/
|
*/
|
||||||
const innerTreeData = ref<TreeData[]>([])
|
const innerTreeData = ref<TreeData[]>([])
|
||||||
watch(() => props.data, (treeData) => {
|
watch(
|
||||||
|
() => props.data,
|
||||||
|
(treeData) => {
|
||||||
if (treeData) {
|
if (treeData) {
|
||||||
innerTreeData.value = initialTreeData(treeData)
|
innerTreeData.value = initialTreeData(treeData)
|
||||||
}
|
}
|
||||||
}, { immediate: true, deep: true })
|
},
|
||||||
|
{ immediate: true, deep: true }
|
||||||
|
)
|
||||||
|
|
||||||
function updateInnerTreeData(treeData: TreeData[], node: TreeData): void {
|
function updateInnerTreeData(treeData: TreeData[], node: TreeData): void {
|
||||||
for(let i = 0; i <treeData.length; i++) {
|
for (let i = 0; i < treeData.length; i++) {
|
||||||
if (treeData[i].id === node.id) {
|
if (treeData[i].id === node.id) {
|
||||||
treeData[i].spread = !treeData[i].spread
|
treeData[i].spread = !treeData[i].spread
|
||||||
break
|
break
|
||||||
@ -55,6 +62,6 @@ export const useTreeData: UseTreeData = (props, emit) => {
|
|||||||
spreadKeys,
|
spreadKeys,
|
||||||
innerTreeData,
|
innerTreeData,
|
||||||
updateInnerTreeData,
|
updateInnerTreeData,
|
||||||
treeWrapperClass
|
treeWrapperClass,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
export interface SelectItem {
|
export interface SelectItem {
|
||||||
label?: String,
|
label?: string
|
||||||
value?: String
|
value?: string
|
||||||
}
|
}
|
||||||
@ -5,26 +5,17 @@
|
|||||||
"target": "es2015",
|
"target": "es2015",
|
||||||
"moduleResolution": "Node",
|
"moduleResolution": "Node",
|
||||||
"strict": true,
|
"strict": true,
|
||||||
|
"allowJs": true,
|
||||||
"resolveJsonModule": true,
|
"resolveJsonModule": true,
|
||||||
"declaration": true,
|
"declaration": true,
|
||||||
"emitDeclarationOnly": true,
|
"emitDeclarationOnly": true,
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
"declarationDir": "types",
|
"declarationDir": "types",
|
||||||
"lib": [
|
"lib": ["ESNext", "DOM"],
|
||||||
"ESNext",
|
|
||||||
"DOM"
|
|
||||||
],
|
|
||||||
"paths": {
|
"paths": {
|
||||||
"/@src/*": [
|
"/@src/*": ["./src/*"]
|
||||||
"./src/*"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"include": [
|
"include": ["src/**/*", "shims-vue.d.ts"],
|
||||||
"src/**/*",
|
"exclude": ["node_modules"]
|
||||||
"shims-vue.d.ts"
|
|
||||||
],
|
|
||||||
"exclude": [
|
|
||||||
"node_modules"
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
@ -4,7 +4,8 @@ import babel from '@rollup/plugin-babel'
|
|||||||
import { name } from './package.json'
|
import { name } from './package.json'
|
||||||
import plugins from './docs/src/plugin/common-plugins'
|
import plugins from './docs/src/plugin/common-plugins'
|
||||||
|
|
||||||
const camelize = (name: string) => name.replace(/(^|-)(\w)/g, (a, b, c) => c.toUpperCase())
|
const camelize = (name: string) =>
|
||||||
|
name.replace(/(^|-)(\w)/g, (a, b, c) => c.toUpperCase())
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
root: path.resolve(__dirname, 'docs'),
|
root: path.resolve(__dirname, 'docs'),
|
||||||
@ -27,7 +28,7 @@ export default defineConfig({
|
|||||||
const name = id.replace(/^@/, '').split('/')[0]
|
const name = id.replace(/^@/, '').split('/')[0]
|
||||||
return camelize(name)
|
return camelize(name)
|
||||||
},
|
},
|
||||||
assetFileNames: `layui.css`
|
assetFileNames: 'layui.css',
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
babel({
|
babel({
|
||||||
@ -36,7 +37,7 @@ export default defineConfig({
|
|||||||
presets: ['@babel/preset-env', '@babel/preset-typescript'],
|
presets: ['@babel/preset-env', '@babel/preset-typescript'],
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
external : [ 'vue', 'vue-router' ]
|
external: ['vue', 'vue-router'],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins,
|
plugins,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user