From 32a2500d67ab6d60d4185fe9240496fc2838d60a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com> Date: Mon, 1 Nov 2021 01:02:21 +0800 Subject: [PATCH] =?UTF-8?q?perf(layer):=20=E5=88=9D=E6=AD=A5=E9=9B=86?= =?UTF-8?q?=E6=88=90=20layer=20=E5=BC=B9=E5=B1=82,=20=E6=96=B0=E5=A2=9E=20?= =?UTF-8?q?useMove=20=E6=8B=96=E6=8B=BD=20hooks?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/docs/zh-CN/components/animation.md | 2 +- docs/docs/zh-CN/components/avatar.md | 2 +- docs/docs/zh-CN/components/breadcrumb.md | 12 +- docs/docs/zh-CN/components/button.md | 49 ++++- docs/docs/zh-CN/components/cards.md | 14 +- docs/docs/zh-CN/components/carousel.md | 8 +- docs/docs/zh-CN/components/checkbox.md | 11 +- docs/docs/zh-CN/components/color.md | 13 ++ docs/docs/zh-CN/components/container.md | 6 +- docs/docs/zh-CN/components/dropdown.md | 16 +- docs/docs/zh-CN/components/empty.md | 7 +- docs/docs/zh-CN/components/grid.md | 28 ++- docs/docs/zh-CN/components/icon.md | 12 +- docs/docs/zh-CN/components/input.md | 26 ++- docs/docs/zh-CN/components/layer.md | 226 +++++++++++++++++++++++ docs/docs/zh-CN/components/layout.md | 2 +- docs/docs/zh-CN/components/menu.md | 14 +- docs/docs/zh-CN/components/page.md | 6 +- docs/docs/zh-CN/components/panel.md | 6 +- docs/docs/zh-CN/components/progress.md | 4 +- docs/docs/zh-CN/components/radio.md | 20 +- docs/docs/zh-CN/components/rate.md | 10 +- docs/docs/zh-CN/components/switch.md | 24 ++- docs/docs/zh-CN/components/tab.md | 23 ++- docs/docs/zh-CN/components/table.md | 4 +- docs/docs/zh-CN/components/textarea.md | 24 ++- docs/docs/zh-CN/guide/changelog.md | 5 + docs/docs/zh-CN/guide/getStarted.md | 2 - docs/docs/zh-CN/guide/sandbox.md | 48 +---- docs/docs/zh-CN/hooks/useClickOutside.md | 19 +- docs/docs/zh-CN/hooks/useFullScreen.md | 38 ++++ docs/docs/zh-CN/hooks/useMove.md | 33 ++++ docs/src/layouts/Layout.vue | 2 +- docs/src/router/zh-CN.ts | 20 ++ docs/src/styles/markdown.css | 10 +- docs/src/view/component.vue | 12 ++ docs/src/view/guide.vue | 6 + docs/src/view/hooks.vue | 16 +- docs/src/view/index.vue | 2 +- src/{image => css}/icon-ext.png | Bin src/{image => css}/icon.png | Bin src/css/layer.css | 8 +- src/{image => css}/loading-0.gif | Bin src/{image => css}/loading-1.gif | Bin src/{image => css}/loading-2.gif | Bin src/hooks/useClickOutside.ts | 1 + src/hooks/useFullScreen.ts | 25 +++ src/hooks/useMove.ts | 103 +++++++++++ src/index.ts | 3 + src/module/button/index.vue | 29 +-- src/module/layer/index.ts | 9 + src/module/layer/index.vue | 159 ++++++++++++++++ src/module/textarea/index.vue | 16 +- 53 files changed, 925 insertions(+), 210 deletions(-) create mode 100644 docs/docs/zh-CN/components/layer.md create mode 100644 docs/docs/zh-CN/hooks/useFullScreen.md create mode 100644 docs/docs/zh-CN/hooks/useMove.md rename src/{image => css}/icon-ext.png (100%) rename src/{image => css}/icon.png (100%) rename src/{image => css}/loading-0.gif (100%) rename src/{image => css}/loading-1.gif (100%) rename src/{image => css}/loading-2.gif (100%) create mode 100644 src/hooks/useFullScreen.ts create mode 100644 src/hooks/useMove.ts create mode 100644 src/module/layer/index.ts create mode 100644 src/module/layer/index.vue diff --git a/docs/docs/zh-CN/components/animation.md b/docs/docs/zh-CN/components/animation.md index 3c0083fb..19d0b181 100644 --- a/docs/docs/zh-CN/components/animation.md +++ b/docs/docs/zh-CN/components/animation.md @@ -74,7 +74,7 @@ export default { ::: title 动画类名 ::: -| Name | Description | Accepted Values | +| 类名 | 描述 | 使用 | | --------------------------------- | ------------ | ---------------------------------------------- | | layui-anim-down | 顶部往下滑入 | `layui-anim layui-anim-down` | | layui-anim-downbit | 微微往下滑入 | `layui-anim layui-anim-downbit` | diff --git a/docs/docs/zh-CN/components/avatar.md b/docs/docs/zh-CN/components/avatar.md index 171c282c..0a851e26 100644 --- a/docs/docs/zh-CN/components/avatar.md +++ b/docs/docs/zh-CN/components/avatar.md @@ -83,7 +83,7 @@ export default { ::: title 头像属性 ::: -| | | | +| 属性 | 描述 | 可选值 | | ------ | ---- | -------------- | | src | 图源 | -- | | size | 尺寸 | `xs` `sm` `lg` | diff --git a/docs/docs/zh-CN/components/breadcrumb.md b/docs/docs/zh-CN/components/breadcrumb.md index d2c8f9f6..b3d3c537 100644 --- a/docs/docs/zh-CN/components/breadcrumb.md +++ b/docs/docs/zh-CN/components/breadcrumb.md @@ -82,13 +82,13 @@ export default { ::: title 面包屑属性 ::: -| Name | Description | Accepted Values | -| --------- | ----------- | --------------- | -| separator | 分割符 | `/` | +| 属性 | 描述 | 默认值 | +| --------- | ------ | ------ | +| separator | 分割符 | `/` | ::: title 面包屑插槽 ::: -| Name | Description | Accepted Values | -| ------- | ----------- | --------------- | -| default | 默认插槽 | `--` | +| 插槽 | 描述 | 默认值 | +| ------- | -------- | ------ | +| default | 默认插槽 | `--` | diff --git a/docs/docs/zh-CN/components/button.md b/docs/docs/zh-CN/components/button.md index f8c1ed9b..ce2a3759 100644 --- a/docs/docs/zh-CN/components/button.md +++ b/docs/docs/zh-CN/components/button.md @@ -252,13 +252,48 @@ export default { ::: +::: title 事件处理 +::: + +::: demo 使用 @click 设置单击回调 + + + + + +::: + ::: title 按钮属性 ::: -| Name | Description | Accepted Values | -| ------ | ----------- | --------------------------------------------- | -| 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` | + +::: title 按钮事件 +::: + +| 事件 | 描述 | 参数 | +| ----- | -------- | ---- | +| click | 单击事件 | `--` | diff --git a/docs/docs/zh-CN/components/cards.md b/docs/docs/zh-CN/components/cards.md index daa1c56b..441d1152 100644 --- a/docs/docs/zh-CN/components/cards.md +++ b/docs/docs/zh-CN/components/cards.md @@ -108,14 +108,14 @@ export default { ::: title 卡片属性 ::: -| | | | -| ----- | ---- | --- | -| title | 标题 | -- | +| 属性 | 描述 | 可选值 | +| ----- | ---- | ------ | +| title | 标题 | -- | ::: title 卡片插槽 ::: -| | | | -| ------ | -------- | --- | -| header | 头部插槽 | -- | -| body | 内容插槽 | -- | +| 插槽 | 描述 | 可选值 | +| ------ | -------- | ------ | +| header | 头部插槽 | -- | +| body | 内容插槽 | -- | diff --git a/docs/docs/zh-CN/components/carousel.md b/docs/docs/zh-CN/components/carousel.md index ec5ea378..4b8f19f3 100644 --- a/docs/docs/zh-CN/components/carousel.md +++ b/docs/docs/zh-CN/components/carousel.md @@ -119,7 +119,7 @@ export default { ::: title 轮播属性 ::: -| Name | Description | Accepted Values | +| 属性 | 描述 | 可选值 | | --------- | ------------ | ------------------------- | | v-model | 当前激活项 | `--` | | anim | 切换方向 | `default` `updown` | @@ -129,6 +129,6 @@ export default { ::: title 轮播事件 ::: -| Name | Description | Accepted Values | -| ------ | ----------- | --------------- | -| change | 切换回调 | id | +| 事件 | 描述 | 可选值 | +| ------ | -------- | ------ | +| change | 切换回调 | id | diff --git a/docs/docs/zh-CN/components/checkbox.md b/docs/docs/zh-CN/components/checkbox.md index f387dc1a..91aa6cc2 100644 --- a/docs/docs/zh-CN/components/checkbox.md +++ b/docs/docs/zh-CN/components/checkbox.md @@ -149,13 +149,20 @@ export default { ::: -::: title checkbox 属性 +::: title 复选框属性 ::: -| Name | Description | Accepted Values | +| 属性 | 描述 | 可选值 | | ------------------- | ------------- | -------------------- | | name | 原始属性 name | -- | | skin | 主题 | -- | | label | 选中值 | -- | | checked ( v-model ) | 是否选中 | `true` `false` | | change | 切换事件 | isChecked : 当前状态 | + +::: title 复选框事件 +::: + +| 事件 | 描述 | 可选值 | +| ------ | -------- | -------------------- | +| change | 切换事件 | isChecked : 当前状态 | diff --git a/docs/docs/zh-CN/components/color.md b/docs/docs/zh-CN/components/color.md index 7632f183..aebd0db0 100644 --- a/docs/docs/zh-CN/components/color.md +++ b/docs/docs/zh-CN/components/color.md @@ -143,3 +143,16 @@ export default { ::: + +::: title 颜色说明 + +::: + +| Class | 描述 | 使用 | +| --------------- | ---- | ----------------------- | +| layui-bg-red | 赤色 | class="layui-bg-red" | +| layui-bg-orange | 橙色 | class="layui-bg-orange" | +| layui-bg-green | 墨绿 | class="layui-bg-green" | +| layui-bg-cyan | 藏青 | class="layui-bg-cyan" | +| layui-bg-blue | 蓝色 | class="layui-bg-blue" | +| layui-bg-black | 雅黑 | class="layui-bg-black" | diff --git a/docs/docs/zh-CN/components/container.md b/docs/docs/zh-CN/components/container.md index 2a157bbd..9b64e64e 100644 --- a/docs/docs/zh-CN/components/container.md +++ b/docs/docs/zh-CN/components/container.md @@ -68,6 +68,6 @@ export default { ::: title 容器属性 ::: -| Name | Description | Accepted Values | -| ----- | ----------- | --------------- | -| fluid | 流模式 | `true` `false` | +| 属性 | 描述 | 可选值 | +| ----- | ------ | -------------- | +| fluid | 流模式 | `true` `false` | diff --git a/docs/docs/zh-CN/components/dropdown.md b/docs/docs/zh-CN/components/dropdown.md index ece1a0e3..dd147576 100644 --- a/docs/docs/zh-CN/components/dropdown.md +++ b/docs/docs/zh-CN/components/dropdown.md @@ -67,16 +67,16 @@ export default { ::: -::: title Dropdown 属性 +::: title 下拉属性 ::: -| Name | Description | Accepted Values | -| ------- | ----------- | --------------- | -| trigger | 触发方式 | `click` `hover` | +| 属性 | 描述 | 可选值 | +| ------- | -------- | --------------- | +| trigger | 触发方式 | `click` `hover` | -::: title Dropdown 插槽 +::: title 下拉插槽 ::: -| Name | Description | Accepted Values | -| ------- | ----------- | --------------- | -| content | 下拉内容 | -- | +| 插槽 | 描述 | 可选值 | +| ------- | -------- | ------ | +| content | 下拉内容 | -- | diff --git a/docs/docs/zh-CN/components/empty.md b/docs/docs/zh-CN/components/empty.md index 5a15bc5e..14de6688 100644 --- a/docs/docs/zh-CN/components/empty.md +++ b/docs/docs/zh-CN/components/empty.md @@ -45,9 +45,8 @@ export default { ::: ::: title empty 属性 - ::: -| Name | Description | Accepted Values | -| ----------- | ----------- | --------------- | -| description | 描述信息 | -- | +| 属性 | 描述 | 可选值 | +| ----------- | -------- | ------ | +| description | 描述信息 | -- | diff --git a/docs/docs/zh-CN/components/grid.md b/docs/docs/zh-CN/components/grid.md index ebd8eae0..0381cd3c 100644 --- a/docs/docs/zh-CN/components/grid.md +++ b/docs/docs/zh-CN/components/grid.md @@ -137,24 +137,22 @@ export default { ::: ::: title 行属性 - ::: -| Name | Description | Accepted Values | -| ----- | ----------- | --------------- | -| space | 间隔 | -- | +| 属性 | 描述 | 可选值 | +| ----- | ---- | ------ | +| space | 间隔 | 0 - 30 | ::: title 列属性 - ::: -| Name | Description | Description Info | Accepted Values | -| -------- | ----------- | ----------------------- | --------------- | -| 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) | 0 - 12 | +| sm | 尺寸 - 小屏幕 (平板 ≥768px) | 0 - 12 | +| md | 尺寸 - 中等屏幕 (桌面 ≥992px) | 0 - 12 | +| lg | 尺寸 - 大型屏幕 (桌面 ≥1200px) | 0 - 12 | +| xs-offset | 偏移 - 超小屏幕 (手机<768px) | 0 - 12 | +| sm-offset | 偏移 - 小屏幕 (平板 ≥768px) | 0 - 12 | +| md-offset | 偏移 - 中等屏幕 (桌面 ≥992px) | 0 - 12 | +| lg-offset | 偏移 - 大型屏幕 (桌面 ≥1200px) | 0 - 12 | diff --git a/docs/docs/zh-CN/components/icon.md b/docs/docs/zh-CN/components/icon.md index 5cb0d772..a0969ae6 100644 --- a/docs/docs/zh-CN/components/icon.md +++ b/docs/docs/zh-CN/components/icon.md @@ -1107,9 +1107,9 @@ export default { ::: title 图标属性 ::: -| Name | Description | Default Value | -| ------ | ----------- | ----------------- | -| type | 图标 | `layui-icon-home` | -| prefix | 前缀 | `layui-icon` | -| color | 颜色 | -- | -| size | 尺寸 | -- | +| 属性 | 描述 | 默认值 | +| ------ | ---- | ----------------- | +| type | 图标 | `layui-icon-home` | +| prefix | 前缀 | `layui-icon` | +| color | 颜色 | -- | +| size | 尺寸 | -- | diff --git a/docs/docs/zh-CN/components/input.md b/docs/docs/zh-CN/components/input.md index 7e0678ad..1eb197a7 100644 --- a/docs/docs/zh-CN/components/input.md +++ b/docs/docs/zh-CN/components/input.md @@ -103,15 +103,21 @@ export default { ::: -::: title input 属性 +::: title 输入框属性 ::: -| Name | Description | Accepted Values | -| ----------- | --------------- | ---------------- | -| name | 原始属性 name | -- | -| placeholder | 提示信息 | -- | -| disabled | 禁用 | `true` `false` | -| v-model | 值 | -- | -| input | 原生 input 事件 | event : 事件对象 | -| foucs | 原生 foucs 事件 | event : 事件对象 | -| blur | 原生 blur 事件 | -- | +| 属性 | 描述 | 可选值 | +| ----------- | ------------- | -------------- | +| name | 原始属性 name | -- | +| placeholder | 提示信息 | -- | +| disabled | 禁用 | `true` `false` | +| v-model | 值 | -- | + +::: title 输入框属性 +::: + +| 事件 | 描述 | 参数 | +| ----- | --------------- | ---------------- | +| input | 原生 input 事件 | event : 事件对象 | +| foucs | 原生 foucs 事件 | event : 事件对象 | +| blur | 原生 blur 事件 | -- | diff --git a/docs/docs/zh-CN/components/layer.md b/docs/docs/zh-CN/components/layer.md new file mode 100644 index 00000000..34d67091 --- /dev/null +++ b/docs/docs/zh-CN/components/layer.md @@ -0,0 +1,226 @@ +::: title 基本使用 +::: + +::: demo + + + + + +::: + +::: title 允许拖动 +::: + +::: demo + + + + + +::: + +::: title 放大缩小 +::: + +::: demo + + + + + +::: + +::: title 指定位置 +::: + +::: demo + + + + + +::: + +::: title 远程窗体 +::: + +::: demo + + + + + +::: + +::: title 定义操作 +::: + +::: demo + + + + + +::: + +::: title 弹层属性 +::: + +| 备注 | 描述 | 默认值 | +| --------------- | ------------- | ------- | +| title | 标题 | -- | +| move | 允许拖拽 | `false` | +| maxmin | 最小化 最大化 | `false` | +| offset | 位置 | -- | +| width | 宽 | -- | +| height | 高 | -- | +| v-model:visible | 展示 隐藏 | false | +| content | 内容 | -- | diff --git a/docs/docs/zh-CN/components/layout.md b/docs/docs/zh-CN/components/layout.md index e9daf478..00b0dcbf 100644 --- a/docs/docs/zh-CN/components/layout.md +++ b/docs/docs/zh-CN/components/layout.md @@ -172,7 +172,7 @@ export default { ::: title 布局组件 ::: -| | | | +| 组件 | 描述 | | | ---------- | ---- | --- | | lay-layout | 容器 | -- | | lay-header | 顶部 | -- | diff --git a/docs/docs/zh-CN/components/menu.md b/docs/docs/zh-CN/components/menu.md index e874528c..2f79e1e3 100644 --- a/docs/docs/zh-CN/components/menu.md +++ b/docs/docs/zh-CN/components/menu.md @@ -80,14 +80,14 @@ export default { ::: title 菜单属性 ::: -| Name | Description | Accepted Values | -| --------------------- | ----------- | --------------- | -| selectedKey (v-model) | 选中项 | -- | -| openKeys (v-model) | 打开项 | -- | +| 属性 | 描述 | 备注 | +| --------------------- | ------ | ---- | +| selectedKey (v-model) | 选中项 | -- | +| openKeys (v-model) | 打开项 | -- | ::: title 菜单插槽 ::: -| Name | Description | Accepted Values | -| ----- | ----------- | --------------- | -| title | 菜单标题 | -- | +| 插槽 | 描述 | 备注 | +| ----- | -------- | ---- | +| title | 菜单标题 | -- | diff --git a/docs/docs/zh-CN/components/page.md b/docs/docs/zh-CN/components/page.md index bc209e07..deec2cfb 100644 --- a/docs/docs/zh-CN/components/page.md +++ b/docs/docs/zh-CN/components/page.md @@ -196,7 +196,7 @@ export default { ::: title 分页属性 ::: -| | | | +| 属性 | 描述 | 默认值 | | ----------- | ------------ | ------- | | limit | 每页数量 | -- | | total | 总条数 | -- | @@ -209,14 +209,14 @@ export default { ::: title 分页事件 ::: -| | | | +| 事件 | 描述 | 参数 | | ---- | -------- | --------------------- | | jump | 切换回调 | { current: 当前页面 } | ::: title 分页插槽 ::: -| | | | +| 插槽 | 描述 | 默认值 | | ---- | ------ | ------ | | prev | 上一页 | 上一页 | | next | 下一页 | 下一页 | diff --git a/docs/docs/zh-CN/components/panel.md b/docs/docs/zh-CN/components/panel.md index aec0f30d..b5c24414 100644 --- a/docs/docs/zh-CN/components/panel.md +++ b/docs/docs/zh-CN/components/panel.md @@ -24,6 +24,6 @@ export default { ::: title 面板插槽 ::: -| Name | Description | Accepted Values | -| ------- | ----------- | --------------- | -| default | 默认插槽 | -- | +| 插槽 | 描述 | 可选值 | +| ------- | -------- | ------ | +| default | 默认插槽 | -- | diff --git a/docs/docs/zh-CN/components/progress.md b/docs/docs/zh-CN/components/progress.md index 344e0d0c..ff219a59 100644 --- a/docs/docs/zh-CN/components/progress.md +++ b/docs/docs/zh-CN/components/progress.md @@ -110,10 +110,10 @@ export default { ::: -::: title Progress 属性 +::: title 进度属性 ::: -| | | | +| 属性 | 描述 | 可选值 | | -------- | -------- | --------------------------------------------- | | percent | 进度 | -- | | theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` | diff --git a/docs/docs/zh-CN/components/radio.md b/docs/docs/zh-CN/components/radio.md index 81b7c8ce..df35ff60 100644 --- a/docs/docs/zh-CN/components/radio.md +++ b/docs/docs/zh-CN/components/radio.md @@ -94,12 +94,18 @@ export default { ::: -::: title radio 属性 +::: title 单选框属性 ::: -| Name | Description | Accepted Values | -| ------- | ------------- | ---------------- | -| name | 原始属性 name | -- | -| label | 当前值 | -- | -| v-model | 选中值 | -- | -| change | 切换事件 | current : 当前值 | +| 属性 | 描述 | 默认值 | +| ------- | ------------- | ------ | +| name | 原始属性 name | -- | +| label | 当前值 | -- | +| v-model | 选中值 | -- | + +::: title 单选框事件 +::: + +| 事件 | 描述 | 参数 | +| ------ | -------- | ---------------- | +| change | 切换事件 | current : 当前值 | diff --git a/docs/docs/zh-CN/components/rate.md b/docs/docs/zh-CN/components/rate.md index 7114bc5e..9d19c360 100644 --- a/docs/docs/zh-CN/components/rate.md +++ b/docs/docs/zh-CN/components/rate.md @@ -134,8 +134,8 @@ export default { ::: title 评分属性 ::: -| | | | -| -------- | -------- | --- | -| v-model | 评分值 | -- | -| length | 评分长度 | -- | -| readonly | 只读模式 | -- | +| 属性 | 描述 | 默认值 | +| -------- | -------- | ------ | +| v-model | 评分值 | -- | +| length | 评分长度 | -- | +| readonly | 只读模式 | -- | diff --git a/docs/docs/zh-CN/components/switch.md b/docs/docs/zh-CN/components/switch.md index b2d467f1..58f23d4b 100644 --- a/docs/docs/zh-CN/components/switch.md +++ b/docs/docs/zh-CN/components/switch.md @@ -108,14 +108,20 @@ export default { ::: -::: title switch 属性 +::: title 开关属性 ::: -| Name | Description | Accepted Values | -| ------------- | -------------- | ---------------- | -| name | 原生 name 属性 | -- | -| v-model | 是否启用 | `true` `false` | -| disabled | 禁用 | `true` `false` | -| change | 切换事件 | current : 当前值 | -| active-text | 启用描述 | `启动` | -| inactive-text | 禁用描述 | `禁用` | +| 属性 | 描述 | 可选值 | +| ------------- | -------------- | -------------- | +| name | 原生 name 属性 | -- | +| v-model | 是否启用 | `true` `false` | +| disabled | 禁用 | `true` `false` | +| active-text | 启用描述 | `启动` | +| inactive-text | 禁用描述 | `禁用` | + +::: title 开关事件 +::: + +| 属性 | 描述 | 可选值 | +| ------ | -------- | ---------------- | +| change | 切换事件 | current : 当前值 | diff --git a/docs/docs/zh-CN/components/tab.md b/docs/docs/zh-CN/components/tab.md index fb88a4aa..d823a4e4 100644 --- a/docs/docs/zh-CN/components/tab.md +++ b/docs/docs/zh-CN/components/tab.md @@ -166,21 +166,20 @@ export default { ::: -::: title tab 属性 +::: title 选项卡属性 ::: -| Name | Description | Accepted Values | -| ----------- | ----------- | --------------- | -| v-model | 当前激活 | -- | -| type | 主题样式 | -- | -| allow-close | 允许关闭 | `true` `false` | - -::: title tab 事件 +| 属性 | 描述 | 可选值 | +| ----------- | -------- | -------------- | +| v-model | 当前激活 | -- | +| type | 主题样式 | -- | +| allow-close | 允许关闭 | `true` `false` | +::: title 选项卡事件 ::: -| Name | Description | Accepted Params | -| ------ | ----------- | --------------- | -| change | 选中切换 | -- | -| close | 关闭事件 | -- | +| 事件 | 描述 | 参数 | +| ------ | -------- | ---- | +| change | 选中切换 | -- | +| close | 关闭事件 | -- | diff --git a/docs/docs/zh-CN/components/table.md b/docs/docs/zh-CN/components/table.md index 6d3e4393..11c8c655 100644 --- a/docs/docs/zh-CN/components/table.md +++ b/docs/docs/zh-CN/components/table.md @@ -260,11 +260,11 @@ export default { ::: -::: title table attributes +::: title 表格属性 ::: -| | | | +| 属性 | 描述 | 可选值 | | ------------------------ | ---------- | -------------- | | columns | 列配置 | -- | | dataSource | 数据源 | -- | diff --git a/docs/docs/zh-CN/components/textarea.md b/docs/docs/zh-CN/components/textarea.md index 92bdd052..470cba34 100644 --- a/docs/docs/zh-CN/components/textarea.md +++ b/docs/docs/zh-CN/components/textarea.md @@ -82,13 +82,21 @@ export default { ::: -::: title textarea 属性 +::: title 文本域属性 ::: -| Name | Description | Accepted Values | -| ----------- | --------------- | --------------- | -| name | 原始属性 name | -- | -| placeholder | 提示信息 | -- | -| disabled | 禁用 | `true` `false` | -| v-model | 值 | -- | -| input | 原生 input 事件 | val : 当前值 | +| 属性 | 描述 | 可选值 | +| ----------- | ------------- | -------------- | +| name | 原始属性 name | -- | +| placeholder | 提示信息 | -- | +| disabled | 禁用 | `true` `false` | +| v-model | 值 | -- | + +::: title 文本域事件 +::: + +| 事件 | 描述 | 可选值 | +| ----- | --------------- | ---------------- | +| input | 原生 input 事件 | event : 事件对象 | +| foucs | 原生 foucs 事件 | event : 事件对象 | +| blur | 原生 blur 事件 | -- | diff --git a/docs/docs/zh-CN/guide/changelog.md b/docs/docs/zh-CN/guide/changelog.md index 71bf4394..3a279545 100644 --- a/docs/docs/zh-CN/guide/changelog.md +++ b/docs/docs/zh-CN/guide/changelog.md @@ -10,6 +10,11 @@ ::: demo - + + diff --git a/src/module/layer/index.ts b/src/module/layer/index.ts new file mode 100644 index 00000000..58ab0281 --- /dev/null +++ b/src/module/layer/index.ts @@ -0,0 +1,9 @@ +import type { App } from 'vue' +import Component from './index.vue' +import type { IDefineComponent } from '../type/index' + +Component.install = (app: App) => { + app.component(Component.name || 'LayLayer', Component) +} + +export default Component as IDefineComponent diff --git a/src/module/layer/index.vue b/src/module/layer/index.vue new file mode 100644 index 00000000..5cad509d --- /dev/null +++ b/src/module/layer/index.vue @@ -0,0 +1,159 @@ + + + + + diff --git a/src/module/textarea/index.vue b/src/module/textarea/index.vue index d7c9d434..a86cf82b 100644 --- a/src/module/textarea/index.vue +++ b/src/module/textarea/index.vue @@ -6,7 +6,9 @@ :disabled="disabled" class="layui-textarea" :class="{ 'layui-disabled': disabled }" - @input="updateValue" + @input="onInput" + @focus="onFocus" + @blur="onBlur" /> @@ -20,11 +22,19 @@ const props = defineProps<{ disabled?: boolean }>() -const emit = defineEmits(['update:modelValue', 'input']) +const emit = defineEmits(['update:modelValue', 'input', 'focus', 'blur']) -const updateValue = function (event: InputEvent) { +const onInput = function (event: InputEvent) { const inputElement = event.target as HTMLInputElement emit('update:modelValue', inputElement.value) emit('input', inputElement.value) } + +const onFocus = function (event: FocusEvent) { + emit('focus', event) +} + +const onBlur = function () { + emit('blur') +}