theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' into slider

Browse Source
This commit is contained in:
halo 2021-12-26 11:13:42 +08:00
commit e4bfc18c9d
174 changed files with 2871 additions and 2464 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
.eslintrc.js Normal file
View File

@ -0,0 +1,53 @@
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true
}
},
globals: {
AMap: false,
AMapUI: false
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended'
],
rules: {
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'space-before-function-paren': 'off',
'vue/name-property-casing': ['error', 'PascalCase'],
'vue/attributes-order': 'off',
'vue/one-component-per-file': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/attribute-hyphenation': 'off',
'vue/require-default-prop': 'off',
'vue/script-setup-uses-vars': 'off'
}
}

3
.prettierrc Normal file
View File

@ -0,0 +1,3 @@
{
}

6
example/docs/zh-CN/components/backtop.md
View File

@ -59,10 +59,8 @@ export default {
<template> <template>
<!-- 需要用一个 div 包裹触发滚动事件的目标元素和 lay-backtop 组件 --> <!-- 需要用一个 div 包裹触发滚动事件的目标元素和 lay-backtop 组件 -->
<div class="scrollContainer" style="width:700px; height:300px;"> <div class="scrollContainer" style="width:700px; height:300px;">
<div id="scrollContent" style="overflow-y:auto; overflow-x:auto; width:700px; height:300px;"> <div id="scrollContent" style="overflow-y:auto; overflow-x:auto; width:700px; height:300px;background-color:whitesmoke;padding:10px;">
<p v-for="(n,index) in 50" :key="n" style="height:32px;border-bottom:0.5px solid #5FB878;margin-bottom:10px;line-height:35px"> <lay-panel v-for="(n,index) in 50" :key="n" style="margin-top:5px;margin-bottom:5px;padding:10px;">内容</lay-panel>
{{index + ". &nbsp;layui-vue , 基 于 vue 3.0 的 桌 面 端 组 件 库 , layui 的 另 一 种 呈 现 方 式"}}
</p>
</div> </div>
<lay-backtop target="#scrollContent" :showHeight="100" :bottom="30" position="absolute"></lay-backtop> <lay-backtop target="#scrollContent" :showHeight="100" :bottom="30" position="absolute"></lay-backtop>
</div> </div>

66
example/docs/zh-CN/components/button.md
View File

@ -1,7 +1,7 @@
::: title 基础使用 ::: title 基础使用
::: :::
::: demo 使用 lay-button 标签, 创建一个按钮 ::: demo 使用 `lay-button` 标签, 创建一个按钮
<template> <template>
<lay-button type="primary">原始按钮</lay-button> <lay-button type="primary">原始按钮</lay-button>
@ -29,7 +29,7 @@ export default {
::: title 简约按钮 ::: title 简约按钮
::: :::
::: demo 使用 border 属性设置 主要按钮 边框主题 ::: demo 使用 `border` 属性设置边框主题
<template> <template>
<lay-button type="primary">原始按钮</lay-button> <lay-button type="primary">原始按钮</lay-button>
@ -57,7 +57,7 @@ export default {
::: title 按钮尺寸 ::: title 按钮尺寸
::: :::
::: demo 传入 size 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs` ::: demo 传入 `size` 属性, 创建指定尺寸的按钮, 可选值 `lg` `sm` `xs`
<template> <template>
<lay-button type="primary" size="lg">原始按钮</lay-button> <lay-button type="primary" size="lg">原始按钮</lay-button>
@ -85,7 +85,7 @@ export default {
::: title 流式按钮 ::: title 流式按钮
::: :::
::: demo 传入 fluid 属性, 创建最大化按钮 ::: demo 传入 `size` 属性, 创建最大化按钮
<template> <template>
<lay-button type="primary" fluid>最大化按钮</lay-button> <lay-button type="primary" fluid>最大化按钮</lay-button>
@ -111,7 +111,7 @@ export default {
::: title 圆角按钮 ::: title 圆角按钮
::: :::
::: demo 传入 radius 属性，创建圆角按钮 ::: demo 传入 `radius` 属性，创建圆角按钮
<template> <template>
<lay-button type="primary" radius>原始按钮</lay-button> <lay-button type="primary" radius>原始按钮</lay-button>
@ -139,7 +139,7 @@ export default {
::: title 按钮分组 ::: title 按钮分组
::: :::
::: demo 使用 lay-button-group 标签, 创建一个按钮组 ::: demo 使用 `lay-button-group` 标签, 创建一个按钮组
<template> <template>
<div> <div>
@ -173,7 +173,7 @@ export default {
::: title 图标按钮 ::: title 图标按钮
::: :::
::: demo 结合 lay-icon 组件, 创建图标按钮 ::: demo 结合 `lay-icon` 组件, 创建图标按钮
<template> <template>
<lay-button-container> <lay-button-container>
@ -199,7 +199,7 @@ export default {
::: title 按钮容器 ::: title 按钮容器
::: :::
::: demo 使用 lay-button-container 标签, 创建一个按钮容器 ::: demo 使用 `lay-button-container` 标签, 创建一个按钮容器
<template> <template>
<lay-button-container> <lay-button-container>
@ -226,7 +226,7 @@ export default {
::: title 加载按钮 ::: title 加载按钮
::: :::
::: demo 传入 loading 属性, 控制按钮的加载状态 ::: demo 传入 `loading` 属性, 控制按钮的加载状态
<template> <template>
<lay-button-container> <lay-button-container>
@ -255,7 +255,7 @@ export default {
::: title 事件处理 ::: title 事件处理
::: :::
::: demo 使用 @click 设置单击回调 ::: demo 使用 `@click` 设置单击回调
<template> <template>
<lay-button type="default" @click="clickHandle">单击事件</lay-button> <lay-button type="default" @click="clickHandle">单击事件</lay-button>
@ -280,29 +280,55 @@ export default {
::: :::
::: title 按钮属性 ::: title Button 属性
::: :::
::: table ::: table
| 属性 | 描述 | 可选值 | | 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------ | ------ | --------------------------------------------- | | ----------- | -------- | ------- | --------- | ----------------------------------|
| type | 主题 | `primary` `normal` `warm` `danger` `disabled` | | type | 主题 | string | `primary` | `primary` `normal` `warm` `danger` |
| size | 尺寸 | `lg` `sm` `xs` | | size | 尺寸 | string | -- | `lg` `sm` `xs` |
| fluid | 最大化 | `true` `false` | | fluid | 最大化 | boolean | `false` | `true` `false` |
| radius | 圆角 | `true` `false` | | radius | 圆角 | boolean | `false` | `true` `false` |
| border | 边框 | `green` `blue` `orange` `red` `black` | | border | 边框 | string | `green` | `green` `blue` `orange` `red` |
| disabled | 禁用 | boolean | `false` | `true` `false` |
| loading | 加载 | boolean | `false` | `true` `false` |
| native-type | 原生类型 | string | `button` | `button` `submit` `reset` |
::: :::
::: title 按钮事件 ::: title Button 插槽
:::
::: table
| 名称 | 描述 | 参数 |
| ----- | -------- | ---- |
| default | 默认内容 | -- |
:::
::: title Button Group 属性
:::
::: table
| 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ----------- | -------- | ------- | --------- | ----------------------------------|
| - | - | - | - |
:::
::: title Button Group 插槽
::: :::
::: table ::: table
| 事件 | 描述 | 参数 | | 事件 | 描述 | 参数 |
| ----- | -------- | ---- | | ----- | -------- | ---- |
| click | 单击事件 | `--` | | default | 默认内容 | -- |
::: :::

35
example/docs/zh-CN/components/table.md
View File

@ -270,24 +270,24 @@ export default {
::: :::
::: title 表格属性 ::: title Table 属性
::: :::
::: table ::: table
| 属性 | 描述 | 可选值 | | 属性 | 描述 | 类型 | 默认值 | 可选值 |
| ------------------------ | ---------- | -------------- | | -------------------- | ----------------------------- | ---- | ------ | -------------- |
| columns | 列配置 | -- | | columns | 列配置 - [更多](#tableColumn) | -- | -- | -- |
| dataSource | 数据源 | -- | | dataSource | 数据源 | -- | -- | -- |
| checkbox | 开启复现框 | -- | | checkbox | 开启复选框 | -- | -- | -- |
| id | 主键 | -- | | id | 主键 | -- | -- | -- |
| selectedKeys ( v-model ) | 选中项 | -- | | v-model:selectedKeys | 选中项 | -- | -- | -- |
| default-toolbar | 开启工具栏 | `lg` `md` `sm` | | default-toolbar | 工具栏 | -- | -- | -- |
| size | 尺寸 | -- | | size | 尺寸 | -- | -- | `lg` `md` `sm` |
::: :::
::: title 表格事件 ::: title Table 事件
::: :::
::: table ::: table
@ -299,28 +299,31 @@ export default {
::: :::
::: title 表格插槽 ::: title Table 插槽
::: :::
::: table ::: table
| 插槽 | 描述 | 默认 | | 插槽 | 描述 | 参数 |
| ------- | ------------ | ---- | | ------- | ------------ | ---- |
| toolbar | 自定义工具栏 | -- | | toolbar | 自定义工具栏 | -- |
::: :::
::: title 列配置 ### <div id="tableColumn"></div>
::: title Table Column 属性
::: :::
::: table ::: table
| 插槽 | 描述 | 默认 | | 插槽 | 描述 | 默认 |
| ------- | ------------ | ---- | | ---------- | ---------- | ---- |
| title | 列标题 | -- | | title | 列标题 | -- |
| key | 数据字段 | -- | | key | 数据字段 | -- |
| customSlot | 插槽名称 | -- | | customSlot | 自定义插槽 | -- |
| width | 宽度 | -- | | width | 宽度 | -- |
::: :::
::: comment ::: comment

16
example/docs/zh-CN/guide/changelog.md
View File

@ -10,6 +10,22 @@
::: demo ::: demo
<template> <template>
<lay-timeline> <lay-timeline>
<lay-timeline-item title="0.3.x">
<ul>
<a name="0-3-0"> </a>
<li>
<h3>0.3.0 <span class="layui-badge-rim">2021-12-25</span></h3>
<ul>
<li>[新增] button 按钮 disabled 属性, 删除 type 属性 disabled 值。</li>
<li>[修复] checkbox 复选框 modelValue 属性必填警告。</li>
<li>[修复] formItem 内下拉框组件校验不通过边框未标红问题。</li>
<li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
<li>[集成] eslint, prettier 规范插件 。</li>
<li>[升级] icons-vue 1.0.2。</li>
</ul>
</li>
</ul>
</lay-timeline-item>
<lay-timeline-item title="0.2.x"> <lay-timeline-item title="0.2.x">
<ul> <ul>
<a name="0-2-9"> </a> <a name="0-2-9"> </a>

4
example/docs/zh-CN/guide/member.md
View File

@ -1,10 +1,8 @@
::: title 贡献代码 ::: title 社区伙伴
::: :::
::: describe ::: describe
[![Giteye chart](https://chart.giteye.net/gitee/layui-vue/layui-vue/DBC9Z6HQ.png)](https://giteye.net/chart/DBC9Z6HQ) [![Giteye chart](https://chart.giteye.net/gitee/layui-vue/layui-vue/DBC9Z6HQ.png)](https://giteye.net/chart/DBC9Z6HQ)
::: :::

35
example/src/components/LayCode.vue
View File

@ -34,9 +34,40 @@ const toggle = function () {
const copy = function () { const copy = function () {
const foundCodes = meta.value.getElementsByClassName('language-html') const foundCodes = meta.value.getElementsByClassName('language-html')
if (document.hasFocus()) { const foundCode = foundCodes[0];
const text = foundCodes[0].textContent || ""; let successful = false;
// 使用原生系统剪贴板，只适用被授权安全的站点，http下不能使用
if (navigator.clipboard && document.hasFocus()) {
const text = foundCode.textContent || "";
navigator.clipboard.writeText(text); navigator.clipboard.writeText(text);
successful = true;
} else if (window.getSelection()){
// 使用document.execCommand
// 代码div显示状态直接使用，隐藏状态则创建一个div
var range = document.createRange();
let copyDiv;
if (show.value) {
range.selectNode(foundCode);
} else {
copyDiv = document.createElement('div');
copyDiv.innerHTML = foundCode.innerHTML;
copyDiv.style.position="fixed";
copyDiv.style.left="-9999px";
document.body.appendChild(copyDiv);
range.selectNode(copyDiv);
}
window.getSelection()?.addRange(range);
try {
successful = document.execCommand('copy');
} catch(err) {
successful = false;
console.error(err);
}
window.getSelection()?.removeAllRanges();
copyDiv?.remove();
}
if (successful) {
layer.msg("复制成功", { icon : 1, time: 1000}, ()=>{}) layer.msg("复制成功", { icon : 1, time: 1000}, ()=>{})
} else { } else {
layer.msg("复制失败", { icon : 2, time: 1000}, ()=>{}) layer.msg("复制失败", { icon : 2, time: 1000}, ()=>{})

2
example/src/components/LayTableBox.vue
View File

@ -28,9 +28,9 @@
.lay-table-box table th { .lay-table-box table th {
color: #666; color: #666;
font-weight: 500; font-weight: 500;
white-space: nowrap; /*表头内容强制在一行显示*/
background-color: #fafafa; background-color: #fafafa;
} }
.lay-table-box table th,
.lay-table-box table td { .lay-table-box table td {
white-space: nowrap; white-space: nowrap;
} }

2
example/src/layouts/Layout.vue
View File

@ -43,7 +43,7 @@
</a> </a>
</li> </li>
<li class="layui-nav-item"> <li class="layui-nav-item">
<a href="javascript:void(0)"> 0.2.9 </a> <a href="javascript:void(0)"> 0.3.0 </a>
</li> </li>
</ul> </ul>
</lay-header> </lay-header>

2
example/src/view/index.vue
View File

@ -26,7 +26,7 @@
> >
</div> </div>
<div class="site-version"> <div class="site-version">
<span>当前版本：v<cite class="site-showv">0.2.9</cite></span> <span>当前版本：v<cite class="site-showv">0.3.0</cite></span>
<span <span
><router-link ><router-link
class="layui-inline site-down" class="layui-inline site-down"

64
package.json
View File

@ -1,10 +1,19 @@
{ {
"name": "@layui/layui-vue", "name": "@layui/layui-vue",
"version": "0.2.9", "version": "0.3.0",
"author": "sleeprite",
"license": "MIT",
"description": "a component library for Vue 3 base on layui-vue", "description": "a component library for Vue 3 base on layui-vue",
"homepage": "https://gitee.com/layui-vue/layui-vue/blob/master/README.md", "homepage": "http://layui-vue.pearadmin.com",
"module": "lib/layui-vue.es.js", "module": "lib/layui-vue.es.js",
"main": "lib/layui-vue.umd.js", "main": "lib/layui-vue.umd.js",
"types": "types/index.d.ts",
"style": "lib/index.css",
"keywords": [
"layui-vue",
"layui",
"vue"
],
"exports": { "exports": {
".": { ".": {
"import": "./lib/layui-vue.es.js", "import": "./lib/layui-vue.es.js",
@ -12,36 +21,23 @@
}, },
"./lib/": "./lib/" "./lib/": "./lib/"
}, },
"types": "types/index.d.ts",
"style": "lib/index.css",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "vite build --emptyOutDir && npm run build:types", "build": "vite build --emptyOutDir && npm run build:types",
"build:types": "rimraf types && tsc -d", "build:types": "rimraf types && tsc -d",
"build:example": "vite build example" "build:example": "vite build example",
}, "lint:eslint": "eslint \"src/**/*.{vue,ts,tsx}\" --fix",
"keywords": [ "lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
"layui-vue", "commit": "git cz"
"layui",
"vue"
],
"author": "就眠儀式",
"license": "MIT",
"peerDependencies": {
"@layui/hooks-vue": "^0.1.6",
"@layui/icons-vue": "^1.0.1",
"@layui/layer-vue": "^1.2.2",
"vue": "^3.2.26",
"vue-router": "^4.0.12"
}, },
"dependencies": { "dependencies": {
"@layui/hooks-vue": "^0.1.6", "@layui/hooks-vue": "^0.1.6",
"@layui/icons-vue": "^1.0.1", "@layui/icons-vue": "^1.0.2",
"@layui/layer-vue": "^1.2.2", "@layui/layer-vue": "^1.2.2",
"async-validator": "^4.0.7", "async-validator": "^4.0.7",
"vue-router": "^4.0.12",
"evtd": "^0.2.3", "evtd": "^0.2.3",
"vue": "^3.2.26", "vue": "^3.2.26"
"vue-router": "^4.0.12"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.15.8", "@babel/core": "^7.15.8",
@ -51,18 +47,27 @@
"@types/markdown-it": "^12.2.3", "@types/markdown-it": "^12.2.3",
"@types/markdown-it-container": "^2.0.4", "@types/markdown-it-container": "^2.0.4",
"@types/node": "^16.11.9", "@types/node": "^16.11.9",
"@typescript-eslint/eslint-plugin": "^5.8.0",
"@typescript-eslint/parser": "^5.8.0",
"@vitejs/plugin-vue": "^1.9.3", "@vitejs/plugin-vue": "^1.9.3",
"@vue/compiler-sfc": "^3.2.26", "@vue/compiler-sfc": "^3.2.26",
"@vue/server-renderer": "^3.2.26", "@vue/server-renderer": "^3.2.26",
"commitizen": "^4.2.4",
"cz-conventional-changelog": "3.3.0",
"escape-html": "^1.0.3", "escape-html": "^1.0.3",
"less": "^4.1.2", "eslint": "^8.5.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.2.0",
"markdown-it-container": "^3.0.0", "markdown-it-container": "^3.0.0",
"prettier": "^2.5.1",
"prismjs": "^1.25.0", "prismjs": "^1.25.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.0.0", "rollup": "^2.61.0",
"typescript": "^4.5.2", "typescript": "^4.5.2",
"vite": "2.6.14", "less": "^4.1.2",
"vite-plugin-md": "^0.11.4" "vite": "2.7.6",
"vite-plugin-md": "^0.11.6"
}, },
"files": [ "files": [
"lib", "lib",
@ -72,5 +77,10 @@
"current node", "current node",
"last 2 versions and > 2%", "last 2 versions and > 2%",
"ie > 10" "ie > 10"
] ],
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
} }

162
src/css/layui.css
View File

@ -182,7 +182,7 @@ a cite {
} }
.layui-clear:after { .layui-clear:after {
content: '\20'; content: "\20";
clear: both; clear: both;
*zoom: 1; *zoom: 1;
display: block; display: block;
@ -683,7 +683,7 @@ a cite {
color: #c2c2c2 !important; color: #c2c2c2 !important;
} }
.layui-input-number[type='number'] { .layui-input-number[type="number"] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
@ -740,8 +740,8 @@ a cite {
padding: 0 10px; padding: 0 10px;
} }
.layui-form input[type='checkbox'], .layui-form input[type="checkbox"],
.layui-form input[type='radio'], .layui-form input[type="radio"],
.layui-form select { .layui-form select {
display: none; display: none;
} }
@ -757,7 +757,7 @@ a cite {
} }
.layui-form-item:after { .layui-form-item:after {
content: '\20'; content: "\20";
clear: both; clear: both;
*zoom: 1; *zoom: 1;
display: block; display: block;
@ -1122,7 +1122,7 @@ a cite {
margin-top: 4px; margin-top: 4px;
} }
.layui-form-checkbox[lay-skin='primary'] { .layui-form-checkbox[lay-skin="primary"] {
height: auto !important; height: auto !important;
line-height: normal !important; line-height: normal !important;
min-width: 18px; min-width: 18px;
@ -1134,7 +1134,7 @@ a cite {
background: 0 0; background: 0 0;
} }
.layui-form-checkbox[lay-skin='primary'] span { .layui-form-checkbox[lay-skin="primary"] span {
padding-left: 0; padding-left: 0;
padding-right: 15px; padding-right: 15px;
line-height: 18px; line-height: 18px;
@ -1142,7 +1142,7 @@ a cite {
color: #666; color: #666;
} }
.layui-form-checkbox[lay-skin='primary'] i { .layui-form-checkbox[lay-skin="primary"] i {
right: auto; right: auto;
left: 0; left: 0;
width: 16px; width: 16px;
@ -1156,27 +1156,27 @@ a cite {
transition: 0.1s linear; transition: 0.1s linear;
} }
.layui-form-checkbox[lay-skin='primary']:hover i { .layui-form-checkbox[lay-skin="primary"]:hover i {
border-color: #5fb878; border-color: #5fb878;
color: #fff; color: #fff;
} }
.layui-form-checked[lay-skin='primary'] i { .layui-form-checked[lay-skin="primary"] i {
border-color: #5fb878 !important; border-color: #5fb878 !important;
background-color: #5fb878; background-color: #5fb878;
color: #fff; color: #fff;
} }
.layui-checkbox-disabled[lay-skin='primary'] span { .layui-checkbox-disabled[lay-skin="primary"] span {
background: 0 0 !important; background: 0 0 !important;
color: #c2c2c2 !important; color: #c2c2c2 !important;
} }
.layui-checkbox-disabled[lay-skin='primary']:hover i { .layui-checkbox-disabled[lay-skin="primary"]:hover i {
border-color: #d2d2d2; border-color: #d2d2d2;
} }
.layui-form-item .layui-form-checkbox[lay-skin='primary'] { .layui-form-item .layui-form-checkbox[lay-skin="primary"] {
margin-top: 10px; margin-top: 10px;
} }
@ -1391,7 +1391,7 @@ a cite {
} }
.layui-form-item .layui-inline:after { .layui-form-item .layui-inline:after {
content: '\20'; content: "\20";
clear: both; clear: both;
display: block; display: block;
height: 0; height: 0;
@ -1758,8 +1758,8 @@ a cite {
.layui-table-tool, .layui-table-tool,
.layui-table-total, .layui-table-total,
.layui-table-view, .layui-table-view,
.layui-table[lay-skin='line'], .layui-table[lay-skin="line"],
.layui-table[lay-skin='row'] { .layui-table[lay-skin="row"] {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-color: #eee; border-color: #eee;
@ -1774,18 +1774,18 @@ a cite {
font-size: 14px; font-size: 14px;
} }
.layui-table[lay-skin='line'] td, .layui-table[lay-skin="line"] td,
.layui-table[lay-skin='line'] th { .layui-table[lay-skin="line"] th {
border-width: 0 0 1px; border-width: 0 0 1px;
} }
.layui-table[lay-skin='row'] td, .layui-table[lay-skin="row"] td,
.layui-table[lay-skin='row'] th { .layui-table[lay-skin="row"] th {
border-width: 0 1px 0 0; border-width: 0 1px 0 0;
} }
.layui-table[lay-skin='nob'] td, .layui-table[lay-skin="nob"] td,
.layui-table[lay-skin='nob'] th { .layui-table[lay-skin="nob"] th {
border: none; border: none;
} }
@ -1793,23 +1793,23 @@ a cite {
max-width: 100px; max-width: 100px;
} }
.layui-table[lay-size='lg'] td, .layui-table[lay-size="lg"] td,
.layui-table[lay-size='lg'] th { .layui-table[lay-size="lg"] th {
padding: 15px 30px; padding: 15px 30px;
} }
.layui-table-view .layui-table[lay-size='lg'] .layui-table-cell { .layui-table-view .layui-table[lay-size="lg"] .layui-table-cell {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
} }
.layui-table[lay-size='sm'] td, .layui-table[lay-size="sm"] td,
.layui-table[lay-size='sm'] th { .layui-table[lay-size="sm"] th {
font-size: 12px; font-size: 12px;
padding: 5px 10px; padding: 5px 10px;
} }
.layui-table-view .layui-table[lay-size='sm'] .layui-table-cell { .layui-table-view .layui-table[lay-size="sm"] .layui-table-cell {
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
} }
@ -1829,11 +1829,11 @@ a cite {
border-collapse: separate; border-collapse: separate;
} }
.layui-table-view .layui-table[lay-skin='line'] { .layui-table-view .layui-table[lay-skin="line"] {
border-width: 0 1px 0 0; border-width: 0 1px 0 0;
} }
.layui-table-view .layui-table[lay-skin='row'] { .layui-table-view .layui-table[lay-skin="row"] {
border-width: 0 0 1px; border-width: 0 0 1px;
} }
@ -1856,11 +1856,11 @@ a cite {
cursor: default; cursor: default;
} }
.layui-table-view .layui-table td[data-edit='text'] { .layui-table-view .layui-table td[data-edit="text"] {
cursor: text; cursor: text;
} }
.layui-table-view .layui-form-checkbox[lay-skin='primary'] i { .layui-table-view .layui-form-checkbox[lay-skin="primary"] i {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
@ -1973,7 +1973,7 @@ a cite {
transition: all 0.3s; transition: all 0.3s;
} }
.layui-table-tool-panel li .layui-form-checkbox[lay-skin='primary'] { .layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] {
width: 100%; width: 100%;
padding-left: 28px; padding-left: 28px;
} }
@ -1982,13 +1982,13 @@ a cite {
background-color: #f6f6f6; background-color: #f6f6f6;
} }
.layui-table-tool-panel li .layui-form-checkbox[lay-skin='primary'] i { .layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] i {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
} }
.layui-table-tool-panel li .layui-form-checkbox[lay-skin='primary'] span { .layui-table-tool-panel li .layui-form-checkbox[lay-skin="primary"] span {
padding: 0; padding: 0;
} }
@ -2042,11 +2042,11 @@ a cite {
border-top-color: #666; border-top-color: #666;
} }
.layui-table-sort[lay-sort='asc'] .layui-table-sort-asc { .layui-table-sort[lay-sort="asc"] .layui-table-sort-asc {
border-bottom-color: #000; border-bottom-color: #000;
} }
.layui-table-sort[lay-sort='desc'] .layui-table-sort-desc { .layui-table-sort[lay-sort="desc"] .layui-table-sort-desc {
border-top-color: #000; border-top-color: #000;
} }
@ -2057,7 +2057,7 @@ a cite {
box-sizing: border-box; box-sizing: border-box;
} }
.layui-table-cell .layui-form-checkbox[lay-skin='primary'] { .layui-table-cell .layui-form-checkbox[lay-skin="primary"] {
top: -1px; top: -1px;
padding: 0; padding: 0;
} }
@ -2527,7 +2527,7 @@ body .layui-table-tips .layui-layer-content {
top: 0; top: 0;
bottom: 0; bottom: 0;
border-right: 3px solid #5fb878; border-right: 3px solid #5fb878;
content: ''; content: "";
} }
.layui-menu-body-title { .layui-menu-body-title {
@ -2564,7 +2564,7 @@ body .layui-table-tips .layui-layer-content {
} }
.layui-menu-body-panel:before { .layui-menu-body-panel:before {
content: ''; content: "";
position: absolute; position: absolute;
width: 20px; width: 20px;
left: -16px; left: -16px;
@ -2618,13 +2618,13 @@ body .layui-table-tips .layui-layer-content {
background-color: #fff; background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
} }
.layui-dropdown dl::before{ .layui-dropdown dl::before {
content: ' '; content: " ";
display: block; display: block;
height: 4px; height: 4px;
width: 100%; width: 100%;
} }
.layui-dropdown dl>.layui-dropdown-menu{ .layui-dropdown dl > .layui-dropdown-menu {
border: 1px solid #eee; border: 1px solid #eee;
border-radius: 4px; border-radius: 4px;
} }
@ -2876,7 +2876,7 @@ body .layui-table-tips .layui-layer-content {
.layui-nav .layui-this:after, .layui-nav .layui-this:after,
.layui-nav-bar { .layui-nav-bar {
content: ''; content: "";
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -2892,7 +2892,7 @@ body .layui-table-tips .layui-layer-content {
z-index: 1000; z-index: 1000;
} }
.layui-nav[lay-bar='disabled'] .layui-nav-bar { .layui-nav[lay-bar="disabled"] .layui-nav-bar {
display: none; display: none;
} }
@ -3181,7 +3181,7 @@ body .layui-table-tips .layui-layer-content {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
content: ''; content: "";
width: 100%; width: 100%;
height: 41px; height: 41px;
border-width: 1px; border-width: 1px;
@ -3363,7 +3363,7 @@ body .layui-table-tips .layui-layer-content {
.layui-carousel > [carousel-item]:before { .layui-carousel > [carousel-item]:before {
position: absolute; position: absolute;
content: '\e63d'; content: "\e63d";
left: 50%; left: 50%;
top: 50%; top: 50%;
width: 100px; width: 100px;
@ -3416,22 +3416,22 @@ body .layui-table-tips .layui-layer-content {
cursor: pointer; cursor: pointer;
} }
.layui-carousel-arrow[lay-type='add'] { .layui-carousel-arrow[lay-type="add"] {
left: auto !important; left: auto !important;
right: 10px; right: 10px;
} }
.layui-carousel:hover .layui-carousel-arrow[lay-type='add'], .layui-carousel:hover .layui-carousel-arrow[lay-type="add"],
.layui-carousel[lay-arrow='always'] .layui-carousel-arrow[lay-type='add'] { .layui-carousel[lay-arrow="always"] .layui-carousel-arrow[lay-type="add"] {
right: 20px; right: 20px;
} }
.layui-carousel[lay-arrow='always'] .layui-carousel-arrow { .layui-carousel[lay-arrow="always"] .layui-carousel-arrow {
opacity: 1; opacity: 1;
left: 20px; left: 20px;
} }
.layui-carousel[lay-arrow='none'] .layui-carousel-arrow { .layui-carousel[lay-arrow="none"] .layui-carousel-arrow {
display: none; display: none;
} }
@ -3455,19 +3455,19 @@ body .layui-table-tips .layui-layer-content {
font-size: 0; font-size: 0;
} }
.layui-carousel[lay-indicator='outside'] { .layui-carousel[lay-indicator="outside"] {
margin-bottom: 30px; margin-bottom: 30px;
} }
.layui-carousel[lay-indicator='outside'] .layui-carousel-ind { .layui-carousel[lay-indicator="outside"] .layui-carousel-ind {
top: 10px; top: 10px;
} }
.layui-carousel[lay-indicator='outside'] .layui-carousel-ind ul { .layui-carousel[lay-indicator="outside"] .layui-carousel-ind ul {
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
} }
.layui-carousel[lay-indicator='none'] .layui-carousel-ind { .layui-carousel[lay-indicator="none"] .layui-carousel-ind {
display: none; display: none;
} }
@ -3533,23 +3533,23 @@ body .layui-table-tips .layui-layer-content {
left: 100%; left: 100%;
} }
.layui-carousel[lay-anim='updown'] .layui-carousel-arrow { .layui-carousel[lay-anim="updown"] .layui-carousel-arrow {
left: 50% !important; left: 50% !important;
top: 20px; top: 20px;
margin: 0 0 0 -18px; margin: 0 0 0 -18px;
} }
.layui-carousel[lay-anim='updown'] > [carousel-item] > *, .layui-carousel[lay-anim="updown"] > [carousel-item] > *,
.layui-carousel[lay-anim='fade'] > [carousel-item] > * { .layui-carousel[lay-anim="fade"] > [carousel-item] > * {
left: 0 !important; left: 0 !important;
} }
.layui-carousel[lay-anim='updown'] .layui-carousel-arrow[lay-type='add'] { .layui-carousel[lay-anim="updown"] .layui-carousel-arrow[lay-type="add"] {
top: auto !important; top: auto !important;
bottom: 20px; bottom: 20px;
} }
.layui-carousel[lay-anim='updown'] .layui-carousel-ind { .layui-carousel[lay-anim="updown"] .layui-carousel-ind {
position: absolute; position: absolute;
top: 50%; top: 50%;
right: 20px; right: 20px;
@ -3557,66 +3557,66 @@ body .layui-table-tips .layui-layer-content {
height: auto; height: auto;
} }
.layui-carousel[lay-anim='updown'] .layui-carousel-ind ul { .layui-carousel[lay-anim="updown"] .layui-carousel-ind ul {
padding: 3px 5px; padding: 3px 5px;
} }
.layui-carousel[lay-anim='updown'] .layui-carousel-ind li { .layui-carousel[lay-anim="updown"] .layui-carousel-ind li {
display: block; display: block;
margin: 6px 0; margin: 6px 0;
} }
.layui-carousel[lay-anim='updown'] > [carousel-item] > .layui-this { .layui-carousel[lay-anim="updown"] > [carousel-item] > .layui-this {
top: 0; top: 0;
} }
.layui-carousel[lay-anim='updown'] > [carousel-item] > .layui-carousel-prev { .layui-carousel[lay-anim="updown"] > [carousel-item] > .layui-carousel-prev {
top: -100%; top: -100%;
} }
.layui-carousel[lay-anim='updown'] > [carousel-item] > .layui-carousel-next { .layui-carousel[lay-anim="updown"] > [carousel-item] > .layui-carousel-next {
top: 100%; top: 100%;
} }
.layui-carousel[lay-anim='updown'] .layui-carousel[lay-anim="updown"]
> [carousel-item] > [carousel-item]
> .layui-carousel-next.layui-carousel-left, > .layui-carousel-next.layui-carousel-left,
.layui-carousel[lay-anim='updown'] .layui-carousel[lay-anim="updown"]
> [carousel-item] > [carousel-item]
> .layui-carousel-prev.layui-carousel-right { > .layui-carousel-prev.layui-carousel-right {
top: 0; top: 0;
} }
.layui-carousel[lay-anim='updown'] .layui-carousel[lay-anim="updown"]
> [carousel-item] > [carousel-item]
> .layui-this.layui-carousel-left { > .layui-this.layui-carousel-left {
top: -100%; top: -100%;
} }
.layui-carousel[lay-anim='updown'] .layui-carousel[lay-anim="updown"]
> [carousel-item] > [carousel-item]
> .layui-this.layui-carousel-right { > .layui-this.layui-carousel-right {
top: 100%; top: 100%;
} }
.layui-carousel[lay-anim='fade'] > [carousel-item] > .layui-carousel-next, .layui-carousel[lay-anim="fade"] > [carousel-item] > .layui-carousel-next,
.layui-carousel[lay-anim='fade'] > [carousel-item] > .layui-carousel-prev { .layui-carousel[lay-anim="fade"] > [carousel-item] > .layui-carousel-prev {
opacity: 0; opacity: 0;
} }
.layui-carousel[lay-anim='fade'] .layui-carousel[lay-anim="fade"]
> [carousel-item] > [carousel-item]
> .layui-carousel-next.layui-carousel-left, > .layui-carousel-next.layui-carousel-left,
.layui-carousel[lay-anim='fade'] .layui-carousel[lay-anim="fade"]
> [carousel-item] > [carousel-item]
> .layui-carousel-prev.layui-carousel-right { > .layui-carousel-prev.layui-carousel-right {
opacity: 1; opacity: 1;
} }
.layui-carousel[lay-anim='fade'] .layui-carousel[lay-anim="fade"]
> [carousel-item] > [carousel-item]
> .layui-this.layui-carousel-left, > .layui-this.layui-carousel-left,
.layui-carousel[lay-anim='fade'] .layui-carousel[lay-anim="fade"]
> [carousel-item] > [carousel-item]
> .layui-this.layui-carousel-right { > .layui-this.layui-carousel-right {
opacity: 0; opacity: 0;
@ -4078,7 +4078,7 @@ body .layui-util-face .layui-layer-content {
} }
.layui-slider-wrap:after { .layui-slider-wrap:after {
content: ''; content: "";
height: 100%; height: 100%;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -4110,7 +4110,7 @@ body .layui-util-face .layui-layer-content {
} }
.layui-slider-tips:after { .layui-slider-tips:after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: -12px; bottom: -12px;
left: 50%; left: 50%;
@ -4252,7 +4252,7 @@ body .layui-util-face .layui-layer-content {
} }
.layui-tree-line .layui-tree-set .layui-tree-set:after { .layui-tree-line .layui-tree-set .layui-tree-set:after {
content: ''; content: "";
position: absolute; position: absolute;
top: 14px; top: 14px;
left: -9px; left: -9px;
@ -4288,7 +4288,7 @@ body .layui-util-face .layui-layer-content {
} }
.layui-tree-line .layui-tree-set:before { .layui-tree-line .layui-tree-set:before {
content: ''; content: "";
position: absolute; position: absolute;
top: 0; top: 0;
left: -9px; left: -9px;
@ -4335,7 +4335,7 @@ body .layui-util-face .layui-layer-content {
} }
.layui-tree-iconArrow:after { .layui-tree-iconArrow:after {
content: ''; content: "";
position: absolute; position: absolute;
left: 4px; left: 4px;
top: 3px; top: 3px;

147
src/index.ts
View File

@ -1,72 +1,71 @@
import type { App } from 'vue' import type { App } from "vue";
import type { IDefineComponent, InstallOptions } from './module/type/index' import type { IDefineComponent, InstallOptions } from "./module/type/index";
import './css/layui.css'; import "./css/layui.css";
import '@layui/layer-vue/lib/index.css'; import "@layui/layer-vue/lib/index.css";
import '@layui/icons-vue/lib/index.css'; import "@layui/icons-vue/lib/index.css";
import { layer } from "@layui/layer-vue";
import { layer } from '@layui/layer-vue' import LayModal from "./module/layer/modal/index";
import LayBacktop from "./module/backTop/index";
import LayModal from './module/layer/modal/index' import LayAvatar from "./module/avatar/index";
import LayBacktop from './module/backTop/index' import LayRadio from "./module/radio/index";
import LayAvatar from './module/avatar/index' import LayButton from "./module/button/index";
import LayRadio from './module/radio/index' import LayButtonContainer from "./module/buttonContainer/index";
import LayButton from './module/button/index' import LayButtonGroup from "./module/buttonGroup/index";
import LayButtonContainer from './module/buttonContainer/index' import LayIcon from "./module/icon/index";
import LayButtonGroup from './module/buttonGroup/index' import LayIconPicker from "./module/iconPicker/index";
import LayIcon from './module/icon/index' import LayCard from "./module/card/index";
import LayIconPicker from './module/iconPicker/index' import LayLayout from "./module/layout/index";
import LayCard from './module/card/index' import LaySide from "./module/side/index";
import LayLayout from './module/layout/index' import LayBody from "./module/body/index";
import LaySide from './module/side/index' import LayHeader from "./module/header/index";
import LayBody from './module/body/index' import LayFooter from "./module/footer/index";
import LayHeader from './module/header/index' import LayLogo from "./module/logo/index";
import LayFooter from './module/footer/index' import LayPanel from "./module/panel/index";
import LayLogo from './module/logo/index' import LayProgress from "./module/progress/index";
import LayPanel from './module/panel/index' import LayCol from "./module/col/index";
import LayProgress from './module/progress/index' import LayRow from "./module/row/index";
import LayCol from './module/col/index' import LayInput from "./module/input/index";
import LayRow from './module/row/index' import LayBadge from "./module/badge/index";
import LayInput from './module/input/index' import LayBlock from "./module/block/index";
import LayBadge from './module/badge/index' import LayLine from "./module/line/index";
import LayBlock from './module/block/index' import LayTimeline from "./module/timeline/index";
import LayLine from './module/line/index' import LayTimelineItem from "./module/timelineItem/index";
import LayTimeline from './module/timeline/index' import LayTextarea from "./module/textarea/index";
import LayTimelineItem from './module/timelineItem/index' import LaySwitch from "./module/switch/index";
import LayTextarea from './module/textarea/index' import LayCollapse from "./module/collapse/index";
import LaySwitch from './module/switch/index' import LayCollapseItem from "./module/collapseItem/index";
import LayCollapse from './module/collapse/index' import LayContainer from "./module/container/index";
import LayCollapseItem from './module/collapseItem/index' import LayMenu from "./module/menu/index";
import LayContainer from './module/container/index' import LayMenuItem from "./module/menuItem/index";
import LayMenu from './module/menu/index' import LayMenuChildItem from "./module/menuChildItem/index";
import LayMenuItem from './module/menuItem/index' import LayCheckbox from "./module/checkbox/index";
import LayMenuChildItem from './module/menuChildItem/index' import LayCheckboxGroup from "./module/checkboxGroup/index";
import LayCheckbox from './module/checkbox/index' import LayForm from "./module/form/index";
import LayCheckboxGroup from './module/checkboxGroup/index' import LayBreadcrumb from "./module/breadcrumb/index";
import LayForm from './module/form/index' import LayBreadcrumbItem from "./module/breadcrumbItem/index";
import LayBreadcrumb from './module/breadcrumb/index' import LayField from "./module/field/index";
import LayBreadcrumbItem from './module/breadcrumbItem/index' import LaySelect from "./module/select/index";
import LayField from './module/field/index' import LaySelectOption from "./module/selectOption/index";
import LaySelect from './module/select/index' import LayScroll from "./module/scroll/index";
import LaySelectOption from './module/selectOption/index' import LayEmpty from "./module/empty/index";
import LayScroll from './module/scroll/index' import LayFormItem from "./module/formItem/index";
import LayEmpty from './module/empty/index' import LayRate from "./module/rate/index";
import LayFormItem from './module/formItem/index' import LayDropdown from "./module/dropdown/index";
import LayRate from './module/rate/index' import LayDropdownItem from "./module/dropdownItem/index";
import LayDropdown from './module/dropdown/index' import LayTab from "./module/tab/index";
import LayDropdownItem from './module/dropdownItem/index' import LayTabItem from "./module/tabItem/index";
import LayTab from './module/tab/index' import LayTree from "./module/tree/index";
import LayTabItem from './module/tabItem/index' import LayTable from "./module/table/index";
import LayTree from './module/tree/index' import LayPage from "./module/page/index";
import LayTable from './module/table/index' import LayTransfer from "./module/transfer/index";
import LayPage from './module/page/index' import LaySlider from "./module/slider/index";
import LayTransfer from './module/transfer/index' import LayCarousel from "./module/carousel/index";
import LaySlider from './module/slider/index' import LayCarouselItem from "./module/carouselItem/index";
import LayCarousel from './module/carousel/index' import LayColorPicker from "./module/colorPicker/index";
import LayCarouselItem from './module/carouselItem/index' import LayTooltip from "./module/tooltip/index";
import LayColorPicker from './module/colorPicker/index' import LayInputNumber from "./module/inputNumber/index";
import LayTooltip from './module/tooltip/index'
import LayInputNumber from './module/inputNumber/index'
const components: Record<string, IDefineComponent> = { const components: Record<string, IDefineComponent> = {
LayRadio, LayRadio,
@ -129,7 +128,7 @@ const components: Record<string, IDefineComponent> = {
LayModal, LayModal,
LayTooltip, LayTooltip,
LayInputNumber, LayInputNumber,
} };
const install = (app: App, options?: InstallOptions): void => { const install = (app: App, options?: InstallOptions): void => {
const _options = options; const _options = options;
@ -138,7 +137,7 @@ const install = (app: App, options?: InstallOptions): void => {
const item = components[key]; const item = components[key];
app.component(item.name || key, item); app.component(item.name || key, item);
} }
} };
export { export {
LayRadio, LayRadio,
@ -198,9 +197,9 @@ export {
LayCarousel, LayCarousel,
LayCarouselItem, LayCarouselItem,
LayColorPicker, LayColorPicker,
LayModal, LayModal
install, };
layer
}
export default { install } export { layer };
export default { install };

18
src/module/avatar/index.less
View File

@ -20,23 +20,23 @@
height: 32px; height: 32px;
line-height: 32px; line-height: 32px;
border-radius: 4px; border-radius: 4px;
} }
.layui-avatar.layui-avatar-radius { .layui-avatar.layui-avatar-radius {
border-radius: 50%; border-radius: 50%;
} }
.layui-avatar.layui-avatar-sm { .layui-avatar.layui-avatar-sm {
height: 30px; height: 30px;
width: 30px; width: 30px;
} }
.layui-avatar.layui-avatar-lg { .layui-avatar.layui-avatar-lg {
height: 36px; height: 36px;
width: 36px; width: 36px;
} }
.layui-avatar.layui-avatar-xs { .layui-avatar.layui-avatar-xs {
height: 28px; height: 28px;
width: 28px; width: 28px;
} }

12
src/module/avatar/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayAvatar', Component) app.component(Component.name || "LayAvatar", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

16
src/module/avatar/index.vue
View File

@ -1,18 +1,18 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: "LayAvatar" name: "LayAvatar",
} };
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps } from 'vue' import { defineProps } from "vue";
import "./index.less" import "./index.less";
const props = defineProps<{ const props = defineProps<{
src?: String src?: String;
radius?: boolean radius?: boolean;
size?: string size?: string;
}>() }>();
</script> </script>
<template> <template>

12
src/module/backTop/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayBacktop', Component) app.component(Component.name || "LayBacktop", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

97
src/module/backTop/index.vue
View File

@ -14,21 +14,29 @@
:size="`${props.iconSize}px`" :size="`${props.iconSize}px`"
:prefix="props.iconPrefix" :prefix="props.iconPrefix"
:color="props.iconColor" :color="props.iconColor"
></lay-icon> />
</slot> </slot>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'LayBacktop', name: "LayBacktop",
}; };
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { defineProps, defineEmits, ref, shallowRef, withDefaults, computed, onMounted, } from 'vue'; import {
import LayIcon from '../icon/index'; defineProps,
import './index.less'; defineEmits,
ref,
shallowRef,
withDefaults,
computed,
onMounted,
} from "vue";
import LayIcon from "../icon/index";
import "./index.less";
export interface LayBacktopProps { export interface LayBacktopProps {
/**通用*/ /**通用*/
@ -36,7 +44,7 @@ export interface LayBacktopProps {
showHeight?: number; showHeight?: number;
disabled?: boolean; disabled?: boolean;
/**组件样式*/ /**组件样式*/
position?: 'fixed' | 'absolute'; position?: "fixed" | "absolute";
right?: number; right?: number;
bottom?: number; bottom?: number;
bgcolor?: string; bgcolor?: string;
@ -52,16 +60,16 @@ export interface LayBacktopProps {
} }
const props = withDefaults(defineProps<LayBacktopProps>(), { const props = withDefaults(defineProps<LayBacktopProps>(), {
target: 'window', target: "window",
showHeight: 200, showHeight: 200,
icon: 'layui-icon-top', icon: "layui-icon-top",
iconSize: 30, iconSize: 30,
iconPrefix: 'layui-icon', iconPrefix: "layui-icon",
disabled: false, disabled: false,
circle: false, circle: false,
}); });
const emit = defineEmits(['click']); const emit = defineEmits(["click"]);
const backtopRef = ref<HTMLElement | null>(null); const backtopRef = ref<HTMLElement | null>(null);
const scrollTarget = shallowRef<Window | HTMLElement | undefined>(undefined); const scrollTarget = shallowRef<Window | HTMLElement | undefined>(undefined);
@ -69,7 +77,9 @@ let visible = ref(props.showHeight === 0);
const borderRadius = computed(() => { const borderRadius = computed(() => {
if (props.circle) return "50%"; if (props.circle) return "50%";
return typeof props.borderRadius === 'number' ? `${props.borderRadius}px` : props.borderRadius; return typeof props.borderRadius === "number"
? `${props.borderRadius}px`
: props.borderRadius;
}); });
const styleBacktop = computed(() => { const styleBacktop = computed(() => {
@ -81,18 +91,18 @@ const styleBacktop = computed(() => {
opacity: props.opacity, opacity: props.opacity,
color: props.color, color: props.color,
borderRadius: borderRadius.value, borderRadius: borderRadius.value,
} };
}); });
// TODO 待改进 // TODO 待改进
const easeInOut = (value: number): number => { const easeInOut = (value: number): number => {
return value < 0.5 ? 2 * value * value : 1 - 2 * (value - 1) * (value - 1); return value < 0.5 ? 2 * value * value : 1 - 2 * (value - 1) * (value - 1);
} };
const scrollToTop = () => { const scrollToTop = () => {
if (!scrollTarget.value) return; if (!scrollTarget.value) return;
if (scrollTarget.value instanceof Window) { if (scrollTarget.value instanceof Window) {
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); // smooth | instant(default) window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); // smooth | instant(default)
} else { } else {
const previous: number = Date.now(); const previous: number = Date.now();
const scrollHeight: number = scrollTarget.value.scrollTop; const scrollHeight: number = scrollTarget.value.scrollTop;
@ -105,62 +115,75 @@ const scrollToTop = () => {
} else { } else {
scrollTarget.value.scrollTop = 0; scrollTarget.value.scrollTop = 0;
} }
} };
window.requestAnimationFrame(animationFunc); window.requestAnimationFrame(animationFunc);
} }
}; };
const handleScroll = () => { const handleScroll = () => {
if (!scrollTarget.value) return; if (!scrollTarget.value) return;
const scrollTop = scrollTarget.value instanceof Window ? window.pageYOffset : scrollTarget.value.scrollTop; const scrollTop =
scrollTarget.value instanceof Window
? window.pageYOffset
: scrollTarget.value.scrollTop;
visible.value = scrollTop >= props.showHeight; visible.value = scrollTop >= props.showHeight;
}; };
const handleClick = (event: MouseEvent) => { const handleClick = (event: MouseEvent) => {
if (!props.disabled) { if (!props.disabled) {
scrollToTop() scrollToTop();
}; }
emit('click', event); emit("click", event);
}; };
const handlerMousedown = () => { const handlerMousedown = () => {
backtopRef.value!.style.opacity = '1'; backtopRef.value!.style.opacity = "1";
} };
const handlerMouseup = () => { const handlerMouseup = () => {
backtopRef.value!.style.opacity = '0.95'; backtopRef.value!.style.opacity = "0.95";
} };
// 获取滚动目标元素 // 获取滚动目标元素
const getScrollTarget = () => { const getScrollTarget = () => {
if (props.target === 'window') { if (props.target === "window") {
return getScrollParent(backtopRef.value!, false); return getScrollParent(backtopRef.value!, false);
} else { } else {
const targetElement = document.querySelector<HTMLElement>(props.target); const targetElement = document.querySelector<HTMLElement>(props.target);
if (!targetElement) throw new Error(`target is not existed: ${props.target}`); if (!targetElement)
throw new Error(`target is not existed: ${props.target}`);
// 特定容器内部显示 // 特定容器内部显示
if (props.position === 'absolute') { if (props.position === "absolute") {
if (!targetElement.parentElement) throw new Error(`target parent element is not existed: ${props.target}`); if (!targetElement.parentElement)
targetElement.parentElement.style.position = 'relative'; throw new Error(
`target parent element is not existed: ${props.target}`
);
targetElement.parentElement.style.position = "relative";
// backtopRef.value!.style.position = props.position; // backtopRef.value!.style.position = props.position;
} }
return targetElement; return targetElement;
} }
} };
// 获取距离元素最近的可滚动祖先元素 // 获取距离元素最近的可滚动祖先元素
const getScrollParent = (element: HTMLElement, includeHidden: boolean): HTMLElement => { const getScrollParent = (
element: HTMLElement,
includeHidden: boolean
): HTMLElement => {
let style: CSSStyleDeclaration = getComputedStyle(element); let style: CSSStyleDeclaration = getComputedStyle(element);
let excludeStaticParent: boolean = style.position === "absolute"; let excludeStaticParent: boolean = style.position === "absolute";
let overflowRegex: RegExp = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/; let overflowRegex: RegExp = includeHidden
? /(auto|scroll|hidden)/
: /(auto|scroll)/;
//if (style.position === "fixed") return document.documentElement || document.body || window; //if (style.position === "fixed") return document.documentElement || document.body || window;
for (let parent: HTMLElement = element; (parent = parent.parentElement!);) { for (let parent: HTMLElement = element; (parent = parent.parentElement!); ) {
style = getComputedStyle(parent); style = getComputedStyle(parent);
if (excludeStaticParent && style.position === "static") continue; if (excludeStaticParent && style.position === "static") continue;
if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) return parent; if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
return parent;
} }
return document.documentElement || document.body || window; return document.documentElement || document.body || window;
} };
// 节流 // 节流
const throttle = (func: Function, wait: number) => { const throttle = (func: Function, wait: number) => {
@ -172,12 +195,12 @@ const throttle = (func: Function, wait: number) => {
func.apply(this, args); func.apply(this, args);
}, wait); }, wait);
} }
} };
} };
onMounted(() => { onMounted(() => {
if (!props.target) return; if (!props.target) return;
scrollTarget.value = getScrollTarget(); scrollTarget.value = getScrollTarget();
scrollTarget.value.addEventListener('scroll', throttle(handleScroll, 300)); scrollTarget.value.addEventListener("scroll", throttle(handleScroll, 300));
}); });
</script> </script>

12
src/module/badge/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayBadge', Component) app.component(Component.name || "LayBadge", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

2
src/module/badge/index.vue
View File

@ -33,6 +33,6 @@ const styles = computed(() => {
<template> <template>
<span :class="classes" :style="styles"> <span :class="classes" :style="styles">
<slot v-if="type != 'dot'" /> <slot v-if="type != 'dot'"></slot>
</span> </span>
</template> </template>

12
src/module/block/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayBlock', Component) app.component(Component.name || "LayBlock", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

4
src/module/block/index.vue
View File

@ -6,7 +6,7 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import { defineProps } from "vue"; import { defineProps } from "vue";
import "./index.less" import "./index.less";
const props = defineProps<{ const props = defineProps<{
nm?: boolean; nm?: boolean;
@ -15,6 +15,6 @@ const props = defineProps<{
<template> <template>
<blockquote class="layui-elem-quote" :class="{ 'layui-quote-nm': nm }"> <blockquote class="layui-elem-quote" :class="{ 'layui-quote-nm': nm }">
<slot /> <slot></slot>
</blockquote> </blockquote>
</template> </template>

12
src/module/body/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { 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;

8
src/module/body/index.vue
View File

@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'LayBody', name: "LayBody",
} };
</script> </script>
<script setup name="LayBody" lang="ts"> <script setup name="LayBody" lang="ts">
import "./index.less" import "./index.less";
</script> </script>
<template> <template>
<div class="layui-body"> <div class="layui-body">
<slot /> <slot></slot>
</div> </div>
</template> </template>

12
src/module/breadcrumb/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { 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;

10
src/module/breadcrumb/index.vue
View File

@ -5,16 +5,16 @@
</template> </template>
<script setup name="LayBreadcrumb" lang="ts"> <script setup name="LayBreadcrumb" lang="ts">
import { defineProps, provide, withDefaults } from 'vue' import { defineProps, provide, withDefaults } from "vue";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
separator?: string separator?: string;
}>(), }>(),
{ {
separator: '/', separator: "/",
} }
) );
provide('separator', props.separator) provide("separator", props.separator);
</script> </script>

12
src/module/breadcrumbItem/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { 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;

10
src/module/breadcrumbItem/index.vue
View File

@ -11,13 +11,13 @@
</template> </template>
<script setup name="LayBreadcrumbItem" lang="ts"> <script setup name="LayBreadcrumbItem" lang="ts">
import { defineProps, inject, useSlots } from 'vue' import { defineProps, inject, useSlots } from "vue";
const slot = useSlots() const slot = useSlots();
const props = defineProps<{ const props = defineProps<{
title?: string title?: string;
}>() }>();
const separator = inject('separator') const separator = inject("separator");
</script> </script>

2
src/module/button/index.less
View File

@ -23,7 +23,7 @@
filter: alpha(opacity=100); filter: alpha(opacity=100);
} }
.layui-btn+.layui-btn { .layui-btn + .layui-btn {
margin-left: 10px; margin-left: 10px;
} }

13
src/module/button/index.ts
View File

@ -1,10 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayButton', Component) app.component(Component.name || "LayButton", Component);
} };
export default Component as IDefineComponent;
export default Component as IDefineComponent

10
src/module/button/index.vue
View File

@ -51,14 +51,8 @@ const classes = computed(() => {
> >
<i <i
v-if="loading" v-if="loading"
class=" class="layui-icon layui-icon-loading-one layui-anim layui-anim-rotate layui-anim-loop"
layui-icon
layui-icon-loading-one
layui-anim
layui-anim-rotate
layui-anim-loop
"
></i> ></i>
<slot v-else /> <slot v-else></slot>
</button> </button>
</template> </template>

2
src/module/buttonContainer/index.less
View File

@ -7,7 +7,7 @@
margin-bottom: 10px; margin-bottom: 10px;
} }
.layui-btn-container .layui-btn+.layui-btn { .layui-btn-container .layui-btn + .layui-btn {
margin-left: 0; margin-left: 0;
} }

12
src/module/buttonContainer/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayButtonContainer', Component) app.component(Component.name || "LayButtonContainer", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

2
src/module/buttonContainer/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="layui-btn-container"> <div class="layui-btn-container">
<slot /> <slot></slot>
</div> </div>
</template> </template>

4
src/module/buttonGroup/index.less
View File

@ -32,10 +32,10 @@
border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0;
} }
.layui-btn-group .layui-btn+.layui-btn { .layui-btn-group .layui-btn + .layui-btn {
margin-left: 0; margin-left: 0;
} }
.layui-btn-group+.layui-btn-group { .layui-btn-group + .layui-btn-group {
margin-left: 10px; margin-left: 10px;
} }

12
src/module/buttonGroup/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayButtonGroup', Component) app.component(Component.name || "LayButtonGroup", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

4
src/module/buttonGroup/index.vue
View File

@ -5,11 +5,11 @@ export default {
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import "./index.less" import "./index.less";
</script> </script>
<template> <template>
<div class="layui-btn-group"> <div class="layui-btn-group">
<slot /> <slot></slot>
</div> </div>
</template> </template>

12
src/module/card/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayCard ', Component) app.component(Component.name || "LayCard ", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

4
src/module/card/index.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="layui-card"> <div class="layui-card">
<div class="layui-card-header" v-if="slot.header || title"> <div class="layui-card-header" v-if="slot.header || title">
<slot name="header" v-if="slot.header" /> <slot name="header" v-if="slot.header"></slot>
<span v-else>{{ title }}</span> <span v-else>{{ title }}</span>
</div> </div>
<div class="layui-card-body"> <div class="layui-card-body">
<slot name="body" v-if="slot.body" /> <slot name="body" v-if="slot.body"></slot>
<slot v-else></slot> <slot v-else></slot>
</div> </div>
</div> </div>

12
src/module/carousel/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayCarousel', Component) app.component(Component.name || "LayCarousel", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

66
src/module/carousel/index.vue
View File

@ -24,13 +24,13 @@
lay-type="sub" lay-type="sub"
@click="prev" @click="prev"
> >
{{ anim === 'updown' ? '' : '' }}</button {{ anim === "updown" ? "" : "" }}</button
><button ><button
class="layui-icon layui-carousel-arrow" class="layui-icon layui-carousel-arrow"
lay-type="add" lay-type="add"
@click="next" @click="next"
> >
{{ anim === 'updown' ? '' : '' }} {{ anim === "updown" ? "" : "" }}
</button> </button>
</div> </div>
</template> </template>
@ -42,68 +42,68 @@ import {
useSlots, useSlots,
ref, ref,
computed, computed,
} from 'vue' } from "vue";
const slot = useSlots() as any const slot = useSlots() as any;
const slots = slot.default && (slot.default() as any[]) const slots = slot.default && (slot.default() as any[]);
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
width?: string width?: string;
height?: string height?: string;
modelValue: string modelValue: string;
anim?: string anim?: string;
arrow?: string arrow?: string;
indicator?: string indicator?: string;
}>(), }>(),
{ {
width: '100%', width: "100%",
height: '280px', height: "280px",
anim: 'default', anim: "default",
arrow: 'hover', arrow: "hover",
indicator: 'inside', indicator: "inside",
} }
) );
const active = computed({ const active = computed({
get() { get() {
return props.modelValue return props.modelValue;
}, },
set(val) { set(val) {
emit('update:modelValue', val) emit("update:modelValue", val);
}, },
}) });
const emit = defineEmits(['update:modelValue', 'change']) const emit = defineEmits(["update:modelValue", "change"]);
const change = function (id: any) { const change = function (id: any) {
emit('change', id) emit("change", id);
active.value = id active.value = id;
} };
provide('active', active) provide("active", active);
const prev = function () { const prev = function () {
for (var i = 0; i < slots.length; i++) { for (var i = 0; i < slots.length; i++) {
if (slots[i].props.id === active.value) { if (slots[i].props.id === active.value) {
if (i === 0) { if (i === 0) {
active.value = slots[slots.length - 1].props.id active.value = slots[slots.length - 1].props.id;
} }
active.value = slots[i - 1].props.id active.value = slots[i - 1].props.id;
break break;
} }
} }
} };
const next = function () { const next = function () {
for (var i = 0; i < slots.length; i++) { for (var i = 0; i < slots.length; i++) {
if (slots[i].props.id === active.value) { if (slots[i].props.id === active.value) {
if (i === slots.length - 1) { if (i === slots.length - 1) {
active.value = slots[0].props.id active.value = slots[0].props.id;
} }
active.value = slots[i + 1].props.id active.value = slots[i + 1].props.id;
break break;
} }
} }
} };
</script> </script>

12
src/module/carouselItem/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayCarouselItem', Component) app.component(Component.name || "LayCarouselItem", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

8
src/module/carouselItem/index.vue
View File

@ -4,11 +4,11 @@
</li> </li>
</template> </template>
<script setup name="LayCarouselItem" lang="ts"> <script setup name="LayCarouselItem" lang="ts">
import { defineProps, inject } from 'vue' import { defineProps, inject } from "vue";
const props = defineProps<{ const props = defineProps<{
id: string id: string;
}>() }>();
const active = inject('active') const active = inject("active");
</script> </script>

12
src/module/checkbox/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayCheckbox', Component) app.component(Component.name || "LayCheckbox", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

6
src/module/checkbox/index.vue
View File

@ -12,7 +12,7 @@ export interface LayCheckboxProps {
name?: string; name?: string;
skin?: string; skin?: string;
label: string | object; label: string | object;
modelValue: boolean | Array<string | object>; modelValue?: boolean | Array<string | object>;
disabled?: boolean; disabled?: boolean;
} }
@ -104,8 +104,8 @@ const handleClick = function () {
}" }"
:lay-skin="skin" :lay-skin="skin"
> >
<span v-if="$slots?.default"><slot /></span> <span v-if="$slots?.default"><slot></slot></span>
<i class="layui-icon layui-icon-ok" /> <i class="layui-icon layui-icon-ok"></i>
</div> </div>
</span> </span>
</template> </template>

12
src/module/checkboxGroup/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayCheckboxGroup', Component) app.component(Component.name || "LayCheckboxGroup", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

1
src/module/checkboxGroup/index.vue
View File

@ -4,7 +4,6 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
name: "LayCheckboxGroup", name: "LayCheckboxGroup",

12
src/module/col/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayCol', Component) app.component(Component.name || "LayCol", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

2
src/module/col/index.vue
View File

@ -34,6 +34,6 @@ const classes = computed(() => {
<template> <template>
<div class="layui-col" :class="classes"> <div class="layui-col" :class="classes">
<slot /> <slot></slot>
</div> </div>
</template> </template>

12
src/module/collapse/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayCollapse', Component) app.component(Component.name || "LayCollapse", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

30
src/module/collapse/index.vue
View File

@ -1,12 +1,19 @@
<template> <template>
<div class="layui-collapse"> <div class="layui-collapse">
<slot /> <slot></slot>
</div> </div>
</template> </template>
<script setup name="LayCollapse"></script> <script setup name="LayCollapse"></script>
<script setup lang="ts"> <script setup lang="ts">
import { withDefaults, defineProps, provide, ref, defineEmits, watch } from 'vue' import {
withDefaults,
defineProps,
provide,
ref,
defineEmits,
watch,
} from "vue";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
@ -15,25 +22,24 @@ const props = withDefaults(
}>(), }>(),
{ {
modelValue: () => [], modelValue: () => [],
accordion: false accordion: false,
} }
) );
// 监听传入的值 // 监听传入的值
watch( watch(
() => props.modelValue, () => props.modelValue,
(val, oldVal)=>{ (val, oldVal) => {
activeValues.value = ([] as any[]).concat(val) activeValues.value = ([] as any[]).concat(val);
} }
) );
const emit = defineEmits(["update:modelValue", "change"]) const emit = defineEmits(["update:modelValue", "change"]);
const activeValues = ref<Array<any>>(([] as any[]).concat(props.modelValue)); const activeValues = ref<Array<any>>(([] as any[]).concat(props.modelValue));
provide("layCollapse", { provide("layCollapse", {
accordion : props.accordion, accordion: props.accordion,
activeValues, activeValues,
emit emit,
}) });
</script> </script>

12
src/module/collapseItem/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayCollapseItem', Component) app.component(Component.name || "LayCollapseItem", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

48
src/module/collapseItem/index.vue
View File

@ -1,50 +1,60 @@
<template> <template>
<div class="layui-colla-item"> <div class="layui-colla-item">
<h2 :class="['layui-colla-title', {'layui-disabled' : disabled}]" @click="showHandle"> <h2
<slot name="title" :props="props">{{ title}}</slot> :class="['layui-colla-title', { 'layui-disabled': disabled }]"
<i class="layui-icon layui-colla-icon">{{ isShow ? '' : '' }}</i> @click="showHandle"
>
<slot name="title" :props="props">{{ title }}</slot>
<i class="layui-icon layui-colla-icon">{{ isShow ? "" : "" }}</i>
</h2> </h2>
<div class="layui-colla-content" :class="isShow ? 'layui-show' : ''"> <div class="layui-colla-content" :class="isShow ? 'layui-show' : ''">
<p> <p>
<slot :props="props"/> <slot :props="props"></slot>
</p> </p>
</div> </div>
</div> </div>
</template> </template>
<script setup name="LayCollapseItem" lang="ts"> <script setup name="LayCollapseItem" lang="ts">
import { withDefaults, defineProps, inject, computed, ref } from 'vue' import { withDefaults, defineProps, inject, computed, ref } from "vue";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
id: number | string id: number | string;
title: string title: string;
disabled?: boolean disabled?: boolean;
}>(), }>(),
{ {
disabled: false disabled: false,
} }
) );
const {accordion, activeValues, emit} = inject('layCollapse') as any const { accordion, activeValues, emit } = inject("layCollapse") as any;
let isShow = computed(()=>{return activeValues.value.includes(props.id)}) let isShow = computed(() => {
return activeValues.value.includes(props.id);
});
const showHandle = function () { const showHandle = function () {
if (props.disabled) { if (props.disabled) {
return ; return;
} }
const _isShow = isShow.value; const _isShow = isShow.value;
// 手风琴效果 // 手风琴效果
if (accordion) { if (accordion) {
activeValues.value = !_isShow ? [props.id] : []; activeValues.value = !_isShow ? [props.id] : [];
} else if (_isShow) { // 普通折叠面板 --> 折叠 } else if (_isShow) {
activeValues.value.splice(activeValues.value.indexOf(props.id), 1) // 普通折叠面板 --> 折叠
} else { // 普通折叠面板 --> 展开 activeValues.value.splice(activeValues.value.indexOf(props.id), 1);
activeValues.value.push(props.id) } else {
// 普通折叠面板 --> 展开
activeValues.value.push(props.id);
} }
emit("update:modelValue", (accordion ? activeValues.value[0] || null : activeValues.value)); emit(
"update:modelValue",
accordion ? activeValues.value[0] || null : activeValues.value
);
emit("change", props.id, !_isShow, activeValues.value); emit("change", props.id, !_isShow, activeValues.value);
} };
</script> </script>

104
src/module/colorPicker/ColorBox.vue
View File

@ -1,86 +1,86 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'ColorBox', name: "ColorBox",
} };
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { Nullable } from '../type' import { Nullable } from "../type";
import { computed, onMounted, ref } from 'vue' import { computed, onMounted, ref } from "vue";
import { HSBToHEX, RGBSTo, RGBToHSB } from './colorUtil' import { HSBToHEX, RGBSTo, RGBToHSB } from "./colorUtil";
import ColorPicker from './ColorPicker.vue' import ColorPicker from "./ColorPicker.vue";
import { usePosition } from '@layui/hooks-vue' import { usePosition } from "@layui/hooks-vue";
interface BoxProps { interface BoxProps {
color?: string color?: string;
size?: Nullable<string> size?: Nullable<string>;
alpha?: boolean alpha?: boolean;
format?: 'hex' | 'rgb' format?: "hex" | "rgb";
predefine?: boolean predefine?: boolean;
colors?: string[] colors?: string[];
} }
const colorBoxProps = withDefaults(defineProps<BoxProps>(), { const colorBoxProps = withDefaults(defineProps<BoxProps>(), {
color: '', color: "",
size: () => null, size: () => null,
alpha: false, alpha: false,
format: 'hex', format: "hex",
predefine: false, predefine: false,
colors: () => [ colors: () => [
//默认预定义颜色列表 //默认预定义颜色列表
'#009688', "#009688",
'#5FB878', "#5FB878",
'#1E9FFF', "#1E9FFF",
'#FF5722', "#FF5722",
'#FFB800', "#FFB800",
'#01AAED', "#01AAED",
'#999', "#999",
'#c00', "#c00",
'#ff8c00', "#ff8c00",
'#ffd700', "#ffd700",
'#90ee90', "#90ee90",
'#00ced1', "#00ced1",
'#1e90ff', "#1e90ff",
'#c71585', "#c71585",
'rgb(0, 186, 189)', "rgb(0, 186, 189)",
'rgb(255, 120, 0)', "rgb(255, 120, 0)",
'rgb(250, 212, 0)', "rgb(250, 212, 0)",
'#393D49', "#393D49",
'rgba(0,0,0,.5)', "rgba(0,0,0,.5)",
'rgba(255, 69, 0, 0.68)', "rgba(255, 69, 0, 0.68)",
'rgba(144, 240, 144, 0.5)', "rgba(144, 240, 144, 0.5)",
'rgba(31, 147, 255, 0.73)', "rgba(31, 147, 255, 0.73)",
], ],
}) });
const triggerSpanStyle = computed(() => { const triggerSpanStyle = computed(() => {
let bgstr = '' let bgstr = "";
if (colorBoxProps.color) { if (colorBoxProps.color) {
bgstr = colorBoxProps.color bgstr = colorBoxProps.color;
if ((colorBoxProps.color.match(/[0-9]{1,3}/g) || []).length > 3) { if ((colorBoxProps.color.match(/[0-9]{1,3}/g) || []).length > 3) {
//需要优化 //需要优化
if (!(colorBoxProps.alpha && colorBoxProps.format == 'rgb')) { if (!(colorBoxProps.alpha && colorBoxProps.format == "rgb")) {
bgstr = '#' + HSBToHEX(RGBToHSB(RGBSTo(colorBoxProps.color))) bgstr = "#" + HSBToHEX(RGBToHSB(RGBSTo(colorBoxProps.color)));
} }
} }
} }
return { return {
background: bgstr, background: bgstr,
} };
}) });
const colorPickerWrapper = computed(() => { const colorPickerWrapper = computed(() => {
return colorBoxProps.size ? `layui-colorpicker-${colorBoxProps.size}` : '' return colorBoxProps.size ? `layui-colorpicker-${colorBoxProps.size}` : "";
}) });
const colorBoxRefEl = ref<HTMLElement | null>(null) const colorBoxRefEl = ref<HTMLElement | null>(null);
const colorPickerRefEl = ref<HTMLElement | null>(null) const colorPickerRefEl = ref<HTMLElement | null>(null);
onMounted(() => { onMounted(() => {
console.log('colorPickerRefEl =>>>', colorPickerRefEl.value.teleportRefEl) console.log("colorPickerRefEl =>>>", colorPickerRefEl.value.teleportRefEl);
usePosition(colorBoxRefEl.value, colorPickerRefEl.value.teleportRefEl) usePosition(colorBoxRefEl.value, colorPickerRefEl.value.teleportRefEl);
}) });
</script> </script>
<template> <template>
<div ref="colorBoxRefEl" class="layui-unselect layui-colorpicker"> <div ref="colorBoxRefEl" class="layui-unselect layui-colorpicker">
@ -107,7 +107,7 @@ onMounted(() => {
:visible="true" :visible="true"
:alpha="alpha" :alpha="alpha"
:predefine="predefine" :predefine="predefine"
></ColorPicker> />
</div> </div>
</template> </template>
<style scoped lang="less"></style> <style scoped lang="less"></style>

18
src/module/colorPicker/ColorPicker.vue
View File

@ -1,23 +1,23 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'ColorPicker', name: "ColorPicker",
} };
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue' import { ref } from "vue";
interface CProps { interface CProps {
visible: boolean visible: boolean;
alpha: boolean alpha: boolean;
predefine: boolean predefine: boolean;
} }
const props = defineProps<CProps>() const props = defineProps<CProps>();
const domRefEl = ref<HTMLElement | null>(null) const domRefEl = ref<HTMLElement | null>(null);
defineExpose({ defineExpose({
teleportRefEl: domRefEl, teleportRefEl: domRefEl,
}) });
</script> </script>
<template> <template>
<teleport to="body"> <teleport to="body">

12
src/module/colorPicker/colorPicker.type.ts
View File

@ -3,32 +3,32 @@ export interface ColorPickerProps {
* 默认颜色，不管你是使用 hex、rgb 还是 rgba 的格式输入，最终会以指定的格式显示。 * 默认颜色，不管你是使用 hex、rgb 还是 rgba 的格式输入，最终会以指定的格式显示。
* v-model:color * v-model:color
*/ */
color: string color: string;
/** /**
* 颜色显示/输入格式，可选值： hex、rgb * 颜色显示/输入格式，可选值： hex、rgb
* 若在 rgb 格式下开启了透明度，格式会自动变成 rgba。在没有输入颜色的前提下，组件会默认为 #000 也就是黑色。 * 若在 rgb 格式下开启了透明度，格式会自动变成 rgba。在没有输入颜色的前提下，组件会默认为 #000 也就是黑色。
* default: hex（即 16 进制色值） * default: hex（即 16 进制色值）
*/ */
format: 'hex' | 'rgb' format: "hex" | "rgb";
/** /**
* 是否开启透明度，若不开启，则不会显示透明框。开启了透明度选项时，当你的默认颜色为 hex 或 rgb 格式， * 是否开启透明度，若不开启，则不会显示透明框。开启了透明度选项时，当你的默认颜色为 hex 或 rgb 格式，
* 组件会默认加上值为 1 的透明度。相同的，当你没有开启透明度，却以 rgba 格式设置默认颜色时，组件会默认没有透明度。 * 组件会默认加上值为 1 的透明度。相同的，当你没有开启透明度，却以 rgba 格式设置默认颜色时，组件会默认没有透明度。
* 注意：该参数必须配合 rgba 颜色值使用 * 注意：该参数必须配合 rgba 颜色值使用
* default: false * default: false
*/ */
alpha: boolean alpha: boolean;
/** /**
* 预定义颜色是否开启 * 预定义颜色是否开启
* default: false * default: false
*/ */
predefine: boolean predefine: boolean;
/** /**
* 预定义颜色，此参数需配合 predefine: true 使用。 * 预定义颜色，此参数需配合 predefine: true 使用。
* 此处列举一部分：['#ff4500','#1e90ff','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)'] * 此处列举一部分：['#ff4500','#1e90ff','rgba(255, 69, 0, 0.68)','rgb(255, 120, 0)']
*/ */
colors: string[] colors: string[];
/** /**
* 下拉框大小，可以选择：lg、sm、xs。 * 下拉框大小，可以选择：lg、sm、xs。
*/ */
size: 'lg' | 'sm' | 'xs' size: "lg" | "sm" | "xs";
} }

128
src/module/colorPicker/colorUtil.ts
View File

@ -1,113 +1,113 @@
export interface RGB { export interface RGB {
h: number h: number;
s: number s: number;
b: number b: number;
} }
// RGB转HSB // RGB转HSB
export function RGBToHSB(rgb: any) { export function RGBToHSB(rgb: any) {
const hsb = { h: 0, s: 0, b: 0 } const hsb = { h: 0, s: 0, b: 0 };
const min = Math.min(rgb.r, rgb.g, rgb.b) const min = Math.min(rgb.r, rgb.g, rgb.b);
const max = Math.max(rgb.r, rgb.g, rgb.b) const max = Math.max(rgb.r, rgb.g, rgb.b);
const delta = max - min const delta = max - min;
hsb.b = max hsb.b = max;
hsb.s = max != 0 ? (255 * delta) / max : 0 hsb.s = max != 0 ? (255 * delta) / max : 0;
if (hsb.s != 0) { if (hsb.s != 0) {
if (rgb.r == max) { if (rgb.r == max) {
hsb.h = (rgb.g - rgb.b) / delta hsb.h = (rgb.g - rgb.b) / delta;
} else if (rgb.g == max) { } else if (rgb.g == max) {
hsb.h = 2 + (rgb.b - rgb.r) / delta hsb.h = 2 + (rgb.b - rgb.r) / delta;
} else { } else {
hsb.h = 4 + (rgb.r - rgb.g) / delta hsb.h = 4 + (rgb.r - rgb.g) / delta;
} }
} else { } else {
hsb.h = -1 hsb.h = -1;
} }
if (max == min) { if (max == min) {
hsb.h = 0 hsb.h = 0;
} }
hsb.h *= 60 hsb.h *= 60;
if (hsb.h < 0) { if (hsb.h < 0) {
hsb.h += 360 hsb.h += 360;
} }
hsb.s *= 100 / 255 hsb.s *= 100 / 255;
hsb.b *= 100 / 255 hsb.b *= 100 / 255;
return hsb return hsb;
} }
// HEX转HSB // HEX转HSB
export function HEXToHSB(hex: any) { export function HEXToHSB(hex: any) {
hex = hex.indexOf('#') > -1 ? hex.substring(1) : hex hex = hex.indexOf("#") > -1 ? hex.substring(1) : hex;
if (hex.length == 3) { if (hex.length == 3) {
const num = hex.split('') const num = hex.split("");
hex = num[0] + num[0] + num[1] + num[1] + num[2] + num[2] hex = num[0] + num[0] + num[1] + num[1] + num[2] + num[2];
} }
hex = parseInt(hex, 16) hex = parseInt(hex, 16);
const rgb = { r: hex >> 16, g: (hex & 0x00ff00) >> 8, b: hex & 0x0000ff } const rgb = { r: hex >> 16, g: (hex & 0x00ff00) >> 8, b: hex & 0x0000ff };
return RGBToHSB(rgb) return RGBToHSB(rgb);
} }
// HSB转RGB // HSB转RGB
export function HSBToRGB(hsb: any) { export function HSBToRGB(hsb: any) {
const rgb: any = {} const rgb: any = {};
let h = hsb.h let h = hsb.h;
const s = (hsb.s * 255) / 100 const s = (hsb.s * 255) / 100;
const b = (hsb.b * 255) / 100 const b = (hsb.b * 255) / 100;
if (s == 0) { if (s == 0) {
rgb.r = rgb.g = rgb.b = b rgb.r = rgb.g = rgb.b = b;
} else { } else {
const t1 = b const t1 = b;
const t2 = ((255 - s) * b) / 255 const t2 = ((255 - s) * b) / 255;
const t3 = ((t1 - t2) * (h % 60)) / 60 const t3 = ((t1 - t2) * (h % 60)) / 60;
if (h == 360) h = 0 if (h == 360) h = 0;
if (h < 60) { if (h < 60) {
rgb.r = t1 rgb.r = t1;
rgb.b = t2 rgb.b = t2;
rgb.g = t2 + t3 rgb.g = t2 + t3;
} else if (h < 120) { } else if (h < 120) {
rgb.g = t1 rgb.g = t1;
rgb.b = t2 rgb.b = t2;
rgb.r = t1 - t3 rgb.r = t1 - t3;
} else if (h < 180) { } else if (h < 180) {
rgb.g = t1 rgb.g = t1;
rgb.r = t2 rgb.r = t2;
rgb.b = t2 + t3 rgb.b = t2 + t3;
} else if (h < 240) { } else if (h < 240) {
rgb.b = t1 rgb.b = t1;
rgb.r = t2 rgb.r = t2;
rgb.g = t1 - t3 rgb.g = t1 - t3;
} else if (h < 300) { } else if (h < 300) {
rgb.b = t1 rgb.b = t1;
rgb.g = t2 rgb.g = t2;
rgb.r = t2 + t3 rgb.r = t2 + t3;
} else if (h < 360) { } else if (h < 360) {
rgb.r = t1 rgb.r = t1;
rgb.g = t2 rgb.g = t2;
rgb.b = t1 - t3 rgb.b = t1 - t3;
} else { } else {
rgb.r = 0 rgb.r = 0;
rgb.g = 0 rgb.g = 0;
rgb.b = 0 rgb.b = 0;
} }
} }
return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) } return { r: Math.round(rgb.r), g: Math.round(rgb.g), b: Math.round(rgb.b) };
} }
// HSB转HEX // HSB转HEX
export function HSBToHEX(hsb: any) { export function HSBToHEX(hsb: any) {
const rgb = HSBToRGB(hsb) const rgb = HSBToRGB(hsb);
const hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)] const hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
hex.forEach((val, nr) => { hex.forEach((val, nr) => {
if (val.length == 1) { if (val.length == 1) {
hex[nr] = '0' + val hex[nr] = "0" + val;
} }
}) });
return hex.join('') return hex.join("");
} }
//转化成所需rgb格式 //转化成所需rgb格式
export function RGBSTo(rgbs: any) { export function RGBSTo(rgbs: any) {
const regexp = /[0-9]{1,3}/g const regexp = /[0-9]{1,3}/g;
const re = rgbs.match(regexp) || [] const re = rgbs.match(regexp) || [];
return { r: re[0], g: re[1], b: re[2] } return { r: re[0], g: re[1], b: re[2] };
} }

12
src/module/colorPicker/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayColorPicker', Component) app.component(Component.name || "LayColorPicker", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

72
src/module/colorPicker/index.vue
View File

@ -1,58 +1,58 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'LayColorPicker', name: "LayColorPicker",
} };
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { Nullable } from '/@src/module/type' import { Nullable } from "/@src/module/type";
import ColorBox from './ColorBox.vue' import ColorBox from "./ColorBox.vue";
interface ColorPickerProps { interface ColorPickerProps {
color?: string color?: string;
size?: Nullable<string> size?: Nullable<string>;
alpha?: boolean alpha?: boolean;
format?: 'hex' | 'rgb' format?: "hex" | "rgb";
predefine?: boolean predefine?: boolean;
colors?: string[] colors?: string[];
} }
const colorPickerProps = withDefaults(defineProps<ColorPickerProps>(), { const colorPickerProps = withDefaults(defineProps<ColorPickerProps>(), {
color: '', color: "",
size: () => null, size: () => null,
alpha: false, alpha: false,
format: 'hex', format: "hex",
predefine: false, predefine: false,
colors: () => [ colors: () => [
//默认预定义颜色列表 //默认预定义颜色列表
'#009688', "#009688",
'#5FB878', "#5FB878",
'#1E9FFF', "#1E9FFF",
'#FF5722', "#FF5722",
'#FFB800', "#FFB800",
'#01AAED', "#01AAED",
'#999', "#999",
'#c00', "#c00",
'#ff8c00', "#ff8c00",
'#ffd700', "#ffd700",
'#90ee90', "#90ee90",
'#00ced1', "#00ced1",
'#1e90ff', "#1e90ff",
'#c71585', "#c71585",
'rgb(0, 186, 189)', "rgb(0, 186, 189)",
'rgb(255, 120, 0)', "rgb(255, 120, 0)",
'rgb(250, 212, 0)', "rgb(250, 212, 0)",
'#393D49', "#393D49",
'rgba(0,0,0,.5)', "rgba(0,0,0,.5)",
'rgba(255, 69, 0, 0.68)', "rgba(255, 69, 0, 0.68)",
'rgba(144, 240, 144, 0.5)', "rgba(144, 240, 144, 0.5)",
'rgba(31, 147, 255, 0.73)', "rgba(31, 147, 255, 0.73)",
], ],
}) });
</script> </script>
<template> <template>
<div class="layui-inline'"> <div class="layui-inline'">
<ColorBox></ColorBox> <ColorBox />
</div> </div>
</template> </template>

12
src/module/container/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayContainer', Component) app.component(Component.name || "LayContainer", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

18
src/module/container/index.vue
View File

@ -1,26 +1,28 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: "LayContainer" name: "LayContainer",
} };
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { computed, defineProps } from 'vue' import { computed, defineProps } from "vue";
import "./index.less" import "./index.less";
export interface LayContainerProps { export interface LayContainerProps {
fluid?: boolean fluid?: boolean;
} }
const props = withDefaults(defineProps<LayContainerProps>(), { const props = withDefaults(defineProps<LayContainerProps>(), {
fluid: false fluid: false,
}); });
const classes = computed(() => props.fluid ? 'layui-fluid' : 'layui-container') const classes = computed(() =>
props.fluid ? "layui-fluid" : "layui-container"
);
</script> </script>
<template> <template>
<div :class="classes"> <div :class="classes">
<slot /> <slot></slot>
</div> </div>
</template> </template>

12
src/module/count/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayCount', Component) app.component(Component.name || "LayCount", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

2
src/module/count/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<span class="layui-count" /> <span class="layui-count"></span>
</template> </template>
<script setup name="LayCount" lang="ts"></script> <script setup name="LayCount" lang="ts"></script>

12
src/module/dropdown/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayDropdown', Component) app.component(Component.name || "LayDropdown", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

48
src/module/dropdown/index.vue
View File

@ -1,45 +1,45 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: "LayDropdown" name: "LayDropdown",
} };
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { defineProps, provide, ref, watch } from 'vue' import { defineProps, provide, ref, watch } from "vue";
import { useClickOutside } from '@layui/hooks-vue' import { useClickOutside } from "@layui/hooks-vue";
const dropdownRef = ref<null | HTMLElement>(null) const dropdownRef = ref<null | HTMLElement>(null);
const isClickOutside = useClickOutside(dropdownRef) const isClickOutside = useClickOutside(dropdownRef);
export interface LayDropdownProps { export interface LayDropdownProps {
trigger?: string trigger?: string;
} }
const props = withDefaults(defineProps<LayDropdownProps>(),{ const props = withDefaults(defineProps<LayDropdownProps>(), {
trigger: 'click', trigger: "click",
}) });
const openState = ref(false) const openState = ref(false);
const open = function () { const open = function () {
openState.value = true openState.value = true;
} };
const hide = function () { const hide = function () {
openState.value = false openState.value = false;
} };
const toggle = function () { const toggle = function () {
openState.value = !openState.value openState.value = !openState.value;
} };
watch(isClickOutside, () => { watch(isClickOutside, () => {
if (isClickOutside.value) { if (isClickOutside.value) {
openState.value = false openState.value = false;
} }
}) });
provide('openState', openState) provide("openState", openState);
defineExpose({ open, hide, toggle }); defineExpose({ open, hide, toggle });
</script> </script>
@ -52,11 +52,11 @@ defineExpose({ open, hide, toggle });
:class="[openState ? 'layui-dropdown-up' : '']" :class="[openState ? 'layui-dropdown-up' : '']"
> >
<div @click="toggle"> <div @click="toggle">
<slot /> <slot></slot>
</div> </div>
<dl class="layui-anim layui-anim-upbit"> <dl class="layui-anim layui-anim-upbit">
<ul class="layui-menu layui-dropdown-menu"> <ul class="layui-menu layui-dropdown-menu">
<slot name="content" /> <slot name="content"></slot>
</ul> </ul>
</dl> </dl>
</div> </div>
@ -68,11 +68,11 @@ defineExpose({ open, hide, toggle });
@mouseleave="hide" @mouseleave="hide"
> >
<div> <div>
<slot /> <slot></slot>
</div> </div>
<dl class="layui-anim layui-anim-upbit"> <dl class="layui-anim layui-anim-upbit">
<ul class="layui-menu layui-dropdown-menu"> <ul class="layui-menu layui-dropdown-menu">
<slot name="content" /> <slot name="content"></slot>
</ul> </ul>
</dl> </dl>
</div> </div>

12
src/module/dropdownItem/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayDropdownItem', Component) app.component(Component.name || "LayDropdownItem", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

10
src/module/dropdownItem/index.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<li> <li>
<div class="layui-menu-body-title" @click="click"> <div class="layui-menu-body-title" @click="click">
<slot /> <slot></slot>
</div> </div>
</li> </li>
</template> </template>
<script setup name="LayDropdownItem" lang="ts"> <script setup name="LayDropdownItem" lang="ts">
import { inject, Ref } from 'vue' import { inject, Ref } from "vue";
const openState: Ref<boolean> = inject('openState') as Ref<boolean> const openState: Ref<boolean> = inject("openState") as Ref<boolean>;
const click = function () { const click = function () {
openState.value = false openState.value = false;
} };
</script> </script>

12
src/module/empty/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayEmpty', Component) app.component(Component.name || "LayEmpty", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

12
src/module/field/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayField', Component) app.component(Component.name || "LayField", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

19
src/module/field/index.vue
View File

@ -1,25 +1,24 @@
<template> <template>
<fieldset v-if="slot.default" class="layui-elem-field"> <fieldset v-if="slot.default" class="layui-elem-field">
<legend>{{ title }}</legend> <legend>{{ title }}</legend>
<div class="layui-field-box"> <div class="layui-field-box">
<slot /> <slot></slot>
</div> </div>
</fieldset> </fieldset>
<fieldset v-else class="layui-elem-field layui-field-title"> <fieldset v-else class="layui-elem-field layui-field-title">
<legend><a name="docend">{{title}}</a></legend> <legend>
<a name="docend">{{ title }}</a>
</legend>
</fieldset> </fieldset>
</template> </template>
<script setup name="LayField" lang="ts"> <script setup name="LayField" lang="ts">
import { defineProps, useSlots } from 'vue' import { defineProps, useSlots } from "vue";
const slot = useSlots() const slot = useSlots();
const props = const props = defineProps<{
defineProps<{ title?: string;
title?: string }>();
}>()
</script> </script>

12
src/module/footer/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayFooter', Component) app.component(Component.name || "LayFooter", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

8
src/module/footer/index.vue
View File

@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
export default { export default {
name: 'LayFooter', name: "LayFooter",
} };
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import "./index.less" import "./index.less";
</script> </script>
<template> <template>
<div class="layui-footer"> <div class="layui-footer">
<slot /> <slot></slot>
</div> </div>
</template> </template>

12
src/module/form/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayForm', Component) app.component(Component.name || "LayForm", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

132
src/module/form/index.vue
View File

@ -1,89 +1,104 @@
<template> <template>
<form class="layui-form" :onsubmit="submit"> <form class="layui-form" :onsubmit="submit">
<slot /> <slot></slot>
</form> </form>
</template> </template>
<script lang="ts"> <script lang="ts">
export default{ export default {
name: 'LayForm' name: "LayForm",
} };
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { toRefs, provide,reactive, onMounted } from "vue" import { toRefs, provide, reactive, onMounted } from "vue";
import { Rule, ValidateError, ValidateMessages } from "async-validator" import { Rule, ValidateError, ValidateMessages } from "async-validator";
import {layFormKey, LayFormItemContext, FormCallback, modelType} from "../type/form" import {
layFormKey,
LayFormItemContext,
FormCallback,
modelType,
} from "../type/form";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
model?: modelType model?: modelType;
required?: boolean, required?: boolean;
rules?: Rule, rules?: Rule;
initValidate?: boolean, initValidate?: boolean;
requiredIcons?: string, requiredIcons?: string;
requiredErrorMessage?: string, requiredErrorMessage?: string;
validateMessage?: ValidateMessages, validateMessage?: ValidateMessages;
useCN?: boolean useCN?: boolean;
}>(), }>(),
{ {
model: function(){ model: function () {
return {} return {};
}, },
useCN : true, useCN: true,
requiredIcons : '', requiredIcons: "",
initValidate : false initValidate: false,
} }
) );
const formItems : LayFormItemContext[] = []; const formItems: LayFormItemContext[] = [];
const formItemMap : {[key:string]:LayFormItemContext} = {}; const formItemMap: { [key: string]: LayFormItemContext } = {};
const emit = defineEmits(['submit']) const emit = defineEmits(["submit"]);
// 初始化表单就进行校验 // 初始化表单就进行校验
onMounted(()=>{ onMounted(() => {
props.initValidate && validate()?.catch(err => {}); props.initValidate && validate()?.catch((err) => {});
}) });
// 原生提交表单事件 // 原生提交表单事件
const submit = function () { const submit = function () {
let _isValidate = false; let _isValidate = false;
validate((isValidate, model, errors) => { validate((isValidate, model, errors) => {
_isValidate = isValidate as boolean; _isValidate = isValidate as boolean;
emit('submit', isValidate, model, errors); emit("submit", isValidate, model, errors);
}); });
// 如果表单失败则阻止提交表单，成功则进行提交表单 // 如果表单失败则阻止提交表单，成功则进行提交表单
return _isValidate; return _isValidate;
} };
/** /**
* 校验表单数据 * 校验表单数据
* @param fields 需要校验的表单字段(string|string[]); 该字段如果为function, 则默认为回调函数，校验全部字段; * @param fields 需要校验的表单字段(string|string[]); 该字段如果为function, 则默认为回调函数，校验全部字段;
* @param callback 校验表单之后的回调函数 * @param callback 校验表单之后的回调函数
**/ **/
const validate = function(fields?: string|string[]|FormCallback|null, callback?: FormCallback | null){ const validate = function (
fields?: string | string[] | FormCallback | null,
callback?: FormCallback | null
) {
// 根据参数识别需要校验的表单项 // 根据参数识别需要校验的表单项
let validateItems : LayFormItemContext[] = formItems; let validateItems: LayFormItemContext[] = formItems;
if (typeof fields === 'function') { if (typeof fields === "function") {
callback = fields; callback = fields;
} else if (typeof fields === 'string' || (Array.isArray(fields) && fields.length > 0)) { } else if (
typeof fields === "string" ||
(Array.isArray(fields) && fields.length > 0)
) {
validateItems = []; validateItems = [];
const validateFields = !fields ? [] : ([] as string[]).concat(fields); const validateFields = !fields ? [] : ([] as string[]).concat(fields);
validateFields.forEach(field => formItemMap[field] && validateItems.push(formItemMap[field])); validateFields.forEach(
(field) => formItemMap[field] && validateItems.push(formItemMap[field])
);
} }
// 通过调用每个子项进行校验 // 通过调用每个子项进行校验
let errorsArrs: ValidateError[] = []; let errorsArrs: ValidateError[] = [];
validateItems.forEach(filed => { validateItems.forEach((filed) => {
filed.validate((errors, _fields)=>{ filed.validate((errors, _fields) => {
errorsArrs = errorsArrs.concat(errors as ValidateError[]); errorsArrs = errorsArrs.concat(errors as ValidateError[]);
}); });
}); });
const isValidate = errorsArrs.length === 0; const isValidate = errorsArrs.length === 0;
// 有回调则进行回调 // 有回调则进行回调
if (typeof callback === 'function') { if (typeof callback === "function") {
isValidate ? callback(true, props.model, null) : callback(false, props.model, errorsArrs); isValidate
? callback(true, props.model, null)
: callback(false, props.model, errorsArrs);
return null; return null;
} }
@ -91,50 +106,57 @@ const validate = function(fields?: string|string[]|FormCallback|null, callback?:
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const callbackParams = { const callbackParams = {
isValidate, isValidate,
model : props.model, model: props.model,
errors: isValidate ? null : errorsArrs errors: isValidate ? null : errorsArrs,
}; };
callbackParams.isValidate ? resolve(callbackParams) : reject(callbackParams); callbackParams.isValidate
? resolve(callbackParams)
: reject(callbackParams);
}); });
} };
/** /**
* 清除校验 * 清除校验
* @param fields 需要进行清除校验的表单字段(string|string[]); 该字段如果为null, 则默认为全部字段清除校验; * @param fields 需要进行清除校验的表单字段(string|string[]); 该字段如果为null, 则默认为全部字段清除校验;
**/ **/
const clearValidate = function(fields?: string | string[]){ const clearValidate = function (fields?: string | string[]) {
const clearFields = !fields ? [] : ([] as string[]).concat(fields); const clearFields = !fields ? [] : ([] as string[]).concat(fields);
if (clearFields.length === 0) { if (clearFields.length === 0) {
formItems.forEach(filed => filed.clearValidate()); formItems.forEach((filed) => filed.clearValidate());
} else { } else {
clearFields.forEach(field => formItemMap[field] && formItemMap[field].clearValidate()); clearFields.forEach(
(field) => formItemMap[field] && formItemMap[field].clearValidate()
);
} }
} };
/** /**
* 重置表单所有值 * 重置表单所有值
**/ **/
const reset = function(){ const reset = function () {
for (const key in props.model) { for (const key in props.model) {
props.model[key] = null; props.model[key] = null;
} }
// 重新校验 // 重新校验
setTimeout(()=>validate()?.catch(err => {}), 0); setTimeout(() => validate()?.catch((err) => {}), 0);
} };
// 添加子项 // 添加子项
const addField = function(item : LayFormItemContext) { const addField = function (item: LayFormItemContext) {
formItems.push(item); formItems.push(item);
formItemMap[item.prop as string] = item; formItemMap[item.prop as string] = item;
} };
defineExpose({validate, clearValidate, reset}); defineExpose({ validate, clearValidate, reset });
provide(layFormKey, reactive({ provide(
layFormKey,
reactive({
formItems, formItems,
addField, addField,
clearValidate, clearValidate,
validate, validate,
...toRefs(props) ...toRefs(props),
})); })
);
</script> </script>

38
src/module/formItem/cnValidateMessage.ts
View File

@ -8,42 +8,42 @@ export default {
date: { date: {
format: "%s日期%s不是一个有效格式的日期%s", format: "%s日期%s不是一个有效格式的日期%s",
parse: "%s无法解析为日期,%s是无效的", parse: "%s无法解析为日期,%s是无效的",
invalid: "%s日期%s是无效的" invalid: "%s日期%s是无效的",
}, },
types: { types: {
number: '%s不是一个有效的数字', number: "%s不是一个有效的数字",
boolean: '%s不是一个有效的布尔类型', boolean: "%s不是一个有效的布尔类型",
method: '%s不是一个有效的方法', method: "%s不是一个有效的方法",
regexp: '%s不是一个有效的正则表达式', regexp: "%s不是一个有效的正则表达式",
integer: '%s不是一个有效的整型数字', integer: "%s不是一个有效的整型数字",
float: '%s不是一个有效的浮点小数', float: "%s不是一个有效的浮点小数",
array: '%s不是一个有效的数组', array: "%s不是一个有效的数组",
object: '%s不是一个有效的对象', object: "%s不是一个有效的对象",
enum: '%s不是一个有效的枚举', enum: "%s不是一个有效的枚举",
date: '%s不是一个有效的日期', date: "%s不是一个有效的日期",
url: '%s不是一个有效的url', url: "%s不是一个有效的url",
hex: '%s不是一个有效的十六进制', hex: "%s不是一个有效的十六进制",
email: '%s不是一个有效的邮箱' email: "%s不是一个有效的邮箱",
}, },
string: { string: {
len: "%s必须是长度为%s个字符", len: "%s必须是长度为%s个字符",
min: "%s最小长度为%s个字符", min: "%s最小长度为%s个字符",
max: "%s最长%s个字符", max: "%s最长%s个字符",
range: "%s字符长度需要在%s和%s直接" range: "%s字符长度需要在%s和%s直接",
}, },
number: { number: {
len: "%s长度必须为%s", len: "%s长度必须为%s",
min: "%s必须小于%s", min: "%s必须小于%s",
max: "%s必须大于%s", max: "%s必须大于%s",
range: "%s需要在%s和%s之间" range: "%s需要在%s和%s之间",
}, },
array: { array: {
len: "%s长度必须为%s", len: "%s长度必须为%s",
min: "%s长度必须小于%s", min: "%s长度必须小于%s",
max: "%s长度必须大于%s", max: "%s长度必须大于%s",
range: "%s长度需要在%s和%s之间" range: "%s长度需要在%s和%s之间",
}, },
pattern: { pattern: {
"mismatch": "%s值%s不能匹配%s" mismatch: "%s值%s不能匹配%s",
} },
} as ValidateMessages; } as ValidateMessages;

13
src/module/formItem/index.less
View File

@ -1,16 +1,16 @@
@error_color : red; @error_color: red;
.layui-required{ .layui-required {
color: @error_color; color: @error_color;
font-size: 12px; font-size: 12px;
line-height: 1; line-height: 1;
} }
.layui-form .layui-form-item{ .layui-form .layui-form-item {
.layui-input-block .layui-input-block,
,.layui-input-inline{ .layui-input-inline {
.layui-form-danger { .layui-form-danger {
&, .layui-input{ &, .layui-input {
border-color: #ff5722 !important; border-color: #ff5722 !important;
} }
} }
@ -35,7 +35,6 @@
animation: layui-top-show-anim 0.3s ease 1; animation: layui-top-show-anim 0.3s ease 1;
} }
@keyframes layui-top-show-anim { @keyframes layui-top-show-anim {
0% { 0% {
opacity: 0.3; opacity: 0.3;

12
src/module/formItem/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayFormItem', Component) app.component(Component.name || "LayFormItem", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

160
src/module/formItem/index.vue
View File

@ -1,98 +1,148 @@
<template> <template>
<div class="layui-form-item" ref="formItemRef"> <div class="layui-form-item" ref="formItemRef">
<label class="layui-form-label"> <label class="layui-form-label">
<span v-if="props.prop &&isRequired" :class="['layui-required', 'layui-icon'].concat(layForm.requiredIcons??'')"> <span
<slot name="required" :props="{...props, model: layForm.model}">{{layForm.requiredIcons? '' : '*'}}</slot> v-if="props.prop && isRequired"
:class="
['layui-required', 'layui-icon'].concat(layForm.requiredIcons ?? '')
"
>
<slot name="required" :props="{ ...props, model: layForm.model }">{{
layForm.requiredIcons ? "" : "*"
}}</slot>
</span> </span>
<slot name="label" :props="{...props, model: layForm.model}"> <slot name="label" :props="{ ...props, model: layForm.model }">
{{ label }} {{ label }}
</slot> </slot>
</label> </label>
<div :class="[mode ? 'layui-input-' + mode : '']"> <div :class="[mode ? 'layui-input-' + mode : '']">
<div ref="slotParent"> <div ref="slotParent">
<slot :props="{...props, model: layForm.model}"/> <slot :props="{ ...props, model: layForm.model }"></slot>
</div> </div>
<span v-if="errorStatus" :class="['layui-error-message', {'layui-error-message-anim': errorStatus}]">{{errorMsg}}</span> <span
v-if="errorStatus"
:class="[
'layui-error-message',
{ 'layui-error-message-anim': errorStatus },
]"
>{{ errorMsg }}</span
>
</div> </div>
</div> </div>
</template> </template>
<script setup name="LayFormItem" lang="ts"> <script setup name="LayFormItem" lang="ts">
import "./index.less"; import "./index.less";
import { defineProps, inject, withDefaults, ref, reactive, toRefs, onMounted, computed, watch} from 'vue' import {
import {layFormKey, LayFormContext, LayFormItemContext, FieldValidateError} from "../type/form" defineProps,
import Schema, { Rule, RuleItem, Rules, ValidateCallback, ValidateError, ValidateMessages} from 'async-validator'; inject,
import cnValidateMessage from './cnValidateMessage'; withDefaults,
ref,
reactive,
toRefs,
onMounted,
computed,
watch,
} from "vue";
import {
layFormKey,
LayFormContext,
LayFormItemContext,
FieldValidateError,
} from "../type/form";
import Schema, {
Rule,
RuleItem,
Rules,
ValidateCallback,
ValidateError,
ValidateMessages,
} from "async-validator";
import cnValidateMessage from "./cnValidateMessage";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
prop?: string prop?: string;
mode?: string mode?: string;
label?: string label?: string;
errorMessage?: string errorMessage?: string;
rules?: Rule rules?: Rule;
required?: boolean required?: boolean;
}>(), }>(),
{ {
mode: 'block' mode: "block",
} }
) );
const layForm = inject(layFormKey, {} as LayFormContext) const layForm = inject(layFormKey, {} as LayFormContext);
const formItemRef = ref<HTMLDivElement>() const formItemRef = ref<HTMLDivElement>();
const slotParent = ref<HTMLDivElement>() const slotParent = ref<HTMLDivElement>();
// 是否必填 // 是否必填
const isRequired = computed(()=>{ const isRequired = computed(() => {
return props.required || layForm.required; return props.required || layForm.required;
}) });
// 拼接校验规则 // 拼接校验规则
const ruleItems = computed(()=>{ const ruleItems = computed(() => {
const prop = props.prop; const prop = props.prop;
if (!prop) { if (!prop) {
return {}; return {};
} }
let rulesArrs : RuleItem[] = []; let rulesArrs: RuleItem[] = [];
if (isRequired.value) { if (isRequired.value) {
rulesArrs.push({required: true}); rulesArrs.push({ required: true });
} }
if (props.rules) { if (props.rules) {
rulesArrs = rulesArrs.concat((props.rules as RuleItem | RuleItem[])); rulesArrs = rulesArrs.concat(props.rules as RuleItem | RuleItem[]);
} }
if (layForm.rules && layForm.rules[prop]) { if (layForm.rules && layForm.rules[prop]) {
rulesArrs = rulesArrs.concat((layForm.rules[prop] as RuleItem | RuleItem[])); rulesArrs = rulesArrs.concat(layForm.rules[prop] as RuleItem | RuleItem[]);
} }
return rulesArrs; return rulesArrs;
}); });
// 值 计算 和 监听 // 值 计算 和 监听
const filedValue = computed(()=> props.prop ? layForm.model[props.prop] : undefined); const filedValue = computed(() =>
watch(()=>filedValue.value, (val)=> validate(), {deep: true}); props.prop ? layForm.model[props.prop] : undefined
);
watch(
() => filedValue.value,
(val) => validate(),
{ deep: true }
);
// 错误状态和信息 // 错误状态和信息
const errorStatus = ref(false); const errorStatus = ref(false);
const errorMsg = ref(); const errorMsg = ref();
// 校验数据有效性 // 校验数据有效性
const validate = (callback ?: ValidateCallback)=> { const validate = (callback?: ValidateCallback) => {
if (props.prop && (ruleItems.value as RuleItem[]).length > 0) { if (props.prop && (ruleItems.value as RuleItem[]).length > 0) {
// 校验规则 // 校验规则
const descriptor : Rules = {}; const descriptor: Rules = {};
descriptor[layForm.useCN? (props.label||props.prop ): props.prop] = ruleItems.value; descriptor[layForm.useCN ? props.label || props.prop : props.prop] =
ruleItems.value;
const validator = new Schema(descriptor); const validator = new Schema(descriptor);
let model : {[key : string]:any} = {}; let model: { [key: string]: any } = {};
let validateMessage = null; let validateMessage = null;
// 使用中文错误提示 // 使用中文错误提示
if (layForm.useCN) { if (layForm.useCN) {
validateMessage = Object.assign({}, cnValidateMessage, layForm.validateMessage); validateMessage = Object.assign(
model[props.label||props.prop] = filedValue.value; {},
cnValidateMessage,
layForm.validateMessage
);
model[props.label || props.prop] = filedValue.value;
} else { } else {
layForm.validateMessage && (validateMessage = layForm.validateMessage); layForm.validateMessage && (validateMessage = layForm.validateMessage);
model[props.prop] = filedValue.value; model[props.prop] = filedValue.value;
} }
// 自定义校验消息 // 自定义校验消息
layForm.requiredErrorMessage && (validateMessage = Object.assign(validateMessage, {required : layForm.requiredErrorMessage})); layForm.requiredErrorMessage &&
(validateMessage = Object.assign(validateMessage, {
required: layForm.requiredErrorMessage,
}));
validateMessage && validator.messages(validateMessage); validateMessage && validator.messages(validateMessage);
// 开始校验 // 开始校验
@ -100,41 +150,45 @@ const validate = (callback ?: ValidateCallback)=> {
errorStatus.value = errors !== null && errors.length > 0; errorStatus.value = errors !== null && errors.length > 0;
const slotParentDiv = slotParent.value as HTMLDivElement; const slotParentDiv = slotParent.value as HTMLDivElement;
if (errorStatus.value) { if (errorStatus.value) {
const _errors = (errors as FieldValidateError[]); const _errors = errors as FieldValidateError[];
// 如果是中文,将错误信息转换成FieldValidateError类型 // 如果是中文,将错误信息转换成FieldValidateError类型
layForm.useCN && _errors.forEach(error => { layForm.useCN &&
_errors.forEach((error) => {
error.label = props.label; error.label = props.label;
error.field = props.prop; error.field = props.prop;
}) });
errorMsg.value = props.errorMessage??_errors[0].message; errorMsg.value = props.errorMessage ?? _errors[0].message;
slotParentDiv.childElementCount > 0 && slotParentDiv.firstElementChild?.classList.add('layui-form-danger'); slotParentDiv.childElementCount > 0 &&
slotParentDiv.firstElementChild?.classList.add("layui-form-danger");
callback && callback(_errors, fields); callback && callback(_errors, fields);
} else { } else {
clearValidate(); clearValidate();
} }
}); });
} }
} };
// 清除校验 // 清除校验
const clearValidate = ()=> { const clearValidate = () => {
errorStatus.value = false; errorStatus.value = false;
errorMsg.value = ''; errorMsg.value = "";
const slotParentDiv = slotParent.value as HTMLDivElement; const slotParentDiv = slotParent.value as HTMLDivElement;
slotParentDiv.childElementCount > 0 && slotParentDiv.firstElementChild?.classList.remove('layui-form-danger'); slotParentDiv.childElementCount > 0 &&
} slotParentDiv.firstElementChild?.classList.remove("layui-form-danger");
};
defineExpose({validate, clearValidate}); defineExpose({ validate, clearValidate });
onMounted(()=>{ onMounted(() => {
if (props.prop) { if (props.prop) {
layForm.addField(reactive({ layForm.addField(
reactive({
...toRefs(props), ...toRefs(props),
$el: formItemRef, $el: formItemRef,
validate, validate,
clearValidate clearValidate,
}) as LayFormItemContext); }) as LayFormItemContext
);
} }
}) });
</script> </script>

12
src/module/header/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayHeader', Component) app.component(Component.name || "LayHeader", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

2
src/module/header/index.vue
View File

@ -10,6 +10,6 @@ import "./index.less";
<template> <template>
<div class="layui-header"> <div class="layui-header">
<slot /> <slot></slot>
</div> </div>
</template> </template>

12
src/module/icon/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import { LayIcon as Component } from '@layui/icons-vue' import { LayIcon as Component } from "@layui/icons-vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayIcon', Component) app.component(Component.name || "LayIcon", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

12
src/module/iconPicker/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayIconPicker', Component) app.component(Component.name || "LayIconPicker", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

147
src/module/iconPicker/index.vue
View File

@ -1,23 +1,21 @@
<template> <template>
<lay-dropdown ref="dropdownRef"> <lay-dropdown ref="dropdownRef">
<div <div
class=" class="layui-inline layui-border-box layui-iconpicker layui-iconpicker-split"
layui-inline layui-border-box layui-iconpicker layui-iconpicker-split
"
> >
<div class="layui-inline layui-iconpicker-main"> <div class="layui-inline layui-iconpicker-main">
<i class="layui-inline layui-icon" :class="[selectedIcon]" /> <i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
</div> </div>
<span class="layui-inline layui-iconpicker-suffix" <span class="layui-inline layui-iconpicker-suffix"
><i class="layui-icon layui-icon-down layui-anim" ><i class="layui-icon layui-icon-down layui-anim"></i
/></span> ></span>
</div> </div>
<template #content> <template #content>
<div class="layui-iconpicker-view layui-iconpicker-scroll"> <div class="layui-iconpicker-view layui-iconpicker-scroll">
<div v-if="showSearch" class="layui-iconpicker-search"> <div v-if="showSearch" class="layui-iconpicker-search">
<div class="layui-form layui-input-wrap layui-input-wrap-prefix"> <div class="layui-form layui-input-wrap layui-input-wrap-prefix">
<div class="layui-input-prefix"> <div class="layui-input-prefix">
<i class="layui-icon layui-icon-search" /> <i class="layui-icon layui-icon-search"></i>
</div> </div>
<input <input
type="text" type="text"
@ -29,7 +27,7 @@
@input="search" @input="search"
/> />
<div class="layui-input-suffix layui-input-affix-event layui-hide"> <div class="layui-input-suffix layui-input-affix-event layui-hide">
<i class="layui-icon layui-icon-clear" /> <i class="layui-icon layui-icon-clear"></i>
</div> </div>
</div> </div>
</div> </div>
@ -41,7 +39,7 @@
:class="[selectedIcon === icon.class ? 'layui-this' : '']" :class="[selectedIcon === icon.class ? 'layui-this' : '']"
@click="selectIcon(icon.class)" @click="selectIcon(icon.class)"
> >
<i class="layui-icon" :class="[icon.class]" /> <i class="layui-icon" :class="[icon.class]"></i>
<p class="layui-elip"> <p class="layui-elip">
{{ icon.name }} {{ icon.name }}
</p> </p>
@ -59,11 +57,10 @@
class="layui-laypage-prev" class="layui-laypage-prev"
:class="[currentPage === 1 ? 'layui-disabled' : '']" :class="[currentPage === 1 ? 'layui-disabled' : '']"
@click="prev()" @click="prev()"
><i class="layui-icon layui-icon-left" /></a ><i class="layui-icon layui-icon-left"></i></a
><span class="layui-laypage-curr" ><span class="layui-laypage-curr"
><em class="layui-laypage-em" /><em ><em class="layui-laypage-em"></em
>{{ currentPage }} / {{ totalPage }}</em ><em>{{ currentPage }} / {{ totalPage }}</em></span
></span
><span class="layui-laypage-spr">…</span ><span class="layui-laypage-spr">…</span
><a href="javascript:;" class="layui-laypage-last" title="尾页" ><a href="javascript:;" class="layui-laypage-last" title="尾页"
>14</a >14</a
@ -72,8 +69,8 @@
:class="[currentPage === totalPage ? 'layui-disabled' : '']" :class="[currentPage === totalPage ? 'layui-disabled' : '']"
class="layui-laypage-next" class="layui-laypage-next"
@click="next()" @click="next()"
><i class="layui-icon layui-icon-right" ><i class="layui-icon layui-icon-right"></i
/></a> ></a>
</div> </div>
</div> </div>
</div> </div>
@ -82,118 +79,118 @@
</template> </template>
<script setup name="LayIconPicker" lang="ts"> <script setup name="LayIconPicker" lang="ts">
import { defineProps, Ref, ref } from 'vue' import { defineProps, Ref, ref } from "vue";
import { LayIconList as icons } from "@layui/icons-vue" import { LayIconList as icons } from "@layui/icons-vue";
export interface LayIconPickerProps { export interface LayIconPickerProps {
page?: boolean, page?: boolean;
modelValue?: string, modelValue?: string;
showSearch?: boolean showSearch?: boolean;
} }
const props = withDefaults(defineProps<LayIconPickerProps>(),{ const props = withDefaults(defineProps<LayIconPickerProps>(), {
modelValue: 'layui-icon-face-smile', modelValue: "layui-icon-face-smile",
page: false, page: false,
}) });
const dropdownRef = ref<null | HTMLElement>(null); const dropdownRef = ref<null | HTMLElement>(null);
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(["update:modelValue"]);
const selectedIcon: Ref<string> = ref(props.modelValue as string) const selectedIcon: Ref<string> = ref(props.modelValue as string);
const selectIcon = function (icon: string) { const selectIcon = function (icon: string) {
emit('update:modelValue', icon) emit("update:modelValue", icon);
selectedIcon.value = icon selectedIcon.value = icon;
// @ts-ignore // @ts-ignore
dropdownRef.value.hide() dropdownRef.value.hide();
} };
const icones: Ref = ref([]) const icones: Ref = ref([]);
const total = ref(icons.length) const total = ref(icons.length);
const totalPage = ref(total.value / 12) const totalPage = ref(total.value / 12);
const currentPage: Ref = ref(1) const currentPage: Ref = ref(1);
if (props.page) { if (props.page) {
icones.value = icons.slice(0, 12) icones.value = icons.slice(0, 12);
} else { } else {
icones.value = icons icones.value = icons;
} }
const next = function () { const next = function () {
if (currentPage.value === totalPage.value) { if (currentPage.value === totalPage.value) {
return return;
} }
currentPage.value = currentPage.value + 1 currentPage.value = currentPage.value + 1;
const start = (currentPage.value - 1) * 12 const start = (currentPage.value - 1) * 12;
const end = start + 12 const end = start + 12;
icones.value = icons.slice(start, end) icones.value = icons.slice(start, end);
} };
const prev = function () { const prev = function () {
if (currentPage.value === 1) { if (currentPage.value === 1) {
return return;
} }
currentPage.value = currentPage.value - 1 currentPage.value = currentPage.value - 1;
const start = (currentPage.value - 1) * 12 const start = (currentPage.value - 1) * 12;
const end = start + 12 const end = start + 12;
icones.value = icons.slice(start, end) icones.value = icons.slice(start, end);
} };
const search = function (e: any) { const search = function (e: any) {
var text = e.target.value var text = e.target.value;
currentPage.value = 1 currentPage.value = 1;
const start = (currentPage.value - 1) * 12 const start = (currentPage.value - 1) * 12;
const end = start + 12 const end = start + 12;
if (text === '') { if (text === "") {
if (props.page) { if (props.page) {
icones.value = icons.slice(start, end) icones.value = icons.slice(start, end);
total.value = icons.length total.value = icons.length;
totalPage.value = Math.ceil(icons.length / 12) totalPage.value = Math.ceil(icons.length / 12);
} else { } else {
icones.value = icons icones.value = icons;
} }
} else { } else {
if (props.page) { if (props.page) {
icones.value = searchList(text, icons).slice(start, end) icones.value = searchList(text, icons).slice(start, end);
total.value = searchList(text, icons).length total.value = searchList(text, icons).length;
totalPage.value = Math.ceil(searchList(text, icons).length / 12) totalPage.value = Math.ceil(searchList(text, icons).length / 12);
} else { } else {
icones.value = searchList(text, icons) icones.value = searchList(text, icons);
} }
} }
} };
const searchList = function (str: string, container: any) { const searchList = function (str: string, container: any) {
var newList = [] var newList = [];
var startChar = str.charAt(0) var startChar = str.charAt(0);
var strLen = str.length var strLen = str.length;
for (var i = 0; i < container.length; i++) { for (var i = 0; i < container.length; i++) {
var obj = container[i] var obj = container[i];
var isMatch = false var isMatch = false;
for (var p in obj) { for (var p in obj) {
if (typeof obj[p] == 'function') { if (typeof obj[p] == "function") {
obj[p]() obj[p]();
} else { } else {
var curItem = '' var curItem = "";
if (obj[p] != null) { if (obj[p] != null) {
curItem = obj[p] curItem = obj[p];
} }
for (var j = 0; j < curItem.length; j++) { for (var j = 0; j < curItem.length; j++) {
if (curItem.charAt(j) == startChar) { if (curItem.charAt(j) == startChar) {
if (curItem.substring(j).substring(0, strLen) == str) { if (curItem.substring(j).substring(0, strLen) == str) {
isMatch = true isMatch = true;
break break;
} }
} }
} }
} }
} }
if (isMatch) { if (isMatch) {
newList.push(obj) newList.push(obj);
} }
} }
return newList return newList;
} };
</script> </script>

12
src/module/input/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayInput', Component) app.component(Component.name || "LayInput", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

1
src/module/input/index.vue
View File

@ -41,5 +41,4 @@ const onFocus = function (event: FocusEvent) {
const onBlur = function () { const onBlur = function () {
emit("blur"); emit("blur");
}; };
</script> </script>

45
src/module/inputNumber/index.less
View File

@ -13,11 +13,11 @@
@xs-wdith: 120px; @xs-wdith: 120px;
@xs-right: 12px; @xs-right: 12px;
.set-size(@width, @size, @right-size){ .set-size(@width, @size, @right-size) {
&{ & {
height: @size; height: @size;
width: @width; width: @width;
.layui-input{ .layui-input {
height: @size; height: @size;
line-height: @size; line-height: @size;
padding: 0 @size; padding: 0 @size;
@ -27,22 +27,22 @@
height: @size; height: @size;
line-height: @size; line-height: @size;
} }
&[position=right]{ &[position="right"] {
.layui-input{ .layui-input {
padding: 0 @size 0 0; padding: 0 @size 0 0;
} }
.layui-control-btn { .layui-control-btn {
height: @right-size; height: @right-size;
line-height: @right-size; line-height: @right-size;
} }
.layui-subtraction-btn{ .layui-subtraction-btn {
top: @right-size - 1; top: @right-size - 1;
} }
} }
} }
} }
.layui-input-number{ .layui-input-number {
position: relative; position: relative;
display: inline-block; display: inline-block;
box-sizing: border-box; box-sizing: border-box;
@ -52,7 +52,7 @@
overflow: hidden; overflow: hidden;
.set-size(@lg-wdith, @lg, @lg-right); .set-size(@lg-wdith, @lg, @lg-right);
margin-left: 5px; margin-left: 5px;
.layui-input{ .layui-input {
text-align: center; text-align: center;
border: 0; border: 0;
} }
@ -66,17 +66,17 @@
padding: 0; padding: 0;
text-align: center; text-align: center;
top: 0; top: 0;
&:hover{ &:hover {
color: @hover-border-color; color: @hover-border-color;
} }
&.layui-subtraction-btn{ &.layui-subtraction-btn {
border-right-width: 1px; border-right-width: 1px;
} }
&.layui-addition-btn{ &.layui-addition-btn {
border-left-width: 1px; border-left-width: 1px;
right: 0; right: 0;
} }
.layui-icon{ .layui-icon {
padding: 0px; padding: 0px;
} }
} }
@ -87,31 +87,30 @@
} }
/* 火狐--去掉自带的控制按钮 */ /* 火狐--去掉自带的控制按钮 */
input.layui-input[type="number"]{ input.layui-input[type="number"] {
-moz-appearance: textfield; -moz-appearance: textfield;
} }
&[position=right]{ &[position="right"] {
.layui-subtraction-btn{ .layui-subtraction-btn {
right: 0; right: 0;
border-right-width: 0px; border-right-width: 0px;
border-left-width: 1px; border-left-width: 1px;
} }
.layui-addition-btn{ .layui-addition-btn {
border-bottom-width: 1px; border-bottom-width: 1px;
} }
} }
&[size=md] { &[size="md"] {
.set-size(@md-wdith,@md, @md-right) .set-size(@md-wdith,@md, @md-right);
} }
&[size=sm] { &[size="sm"] {
.set-size(@sm-wdith, @sm, @sm-right) .set-size(@sm-wdith, @sm, @sm-right);
} }
&[size=xs] { &[size="xs"] {
.set-size(@xs-wdith, @xs, @xs-right) .set-size(@xs-wdith, @xs, @xs-right);
} }
} }

12
src/module/inputNumber/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayInputNumber', Component) app.component(Component.name || "LayInputNumber", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

23
src/module/inputNumber/index.vue
View File

@ -9,7 +9,11 @@
:disabled="minControl" :disabled="minControl"
class="layui-control-btn layui-subtraction-btn" class="layui-control-btn layui-subtraction-btn"
> >
<lay-icon :type="position==='right' ? 'layui-icon-down' : 'layui-icon-subtraction'"></lay-icon> <lay-icon
:type="
position === 'right' ? 'layui-icon-down' : 'layui-icon-subtraction'
"
/>
</lay-button> </lay-button>
<div class="layui-input-number-input"> <div class="layui-input-number-input">
<lay-input <lay-input
@ -18,7 +22,7 @@
type="number" type="number"
:name="name" :name="name"
@change="inputChange" @change="inputChange"
></lay-input> />
</div> </div>
<lay-button <lay-button
type="primary" type="primary"
@ -29,15 +33,17 @@
:disabled="maxControl" :disabled="maxControl"
class="layui-control-btn layui-addition-btn" class="layui-control-btn layui-addition-btn"
> >
<lay-icon :type="position==='right' ? 'layui-icon-up' : 'layui-icon-addition'"></lay-icon> <lay-icon
:type="position === 'right' ? 'layui-icon-up' : 'layui-icon-addition'"
/>
</lay-button> </lay-button>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
name: "LayInputNumber", name: "LayInputNumber",
}; };
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
@ -94,11 +100,14 @@ watch(num, (val) => {
} }
}); });
watch(()=>props.modelValue, (val) => { watch(
() => props.modelValue,
(val) => {
if (val !== num.value) { if (val !== num.value) {
num.value = props.modelValue; num.value = props.modelValue;
} }
}); }
);
const tempValue = ref(0); const tempValue = ref(0);
let timer: any = 0; let timer: any = 0;

12
src/module/layer/modal/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import { LayModal } from '@layui/layer-vue'; import { LayModal } from "@layui/layer-vue";
import type { IDefineComponent } from '../../type/index' import type { IDefineComponent } from "../../type/index";
LayModal.install = (app: App) => { LayModal.install = (app: App) => {
app.component(LayModal.name || 'LayModal', LayModal) app.component(LayModal.name || "LayModal", LayModal);
} };
export default LayModal as IDefineComponent export default LayModal as IDefineComponent;

12
src/module/layout/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayLayout', Component) app.component(Component.name || "LayLayout", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

2
src/module/layout/index.vue
View File

@ -36,6 +36,6 @@ const classes = computed(() => {
<template> <template>
<section :class="classes"> <section :class="classes">
<slot /> <slot></slot>
</section> </section>
</template> </template>

12
src/module/line/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayLine', Component) app.component(Component.name || "LayLine", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

6
src/module/line/index.vue
View File

@ -3,9 +3,9 @@
</template> </template>
<script setup name="LayLine" lang="ts"> <script setup name="LayLine" lang="ts">
import { defineProps } from 'vue' import { defineProps } from "vue";
const props = defineProps<{ const props = defineProps<{
theme?: string theme?: string;
}>() }>();
</script> </script>

12
src/module/logo/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayLogo', Component) app.component(Component.name || "LayLogo", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

2
src/module/logo/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="layui-logo"> <div class="layui-logo">
<slot /> <slot></slot>
</div> </div>
</template> </template>

12
src/module/menu/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayMenu', Component) app.component(Component.name || "LayMenu", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

2
src/module/menu/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<ul class="layui-nav" :class="[tree ? 'layui-nav-tree' : '']"> <ul class="layui-nav" :class="[tree ? 'layui-nav-tree' : '']">
<slot /> <slot></slot>
</ul> </ul>
</template> </template>

12
src/module/menuChildItem/index.ts
View File

@ -1,9 +1,9 @@
import type { App } from 'vue' import type { App } from "vue";
import Component from './index.vue' import Component from "./index.vue";
import type { IDefineComponent } from '../type/index' import type { IDefineComponent } from "../type/index";
Component.install = (app: App) => { Component.install = (app: App) => {
app.component(Component.name || 'LayMenuChildItem', Component) app.component(Component.name || "LayMenuChildItem", Component);
} };
export default Component as IDefineComponent export default Component as IDefineComponent;

21
src/module/menuChildItem/index.vue
View File

@ -2,25 +2,24 @@
<dd :class="[selectedKey === id ? 'layui-this' : '']" @click="selectHandle()"> <dd :class="[selectedKey === id ? 'layui-this' : '']" @click="selectHandle()">
<slot v-if="slots.title" name="title"></slot> <slot v-if="slots.title" name="title"></slot>
<a v-else href="javascript:void(0)"> <a v-else href="javascript:void(0)">
{{title}} {{ title }}
</a> </a>
</dd> </dd>
</template> </template>
<script setup name="LayMenuChildItem" lang="ts"> <script setup name="LayMenuChildItem" lang="ts">
import { defineProps, inject, Ref, useSlots } from 'vue' import { defineProps, inject, Ref, useSlots } from "vue";
const slots = useSlots() const slots = useSlots();
const props = const props = defineProps<{
defineProps<{ id: string;
id: string title: string;
title: string }>();
}>()
const selectedKey: Ref<string> = inject('selectedKey') as Ref<string> const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
const selectHandle = function () { const selectHandle = function () {
selectedKey.value = props.id selectedKey.value = props.id;
} };
</script> </script>

Some files were not shown because too many files have changed in this diff Show More