diff --git a/.gitignore b/.gitignore
index c490e307..480e30e5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,7 @@ node_modules/
dist/
example/dist/
lib/
+es/
/types/
npm-debug.log*
yarn-debug.log*
diff --git a/build.all.ts b/build.all.ts
new file mode 100644
index 00000000..a11bd70f
--- /dev/null
+++ b/build.all.ts
@@ -0,0 +1,40 @@
+import { UserConfigExport } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+
+export default (): UserConfigExport => {
+ return {
+ publicDir: false,
+ resolve: {
+ alias: [
+ {
+ find: '@',
+ replacement: resolve(__dirname, './')
+ }
+ ]
+ },
+ plugins: [
+ vue(),
+ ],
+ build: {
+ cssCodeSplit: false,
+ outDir: 'lib',
+ emptyOutDir: true,
+ lib: {
+ entry: resolve(__dirname, './src/index.ts'),
+ name: 'layui-vue',
+ formats: ['es'],
+ fileName: (name) => `index.js`
+ },
+ rollupOptions: {
+ output: {
+ globals: {
+ vue: 'Vue'
+ },
+ assetFileNames: 'index.css',
+ },
+ external: ['vue', 'vue-router']
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/build.es.ts b/build.es.ts
new file mode 100644
index 00000000..366cf5d6
--- /dev/null
+++ b/build.es.ts
@@ -0,0 +1,64 @@
+import { UserConfigExport } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import * as fs from 'fs'
+
+const inputDir = resolve(__dirname, './src/component')
+
+const inputsArray = fs.readdirSync(inputDir).filter((name) => {
+ const componentDir = resolve(inputDir, name)
+ const isDir = fs.lstatSync(componentDir).isDirectory()
+ return isDir && fs.readdirSync(componentDir).includes('index.ts')
+})
+
+const inputs = inputsArray.reduce((backObj, pkgName) => {
+ backObj[pkgName] = resolve(__dirname, `./src/component/${pkgName}/index.ts`)
+ return backObj
+}, {})
+
+inputs['index'] = resolve(__dirname, './src/index.ts')
+
+export default (): UserConfigExport => {
+ return {
+ publicDir: false,
+ resolve: {
+ alias: [
+ {
+ find: '@',
+ replacement: resolve(__dirname, './')
+ }
+ ]
+ },
+ css: {
+ preprocessorOptions: {
+ less: {
+ javascriptEnabled: true
+ }
+ },
+ postcss: {}
+ },
+ plugins: [vue()],
+ build: {
+ cssCodeSplit: true,
+ emptyOutDir: true,
+ outDir: 'es',
+ lib: {
+ entry: './index.ts',
+ formats: ['es']
+ },
+ rollupOptions: {
+ input: inputs,
+ output: {
+ globals: {
+ vue: 'Vue'
+ },
+ entryFileNames: ({ name }) => {
+ return name === 'index' ? 'index.js' : '[name]/index.js'
+ },
+ assetFileNames: '[name]/index.css'
+ },
+ external: ['vue', 'vue-router']
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/build.less.ts b/build.less.ts
new file mode 100644
index 00000000..145881bf
--- /dev/null
+++ b/build.less.ts
@@ -0,0 +1,6 @@
+/**
+ * merge less file
+ *
+ */
+
+
diff --git a/example/docs/zh-CN/components/animation.md b/example/docs/zh-CN/components/animation.md
index 6483a4c9..996bce7f 100644
--- a/example/docs/zh-CN/components/animation.md
+++ b/example/docs/zh-CN/components/animation.md
@@ -71,6 +71,113 @@ export default {
}
}
+
:::
diff --git a/example/docs/zh-CN/components/avatar.md b/example/docs/zh-CN/components/avatar.md
index 7a75390b..b733ec2a 100644
--- a/example/docs/zh-CN/components/avatar.md
+++ b/example/docs/zh-CN/components/avatar.md
@@ -4,7 +4,7 @@
::: title 基础使用
:::
-::: demo
+::: demo 使用 `lay-avatar` 标签, 创建头像
diff --git a/example/docs/zh-CN/components/backtop.md b/example/docs/zh-CN/components/backtop.md
index f74b53d3..fe34cbe1 100644
--- a/example/docs/zh-CN/components/backtop.md
+++ b/example/docs/zh-CN/components/backtop.md
@@ -11,6 +11,9 @@
+
+
:::
:::title 自定义
@@ -35,7 +38,7 @@
+
+:::
+
+
+::: title 抽屉嵌套
+:::
+
+::: demo
+
+
+ 打开
+
+ 打开
+
+ 内容
+
+
+
+
+
+
+:::
+
+::: title 函数调用
+:::
+
+::: demo
+
+
+ 调用
+
+
+
+
+:::
+
+::: title 不同方向
+:::
+
+::: demo
+
+
+ 上
+ 下
+ 左
+ 右
+
+
+
+
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/exception.md b/example/docs/zh-CN/components/exception.md
new file mode 100644
index 00000000..9cdc3802
--- /dev/null
+++ b/example/docs/zh-CN/components/exception.md
@@ -0,0 +1,145 @@
+::: anchor
+:::
+
+::: title 401
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+
+
+
+ 刷新
+ 返回
+
+
+
+
+
+
+:::
+
+::: title 403
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+
+
+
+ 刷新
+ 返回
+
+
+
+
+
+
+:::
+
+::: title 404
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+
+
+
+ 刷新
+ 返回
+
+
+
+
+
+
+:::
+
+
+::: title 500
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+
+
+
+ 刷新
+ 返回
+
+
+
+
+
+
+:::
+
+::: title Exception 属性
+:::
+
+::: table
+
+| 属性 | 描述 | 可选值 |
+| ----------- | -------- | ------ |
+| title | 标题 | -- |
+| status | 状态 | `403` `404` `500` |
+| describe | 描述信息 | -- |
+
+:::
+
+::: title Exception 插槽
+:::
+
+::: table
+
+| 属性 | 描述 | 可选值 |
+| ----------- | -------- | ------ |
+| action | 操作 | -- |
+
+:::
+
+::: comment
+:::
+
+::: previousNext field
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/grid.md b/example/docs/zh-CN/components/grid.md
index 9902f799..8a82c51f 100644
--- a/example/docs/zh-CN/components/grid.md
+++ b/example/docs/zh-CN/components/grid.md
@@ -105,6 +105,19 @@ export default {
}
}
+
:::
@@ -136,6 +149,19 @@ export default {
}
}
+
:::
diff --git a/example/docs/zh-CN/components/icon.md b/example/docs/zh-CN/components/icon.md
index 1637b994..34922dab 100644
--- a/example/docs/zh-CN/components/icon.md
+++ b/example/docs/zh-CN/components/icon.md
@@ -4,7 +4,7 @@
::: title 基础使用
:::
-::: demo
+::: demo 使用 `lay-icon` 标签, 创建图标组件
@@ -27,7 +27,7 @@ export default {
::: title 图标颜色
:::
-::: demo
+::: demo 使用 `color` 属性设置颜色
@@ -55,7 +55,7 @@ export default {
::: title 图标尺寸
:::
-::: demo
+::: demo 使用 `size` 属性设置尺寸
diff --git a/example/docs/zh-CN/components/input.md b/example/docs/zh-CN/components/input.md
index 3f53e010..e14519ce 100644
--- a/example/docs/zh-CN/components/input.md
+++ b/example/docs/zh-CN/components/input.md
@@ -4,7 +4,7 @@
::: title 基础使用
:::
-::: demo
+::: demo 使用 `lay-input` 标签, 创建输入框
diff --git a/example/docs/zh-CN/components/inputNumber.md b/example/docs/zh-CN/components/inputNumber.md
index 34be522f..0367cf78 100644
--- a/example/docs/zh-CN/components/inputNumber.md
+++ b/example/docs/zh-CN/components/inputNumber.md
@@ -4,7 +4,7 @@
::: title 基础使用
:::
-::: demo
+::: demo 使用 `lay-input-number` 标签, 创建数字输入框
diff --git a/example/docs/zh-CN/components/layout.md b/example/docs/zh-CN/components/layout.md
index 5544d6fa..6618c897 100644
--- a/example/docs/zh-CN/components/layout.md
+++ b/example/docs/zh-CN/components/layout.md
@@ -7,7 +7,7 @@
::: demo
-
+
header
content
footer
@@ -27,21 +27,21 @@ export default {
:::
@@ -85,7 +108,7 @@ export default {
::: demo
-
+
header
side
@@ -105,6 +128,29 @@ export default {
}
}
+
:::
@@ -114,7 +160,7 @@ export default {
::: demo
-
+
side
header
@@ -123,7 +169,7 @@ export default {
-
+
header
body
@@ -132,7 +178,7 @@ export default {
side
-
+
Header
@@ -143,7 +189,7 @@ export default {
Footer
-
+
Header
@@ -166,6 +212,29 @@ export default {
}
}
+
:::
diff --git a/example/docs/zh-CN/components/load.md b/example/docs/zh-CN/components/load.md
index d2ec6a65..5f935de3 100644
--- a/example/docs/zh-CN/components/load.md
+++ b/example/docs/zh-CN/components/load.md
@@ -16,7 +16,7 @@
+
+:::
+
+::: title 反转样式
+:::
+
+::: demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+:::
+
+::: title 切换主题
+:::
+
+::: demo
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -90,17 +172,29 @@ export default {
- 首页
+
+
+ 首页
+
- 目录
+
+
+ 目录
+
- 菜单一
+
+
+ 菜单
+
- 菜单二
+
+
+ 菜单
+
@@ -136,6 +230,9 @@ export default {
| ------------------- | ------ | ---- |
| v-model:selectedKey | 选中项 | -- |
| v-model:openKeys | 打开项 | -- |
+| theme | 菜单主题 | `dark` `light` |
+| inverted | 特殊的激活样式 | `true` `false` |
+| level | 菜单层级 | `true` `false` |
:::
@@ -187,4 +284,4 @@ export default {
:::
::: previousNext nav
-:::
\ No newline at end of file
+:::
diff --git a/example/docs/zh-CN/components/modal.md b/example/docs/zh-CN/components/modal.md
index 125d4711..8c06dcc2 100644
--- a/example/docs/zh-CN/components/modal.md
+++ b/example/docs/zh-CN/components/modal.md
@@ -28,7 +28,7 @@ export default {
return {
visible1
};
- },
+ }
};
@@ -61,7 +61,7 @@ export default {
return {
visible2
};
- },
+ }
};
@@ -94,7 +94,7 @@ export default {
return {
visible3
};
- },
+ }
};
@@ -127,7 +127,7 @@ export default {
return {
visible4
};
- },
+ }
};
@@ -160,7 +160,7 @@ export default {
return {
visible8
};
- },
+ }
};
@@ -193,7 +193,7 @@ export default {
type5,
visible5
};
- },
+ }
};
@@ -231,7 +231,7 @@ export default {
btn6,
visible6
};
- },
+ }
};
@@ -264,7 +264,7 @@ export default {
return {
visible7
};
- },
+ }
};
@@ -283,7 +283,7 @@ export default {
diff --git a/example/docs/zh-CN/components/msg.md b/example/docs/zh-CN/components/msg.md
index 6736383c..2f97d877 100644
--- a/example/docs/zh-CN/components/msg.md
+++ b/example/docs/zh-CN/components/msg.md
@@ -11,13 +11,13 @@
+
+:::
+
+::: title 失败
+:::
+
+::: demo 使用 `lay-result` 标签, 创建一个结果页面
+
+
+
+
+
+
+
+:::
+
+::: title Result 属性
+:::
+
+::: table
+
+| 属性 | 描述 | 可选值 |
+| ----------- | -------- | ------ |
+| title | 标题 | -- |
+| status | 状态 | `success` `failure` |
+| describe | 描述信息 | -- |
+
+:::
+
+::: title Result 插槽
+:::
+
+::: table
+
+| 属性 | 描述 | 可选值 |
+| ----------- | -------- | ------ |
+| content | 内容 | -- |
+| action | 操作 | -- |
+
+:::
+
+::: comment
+:::
+
+::: previousNext field
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/select.md b/example/docs/zh-CN/components/select.md
index 0fa4f1d4..fc592423 100644
--- a/example/docs/zh-CN/components/select.md
+++ b/example/docs/zh-CN/components/select.md
@@ -46,7 +46,6 @@ export default {
import { ref } from 'vue'
export default {
- name:'selectChange',
setup() {
const value = ref(null);
var i = 1;
diff --git a/example/docs/zh-CN/components/skeleton.md b/example/docs/zh-CN/components/skeleton.md
index 814638c5..8afd1570 100644
--- a/example/docs/zh-CN/components/skeleton.md
+++ b/example/docs/zh-CN/components/skeleton.md
@@ -5,7 +5,7 @@
:::
-::: demo
+::: demo 使用 `lay-skeleton` 标签, 创建骨架屏
diff --git a/example/docs/zh-CN/components/slider.md b/example/docs/zh-CN/components/slider.md
index e0d40b8b..deec5d66 100644
--- a/example/docs/zh-CN/components/slider.md
+++ b/example/docs/zh-CN/components/slider.md
@@ -4,7 +4,7 @@
::: title 横向
:::
-::: demo
+::: demo 使用 `lay-slider` 标签, 创建滑块
diff --git a/example/docs/zh-CN/components/splitPanel.md b/example/docs/zh-CN/components/splitPanel.md
new file mode 100644
index 00000000..1f6cbc57
--- /dev/null
+++ b/example/docs/zh-CN/components/splitPanel.md
@@ -0,0 +1,118 @@
+::: anchor
+:::
+
+::: title 基础使用
+:::
+
+
+::: demo
+
+
+
+
+ A
+ B
+ C
+
+
+
+
+
+
+:::
+
+::: title 自定义比例
+:::
+
+
+::: demo
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+:::
+
+::: title 垂直布局
+:::
+
+
+::: demo
+
+
+
+
+ 1
+ 2
+ 3
+
+
+
+
+
+
+:::
+
+::: title 组合用法
+:::
+
+
+::: demo
+
+
+
+
+
+
+ 1
+ 2
+
+
+ 2
+
+
+
+
+
+
+:::
+
+::: title splitPanel属性
+:::
+
+::: table
+
+| 属性 | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| vertical | 是否垂直布局 | Boolean |`true` `false`| false |
+| minSize | 块拉动最小范围(按像素 `px`) | number | - | 50 |
+:::
+
+::: title splitPanelItem属性
+:::
+
+::: table
+
+| 属性 | 描述 | 类型 |可选值 | 默认值|
+| ----- | ---- | ------ | ---| ---|
+| space | 默认每个站多大比例(`%`), 设置一个,
其他的都需要设置,合计为(`100` ) | number | - | 按照个数平分 |
+:::
+
+
+::: comment
+:::
+
+::: previousNext splitPanel
+:::
\ No newline at end of file
diff --git a/example/docs/zh-CN/components/switch.md b/example/docs/zh-CN/components/switch.md
index f94fc57e..2adbf764 100644
--- a/example/docs/zh-CN/components/switch.md
+++ b/example/docs/zh-CN/components/switch.md
@@ -4,7 +4,7 @@
::: title 基础使用
:::
-::: demo
+::: demo 使用 `lay-switch` 标签, 创建开关
diff --git a/example/docs/zh-CN/components/tab.md b/example/docs/zh-CN/components/tab.md
index 07bce40a..c2100e3e 100644
--- a/example/docs/zh-CN/components/tab.md
+++ b/example/docs/zh-CN/components/tab.md
@@ -130,15 +130,15 @@ export default {
:::
-::: title 控制是否关闭
+::: title 关闭前置
:::
::: demo
- 选项一
- 选项二
+ 选项一
+ 选项二
选项三
选项四
选项五
@@ -178,15 +178,14 @@ export default {
:::
-
::: title 嵌套循环
:::
::: demo
-
-
+
+
内容{{a.id}}
@@ -204,12 +203,11 @@ export default {
}
const arr = ref([
- {id:'1', title:'选项一'},
- {id:'2', title:'选项二'}
+ {id:'1', title:'选项一', closable: false},
+ {id:'2', title:'选项二'},
+ {id:'3', title:'选项三'}
])
- arr.value.push({id:'3', title:'选项三'})
-
return {
current6,
arr
@@ -225,13 +223,13 @@ export default {
::: table
-| 属性 | 描述 | 可选值 |
-| ----------- | -------- | -------------- |
-| v-model | 当前激活 | -- |
-| type | 主题样式 | -- |
-| allow-close | 允许关闭 | `true` `false` |
-| before-close | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭 |
-| before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 |
+| 属性 | 描述 | 可选值 |
+| ------------ | ------------------------------------ | ----------------------------------------- |
+| v-model | 当前激活 | -- |
+| type | 主题样式 | -- |
+| allow-close | 允许关闭 | `true` `false` |
+| before-close | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭 |
+| before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 |
:::
@@ -247,8 +245,21 @@ export default {
:::
+::: title Tab Item 属性
+:::
+
+::: table
+
+| 属性 | 描述 | 可选值 |
+| -------- | -------- | ------ |
+| id | 唯一标识 | -- |
+| title | 头部标题 | -- |
+| closable | 允许关闭 | -- |
+
+:::
+
::: comment
:::
::: previousNext tab
-:::
\ No newline at end of file
+:::
diff --git a/example/docs/zh-CN/components/table.md b/example/docs/zh-CN/components/table.md
index f9a16c72..74d9c205 100644
--- a/example/docs/zh-CN/components/table.md
+++ b/example/docs/zh-CN/components/table.md
@@ -4,7 +4,7 @@
::: title 基础使用
:::
-::: demo
+::: demo 使用 `lay-table` 标签, 创建表格
diff --git a/example/docs/zh-CN/components/textarea.md b/example/docs/zh-CN/components/textarea.md
index 61c5a7bb..9ef947a4 100644
--- a/example/docs/zh-CN/components/textarea.md
+++ b/example/docs/zh-CN/components/textarea.md
@@ -4,7 +4,7 @@
::: title 基础使用
:::
-::: demo
+::: demo 使用 `lay-textarea` 标签, 创建文本域
diff --git a/example/docs/zh-CN/components/transfer.md b/example/docs/zh-CN/components/transfer.md
index 14dbf653..9d6785f8 100644
--- a/example/docs/zh-CN/components/transfer.md
+++ b/example/docs/zh-CN/components/transfer.md
@@ -4,7 +4,7 @@
::: title 基础使用
:::
-::: demo
+::: demo 使用 `lay-transfer` 标签, 创建穿梭框
diff --git a/example/docs/zh-CN/guide/changelog.md b/example/docs/zh-CN/guide/changelog.md
index 1a5cfd89..077602f4 100644
--- a/example/docs/zh-CN/guide/changelog.md
+++ b/example/docs/zh-CN/guide/changelog.md
@@ -11,15 +11,48 @@
-
+
+
+ -
+
0.3.6 2022-02-02
+
+ - [新增] result 结果组件, 提供 success error 通用状态页。
+ - [新增] exception 异常组件, 提供 403, 404, 500 通用异常页。
+ - [新增] menu 组件 level 属性, 控制菜单层级之间的背景色差异。
+ - [新增] menu 组件 inverted 属性, 提供另一种树形菜单选中效果。
+ - [新增] menu 组件 theme 属性, 可选值 light 和 dark。
+ - [修复] table 组件 header 不随 body 滚动。
+ - [升级] vue 3.2.29 版本。
+
+
+
+
+
+ -
+
0.3.5 2022-01-24
+
+ - [新增] split-panel 分割面板, 高度灵活的布局组件。
+ - [新增] layer 弹层 type 属性 drawer 可选值, 提供抽屉模式。
+ - [修复] tab-item 组件 closable 属性警告, 兼容 string 类型。
+ - [修复] dropdown 下拉菜单 content 显示位置问题。
+ - [升级] icons-vue 1.0.3 版本。
+ - [升级] layer-vue 1.3.1 版本。
+
+
+
+
-
-
0.3.4 2022-01-09
+ 0.3.4 2022-01-19
- [新增] avatar-list 头像列表组件。
- - [修复] button 按钮 disabled 为 true 时, 仍触发 click 事件。
- - [修复] menu-item 与 sub-menu 组件的 title 属性必填警告。
- - [升级] vite 2.7.10。
+ - [新增] tab-item 选项卡组件 closable 属性, 控制当前选项卡 close 支持。
+ - [修复] button 按钮 disabled 为 true 时, 触发 click 事件。
+ - [修复] menu-item 与 sub-menu 组件的 title 属性必填警告。
+ - [修复] layout 组件 side 因 flex 布局宽度不固定。
+ - [优化] layer 的 children slot 渲染机制。
+ - [升级] layer-vue 1.2.5 版本。
+ - [升级] vue 3.2.27 版本。
@@ -50,7 +83,7 @@
- [增强] menu 菜单组件, 初步支持无限级嵌套。
- [修复] layer.close layer.closeAll 函数无法触发 OutAnim 过度动画问题。
- [废弃] menu-child-item 组件, 使用 menu-item 替代。
- - [升级] layer-vue 1.2.4。
+ - [升级] layer-vue 1.2.4 版本。
@@ -68,7 +101,7 @@
[修复] rate 评分 mouseleave 事件绑定警告。
[修复] npm 安装 layui-vue 不必要的依赖警告。
[集成] eslint, prettier 规范插件 。
- [升级] icons-vue 1.0.2。
+ [升级] icons-vue 1.0.2 版本。
@@ -87,7 +120,7 @@
[修复] layer 弹层 v-model 切换状态后, 让其保持 area 与 offset 状态。
[修复] transfer 穿梭框组件按钮样式, 使其增加减少操作按钮对齐。
[修复] tree 树开启 checkbox 时, 无法选中的问题。
- [升级] layer-vue 1.2.2。
+ [升级] layer-vue 1.2.2 版本。
diff --git a/example/docs/zh-CN/guide/getStarted.md b/example/docs/zh-CN/guide/getStarted.md
index fbae85a7..da40562f 100644
--- a/example/docs/zh-CN/guide/getStarted.md
+++ b/example/docs/zh-CN/guide/getStarted.md
@@ -1,18 +1,23 @@
::: title 快速上手
:::
-
-
-::: describe 1. 使用 npm 下载
-:::
-
```
npm install @layui/layui-vue --save
```
+:::describe 或
+:::
+```
+yarn add @layui/layui-vue --save
+```
+:::describe 或
+:::
+```
+pnpm install @layui/layui-vue --save
+```
-::: describe 2. 在 main.ts 中依赖
+::: title 全局注册
:::
```js
@@ -26,7 +31,27 @@ createApp(App).use(Layui).mount('#app')
-::: describe 3. 在 index.vue 使用
+::: title 按需引入
+:::
+
+```js
+import App from './App.vue'
+import { createApp } from 'vue'
+import { LayButton, LayTable } from '@layui/layui-vue'
+import '@layui/layui-vue/es/button/index.css';
+import '@layui/layui-vue/es/table/index.css';
+
+var app = createApp(App).
+
+app.component("LayButton", LayButton);
+app.component("LayTable", LayTable);
+
+app.mount('#app')
+```
+
+
+
+::: title 基础示例
:::
```html
@@ -41,5 +66,3 @@ createApp(App).use(Layui).mount('#app')
pearadmin.com
```
-
-- 前往: [layui-vue-sample](https://gitee.com/layui-vue/layui-vue-sample)
diff --git a/example/docs/zh-CN/guide/member.md b/example/docs/zh-CN/guide/member.md
index 5e192299..e8fe543b 100644
--- a/example/docs/zh-CN/guide/member.md
+++ b/example/docs/zh-CN/guide/member.md
@@ -129,7 +129,7 @@
莫名点
- 焦点:skeleton step
+ 焦点:skeleton step splitPanel
地点:中国 上海
diff --git a/example/src/components/LayCode.vue b/example/src/components/LayCode.vue
index a1819b7b..9b2c7509 100644
--- a/example/src/components/LayCode.vue
+++ b/example/src/components/LayCode.vue
@@ -2,18 +2,19 @@
@@ -22,6 +23,8 @@
import { layer } from '@layui/layer-vue'
import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { usePlayGround } from '../plugin/usePlayground'
+
const meta = ref({} as HTMLElement)
const isFixContorl = ref(false)
const codeAreaHeight = ref(0)
@@ -32,6 +35,15 @@ const toggle = function () {
show.value = !show.value
}
+const onPlayground = function(){
+ const foundCodes = meta.value.getElementsByClassName('language-html')
+ const foundCode = foundCodes[0];
+ const text = foundCode.textContent || "";
+
+ const { link } = usePlayGround(text)
+ window.open(link)
+}
+
const copy = function () {
const foundCodes = meta.value.getElementsByClassName('language-html')
const foundCode = foundCodes[0];
@@ -121,6 +133,7 @@ function handleScroll() {
}
.lay-code .source {
padding: 24px;
+ padding-bottom:15px;
}
.lay-code .meta {
padding: 0 10px;
@@ -129,9 +142,10 @@ function handleScroll() {
overflow: hidden;
transition: height 0.2s;
}
-.lay-code .meta .description {
+.lay-code .source .description {
padding: 20px;
- margin: 10px 0;
+ margin: 20px 0;
+ margin-bottom: 0px;
border: 1px solid whitesmoke;
box-sizing: border-box;
background: var(--c-bg);
@@ -140,11 +154,11 @@ function handleScroll() {
color: var(--c-text-light-1);
word-break: break-word;
}
-.lay-code .meta .description p {
+.lay-code .source .description p {
margin: 0 !important;
line-height: 26px !important;
}
-.lay-code .meta .description code {
+.lay-code .source .description code {
display: inline-block;
padding: 1px 5px;
margin: 0 4px;
@@ -155,6 +169,7 @@ function handleScroll() {
line-height: 18px;
color: var(--c-text-light);
}
+
.lay-code .control {
height: 44px;
box-sizing: border-box;
@@ -186,4 +201,7 @@ function handleScroll() {
padding-left: 10px;
padding-right: 10px;
}
+.btn:hover::before {
+ color: #5FB878;
+}
\ No newline at end of file
diff --git a/example/src/layouts/Layout.vue b/example/src/layouts/Layout.vue
index 21d3d9c9..70ed12a9 100644
--- a/example/src/layouts/Layout.vue
+++ b/example/src/layouts/Layout.vue
@@ -30,20 +30,26 @@
class="layui-nav layui-layout-right"
style="margin-top: 0px; margin-bottom: 0px"
>
+
+
+
+
+
-
+
- 0.3.4
+ 0.3.6
@@ -51,307 +57,47 @@
+
+
+
+
+
diff --git a/src/component/stepItem/index.ts b/src/component/stepItem/index.ts
new file mode 100644
index 00000000..5511c18f
--- /dev/null
+++ b/src/component/stepItem/index.ts
@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+ app.component(Component.name, Component);
+};
+
+export default Component;
diff --git a/src/module/stepItem/index.vue b/src/component/stepItem/index.vue
similarity index 97%
rename from src/module/stepItem/index.vue
rename to src/component/stepItem/index.vue
index 2ef8f3e1..dcbd84e0 100644
--- a/src/module/stepItem/index.vue
+++ b/src/component/stepItem/index.vue
@@ -1,3 +1,124 @@
+
+
+
+
{{ index + 1 }}.{{ title }}
-
-
-
+
\ No newline at end of file
diff --git a/src/component/subMenu/index.ts b/src/component/subMenu/index.ts
new file mode 100644
index 00000000..5511c18f
--- /dev/null
+++ b/src/component/subMenu/index.ts
@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+ app.component(Component.name, Component);
+};
+
+export default Component;
diff --git a/src/module/subMenu/index.vue b/src/component/subMenu/index.vue
similarity index 100%
rename from src/module/subMenu/index.vue
rename to src/component/subMenu/index.vue
diff --git a/src/component/switch/index.less b/src/component/switch/index.less
new file mode 100644
index 00000000..e69de29b
diff --git a/src/component/switch/index.ts b/src/component/switch/index.ts
new file mode 100644
index 00000000..5511c18f
--- /dev/null
+++ b/src/component/switch/index.ts
@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+ app.component(Component.name, Component);
+};
+
+export default Component;
diff --git a/src/module/switch/index.vue b/src/component/switch/index.vue
similarity index 100%
rename from src/module/switch/index.vue
rename to src/component/switch/index.vue
diff --git a/src/component/tab/index.ts b/src/component/tab/index.ts
new file mode 100644
index 00000000..5511c18f
--- /dev/null
+++ b/src/component/tab/index.ts
@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+ app.component(Component.name, Component);
+};
+
+export default Component;
diff --git a/src/module/tab/index.vue b/src/component/tab/index.vue
similarity index 97%
rename from src/module/tab/index.vue
rename to src/component/tab/index.vue
index 033997d6..d95d7502 100644
--- a/src/module/tab/index.vue
+++ b/src/component/tab/index.vue
@@ -1,30 +1,3 @@
-
-
-
- -
- {{ children.props.title }}
-
-
-
-
-
-
-
-
-
+
+
+
+
+ -
+ {{ children.props.title }}
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/component/tabItem/index.ts b/src/component/tabItem/index.ts
new file mode 100644
index 00000000..5511c18f
--- /dev/null
+++ b/src/component/tabItem/index.ts
@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+ app.component(Component.name, Component);
+};
+
+export default Component;
diff --git a/src/module/tabItem/index.vue b/src/component/tabItem/index.vue
similarity index 88%
rename from src/module/tabItem/index.vue
rename to src/component/tabItem/index.vue
index 1748e813..2ffa6eef 100644
--- a/src/module/tabItem/index.vue
+++ b/src/component/tabItem/index.vue
@@ -1,23 +1,17 @@
-
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/component/table/index.less b/src/component/table/index.less
new file mode 100644
index 00000000..f98364de
--- /dev/null
+++ b/src/component/table/index.less
@@ -0,0 +1,613 @@
+.laytable-cell-checkbox {
+ width: 34px;
+}
+.layui-table-col-special {
+ width: 34px;
+}
+
+.layui-table {
+ width: 100%;
+ background-color: #fff;
+ color: #666;
+}
+
+.layui-table tr {
+ transition: all 0.3s;
+ -webkit-transition: all 0.3s;
+}
+
+.layui-table th {
+ text-align: left;
+ font-weight: 400;
+}
+
+.layui-table tbody tr:hover,
+.layui-table thead tr,
+.layui-table-click,
+.layui-table-header,
+.layui-table-hover,
+.layui-table-mend,
+.layui-table-patch,
+.layui-table-tool,
+.layui-table-total,
+.layui-table-total tr,
+.layui-table[lay-even] tr:nth-child(even) {
+ background-color: #fafafa;
+}
+
+.layui-table td,
+.layui-table th,
+.layui-table-col-set,
+.layui-table-fixed-r,
+.layui-table-grid-down,
+.layui-table-header,
+.layui-table-page,
+.layui-table-tips-main,
+.layui-table-tool,
+.layui-table-total,
+.layui-table-view,
+.layui-table[lay-skin="line"],
+.layui-table[lay-skin="row"] {
+ border-width: 1px;
+ border-style: solid;
+ border-color: #eee;
+}
+
+.layui-table td,
+.layui-table th {
+ position: relative;
+ padding: 9px 15px;
+ min-height: 20px;
+ line-height: 20px;
+ font-size: 14px;
+}
+
+.layui-table[lay-skin="line"] td,
+.layui-table[lay-skin="line"] th {
+ border-width: 0 0 1px;
+}
+
+.layui-table[lay-skin="row"] td,
+.layui-table[lay-skin="row"] th {
+ border-width: 0 1px 0 0;
+}
+
+.layui-table[lay-skin="nob"] td,
+.layui-table[lay-skin="nob"] th {
+ border: none;
+}
+
+.layui-table img {
+ max-width: 100px;
+}
+
+.layui-table[lay-size="lg"] td,
+.layui-table[lay-size="lg"] th {
+ padding: 15px 30px;
+}
+
+.layui-table-view .layui-table[lay-size="lg"] .layui-table-cell {
+ height: 40px;
+ line-height: 40px;
+}
+
+.layui-table[lay-size="sm"] td,
+.layui-table[lay-size="sm"] th {
+ font-size: 12px;
+ padding: 5px 10px;
+}
+
+.layui-table-view .layui-table[lay-size="sm"] .layui-table-cell {
+ height: 20px;
+ line-height: 20px;
+}
+
+.layui-table[lay-data] {
+ display: none;
+}
+
+.layui-table-box {
+ position: relative;
+ overflow: hidden;
+}
+
+.layui-table-view .layui-table {
+ position: relative;
+ margin: 0;
+ border-collapse: separate;
+}
+
+.layui-table-view .layui-table[lay-skin="line"] {
+ border-width: 0 1px 0 0;
+}
+
+.layui-table-view .layui-table[lay-skin="row"] {
+ border-width: 0 0 1px;
+}
+
+.layui-table-view .layui-table td,
+.layui-table-view .layui-table th {
+ border-top: none;
+ border-left: none;
+}
+
+.layui-table-view .layui-table td.layui-table-col-special,
+.layui-table-view .layui-table th.layui-table-col-special {
+ padding: 5px 16px;
+}
+
+.layui-table-view .layui-table th.layui-unselect .layui-table-cell span {
+ cursor: pointer;
+}
+
+.layui-table-view .layui-table td {
+ cursor: default;
+}
+
+.layui-table-view .layui-table td[data-edit="text"] {
+ cursor: text;
+}
+
+.layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
+ width: 18px;
+ height: 18px;
+}
+
+.layui-table-view .layui-form-radio {
+ line-height: 0;
+ padding: 0;
+}
+
+.layui-table-view .layui-form-radio > i {
+ margin: 0;
+ font-size: 20px;
+}
+
+.layui-table-init {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ z-index: 110;
+}
+
+.layui-table-init .layui-icon {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ margin: -15px 0 0 -15px;
+ font-size: 30px;
+ color: #c2c2c2;
+}
+
+.layui-table-header {
+ border-width: 0 0 1px;
+ overflow: hidden;
+}
+
+.layui-table-header .layui-table {
+ margin-bottom: -1px;
+}
+
+.layui-table-tool .layui-inline[lay-event] {
+ position: relative;
+ width: 26px;
+ height: 26px;
+ padding: 5px;
+ line-height: 16px;
+ margin-right: 10px;
+ text-align: center;
+ color: #333;
+ border: 1px solid #ccc;
+ cursor: pointer;
+ -webkit-transition: 0.5s all;
+ transition: 0.5s all;
+}
+
+.layui-table-tool .layui-inline[lay-event]:hover {
+ border: 1px solid #999;
+}
+
+.layui-table-tool-temp {
+ padding-right: 120px;
+}
+
+.layui-table-tool-self {
+ position: absolute;
+ right: 17px;
+ top: 10px;
+}
+
+.layui-table-tool .layui-table-tool-self .layui-inline[lay-event] {
+ margin: 0 0 0 10px;
+}
+
+.layui-table-tool-panel {
+ position: absolute;
+ top: 29px;
+ left: -1px;
+ padding: 5px 0;
+ min-width: 150px;
+ min-height: 40px;
+ border: 1px solid #d2d2d2;
+ text-align: left;
+ overflow-y: auto;
+ background-color: #fff;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
+}
+
+.layui-table-cell,
+.layui-table-tool-panel li {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.layui-table-tool-panel li {
+ padding: 0 10px;
+ line-height: 30px;
+ -webkit-transition: 0.5s all;
+ transition: 0.5s all;
+}
+
+.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] {
+ width: 100%;
+ padding-left: 28px;
+}
+
+.layui-table-tool-panel li:hover {
+ background-color: #f6f6f6;
+}
+
+.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] i {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+
+.layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] span {
+ padding: 0;
+}
+
+.layui-table-tool .layui-table-tool-self .layui-table-tool-panel {
+ left: auto;
+ right: -1px;
+}
+
+.layui-table-col-set {
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 20px;
+ height: 100%;
+ border-width: 0 0 0 1px;
+ background-color: #fff;
+}
+
+.layui-table-sort {
+ width: 10px;
+ height: 20px;
+ margin-left: 5px;
+ cursor: pointer !important;
+}
+
+.layui-table-sort .layui-edge {
+ position: absolute;
+ left: 5px;
+ border-width: 5px;
+}
+
+.layui-table-sort .layui-table-sort-asc {
+ top: 3px;
+ border-top: none;
+ border-bottom-style: solid;
+ border-bottom-color: #b2b2b2;
+}
+
+.layui-table-sort .layui-table-sort-asc:hover {
+ border-bottom-color: #666;
+}
+
+.layui-table-sort .layui-table-sort-desc {
+ bottom: 5px;
+ border-bottom: none;
+ border-top-style: solid;
+ border-top-color: #b2b2b2;
+}
+
+.layui-table-sort .layui-table-sort-desc:hover {
+ border-top-color: #666;
+}
+
+.layui-table-sort[lay-sort="asc"] .layui-table-sort-asc {
+ border-bottom-color: #000;
+}
+
+.layui-table-sort[lay-sort="desc"] .layui-table-sort-desc {
+ border-top-color: #000;
+}
+
+.layui-table-cell {
+ height: 28px;
+ line-height: 28px;
+ position: relative;
+ box-sizing: border-box;
+}
+
+.layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
+ top: -1px;
+ padding: 0;
+}
+
+.layui-table-cell .layui-table-link {
+ color: #01aaed;
+}
+
+.laytable-cell-checkbox,
+.laytable-cell-numbers,
+.laytable-cell-radio,
+.laytable-cell-space {
+ padding: 0;
+ text-align: center;
+ -webkit-box-pack: center;
+}
+
+.layui-table-body {
+ position: relative;
+ overflow: auto;
+ margin-right: -1px;
+ margin-bottom: -1px;
+}
+
+.layui-table-body .layui-none {
+ line-height: 26px;
+ padding: 30px 15px;
+ text-align: center;
+ color: #999;
+}
+
+.layui-table-fixed {
+ position: absolute;
+ left: 0;
+ top: 0;
+ z-index: 101;
+}
+
+.layui-table-fixed .layui-table-body {
+ overflow: hidden;
+}
+
+.layui-table-fixed-l {
+ box-shadow: 1px 0 8px rgba(0, 0, 0, 0.08);
+}
+
+.layui-table-fixed-r {
+ left: auto;
+ right: -1px;
+ border-width: 0 0 0 1px;
+ box-shadow: -1px 0 8px rgba(0, 0, 0, 0.08);
+}
+
+.layui-table-fixed-r .layui-table-header {
+ position: relative;
+ overflow: visible;
+}
+
+.layui-table-mend {
+ position: absolute;
+ right: -49px;
+ top: 0;
+ height: 100%;
+ width: 50px;
+}
+
+.layui-table-tool {
+ position: relative;
+ z-index: 890;
+ width: 100%;
+ min-height: 50px;
+ line-height: 30px;
+ padding: 10px 15px;
+ border-width: 0 0 1px;
+}
+
+.layui-table-tool .layui-btn-container {
+ margin-bottom: -10px;
+}
+
+.layui-table-page,
+.layui-table-total {
+ border-width: 1px 0 0;
+ margin-bottom: -1px;
+ overflow: hidden;
+}
+
+.layui-table-page {
+ position: relative;
+ width: 100%;
+ padding: 7px 7px 0;
+ height: 41px;
+ font-size: 12px;
+ white-space: nowrap;
+}
+
+.layui-table-page > div {
+ height: 26px;
+}
+
+.layui-table-page .layui-laypage {
+ margin: 0;
+}
+
+.layui-table-page .layui-laypage a,
+.layui-table-page .layui-laypage span {
+ height: 26px;
+ line-height: 26px;
+ margin-bottom: 10px;
+ border: none;
+ background: 0 0;
+}
+
+.layui-table-page .layui-laypage a,
+.layui-table-page .layui-laypage span.layui-laypage-curr {
+ padding: 0 12px;
+}
+
+.layui-table-page .layui-laypage span {
+ margin-left: 0;
+ padding: 0;
+}
+
+.layui-table-page .layui-laypage .layui-laypage-prev {
+ margin-left: -7px !important;
+}
+
+.layui-table-page .layui-laypage .layui-laypage-curr .layui-laypage-em {
+ left: 0;
+ top: 0;
+ padding: 0;
+}
+
+.layui-table-page .layui-laypage button,
+.layui-table-page .layui-laypage input {
+ height: 26px;
+ line-height: 26px;
+}
+
+.layui-table-page .layui-laypage input {
+ width: 40px;
+}
+
+.layui-table-page .layui-laypage button {
+ padding: 0 10px;
+}
+
+.layui-table-page select {
+ height: 18px;
+}
+
+.layui-table-pagebar {
+ float: right;
+ line-height: 26px;
+}
+
+.layui-table-view select[lay-ignore] {
+ display: inline-block;
+}
+
+.layui-table-patch .layui-table-cell {
+ padding: 0;
+ width: 30px;
+}
+
+.layui-table-edit {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ padding: 0 14px 1px;
+ border-radius: 0;
+ box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
+}
+
+.layui-table-edit:focus {
+ border-color: #5fb878 !important;
+}
+
+select.layui-table-edit {
+ padding: 0 0 0 10px;
+ border-color: #d2d2d2;
+}
+
+.layui-table-view .layui-form-checkbox,
+.layui-table-view .layui-form-radio,
+.layui-table-view .layui-form-switch {
+ top: 0;
+ margin: 0;
+ box-sizing: content-box;
+}
+
+.layui-table-view .layui-form-checkbox {
+ top: -1px;
+ height: 26px;
+ line-height: 26px;
+}
+
+.layui-table-view .layui-form-checkbox i {
+ height: 26px;
+}
+
+.layui-table-grid .layui-table-cell {
+ overflow: visible;
+}
+
+.layui-table-grid-down {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 26px;
+ height: 100%;
+ padding: 5px 0;
+ border-width: 0 0 0 1px;
+ text-align: center;
+ background-color: #fff;
+ color: #999;
+ cursor: pointer;
+}
+
+.layui-table-grid-down .layui-icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ margin: -8px 0 0 -8px;
+}
+
+.layui-table-grid-down:hover {
+ background-color: #fbfbfb;
+}
+
+body .layui-table-tips .layui-layer-content {
+ background: 0 0;
+ padding: 0;
+ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
+}
+
+.layui-table-tips-main {
+ margin: -44px 0 0 -1px;
+ max-height: 150px;
+ padding: 8px 15px;
+ font-size: 14px;
+ overflow-y: scroll;
+ background-color: #fff;
+ color: #666;
+}
+
+.layui-table-tips-c {
+ position: absolute;
+ right: -3px;
+ top: -13px;
+ width: 20px;
+ height: 20px;
+ padding: 3px;
+ cursor: pointer;
+ background-color: #666;
+ border-radius: 50%;
+ color: #fff;
+}
+
+.layui-table-tips-c:hover {
+ background-color: #777;
+}
+
+.layui-table-tips-c:before {
+ position: relative;
+ right: -2px;
+}
+
+.layui-table,
+.layui-table-view {
+ margin: 10px 0;
+}
diff --git a/src/component/table/index.ts b/src/component/table/index.ts
new file mode 100644
index 00000000..5511c18f
--- /dev/null
+++ b/src/component/table/index.ts
@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+ app.component(Component.name, Component);
+};
+
+export default Component;
diff --git a/src/module/table/index.vue b/src/component/table/index.vue
similarity index 86%
rename from src/module/table/index.vue
rename to src/component/table/index.vue
index b751c8ac..20976db8 100644
--- a/src/module/table/index.vue
+++ b/src/component/table/index.vue
@@ -12,9 +12,15 @@ import {
defineProps,
withDefaults,
defineEmits,
+ onMounted,
} from "vue";
-import { Recordable } from "../type";
-import { guid } from "../../tools/guidUtil";
+import { Recordable } from "../../types";
+import { guid } from "../../utils/guidUtil";
+import LayCheckbox from "../checkbox";
+import LayDropdown from "../dropdown";
+import LayPage from "../page";
+import LayIcon from "../icon";
+import "./index.less";
const tableId = guid();
@@ -104,6 +110,16 @@ const print = function () {
window.location.reload();
document.body.innerHTML = oldContent;
};
+
+let tableHeader = ref(null);
+let tableBody = ref(null);
+
+onMounted(() => {
+ tableBody.value?.addEventListener('scroll', () => {
+ tableHeader.value!.scrollLeft = tableBody.value?.scrollLeft || 0;
+ })
+})
+
@@ -117,23 +133,23 @@ const print = function () {