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 = {
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
es2021: true,
|
||||
node: true,
|
||||
},
|
||||
globals: {
|
||||
defineProps: 'readonly',
|
||||
defineEmits: 'readonly',
|
||||
defineExpose: 'readonly',
|
||||
withDefaults: 'readonly',
|
||||
},
|
||||
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: {
|
||||
parser: '@typescript-eslint/parser',
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 10,
|
||||
},
|
||||
plugins: ['@typescript-eslint', 'prettier'],
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:vue/vue3-recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
],
|
||||
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-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"
|
||||
|
||||
pnpx pretty-quick --staged
|
||||
pnpx lint-staged
|
||||
#pnpx lint-staged
|
||||
|
||||
@ -6,4 +6,4 @@
|
||||
},
|
||||
"autoprefixer": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1 +1 @@
|
||||
### 更新日志
|
||||
### 更新日志
|
||||
|
||||
39
README.md
39
README.md
@ -1,4 +1,3 @@
|
||||
|
||||
<p align="center">
|
||||
<a href="http://www.layui.com">
|
||||
<img src="https://sentsin.gitee.io/res/images/layui/layui.png" alt="layui" width="360">
|
||||
@ -26,7 +25,6 @@
|
||||
|
||||
Vue 3.0 的 桌 面 端 组 件 库 , Layui 的 另 一 种 呈 现 方 式
|
||||
|
||||
|
||||
## 快速上手 : Beta
|
||||
|
||||
获得 layui-vue 你只需要使用 npm 引入下述文件：
|
||||
@ -43,31 +41,28 @@ import Layui from '@layui/layui-vue'
|
||||
import '@layui/layui-vue/lib/layui.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App)
|
||||
.use(Layui)
|
||||
.mount('#app')
|
||||
|
||||
createApp(App).use(Layui).mount('#app')
|
||||
```
|
||||
|
||||
这是一个基本的入门页面：
|
||||
|
||||
```html
|
||||
<template>
|
||||
<lay-layout>
|
||||
<lay-header>
|
||||
<lay-logo>Layui Admin</lay-logo>
|
||||
</lay-header>
|
||||
<lay-side></lay-side>
|
||||
<lay-body>
|
||||
<router-view></router-view>
|
||||
</lay-body>
|
||||
<lay-footer>pearadmin.com</lay-footer>
|
||||
</lay-layout>
|
||||
<lay-layout>
|
||||
<lay-header>
|
||||
<lay-logo>Layui Admin</lay-logo>
|
||||
</lay-header>
|
||||
<lay-side></lay-side>
|
||||
<lay-body>
|
||||
<router-view></router-view>
|
||||
</lay-body>
|
||||
<lay-footer>pearadmin.com</lay-footer>
|
||||
</lay-layout>
|
||||
</template>
|
||||
|
||||
```
|
||||
|
||||
## [阅读文档](http://layui-vue.pearadmin.com/)
|
||||
|
||||
从现在开始，尽情地拥抱 layui 吧！但愿她能成为你长远的开发伴侣，化作你方寸屏幕前的亿万字节！
|
||||
|
||||
## 使用趋势
|
||||
@ -75,14 +70,16 @@ createApp(App)
|
||||
[](https://giteye.net/chart/5ZQ67WWS)
|
||||
|
||||
## 贡献者
|
||||
> 大概是因为 layui - vue 让开发者变得更懒，所以贡献者才这么少？
|
||||
|
||||
> 大概是因为 layui - vue 让开发者变得更懒，所以贡献者才这么少？
|
||||
> 好的，姑且就这样认为吧。
|
||||
|
||||
|
||||
[](https://giteye.net/chart/DBC9Z6HQ)
|
||||
|
||||
## 交流群
|
||||
|
||||
|
||||
|
||||
|
||||
## 相关
|
||||
[官网](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>
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| layui-anim-down | 顶部往下滑入 | `layui-anim layui-anim-down` |
|
||||
| layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` |
|
||||
| layui-anim-up | 底部往上滑入 | `layui-anim layui-anim-up` |
|
||||
| layui-anim-upbit | 微微往上滑入 | `layui-anim ayui-anim-upbit` |
|
||||
| layui-anim-scale | 平滑放大 | `layui-anim layui-anim-scale` |
|
||||
| layui-anim-scaleSpring | 弹簧式放大 | `layui-anim layui-anim-scaleSpring` |
|
||||
| layui-anim-scalesmall | 平滑放小 |`layui-anim layui-anim-scalesmall`|
|
||||
| layui-anim-scalesmall-spring | 弹簧式放小 | `layui-anim layui-anim-scalesmall-spring`|
|
||||
| layui-anim-fadein | 渐现 | `layui-anim layui-anim-fadein`|
|
||||
| layui-anim-fadeout | 渐隐 | `layui-anim layui-anim-fadeout`|
|
||||
| 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-down | 顶部往下滑入 | `layui-anim layui-anim-down` |
|
||||
| layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` |
|
||||
| layui-anim-up | 底部往上滑入 | `layui-anim layui-anim-up` |
|
||||
| layui-anim-upbit | 微微往上滑入 | `layui-anim ayui-anim-upbit` |
|
||||
| layui-anim-scale | 平滑放大 | `layui-anim layui-anim-scale` |
|
||||
| layui-anim-scaleSpring | 弹簧式放大 | `layui-anim layui-anim-scaleSpring` |
|
||||
| layui-anim-scalesmall | 平滑放小 | `layui-anim layui-anim-scalesmall` |
|
||||
| layui-anim-scalesmall-spring | 弹簧式放小 | `layui-anim layui-anim-scalesmall-spring` |
|
||||
| layui-anim-fadein | 渐现 | `layui-anim layui-anim-fadein` |
|
||||
| layui-anim-fadeout | 渐隐 | `layui-anim layui-anim-fadeout` |
|
||||
| layui-anim-rotate | 360 度旋转 | `layui-anim layui-anim-rotate` |
|
||||
| layui-anim-rotate layui-anim-loop | 循环动画 | `layui-anim layui-anim-rotate layui-anim-loop` |
|
||||
|
||||
@ -68,10 +68,11 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| src | 图源 | -- |
|
||||
| size | 尺寸 | `xs` `sm` `lg`|
|
||||
| radius | 圆形 | `true` `false`|
|
||||
| | | |
|
||||
| ------ | ---- | -------------- |
|
||||
| src | 图源 | -- |
|
||||
| size | 尺寸 | `xs` `sm` `lg` |
|
||||
| radius | 圆形 | `true` `false` |
|
||||
|
||||
@ -33,7 +33,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| type | 类型 | `dot` `rim` |
|
||||
| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|
|
||||
| | | |
|
||||
| ----- | ---- | --------------------------------------------- |
|
||||
| type | 类型 | `dot` `rim` |
|
||||
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
|
||||
|
||||
@ -46,6 +46,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| separator | 分割符 | `/` |
|
||||
| | | |
|
||||
| --------- | ------ | --- |
|
||||
| separator | 分割符 | `/` |
|
||||
|
||||
@ -48,7 +48,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: demo 传入 columns 数据，自动生成表格
|
||||
|
||||
<template>
|
||||
@ -74,7 +73,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: demo 传入 columns 数据，自动生成表格
|
||||
|
||||
<template>
|
||||
@ -177,7 +175,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: demo 传入 columns 数据，自动生成表格
|
||||
|
||||
<template>
|
||||
@ -202,10 +199,10 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| type | 主题 | `primary` `normal` `warm` `danger` `disabled`|
|
||||
| size | 尺寸 | `lg` `sm` `xs` |
|
||||
| fluid | 最大化 | `true` `false` |
|
||||
| radius | 圆角 | `true` `false` |
|
||||
| border | 边框 | `green` `blue` `orange` `red` `black` |
|
||||
| | | |
|
||||
| ------ | ------ | --------------------------------------------- |
|
||||
| type | 主题 | `primary` `normal` `warm` `danger` `disabled` |
|
||||
| size | 尺寸 | `lg` `sm` `xs` |
|
||||
| fluid | 最大化 | `true` `false` |
|
||||
| radius | 圆角 | `true` `false` |
|
||||
| border | 边框 | `green` `blue` `orange` `red` `black` |
|
||||
|
||||
@ -49,7 +49,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| | | |
|
||||
| ------ | ---- | ------ |
|
||||
| header | 插槽 | `内容` |
|
||||
| body | 插槽 | `内容` |
|
||||
| body | 插槽 | `内容` |
|
||||
|
||||
@ -20,4 +20,4 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
:::
|
||||
|
||||
@ -40,6 +40,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
@ -84,6 +85,7 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
@ -130,4 +132,5 @@ export default {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
:::
|
||||
|
||||
:::
|
||||
|
||||
@ -59,6 +59,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| fluid | 流模式 | `true` `false` |
|
||||
| | | |
|
||||
| ----- | ------ | -------------- |
|
||||
| fluid | 流模式 | `true` `false` |
|
||||
|
||||
@ -61,7 +61,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| trigger | 触发方式 | `click` `hover` |
|
||||
| | | |
|
||||
| ------- | -------- | --------------- |
|
||||
| trigger | 触发方式 | `click` `hover` |
|
||||
|
||||
@ -38,6 +38,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| description | 描述信息 | -- |
|
||||
| | | |
|
||||
| ----------- | -------- | --- |
|
||||
| description | 描述信息 | -- |
|
||||
|
||||
@ -38,6 +38,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| title | 标题 | -- |
|
||||
| | | |
|
||||
| ----- | ---- | --- |
|
||||
| title | 标题 | -- |
|
||||
|
||||
@ -220,4 +220,4 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
:::
|
||||
|
||||
@ -71,6 +71,7 @@ export default {
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
:::
|
||||
|
||||
::: demo
|
||||
@ -123,13 +124,13 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | | |
|
||||
|--|--|--|--|
|
||||
| xs | 尺寸 | 超小屏幕 (手机<768px) | 12 |
|
||||
| sm | 尺寸 | 小屏幕 (平板≥768px) | 12 |
|
||||
| md | 尺寸 | 中等屏幕 (桌面≥992px) | 12 |
|
||||
| lg | 尺寸 | 大型屏幕 (桌面≥1200px) | 12 |
|
||||
| xsOffset | 偏移 | 超小屏幕 (手机<768px) | 12 |
|
||||
| smOffset | 偏移 | 小屏幕 (平板≥768px) | 12 |
|
||||
| mdOffset | 偏移 | 中等屏幕 (桌面≥992px) | 12 |
|
||||
| lgOffset | 偏移 | 大型屏幕 (桌面≥1200px) | 12 |
|
||||
| | | | |
|
||||
| -------- | ---- | ----------------------- | --- |
|
||||
| xs | 尺寸 | 超小屏幕 (手机<768px) | 12 |
|
||||
| sm | 尺寸 | 小屏幕 (平板 ≥768px) | 12 |
|
||||
| md | 尺寸 | 中等屏幕 (桌面 ≥992px) | 12 |
|
||||
| lg | 尺寸 | 大型屏幕 (桌面 ≥1200px) | 12 |
|
||||
| xsOffset | 偏移 | 超小屏幕 (手机<768px) | 12 |
|
||||
| smOffset | 偏移 | 小屏幕 (平板 ≥768px) | 12 |
|
||||
| mdOffset | 偏移 | 中等屏幕 (桌面 ≥992px) | 12 |
|
||||
| lgOffset | 偏移 | 大型屏幕 (桌面 ≥1200px) | 12 |
|
||||
|
||||
@ -1047,6 +1047,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| | | |
|
||||
| ---- | ---- | ----------------- |
|
||||
| type | 图标 | `layui-icon-home` |
|
||||
|
||||
@ -86,8 +86,8 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| v-model | 默认值 | -- |
|
||||
| page | 开启分页 | -- |
|
||||
| showSearch | 启用搜索 | -- |
|
||||
| | | |
|
||||
| ---------- | -------- | --- |
|
||||
| v-model | 默认值 | -- |
|
||||
| page | 开启分页 | -- |
|
||||
| showSearch | 启用搜索 | -- |
|
||||
|
||||
@ -8,22 +8,22 @@ layui 之所以赢得如此多人的青睐，更多是在于它「前后界面
|
||||
|
||||
```html
|
||||
<lay-layout>
|
||||
<lay-header>
|
||||
<lay-logo>Layui Admin</lay-logo>
|
||||
</lay-header>
|
||||
<lay-side></lay-side>
|
||||
<lay-body>
|
||||
<router-view></router-view>
|
||||
</lay-body>
|
||||
<lay-footer>pearadmin.com</lay-footer>
|
||||
<lay-header>
|
||||
<lay-logo>Layui Admin</lay-logo>
|
||||
</lay-header>
|
||||
<lay-side></lay-side>
|
||||
<lay-body>
|
||||
<router-view></router-view>
|
||||
</lay-body>
|
||||
<lay-footer>pearadmin.com</lay-footer>
|
||||
</lay-layout>
|
||||
```
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| lay-layout | 容器 | -- |
|
||||
| lay-header | 顶部 | -- |
|
||||
| lay-logo | 图标 | -- |
|
||||
| lay-side | 侧边 | -- |
|
||||
| lay-body | 内容 | -- |
|
||||
| lay-footer | 底部 | -- |
|
||||
| | | |
|
||||
| ---------- | ---- | --- |
|
||||
| lay-layout | 容器 | -- |
|
||||
| lay-header | 顶部 | -- |
|
||||
| lay-logo | 图标 | -- |
|
||||
| lay-side | 侧边 | -- |
|
||||
| lay-body | 内容 | -- |
|
||||
| lay-footer | 底部 | -- |
|
||||
|
||||
@ -31,6 +31,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|
|
||||
| | | |
|
||||
| ----- | ---- | --------------------------------------------- |
|
||||
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
|
||||
|
||||
@ -56,7 +56,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| selectedKey | 默认选择 | -- |
|
||||
| | | |
|
||||
| ----------- | -------- | --- |
|
||||
| selectedKey | 默认选择 | -- |
|
||||
|
||||
@ -107,13 +107,13 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| limit | 每页数量 | -- |
|
||||
| total | 总条数 | -- |
|
||||
| jump | 切换回调 | -- |
|
||||
| showCount | 显示总数 | `false` |
|
||||
| showPage | 显示每页 | `false` |
|
||||
| showLimit | 显示每页数量 | `false` |
|
||||
| | | |
|
||||
| ----------- | ------------ | ------- |
|
||||
| limit | 每页数量 | -- |
|
||||
| total | 总条数 | -- |
|
||||
| jump | 切换回调 | -- |
|
||||
| showCount | 显示总数 | `false` |
|
||||
| showPage | 显示每页 | `false` |
|
||||
| showLimit | 显示每页数量 | `false` |
|
||||
| showRefresh | 显示刷新按钮 | `false` |
|
||||
| showSkip | 显示跳转 | `false` |
|
||||
| showSkip | 显示跳转 | `false` |
|
||||
|
||||
@ -16,4 +16,4 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
:::
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@ -20,7 +20,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
@ -68,12 +67,11 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| percent | 进度 | -- |
|
||||
| theme| 主题 | `orange` `green` `cyan` `blue` `black` `gray`|
|
||||
| size | 尺寸 | `big` |
|
||||
| text | 提示 | -- |
|
||||
| color| 颜色 | -- |
|
||||
| showText | 展示描述 | -- |
|
||||
| | | |
|
||||
| -------- | -------- | --------------------------------------------- |
|
||||
| percent | 进度 | -- |
|
||||
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
|
||||
| size | 尺寸 | `big` |
|
||||
| text | 提示 | -- |
|
||||
| color | 颜色 | -- |
|
||||
| showText | 展示描述 | -- |
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
@ -48,12 +48,12 @@ export default {
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
import { ref } from 'vue';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const all2 = ref(4)
|
||||
const all2 = ref(4);
|
||||
|
||||
return {
|
||||
all2
|
||||
@ -64,8 +64,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| v-model | 评分值 | -- |
|
||||
| length | 评分长度 | -- |
|
||||
| | | |
|
||||
| ------- | -------- | --- |
|
||||
| v-model | 评分值 | -- |
|
||||
| length | 评分长度 | -- |
|
||||
|
||||
@ -76,7 +76,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| v-model | 当前激活 | -- |
|
||||
| type | 主题样式 | `card` `brief` |
|
||||
| | | |
|
||||
| ------- | -------- | -------------- |
|
||||
| v-model | 当前激活 | -- |
|
||||
| type | 主题样式 | `card` `brief` |
|
||||
|
||||
@ -193,11 +193,11 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
| | | |
|
||||
|--|--|--|
|
||||
| columns | 列配置 | -- |
|
||||
| dataSource | 数据源 | -- |
|
||||
| checkbox | 开启复现框 | -- |
|
||||
| id | 主键 | -- |
|
||||
| selectKeys | 选中项 | -- |
|
||||
| default-toolbar | 开启工具栏 | -- |
|
||||
| | | |
|
||||
| --------------- | ---------- | --- |
|
||||
| columns | 列配置 | -- |
|
||||
| dataSource | 数据源 | -- |
|
||||
| checkbox | 开启复现框 | -- |
|
||||
| id | 主键 | -- |
|
||||
| selectKeys | 选中项 | -- |
|
||||
| default-toolbar | 开启工具栏 | -- |
|
||||
|
||||
@ -19,4 +19,4 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
:::
|
||||
|
||||
@ -39,4 +39,4 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
:::
|
||||
|
||||
@ -38,4 +38,4 @@ layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库 ,
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,33 +1,35 @@
|
||||
<br>
|
||||
<br>
|
||||
|
||||
使用 npm 下载
|
||||
|
||||
```
|
||||
npm install @layui/layui-vue --save
|
||||
```
|
||||
|
||||
在 main.ts 中
|
||||
|
||||
```js
|
||||
import App from './App.vue'
|
||||
import { createApp } from 'vue'
|
||||
import Layui from '@layui/layui-vue'
|
||||
import '@layui/layui-vue/lib/layui.css'
|
||||
|
||||
createApp(App)
|
||||
.use(Layui)
|
||||
.mount('#app')
|
||||
createApp(App).use(Layui).mount('#app')
|
||||
```
|
||||
|
||||
这是一个基本的入门页面：
|
||||
|
||||
```html
|
||||
<lay-layout>
|
||||
<lay-header>
|
||||
<lay-logo>Layui Admin</lay-logo>
|
||||
</lay-header>
|
||||
<lay-side></lay-side>
|
||||
<lay-body>
|
||||
<router-view></router-view>
|
||||
</lay-body>
|
||||
<lay-footer>pearadmin.com</lay-footer>
|
||||
<lay-header>
|
||||
<lay-logo>Layui Admin</lay-logo>
|
||||
</lay-header>
|
||||
<lay-side></lay-side>
|
||||
<lay-body>
|
||||
<router-view></router-view>
|
||||
</lay-body>
|
||||
<lay-footer>pearadmin.com</lay-footer>
|
||||
</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,25 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta name="force-rendering" content="webkit" />
|
||||
<meta name="applicable-device" content="pc,mobile" />
|
||||
<meta name="author" content="Jmys <jmys1992@gmail.com>" />
|
||||
<meta
|
||||
name="keywords"
|
||||
content="element-pro,pro-components,admin,element-plus,components,vue,ui"
|
||||
/>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<title>Layui - Vue 开源前端 UI 框架</title>
|
||||
<!--preload-links-->
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="renderer" content="webkit" />
|
||||
<meta name="force-rendering" content="webkit" />
|
||||
<meta name="applicable-device" content="pc,mobile" />
|
||||
<meta name="author" content="Jmys <jmys1992@gmail.com>" />
|
||||
<meta name="keywords" content="element-pro,pro-components,admin,element-plus,components,vue,ui" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<title>Layui - Vue 开源前端 UI 框架</title>
|
||||
<!--preload-links-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<!--app-html-->
|
||||
</div>
|
||||
<script type="module" src="/src/entry-client.ts"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<body>
|
||||
<div id="app">
|
||||
<!--app-html-->
|
||||
</div>
|
||||
<script type="module" src="/src/entry-client.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -3,14 +3,8 @@
|
||||
<div class="source">
|
||||
<slot />
|
||||
</div>
|
||||
<div
|
||||
ref="meta"
|
||||
class="meta"
|
||||
>
|
||||
<div
|
||||
v-if="$slots.description"
|
||||
class="description"
|
||||
>
|
||||
<div ref="meta" class="meta">
|
||||
<div v-if="$slots.description" class="description">
|
||||
<slot name="description" />
|
||||
</div>
|
||||
<div class="language-html">
|
||||
@ -22,7 +16,11 @@
|
||||
class="control"
|
||||
@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>
|
||||
</template>
|
||||
@ -34,10 +32,10 @@ const meta = ref<HTMLElement>({} as HTMLElement)
|
||||
const isFixContorl = ref(false)
|
||||
const codeAreaHeight = ref(0)
|
||||
|
||||
const show = ref(false);
|
||||
const show = ref(false)
|
||||
|
||||
const toggleShow = function() {
|
||||
show.value = !show.value;
|
||||
const toggleShow = function () {
|
||||
show.value = !show.value
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -1,33 +1,33 @@
|
||||
<template>
|
||||
<select :name="name" lay-verify="required"></select>
|
||||
<select :name="name" lay-verify="required" />
|
||||
<div
|
||||
class="layui-unselect layui-form-select"
|
||||
@click="open"
|
||||
:class="[openState ? 'layui-form-selected' : '']"
|
||||
@click="open"
|
||||
>
|
||||
<div class="layui-select-title">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
class="layui-input layui-unselect"
|
||||
@input="change"
|
||||
:value="name"
|
||||
style="
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: none;
|
||||
color: whitesmoke;
|
||||
"
|
||||
/><i class="layui-edge"></i>
|
||||
@input="change"
|
||||
/><i class="layui-edge" />
|
||||
</div>
|
||||
<dl class="layui-anim layui-anim-upbit" style="">
|
||||
<dd v-if="menus.length <= 0" class="layui-select-tips">无内容</dd>
|
||||
<dd
|
||||
v-else
|
||||
v-for="data in menus"
|
||||
:value = "name"
|
||||
@click="jump(data)"
|
||||
v-else
|
||||
:key="data"
|
||||
:value="name"
|
||||
class="layui-select-tips"
|
||||
@click="jump(data)"
|
||||
>
|
||||
{{ data.title }}
|
||||
</dd>
|
||||
@ -38,11 +38,11 @@
|
||||
<script setup name="LaySelect" lang="ts">
|
||||
import { defineProps, Ref, ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { Recordable } from '/@src/module/type'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
datas?: object[]
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
datas?: Recordable[]
|
||||
}>()
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
@ -60,16 +60,16 @@ const jump = function (data: any) {
|
||||
router.push(data.path)
|
||||
}
|
||||
|
||||
const change = function(e: any) {
|
||||
const change = function (e: any) {
|
||||
name.value = e.target.value
|
||||
if(e.target.value === ""){
|
||||
if (e.target.value === '') {
|
||||
menus.value = props.datas
|
||||
}else{
|
||||
menus.value = searchList(e.target.value, props.datas);
|
||||
} else {
|
||||
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 startChar = str.charAt(0)
|
||||
var strLen = str.length
|
||||
@ -100,4 +100,4 @@ const searchList = function (str: String, container: any) {
|
||||
}
|
||||
return newList
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-nocheck
|
||||
import { createApp } from './main'
|
||||
import { renderToString } from '@vue/server-renderer'
|
||||
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="width:100%;height:300px">
|
||||
<lay-layout>
|
||||
<lay-header style="background:#393D49">
|
||||
<lay-header style="background: #393d49">
|
||||
<lay-logo>
|
||||
<img src="../assets/logo.png" />
|
||||
</lay-logo>
|
||||
@ -10,7 +10,7 @@
|
||||
style="margin-top: 10px; margin-bottom: 0px"
|
||||
>
|
||||
<lay-form>
|
||||
<lay-search :datas="menus"></lay-search>
|
||||
<lay-search :datas="menus" />
|
||||
</lay-form>
|
||||
</ul>
|
||||
<ul
|
||||
@ -38,8 +38,8 @@
|
||||
style="padding: 6px"
|
||||
>
|
||||
<li
|
||||
:key="menu"
|
||||
v-for="menu in menus"
|
||||
:key="menu"
|
||||
:class="[
|
||||
currentPath === menu.path ? 'layui-menu-item-checked2' : '',
|
||||
]"
|
||||
@ -58,7 +58,7 @@
|
||||
</lay-side>
|
||||
<lay-body>
|
||||
<div style="padding: 20px">
|
||||
<router-view></router-view>
|
||||
<router-view />
|
||||
</div>
|
||||
</lay-body>
|
||||
</lay-layout>
|
||||
@ -254,7 +254,8 @@ export default {
|
||||
title: '图标选择',
|
||||
subTitle: 'iconPicker',
|
||||
path: '/zh-CN/components/iconPicker',
|
||||
},{
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
title: '分页',
|
||||
subTitle: 'page',
|
||||
@ -304,19 +305,19 @@ export default {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
@media screen and (max-width:768px) {
|
||||
.layui-side {
|
||||
width: 0px!important;
|
||||
@media screen and (max-width: 768px) {
|
||||
.layui-side {
|
||||
width: 0px !important;
|
||||
}
|
||||
.layui-body {
|
||||
left: 0px!important;
|
||||
width: 100%!important;
|
||||
left: 0px !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.layui-logo {
|
||||
display: none!important;
|
||||
display: none !important;
|
||||
}
|
||||
.layui-layout-left {
|
||||
left: 0px!important;
|
||||
left: 0px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -11,6 +11,6 @@ export function createRouter(): Router {
|
||||
const baseUrl = import.meta.env.BASE_URL
|
||||
return _createRouter({
|
||||
history: createWebHashHistory(baseUrl),
|
||||
routes: routes
|
||||
routes: routes,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,8 @@ const zhCN = [
|
||||
path: '/zh-CN/guide/install',
|
||||
component: () => import('../../docs/zh-CN/guide/install.md'),
|
||||
meta: { title: '安装' },
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/guide/changelog',
|
||||
component: () => import('../../docs/zh-CN/guide/changelog.md'),
|
||||
meta: { title: '更新' },
|
||||
@ -43,7 +44,8 @@ const zhCN = [
|
||||
path: '/zh-CN/components/container',
|
||||
component: () => import('../../docs/zh-CN/components/container.md'),
|
||||
meta: { title: '容器' },
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/breadcrumb',
|
||||
component: () => import('../../docs/zh-CN/components/breadcrumb.md'),
|
||||
meta: { title: '面包屑' },
|
||||
@ -52,27 +54,33 @@ const zhCN = [
|
||||
path: '/zh-CN/components/button',
|
||||
component: () => import('../../docs/zh-CN/components/button.md'),
|
||||
meta: { title: '按钮' },
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/icon',
|
||||
component: () => import('../../docs/zh-CN/components/icon.md'),
|
||||
meta: { title: '图标' },
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/panel',
|
||||
component: () => import('../../docs/zh-CN/components/panel.md'),
|
||||
meta: { title: '面板' },
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/animation',
|
||||
component: () => import('../../docs/zh-CN/components/animation.md'),
|
||||
meta: { title: '动画' },
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/card',
|
||||
component: () => import('../../docs/zh-CN/components/cards.md'),
|
||||
meta: { title: '卡片' },
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/grid',
|
||||
component: () => import('../../docs/zh-CN/components/grid.md'),
|
||||
meta: { title: '栅格' },
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/form',
|
||||
component: () => import('../../docs/zh-CN/components/form.md'),
|
||||
meta: { title: '表单' },
|
||||
@ -136,22 +144,26 @@ const zhCN = [
|
||||
path: '/zh-CN/components/rate',
|
||||
component: () => import('../../docs/zh-CN/components/rate.md'),
|
||||
meta: { title: '评分' },
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/dropdown',
|
||||
component: () => import('../../docs/zh-CN/components/dropdown.md'),
|
||||
meta: { title: '下拉' },
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/tab',
|
||||
component: () => import('../../docs/zh-CN/components/tab.md'),
|
||||
meta: { title: '选项卡' },
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/iconPicker',
|
||||
component: () => import('../../docs/zh-CN/components/iconPicker.md'),
|
||||
meta: { title: '图标选择' },
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/tree',
|
||||
component: () => import('../../docs/zh-CN/components/tree.md'),
|
||||
meta: { title: '树形组件' }
|
||||
meta: { title: '树形组件' },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/components/page',
|
||||
@ -162,7 +174,7 @@ const zhCN = [
|
||||
path: '/zh-CN/components/transfer',
|
||||
component: () => import('../../docs/zh-CN/components/transfer.md'),
|
||||
meta: { title: '穿梭框' },
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
@ -62,7 +62,6 @@ h1 {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
h3 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
@ -159,7 +158,8 @@ table td {
|
||||
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;
|
||||
}
|
||||
|
||||
@ -184,8 +184,8 @@ table td {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
transition: all .3s;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
|
||||
.site-doc-icon li .layui-icon {
|
||||
@ -199,7 +199,7 @@ table td {
|
||||
|
||||
.site-doc-necolor li div {
|
||||
border-radius: 0;
|
||||
color: #000!important;
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.site-doc-color li div {
|
||||
@ -268,8 +268,8 @@ table td {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
transition: all .3s;
|
||||
-webkit-transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
|
||||
.anim .site-doc-icon li .layui-anim {
|
||||
@ -286,4 +286,4 @@ table td {
|
||||
|
||||
.anim .site-doc-icon li .code {
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@ -60,6 +60,7 @@
|
||||
"@vitejs/plugin-vue": "^1.9.3",
|
||||
"@vue/compiler-sfc": "^3.2.20",
|
||||
"@vue/eslint-config-prettier": "^6.0.0",
|
||||
"@vue/eslint-config-typescript": "^7.0.0",
|
||||
"@vue/server-renderer": "^3.2.20",
|
||||
"@vue/test-utils": "^2.0.0-rc.15",
|
||||
"babel-jest": "^26.6.3",
|
||||
@ -88,8 +89,7 @@
|
||||
"types"
|
||||
],
|
||||
"lint-staged": {
|
||||
"*.{ts,vue,tsx,md}": "eslint --fix",
|
||||
"*.{css,less,vue,md}": "stylelint --fix",
|
||||
"*.{ts,vue,tsx}": "eslint --fix",
|
||||
"*": "prettier -w -u"
|
||||
},
|
||||
"husky": {
|
||||
|
||||
@ -15,6 +15,7 @@ specifiers:
|
||||
'@vitejs/plugin-vue': ^1.9.3
|
||||
'@vue/compiler-sfc': ^3.2.20
|
||||
'@vue/eslint-config-prettier': ^6.0.0
|
||||
'@vue/eslint-config-typescript': ^7.0.0
|
||||
'@vue/server-renderer': ^3.2.20
|
||||
'@vue/test-utils': ^2.0.0-rc.15
|
||||
babel-jest: ^26.6.3
|
||||
@ -59,6 +60,7 @@ devDependencies:
|
||||
'@vitejs/plugin-vue': 1.9.3_vite@2.5.10
|
||||
'@vue/compiler-sfc': 3.2.20
|
||||
'@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/test-utils': 2.0.0-rc.15_vue@3.2.20
|
||||
babel-jest: 26.6.3_@babel+core@7.15.8
|
||||
@ -2580,6 +2582,27 @@ packages:
|
||||
prettier: 2.4.1
|
||||
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:
|
||||
resolution:
|
||||
{
|
||||
|
||||
6459
src/css/layui.css
6459
src/css/layui.css
File diff suppressed because it is too large
Load Diff
@ -29,7 +29,7 @@ import LayTimelineItem from './module/timelineItem/index'
|
||||
import LayTextarea from './module/textarea/index'
|
||||
import LaySwitch from './module/switch/index'
|
||||
import LayCollapse from './module/collapse/index'
|
||||
import LayCollapseItem from './module/collapseItem/index'
|
||||
import LayCollapseItem from './module/collapseItem/index'
|
||||
import LayContainer from './module/container/index'
|
||||
import LayMenu from './module/menu/index'
|
||||
import LayMenuItem from './module/menuItem/index'
|
||||
@ -105,7 +105,7 @@ const components: Record<string, IDefineComponent> = {
|
||||
LayTree,
|
||||
LayTable,
|
||||
LayPage,
|
||||
LayTransfer
|
||||
LayTransfer,
|
||||
}
|
||||
|
||||
const install = (app: App, options?: InstallOptions): void => {
|
||||
|
||||
@ -1,14 +1,20 @@
|
||||
<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>
|
||||
|
||||
<script setup name="LayAvatar" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
src?: string
|
||||
radius?: boolean
|
||||
size?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
src?: string
|
||||
radius?: boolean
|
||||
size?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<span :class="classList" :style="styleList">
|
||||
<slot v-if="type != 'dot'"></slot>
|
||||
<slot v-if="type != 'dot'" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup name="LayBadge" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
type?: string
|
||||
theme?: string
|
||||
color?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
type?: string
|
||||
theme?: string
|
||||
color?: string
|
||||
}>()
|
||||
|
||||
const classList = [
|
||||
{
|
||||
@ -24,4 +23,4 @@ const classList = [
|
||||
]
|
||||
|
||||
const styleList = props.color ? 'background-color: ' + props.color : ''
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,14 +1,13 @@
|
||||
<template>
|
||||
<blockquote class="layui-elem-quote" :class="[nm?'layui-quote-nm':'']">
|
||||
<slot></slot>
|
||||
<blockquote class="layui-elem-quote" :class="[nm ? 'layui-quote-nm' : '']">
|
||||
<slot />
|
||||
</blockquote>
|
||||
</template>
|
||||
|
||||
<script setup name="LayBlock" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
nm?: boolean
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
nm?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayBody', Component)
|
||||
app.component(Component.name || 'LayBody', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-body">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayBody" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayBody" lang="ts"></script>
|
||||
|
||||
@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayBreadcrumb', Component)
|
||||
app.component(Component.name || 'LayBreadcrumb', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<span class="layui-breadcrumb" style="visibility: visible;">
|
||||
<slot></slot>
|
||||
<span class="layui-breadcrumb" style="visibility: visible">
|
||||
<slot />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
@ -15,10 +15,9 @@ const props = withDefaults(
|
||||
separator?: string
|
||||
}>(),
|
||||
{
|
||||
separator: "/"
|
||||
separator: '/',
|
||||
}
|
||||
)
|
||||
|
||||
provide("separator",props.separator);
|
||||
|
||||
provide('separator', props.separator)
|
||||
</script>
|
||||
|
||||
@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayBreadcrumbItem', Component)
|
||||
app.component(Component.name || 'LayBreadcrumbItem', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,16 +1,14 @@
|
||||
<template>
|
||||
<a href="javascript:void(0)">{{title}}</a>
|
||||
<span lay-separator="">{{separator}}</span>
|
||||
<a href="javascript:void(0)">{{ title }}</a>
|
||||
<span lay-separator="">{{ separator }}</span>
|
||||
</template>
|
||||
|
||||
<script setup name="LayBreadcrumbItem" lang="ts">
|
||||
import { defineProps, inject } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
title: string
|
||||
}>()
|
||||
|
||||
const separator = inject("separator");
|
||||
const props = defineProps<{
|
||||
title: string
|
||||
}>()
|
||||
|
||||
const separator = inject('separator')
|
||||
</script>
|
||||
|
||||
@ -9,19 +9,18 @@
|
||||
border ? 'layui-border-' + border : '',
|
||||
]"
|
||||
>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup name="LayButton" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
type?: string
|
||||
size?: string
|
||||
fluid?: boolean
|
||||
radius?: boolean
|
||||
border?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
type?: string
|
||||
size?: string
|
||||
fluid?: boolean
|
||||
radius?: boolean
|
||||
border?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-btn-container">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayButtonContainer" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayButtonContainer" lang="ts"></script>
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-btn-group">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayButtonGroup" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayButtonGroup" lang="ts"></script>
|
||||
|
||||
@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayCard ', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,14 +1,12 @@
|
||||
<template>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">
|
||||
<slot name="header"></slot>
|
||||
<slot name="header" />
|
||||
</div>
|
||||
<div class="layui-card-body">
|
||||
<slot name="body"></slot>
|
||||
<slot name="body" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayCard" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayCard" lang="ts"></script>
|
||||
|
||||
@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayCheckbox', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -12,9 +12,9 @@
|
||||
]"
|
||||
:lay-skin="skin"
|
||||
>
|
||||
<span><slot></slot></span>
|
||||
<i v-if="skin == 'primary'" class="layui-icon layui-icon-ok"></i>
|
||||
<i v-if="!skin" class="layui-icon layui-icon-ok"></i>
|
||||
<span><slot /></span>
|
||||
<i v-if="skin == 'primary'" class="layui-icon layui-icon-ok" />
|
||||
<i v-if="!skin" class="layui-icon layui-icon-ok" />
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
@ -22,14 +22,13 @@
|
||||
<script setup name="LayCheckbox" lang="ts">
|
||||
import { defineProps, ref, watch } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
modelValue: string[]
|
||||
label: string
|
||||
disabled?: boolean
|
||||
name?: string
|
||||
skin?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
modelValue: string[]
|
||||
label: string
|
||||
disabled?: boolean
|
||||
name?: string
|
||||
skin?: string
|
||||
}>()
|
||||
|
||||
const hasValue = ref(false)
|
||||
|
||||
|
||||
@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayCol', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -12,22 +12,21 @@
|
||||
lgOffset ? 'layui-col-lg-offset' + lgOffset : '',
|
||||
]"
|
||||
>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayCol" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
md?: string
|
||||
xs?: string
|
||||
sm?: string
|
||||
lg?: string
|
||||
mdOffset?: string
|
||||
xsOffset?: string
|
||||
smOffset?: string
|
||||
lgOffset?: string
|
||||
}>()
|
||||
</script>
|
||||
const props = defineProps<{
|
||||
md?: string
|
||||
xs?: string
|
||||
sm?: string
|
||||
lg?: string
|
||||
mdOffset?: string
|
||||
xsOffset?: string
|
||||
smOffset?: string
|
||||
lgOffset?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayCollapse', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-collapse">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayCollapse" lang="ts">
|
||||
</script>
|
||||
<script setup name="LayCollapse" lang="ts"></script>
|
||||
|
||||
@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayCollapseItem', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
<template>
|
||||
<div class="layui-colla-item">
|
||||
<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>
|
||||
<div class="layui-colla-content" :class="isShow ? 'layui-show':''">
|
||||
<div class="layui-colla-content" :class="isShow ? 'layui-show' : ''">
|
||||
<p>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -14,17 +15,14 @@
|
||||
<script setup name="LayCollapseItem" lang="ts">
|
||||
import { defineProps, Ref, ref } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
show?: boolean
|
||||
title?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
show?: boolean
|
||||
title?: string
|
||||
}>()
|
||||
|
||||
const isShow = ref(props.show) as Ref
|
||||
|
||||
const showHandle = function() {
|
||||
const showHandle = function () {
|
||||
isShow.value = !isShow.value
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayContainer', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,17 +1,15 @@
|
||||
<template>
|
||||
<div :class="classes">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayContainer" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
fluid?: boolean
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
fluid?: boolean
|
||||
}>()
|
||||
|
||||
const classes = props.fluid ? 'layui-fluid' : 'layui-container'
|
||||
|
||||
</script>
|
||||
|
||||
@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayCount', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,9 +1,5 @@
|
||||
<template>
|
||||
<span class="layui-count">
|
||||
|
||||
</span>
|
||||
<span class="layui-count" />
|
||||
</template>
|
||||
|
||||
<script setup name="LayCount" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayCount" lang="ts"></script>
|
||||
|
||||
@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayDropdown', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -5,25 +5,25 @@
|
||||
:class="[openState ? 'layui-dropdown-up' : '']"
|
||||
>
|
||||
<div @click="open">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
<dl class="layui-anim layui-anim-upbit">
|
||||
<ul class="layui-menu layui-dropdown-menu">
|
||||
<slot name="content"></slot>
|
||||
<slot name="content" />
|
||||
</ul>
|
||||
</dl>
|
||||
</div>
|
||||
<div
|
||||
v-if="trigger === 'hover'"
|
||||
class="layui-dropdown"
|
||||
:class="[openState ? 'layui-dropdown-up' : '']"
|
||||
@mouseenter="open"
|
||||
@mouseleave="open"
|
||||
:class="[openState ? 'layui-dropdown-up' : '']"
|
||||
>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
<dl class="layui-anim layui-anim-upbit">
|
||||
<ul class="layui-menu layui-dropdown-menu">
|
||||
<slot name="content"></slot>
|
||||
<slot name="content" />
|
||||
</ul>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayDropdownItem', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<li><div class="layui-menu-body-title">
|
||||
<slot></slot>
|
||||
</div></li>
|
||||
<li>
|
||||
<div class="layui-menu-body-title">
|
||||
<slot />
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script setup name="LayDropdownItem" lang="ts">
|
||||
</script>
|
||||
<script setup name="LayDropdownItem" lang="ts"></script>
|
||||
|
||||
@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayEmpty', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -3,7 +3,9 @@
|
||||
<div class="layui-empty-image">
|
||||
<img class="layui-empty-image-default" src="./index.svg" />
|
||||
</div>
|
||||
<div class="layui-empty-description">{{ description }}</div>
|
||||
<div class="layui-empty-description">
|
||||
{{ description }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayField', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
<template>
|
||||
<fieldset class="layui-elem-field">
|
||||
<legend>{{title}}</legend>
|
||||
<legend>{{ title }}</legend>
|
||||
<div class="layui-field-box">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</fieldset>
|
||||
</template>
|
||||
|
||||
<script setup name="LayField" lang="ts">
|
||||
const props =
|
||||
defineProps<{
|
||||
title?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
title?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayFooter', Component)
|
||||
app.component(Component.name || 'LayFooter', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-footer">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayFooter" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayFooter" lang="ts"></script>
|
||||
|
||||
@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayForm', Component)
|
||||
app.component(Component.name || 'LayForm', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<form class="layui-form">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup name="LayForm" lang="ts">
|
||||
</script>
|
||||
<script setup name="LayForm" lang="ts"></script>
|
||||
|
||||
@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayFormItem', Component)
|
||||
app.component(Component.name || 'LayFormItem', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">{{ label }}</label>
|
||||
<div :class="[mode ? 'layui-input-' + mode : '']" class="layui-input-block">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayHeader', Component)
|
||||
app.component(Component.name || 'LayHeader', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-header">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayHeader" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayHeader" lang="ts"></script>
|
||||
|
||||
@ -1,12 +1,11 @@
|
||||
<template>
|
||||
<i class="layui-icon" :class="[type]"></i>
|
||||
<i class="layui-icon" :class="[type]" />
|
||||
</template>
|
||||
|
||||
<script setup name="LayIcon" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
type?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
type?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@ -6,30 +6,30 @@
|
||||
"
|
||||
>
|
||||
<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>
|
||||
<span class="layui-inline layui-iconpicker-suffix"
|
||||
><i class="layui-icon layui-icon-down layui-anim"></i
|
||||
></span>
|
||||
><i class="layui-icon layui-icon-down layui-anim"
|
||||
/></span>
|
||||
</div>
|
||||
<template #content>
|
||||
<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-input-prefix">
|
||||
<i class="layui-icon layui-icon-search"></i>
|
||||
<i class="layui-icon layui-icon-search" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value=""
|
||||
@input="search"
|
||||
placeholder="search"
|
||||
autocomplete="off"
|
||||
class="layui-input"
|
||||
lay-affix="clear"
|
||||
@input="search"
|
||||
/>
|
||||
<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>
|
||||
@ -38,29 +38,32 @@
|
||||
<li
|
||||
v-for="icon in icones"
|
||||
:key="icon"
|
||||
@click="selectIcon(icon.class)"
|
||||
:class="[selectedIcon === icon.class ? 'layui-this' : '']"
|
||||
@click="selectIcon(icon.class)"
|
||||
>
|
||||
<i class="layui-icon" :class="[icon.class]"></i>
|
||||
<p class="layui-elip">{{ icon.name }}</p>
|
||||
<i class="layui-icon" :class="[icon.class]" />
|
||||
<p class="layui-elip">
|
||||
{{ icon.name }}
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="layui-iconpicker-page" v-if="page">
|
||||
<div v-if="page" class="layui-iconpicker-page">
|
||||
<div
|
||||
class="layui-box layui-laypage layui-laypage-default"
|
||||
id="layui-laypage-1"
|
||||
class="layui-box layui-laypage layui-laypage-default"
|
||||
>
|
||||
<span class="layui-laypage-count">共 {{ total }} 个</span
|
||||
><a
|
||||
href="javascript:;"
|
||||
@click="prev()"
|
||||
class="layui-laypage-prev"
|
||||
: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"
|
||||
><em class="layui-laypage-em"></em
|
||||
><em>{{ currentPage }} / {{ totalPage }}</em></span
|
||||
><em class="layui-laypage-em" /><em
|
||||
>{{ currentPage }} / {{ totalPage }}</em
|
||||
></span
|
||||
><span class="layui-laypage-spr">…</span
|
||||
><a href="javascript:;" class="layui-laypage-last" title="尾页"
|
||||
>14</a
|
||||
@ -69,8 +72,8 @@
|
||||
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
|
||||
class="layui-laypage-next"
|
||||
@click="next()"
|
||||
><i class="layui-icon layui-icon-right"></i
|
||||
></a>
|
||||
><i class="layui-icon layui-icon-right"
|
||||
/></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -90,15 +93,15 @@ const props = withDefaults(
|
||||
}>(),
|
||||
{
|
||||
modelValue: 'layui-icon-face-smile',
|
||||
page: false
|
||||
page: false,
|
||||
}
|
||||
)
|
||||
|
||||
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)
|
||||
selectedIcon.value = icon
|
||||
}
|
||||
@ -116,7 +119,7 @@ if (props.page) {
|
||||
}
|
||||
|
||||
const next = function () {
|
||||
if (currentPage.value === totalPage) {
|
||||
if (currentPage.value === totalPage.value) {
|
||||
return
|
||||
}
|
||||
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 startChar = str.charAt(0)
|
||||
var strLen = str.length
|
||||
@ -190,4 +193,4 @@ const searchList = function (str: String, container: any) {
|
||||
}
|
||||
return newList
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -6,4 +6,4 @@ Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayInput', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,22 +1,27 @@
|
||||
<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>
|
||||
|
||||
<script setup name="LayInput" lang="ts">
|
||||
import { defineProps, defineEmits } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
name?: string
|
||||
type?: string
|
||||
modelValue?: string
|
||||
placeholder?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
name?: string
|
||||
type?: string
|
||||
modelValue?: string
|
||||
placeholder?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const updateValue = function(event: InputEvent) {
|
||||
const updateValue = function (event: InputEvent) {
|
||||
emit('update:modelValue', (event.target as HTMLInputElement).value)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayLayout', Component)
|
||||
app.component(Component.name || 'LayLayout', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-layout layui-layout-admin">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayLayout" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayLayout" lang="ts"></script>
|
||||
|
||||
@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayLine', Component)
|
||||
app.component(Component.name || 'LayLine', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -5,8 +5,7 @@
|
||||
<script setup name="LayLine" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
theme?: string
|
||||
}>()
|
||||
const props = defineProps<{
|
||||
theme?: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayLogo', Component)
|
||||
app.component(Component.name || 'LayLogo', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
<div class="layui-logo">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LayLogo" lang="ts">
|
||||
|
||||
</script>
|
||||
<script setup name="LayLogo" lang="ts"></script>
|
||||
|
||||
@ -3,7 +3,7 @@ import Component from './index.vue'
|
||||
import type { IDefineComponent } from '../type/index'
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || 'LayMenu', Component)
|
||||
app.component(Component.name || 'LayMenu', Component)
|
||||
}
|
||||
|
||||
export default Component as IDefineComponent
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<ul class="layui-nav" :class="[tree ? 'layui-nav-tree':'']">
|
||||
<slot></slot>
|
||||
</ul>
|
||||
<ul class="layui-nav" :class="[tree ? 'layui-nav-tree' : '']">
|
||||
<slot />
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup name="LayMenu" lang="ts">
|
||||
@ -13,7 +13,7 @@ const props = withDefaults(
|
||||
tree?: boolean
|
||||
}>(),
|
||||
{
|
||||
selectedKey: "",
|
||||
selectedKey: '',
|
||||
tree: false,
|
||||
}
|
||||
)
|
||||
@ -21,6 +21,6 @@ const props = withDefaults(
|
||||
const isTree = ref(props.tree)
|
||||
const selectKey = ref(props.selectedKey)
|
||||
|
||||
provide("isTree",isTree);
|
||||
provide("selectKey",selectKey)
|
||||
provide('isTree', isTree)
|
||||
provide('selectKey', selectKey)
|
||||
</script>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user