Merge branch 'develop' of gitee.com:layui-vue/layui-vue into develop
This commit is contained in:
wang
commit
1a7cd1b33f
1
.gitignore
vendored
1
.gitignore
vendored
@ -17,3 +17,4 @@ package-lock.json
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
pnpm-lock.yaml
|
||||
|
||||
@ -91,4 +91,7 @@ export default {
|
||||
| layui-anim-rotate | 360 度旋转 | `layui-anim layui-anim-rotate` |
|
||||
| layui-anim-rotate layui-anim-loop | 循环动画 | `layui-anim layui-anim-rotate layui-anim-loop` |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -92,3 +92,6 @@ export default {
|
||||
| radius | 圆形 | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -58,3 +58,6 @@ export default {
|
||||
| default | 默认 | 非 `dot` 可用 |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -57,3 +57,6 @@ export default {
|
||||
| nm | 灰色样式 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -100,3 +100,6 @@ export default {
|
||||
| default | 默认插槽 | `--` |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -305,3 +305,6 @@ export default {
|
||||
| click | 单击事件 | `--` |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -128,3 +128,6 @@ export default {
|
||||
| body | 内容插槽 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -139,3 +139,6 @@ export default {
|
||||
| change | 切换回调 | id |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -210,3 +210,6 @@ export default {
|
||||
| change | 切换事件 | isChecked : 当前状态 |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -206,3 +206,6 @@ export default {
|
||||
| change | 折叠面板变化触发事件 | (`id`, `isShow`, activeValues)<br> <br> `id`: (`number` / `string`)对应当前操作面板的值 <br> <br> `isShow`: (`boolean`)`true` -> 展开, `false` -> 折叠 <br> <br> `activeValues`: (`Array`)当前状态为展开的面板值集合|
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -159,4 +159,7 @@ export default {
|
||||
| layui-bg-blue | 蓝色 | class="layui-bg-blue" |
|
||||
| layui-bg-black | 雅黑 | class="layui-bg-black" |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -28,3 +28,6 @@ export default {
|
||||
| showSearch | 启用搜索 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -72,4 +72,7 @@ layer.confirm(content, options)
|
||||
| content | 内容 | -- |
|
||||
| options | 选配属性 | { time: 加载时长, btn: 按钮组 } |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -75,3 +75,6 @@ export default {
|
||||
| fluid | 流模式 | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -88,3 +88,6 @@ export default {
|
||||
| content | 下拉内容 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -54,3 +54,6 @@ export default {
|
||||
| description | 描述信息 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -68,3 +68,6 @@ export default {
|
||||
| title | 标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -74,3 +74,6 @@ export default {
|
||||
| label | 标题名称 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -164,3 +164,6 @@ export default {
|
||||
| lg-offset | 偏移 - 大型屏幕 (桌面 ≥1200px) | 0 - 24 |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -1127,3 +1127,6 @@ npm install @layui/icons-vue
|
||||
| size | 尺寸 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -110,3 +110,6 @@ export default {
|
||||
| showSearch | 启用搜索 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -129,3 +129,6 @@ export default {
|
||||
| blur | 原生 blur 事件 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -137,3 +137,6 @@
|
||||
| change | 值更改触发事件 | (value: number) |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -184,3 +184,6 @@ export default {
|
||||
| lay-footer | 底部 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -41,3 +41,6 @@ export default {
|
||||
| theme | 主题 | `orange` `green` `cyan` `blue` `black` `gray` |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -122,4 +122,7 @@ layer.load(load, options)
|
||||
| load | 组件类型 | `1` `2` `3` |
|
||||
| options | 选配属性 | { time: 加载时长 } |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -99,3 +99,6 @@ export default {
|
||||
| title | 菜单标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -130,6 +130,39 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 尺寸拉伸
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-button @click="changeVisible8" type="primary">尺寸拉伸</lay-button>
|
||||
<lay-modal title="拉伸尺寸" resize="true" v-model="visible8" move="true">
|
||||
内容
|
||||
</lay-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const visible8 = ref(false)
|
||||
|
||||
const changeVisible8 = function() {
|
||||
visible8.value = !visible8.value
|
||||
}
|
||||
|
||||
return {
|
||||
visible8
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 远程窗体
|
||||
:::
|
||||
|
||||
@ -302,3 +335,6 @@ export default {
|
||||
| isOutAnim | 关闭动画 | `true` `false` |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -90,4 +90,7 @@ layer.msg(content, options)
|
||||
| content | 消息内容 | -- |
|
||||
| options | 选配属性 | { time: 加载时长, icon: 图标 } |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -232,3 +232,6 @@ export default {
|
||||
| next | 下一页 | 下一页 |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -31,3 +31,6 @@ export default {
|
||||
| default | 默认插槽 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -125,3 +125,6 @@ export default {
|
||||
| showText | 展示描述 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -117,3 +117,6 @@ export default {
|
||||
| change | 切换事件 | current : 当前值 |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -305,3 +305,6 @@ export default {
|
||||
| select | 选中之后触发事件 | (value: number) |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -100,3 +100,6 @@ export default {
|
||||
| change | 切换事件 | value |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -42,4 +42,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -133,3 +133,6 @@ export default {
|
||||
| change | 切换事件 | current : 当前值 |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -243,3 +243,6 @@ export default {
|
||||
| close | 关闭事件 | id |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -321,4 +321,7 @@ export default {
|
||||
| key | 数据字段 | -- |
|
||||
| customSlot | 插槽名称 | -- |
|
||||
| width | 宽度 | -- |
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -108,3 +108,6 @@ export default {
|
||||
| blur | 原生 blur 事件 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -83,3 +83,6 @@ export default {
|
||||
| title | 标题 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -120,6 +120,11 @@
|
||||
| content | 显示内容 | -- |
|
||||
| position | 显示位置 | `top`(默认值)、`bottom`、`left`、`right` |
|
||||
| isDark | 是否为黑色主题 | `true`(默认值)、`false`(浅色) |
|
||||
| disabled | 是否禁用 | `false`(默认值)、`true`(禁用) ||
|
||||
| disabled | 是否禁用 | `false`(默认值)、`true`(禁用) ||
|
||||
| visible | 控制是否显示 | `true`(默认值)、`false` ||
|
||||
| isCanHide | 控制是否可以隐藏,可参考`lay-slider`组件 | `true`(默认值)、`false` ||
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -106,3 +106,6 @@ export default {
|
||||
| item | 列表项 | { data } |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -253,3 +253,6 @@ function handleClick(node) {
|
||||
| node-click | 节点 click 事件 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
@ -16,10 +16,17 @@
|
||||
<li>
|
||||
<h3>0.2.8 <span class="layui-badge-rim">2021-12-15</span></h3>
|
||||
<ul>
|
||||
<li>[新增] tooltip 组件, 便捷的信息提示</li>
|
||||
<li>[新增] input-number 组件, 数字输入框, 方便数字录入。</li>
|
||||
<li>[加强] layer 组件 area 属性, 支持 字符串 与 数组 类型, 默认为 auto 宽高自适应。</li>
|
||||
<li>[升级] layer-vue 1.1.7。</li>
|
||||
<li>[新增] tooltip 警告提示，展现需要关注的信息。</li>
|
||||
<li>[新增] input-number 数字输入框, 通过鼠标或键盘，输入范围内的数值。</li>
|
||||
<li>[新增] layer 组件 isHtmlFangement 属性，函数调用时，用于解析 html 片段。</li>
|
||||
<li>[新增] layer 组件 resize 属性, 开启弹层尺寸拉伸, 常用于 页面层 与 Iframe 层。</li>
|
||||
<li>[加强] layer 组件 area 属性, 支持 字符串 与 数组 类型, 默认 auto 宽高根据内容自适应。</li>
|
||||
<li>[修复] layer 组件 body 禁用拖动, 仅支持标题拖动窗体。</li>
|
||||
<li>[修复] icon-picker 组件 select 图标时, 自动隐藏选择内容。</li>
|
||||
<li>[修复] dropdown 组件触发方式为 hover 时，移动不到菜单子项的问题</li>
|
||||
<li>[集成] utteranc.es 插件, 基于 issues 提供为文档提供留言能力。</li>
|
||||
<li>[升级] layer-vue 1.2.0, 更稳定的 layer 版本。</li>
|
||||
<li>[升级] vue 3.2.26 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -28,12 +35,9 @@
|
||||
<ul>
|
||||
<a name="0-2-7"> </a>
|
||||
<li>
|
||||
<h3>0.1.1 <span class="layui-badge-rim">2021-12-10</span></h3>
|
||||
<h3>0.1.0 <span class="layui-badge-rim">2021-12-10</span></h3>
|
||||
<ul>
|
||||
<li>[重写] sort 方法，以便对数字、非数字及混合类等所有内容的排序进行支持</li>
|
||||
<li>[新增] dropdown 组件的 align 参数，用于控制下拉菜单水平对齐方式（支持 left、center、right），默认 left</li>
|
||||
<li>[加强] colorpicker 组件的坐标定位计算方式</li>
|
||||
<li>[修复] 低版本 ie 若干报错问题</li>
|
||||
<li>孵化。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
::: title 常见问题
|
||||
:::
|
||||
:::
|
||||
@ -1,3 +1,8 @@
|
||||
.utterances {
|
||||
margin-top: 30px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
html {
|
||||
line-height: 1.4;
|
||||
font-size: 16px;
|
||||
|
||||
24
example/src/components/LayComment.vue
Normal file
24
example/src/components/LayComment.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div id="comment"></div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Utterances',
|
||||
methods: {
|
||||
initValine () {
|
||||
const utterances = document.createElement('script');
|
||||
utterances.type = 'text/javascript';
|
||||
utterances.async = true;
|
||||
utterances.setAttribute('issue-term', 'pathname')
|
||||
utterances.setAttribute('theme','github-light')
|
||||
utterances.setAttribute('repo',`layui-vue/layui-doc`)
|
||||
utterances.crossorigin = 'anonymous';
|
||||
utterances.src = 'https://utteranc.es/client.js';
|
||||
window.document.getElementById('comment').appendChild(utterances);
|
||||
}
|
||||
},
|
||||
mounted: function(){
|
||||
this.initValine()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -12,11 +12,9 @@
|
||||
border-left: 1px solid whitesmoke;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.lay-table-box table tbody {
|
||||
border-bottom: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.lay-table-box table th,
|
||||
.lay-table-box table td {
|
||||
font-size: 14px;
|
||||
@ -27,14 +25,12 @@
|
||||
padding: 0 10px; /*内边距*/
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
.lay-table-box table th {
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
white-space: nowrap; /*表头内容强制在一行显示*/
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.lay-table-box table td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@ -6,6 +6,7 @@ import Layui from '../../src/index'
|
||||
import LayCode from './components/LayCode.vue'
|
||||
import LaySearch from './components/LaySearch.vue'
|
||||
import LayTableBox from './components/LayTableBox.vue'
|
||||
import LayComment from './components/LayComment.vue'
|
||||
import './assets/css/index.css'
|
||||
|
||||
export function createApp(): {
|
||||
@ -13,9 +14,7 @@ export function createApp(): {
|
||||
router: Router
|
||||
} {
|
||||
const app =
|
||||
import.meta.env.MODE === 'production'
|
||||
? createSSRApp(Layout)
|
||||
: _createApp(Layout)
|
||||
import.meta.env.MODE === 'production' ? createSSRApp(Layout) : _createApp(Layout)
|
||||
const router = createRouter()
|
||||
|
||||
app
|
||||
@ -23,6 +22,7 @@ export function createApp(): {
|
||||
.component('LayCode', LayCode)
|
||||
.component('LaySearch', LaySearch)
|
||||
.component('LayTableBox', LayTableBox)
|
||||
.component('LayComment', LayComment)
|
||||
.use(Layui)
|
||||
|
||||
return { app, router }
|
||||
|
||||
@ -8,6 +8,7 @@ import createTitle from './create-title'
|
||||
import createBlock from './create-block'
|
||||
import createDescribe from './create-describe'
|
||||
import createTable from './create-table'
|
||||
import createComment from './create-comment'
|
||||
import preWrapper from './pre-wrapper'
|
||||
|
||||
const plugins = [
|
||||
@ -29,6 +30,7 @@ const plugins = [
|
||||
.use(...createBlock('block', ''))
|
||||
.use(...createTitle('title', ''))
|
||||
.use(...createDescribe('describe', ''))
|
||||
.use(...createComment('comment', ''))
|
||||
},
|
||||
}),
|
||||
] as any
|
||||
|
||||
30
example/src/plugin/create-comment.ts
Normal file
30
example/src/plugin/create-comment.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import container from 'markdown-it-container'
|
||||
import type Token from 'markdown-it/lib/token'
|
||||
|
||||
type ContainerArgs = [
|
||||
typeof container,
|
||||
string,
|
||||
{
|
||||
render(tokens: Token[], idx: number): string
|
||||
}
|
||||
]
|
||||
|
||||
export default function createContainer(
|
||||
klass: string,
|
||||
defaultTitle: string
|
||||
): ContainerArgs {
|
||||
return [
|
||||
container,
|
||||
klass,
|
||||
{
|
||||
render(tokens, idx) {
|
||||
const token = tokens[idx]
|
||||
if (token.nesting === 1) {
|
||||
return `<lay-comment>`
|
||||
} else {
|
||||
return '</lay-comment>\n'
|
||||
}
|
||||
},
|
||||
},
|
||||
]
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
import {
|
||||
createRouter as _createRouter,
|
||||
createWebHashHistory,
|
||||
createWebHistory,
|
||||
Router,
|
||||
} from 'vue-router'
|
||||
import zhCN from './zh-CN'
|
||||
@ -10,7 +11,7 @@ const routes = [...zhCN]
|
||||
export function createRouter(): Router {
|
||||
const baseUrl = import.meta.env.BASE_URL
|
||||
return _createRouter({
|
||||
history: createWebHashHistory(baseUrl),
|
||||
history: createWebHistory(baseUrl),
|
||||
routes: routes,
|
||||
})
|
||||
}
|
||||
@ -49,9 +49,9 @@ const zhCN = [
|
||||
meta: { title: '问题' },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/guide/contribution',
|
||||
component: () => import('../../docs/zh-CN/guide/contribution.md'),
|
||||
meta: { title: '贡献' },
|
||||
path: '/zh-CN/guide/member',
|
||||
component: () => import('../../docs/zh-CN/guide/member.md'),
|
||||
meta: { title: '团队' },
|
||||
},
|
||||
{
|
||||
path: '/zh-CN/guide/norms',
|
||||
|
||||
@ -92,17 +92,11 @@ export default {
|
||||
subTitle: 'problem',
|
||||
path: '/zh-CN/guide/problem',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: '主题',
|
||||
subTitle: 'theme',
|
||||
path: '/zh-CN/guide/theme',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: '贡献',
|
||||
subTitle: 'contribution',
|
||||
path: '/zh-CN/guide/contribution',
|
||||
title: '团队',
|
||||
subTitle: 'member',
|
||||
path: '/zh-CN/guide/member',
|
||||
}
|
||||
],
|
||||
},
|
||||
|
||||
12
package.json
12
package.json
@ -30,16 +30,16 @@
|
||||
"peerDependencies": {
|
||||
"@layui/hooks-vue": "^0.1.6",
|
||||
"@layui/icons-vue": "^1.0.1",
|
||||
"@layui/layer-vue": "^1.1.7",
|
||||
"vue": "^3.2.24",
|
||||
"@layui/layer-vue": "^1.2.0",
|
||||
"vue": "^3.2.26",
|
||||
"vue-router": "^4.0.12"
|
||||
},
|
||||
"dependencies": {
|
||||
"@layui/hooks-vue": "^0.1.6",
|
||||
"@layui/icons-vue": "^1.0.1",
|
||||
"@layui/layer-vue": "^1.1.7",
|
||||
"@layui/layer-vue": "^1.2.0",
|
||||
"evtd": "^0.2.3",
|
||||
"vue": "^3.2.24",
|
||||
"vue": "^3.2.26",
|
||||
"vue-router": "^4.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -51,8 +51,8 @@
|
||||
"@types/markdown-it-container": "^2.0.4",
|
||||
"@types/node": "^16.11.9",
|
||||
"@vitejs/plugin-vue": "^1.9.3",
|
||||
"@vue/compiler-sfc": "^3.2.24",
|
||||
"@vue/server-renderer": "^3.2.24",
|
||||
"@vue/compiler-sfc": "^3.2.26",
|
||||
"@vue/server-renderer": "^3.2.26",
|
||||
"escape-html": "^1.0.3",
|
||||
"less": "^4.1.2",
|
||||
"markdown-it-container": "^3.0.0",
|
||||
|
||||
2400
pnpm-lock.yaml
generated
Normal file
2400
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -2610,16 +2610,24 @@ body .layui-table-tips .layui-layer-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 42px;
|
||||
top: 38px;
|
||||
z-index: 899;
|
||||
min-width: 100%;
|
||||
border: 1px solid #eee;
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.layui-dropdown dl::before{
|
||||
content: ' ';
|
||||
display: block;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
.layui-dropdown dl>.layui-dropdown-menu{
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.layui-dropdown-up dl {
|
||||
display: block;
|
||||
|
||||
@ -4,7 +4,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup name="LayCheckbox" lang="ts">
|
||||
<script setup lang="ts">
|
||||
import { computed, defineProps, inject } from "vue";
|
||||
import "./index.less";
|
||||
|
||||
@ -108,4 +108,4 @@ const handleClick = function () {
|
||||
<i class="layui-icon layui-icon-ok" />
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -1,3 +1,49 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayDropdown"
|
||||
}
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineProps, provide, ref, watch } from 'vue'
|
||||
import { useClickOutside } from '@layui/hooks-vue'
|
||||
|
||||
const dropdownRef = ref<null | HTMLElement>(null)
|
||||
const isClickOutside = useClickOutside(dropdownRef)
|
||||
|
||||
export interface LayDropdownProps {
|
||||
trigger?: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayDropdownProps>(),{
|
||||
trigger: 'click',
|
||||
})
|
||||
|
||||
const openState = ref(false)
|
||||
|
||||
const open = function () {
|
||||
openState.value = true
|
||||
}
|
||||
|
||||
const hide = function () {
|
||||
openState.value = false
|
||||
}
|
||||
|
||||
const toggle = function () {
|
||||
openState.value = !openState.value
|
||||
}
|
||||
|
||||
watch(isClickOutside, () => {
|
||||
if (isClickOutside.value) {
|
||||
openState.value = false
|
||||
}
|
||||
})
|
||||
|
||||
provide('openState', openState)
|
||||
|
||||
defineExpose({ open, hide, toggle });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="trigger === 'click'"
|
||||
@ -30,43 +76,4 @@
|
||||
</ul>
|
||||
</dl>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LaySelect" lang="ts">
|
||||
import { defineProps, provide, ref, watch } from 'vue'
|
||||
import { useClickOutside } from '@layui/hooks-vue'
|
||||
|
||||
const dropdownRef = ref<null | HTMLElement>(null)
|
||||
const isClickOutside = useClickOutside(dropdownRef)
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
trigger?: string
|
||||
}>(),
|
||||
{
|
||||
trigger: 'click',
|
||||
}
|
||||
)
|
||||
|
||||
const openState = ref(false)
|
||||
|
||||
const open = function () {
|
||||
openState.value = true
|
||||
}
|
||||
|
||||
const hide = function () {
|
||||
openState.value = false
|
||||
}
|
||||
|
||||
const toggle = function () {
|
||||
openState.value = !openState.value
|
||||
}
|
||||
|
||||
watch(isClickOutside, () => {
|
||||
if (isClickOutside.value) {
|
||||
openState.value = false
|
||||
}
|
||||
})
|
||||
|
||||
provide('openState', openState)
|
||||
</script>
|
||||
</template>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<lay-dropdown>
|
||||
<lay-dropdown ref="dropdownRef">
|
||||
<div
|
||||
class="
|
||||
layui-inline layui-border-box layui-iconpicker layui-iconpicker-split
|
||||
@ -85,17 +85,18 @@
|
||||
import { defineProps, Ref, ref } from 'vue'
|
||||
import { LayIconList as icons } from "@layui/icons-vue"
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue?: string
|
||||
page?: boolean
|
||||
export interface LayIconPickerProps {
|
||||
page?: boolean,
|
||||
modelValue?: string,
|
||||
showSearch?: boolean
|
||||
}>(),
|
||||
{
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayIconPickerProps>(),{
|
||||
modelValue: 'layui-icon-face-smile',
|
||||
page: false,
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
const dropdownRef = ref<null | HTMLElement>(null);
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
@ -104,6 +105,8 @@ const selectedIcon: Ref<string> = ref(props.modelValue as string)
|
||||
const selectIcon = function (icon: string) {
|
||||
emit('update:modelValue', icon)
|
||||
selectedIcon.value = icon
|
||||
// @ts-ignore
|
||||
dropdownRef.value.hide()
|
||||
}
|
||||
|
||||
const icones: Ref = ref([])
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<transition v-show="visible">
|
||||
<transition v-show="innerVisible">
|
||||
<div ref="popper" :class="['layui-popper', {'layui-dark' : innnerIsDark}]" :style="style" :position="innnerPosition">
|
||||
<slot>{{content.value}}</slot>
|
||||
<div class="layui-popper-arrow"></div>
|
||||
@ -21,18 +21,19 @@
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
el : any,
|
||||
content ?: Ref<string>,
|
||||
content ?: Ref<string|Number>,
|
||||
position ?: Ref<string>,
|
||||
trigger ?: string,
|
||||
enterable ?: boolean,
|
||||
isDark ?: Ref<boolean>,
|
||||
disabled ?: Ref<boolean>,
|
||||
modelValue ?: boolean
|
||||
visible ?: Ref<boolean>,
|
||||
isCanHide ?: Ref<boolean>,
|
||||
updateVisible ?: Function
|
||||
}>(),
|
||||
{
|
||||
enterable : true,
|
||||
trigger : 'hover',
|
||||
modelValue : true
|
||||
trigger : 'hover'
|
||||
}
|
||||
);
|
||||
|
||||
@ -53,31 +54,32 @@
|
||||
const innnerPosition = ref(tempPosition.value);
|
||||
const innnerIsDark = ref(props.isDark??true);
|
||||
const innnerDisabled = ref(props.disabled??false);
|
||||
const visible = ref(props.modelValue && !innnerDisabled.value);
|
||||
const innerVisible = ref(props.visible??true);
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
watch(visible, (val)=>{
|
||||
emit('update:modelValue', val);
|
||||
val && (popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion());
|
||||
watch(innerVisible, (val)=>{
|
||||
invokeShowPosistion();
|
||||
props.updateVisible && props.updateVisible(val);
|
||||
})
|
||||
watch(innnerDisabled, (val)=>{
|
||||
visible.value = false;
|
||||
innerVisible.value = false;
|
||||
})
|
||||
watch(()=>props.content?.value, (val)=>{
|
||||
visible.value && setTimeout(showPosistion, 5);
|
||||
innerVisible.value && invokeShowPosistion();
|
||||
})
|
||||
|
||||
const doShow = function(){
|
||||
if (!innnerDisabled.value) {
|
||||
visible.value = true;
|
||||
innerVisible.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
const doHidden = function(e : MouseEvent){
|
||||
if ((checkTarget.value && props.el.contains(e.target)) || (props.enterable && popper.value.contains(e.target as Node))) return;
|
||||
style.value = {top: (-window.innerHeight) + 'px',left:0};
|
||||
// style.value = {top: (-window.innerHeight) + 'px',left:0};
|
||||
// popper.value.remove();
|
||||
visible.value = false;
|
||||
if (props.isCanHide?.value !== false) {
|
||||
innerVisible.value = false;
|
||||
}
|
||||
innnerPosition.value = tempPosition.value;
|
||||
}
|
||||
|
||||
@ -90,7 +92,14 @@
|
||||
const showPosistion = function(){
|
||||
postionFns[tempPosition.value] && (style.value = postionFns[tempPosition.value](props.el, popper.value, innnerPosition));
|
||||
}
|
||||
const invokeShowPosistion = function(){
|
||||
if (innerVisible.value) {
|
||||
popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion();
|
||||
// 延时确保计算位置正确
|
||||
setTimeout(()=>innerVisible.value && showPosistion(), 2);
|
||||
};
|
||||
}
|
||||
onMounted(()=>{
|
||||
visible.value && (popper.value.offsetWidth === 0 ? setTimeout(showPosistion, 0) : showPosistion());
|
||||
invokeShowPosistion();
|
||||
})
|
||||
</script>
|
||||
@ -1,4 +1,4 @@
|
||||
import { h, ref, render, watchEffect} from "vue";
|
||||
import { h, ref, render, watchEffect, watch} from "vue";
|
||||
import popper from "./index.vue";
|
||||
import { once } from "../../tools/domUtil";
|
||||
const EVENT_MAP : any = {
|
||||
@ -14,11 +14,20 @@ const usePopper = {
|
||||
for (const key in props) {
|
||||
_props[key] = ref(props[key]);
|
||||
}
|
||||
_props.updateVisible = function(val:boolean) {
|
||||
_props.visible && (_props.visible.value = val);
|
||||
}
|
||||
_this.renderPopper(_props);
|
||||
watchEffect(() => {
|
||||
for (const key in _props) {
|
||||
if (key === 'visible') {
|
||||
continue;
|
||||
}
|
||||
_props[key].value = props[key];
|
||||
}
|
||||
});
|
||||
watch(() => props.visible, (val: boolean)=> {
|
||||
_props.updateVisible(val);
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
@ -5,7 +5,7 @@ export default defineComponent({
|
||||
name: "LayTooltip",
|
||||
props: {
|
||||
content: {
|
||||
type: String,
|
||||
type: [Number, String],
|
||||
required: true,
|
||||
},
|
||||
position: {
|
||||
@ -19,6 +19,14 @@ export default defineComponent({
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
isCanHide: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
render() {
|
||||
|
||||
@ -44,7 +44,7 @@ const allLeftChange = function (checked: any) {
|
||||
|
||||
watch(
|
||||
leftSelectedKeys,
|
||||
function () {
|
||||
() => {
|
||||
if (
|
||||
leftDataSource.value.length === leftSelectedKeys.value.length &&
|
||||
leftDataSource.value.length != 0
|
||||
@ -70,7 +70,7 @@ const allRightChange = function (checked: any) {
|
||||
|
||||
watch(
|
||||
rightSelectedKeys,
|
||||
function () {
|
||||
() => {
|
||||
if (
|
||||
rightDataSource.value.length === rightSelectedKeys.value.length &&
|
||||
rightDataSource.value.length != 0
|
||||
|
||||
@ -113,11 +113,12 @@ function handleTitleClick(node: TreeData) {
|
||||
</span>
|
||||
<LayCheckbox
|
||||
v-if="showCheckbox"
|
||||
v-model:checked="node.isChecked.value"
|
||||
:modelValue="node.isChecked.value"
|
||||
:disabled="node.isDisabled.value"
|
||||
skin="primary"
|
||||
label=""
|
||||
@change="
|
||||
({ checked }) => {
|
||||
(checked) => {
|
||||
handleChange(checked, node)
|
||||
}
|
||||
"
|
||||
|
||||
@ -135,6 +135,7 @@ class Tree {
|
||||
setChildrenChecked(checked: boolean, nodes: TreeData[]) {
|
||||
const len = nodes.length
|
||||
for (let i = 0; i < len; i++) {
|
||||
console.log(nodes[i], checked);
|
||||
nodes[i].isChecked.value = checked
|
||||
nodes[i].children &&
|
||||
nodes[i].children.length > 0 &&
|
||||
@ -167,6 +168,7 @@ class Tree {
|
||||
if (node.children) {
|
||||
this.setChildrenChecked(checked, node.children)
|
||||
}
|
||||
console.log(this.getData());
|
||||
}
|
||||
|
||||
getData() {
|
||||
|
||||
@ -29,6 +29,7 @@ export const useTree: UseTree = (props: TreeProps, emit: TreeEmits) => {
|
||||
|
||||
const nodeList = computed(() => {
|
||||
const nodes = tree.getData()
|
||||
console.log(nodes);
|
||||
return nodes
|
||||
})
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user