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

Merge branch 'develop' of gitee.com:layui-vue/layui-vue into develop

Browse Source
This commit is contained in:
halo 2022-01-14 16:30:38 +08:00
commit adaf72fc21
81 changed files with 1962 additions and 929 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
example/docs/zh-CN/components/animation.md
View File

@ -98,3 +98,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext animation
:::

42
example/docs/zh-CN/components/avatar.md
View File

@ -38,9 +38,7 @@ export default {
<script> <script>
import { ref } from 'vue' import { ref } from 'vue'
export default { export default {
setup() { setup() {
const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png" const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
@ -61,8 +59,11 @@ export default {
<template> <template>
<lay-avatar :src="src" size="xs"></lay-avatar> <lay-avatar :src="src" size="xs"></lay-avatar>
&nbsp;&nbsp;
<lay-avatar :src="src" size="sm"></lay-avatar> <lay-avatar :src="src" size="sm"></lay-avatar>
&nbsp;&nbsp;
<lay-avatar :src="src"></lay-avatar> <lay-avatar :src="src"></lay-avatar>
&nbsp;&nbsp;
<lay-avatar :src="src" size="lg"></lay-avatar> <lay-avatar :src="src" size="lg"></lay-avatar>
</template> </template>
@ -83,7 +84,39 @@ export default {
::: :::
::: title 头像属性 ::: title 头像列表
:::
::: demo
<template>
<lay-avatar-list>
<lay-avatar :src="src" radius></lay-avatar>
<lay-avatar :src="src" radius></lay-avatar>
<lay-avatar :src="src" radius></lay-avatar>
<lay-avatar :src="src" radius></lay-avatar>
<lay-avatar :src="src" radius></lay-avatar>
</lay-avatar-list>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
return {
src
}
}
}
</script>
:::
::: title Avatar 属性
::: :::
::: table ::: table
@ -98,3 +131,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext avatar
:::

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

@ -99,7 +99,7 @@ export default {
::: :::
::: title 事件 ::: title Backtop 事件
::: :::
::: table ::: table
@ -110,7 +110,7 @@ export default {
::: :::
::: title 插槽 ::: title Backtop 插槽
::: :::
::: table ::: table
@ -120,3 +120,6 @@ export default {
| default| 自定义内容 | | default| 自定义内容 |
::: :::
::: previousNext backtop
:::

7
example/docs/zh-CN/components/badge.md
View File

@ -39,7 +39,7 @@ export default {
::: :::
::: title 徽章属性 ::: title Badge 属性
::: :::
::: table ::: table
@ -51,7 +51,7 @@ export default {
::: :::
::: title 徽章插槽 ::: title Badge 插槽
::: :::
::: table ::: table
@ -64,3 +64,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext badge
:::

3
example/docs/zh-CN/components/block.md
View File

@ -63,3 +63,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext block
:::

7
example/docs/zh-CN/components/breadcrumb.md
View File

@ -82,7 +82,7 @@ export default {
::: :::
::: title 面包屑属性 ::: title Breadcrumb 属性
::: :::
::: table ::: table
@ -93,7 +93,7 @@ export default {
::: :::
::: title 面包屑插槽 ::: title Breadcrumb 插槽
::: :::
::: table ::: table
@ -106,3 +106,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext breadcrumb
:::

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

@ -122,7 +122,7 @@ export default {
<lay-button type="normal" radius>百搭按钮</lay-button> <lay-button type="normal" radius>百搭按钮</lay-button>
<lay-button type="warm" radius>暖色按钮</lay-button> <lay-button type="warm" radius>暖色按钮</lay-button>
<lay-button type="danger" radius>警告按钮</lay-button> <lay-button type="danger" radius>警告按钮</lay-button>
<lay-button type="disabled" radius>禁用按钮</lay-button> <lay-button @click="onClick" disabled radius>禁用按钮</lay-button>
</template> </template>
<script> <script>
@ -131,7 +131,12 @@ import { ref } from 'vue'
export default { export default {
setup() { setup() {
const onClick = () => {
console.log("click event");
}
return { return {
onClick
} }
} }
} }
@ -337,3 +342,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext button
:::

7
example/docs/zh-CN/components/card.md
View File

@ -108,7 +108,7 @@ export default {
::: :::
::: title 卡片属性 ::: title Card 属性
::: :::
::: table ::: table
@ -119,7 +119,7 @@ export default {
::: :::
::: title 卡片插槽 ::: title Card 插槽
::: :::
::: table ::: table
@ -134,3 +134,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext card
:::

7
example/docs/zh-CN/components/carousel.md
View File

@ -118,7 +118,7 @@ export default {
::: :::
::: title 轮播属性 ::: title Carousel 属性
::: :::
::: table ::: table
@ -132,7 +132,7 @@ export default {
::: :::
::: title 轮播事件 ::: title Carousel 事件
::: :::
::: table ::: table
@ -145,3 +145,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext carousel
:::

7
example/docs/zh-CN/components/checkbox.md
View File

@ -188,7 +188,7 @@ export default {
::: :::
::: title 复选框属性 ::: title Checkbox 属性
::: :::
::: table ::: table
@ -203,7 +203,7 @@ export default {
::: :::
::: title 复选框事件 ::: title Checkbox 事件
::: :::
::: table ::: table
@ -216,3 +216,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext checkbox
:::

29
example/docs/zh-CN/components/collapse.md
View File

@ -174,7 +174,18 @@ export default {
::: :::
::: title Collapse-item 属性 ::: title Collapse 事件
:::
::: table
| Name | Description | Callback Params |
| -------- | -------------------- | ---------------- |
| change | 折叠面板变化触发事件 | (`id`, `isShow`, activeValues)<br> <br> `id`: (`number` / `string`)对应当前操作面板的值 <br> <br> `isShow`: (`boolean`)`true` -> 展开, `false` -> 折叠 <br> <br> `activeValues`: (`Array`)当前状态为展开的面板值集合|
:::
::: title Collapse Item 属性
::: :::
::: table ::: table
@ -187,7 +198,7 @@ export default {
::: :::
::: title Collapse-item 插槽 ::: title Collapse Item 插槽
::: :::
::: table ::: table
@ -199,16 +210,8 @@ export default {
::: :::
::: title 事件
:::
::: table
| Name | Description | Callback Params |
| -------- | -------------------- | ---------------- |
| change | 折叠面板变化触发事件 | (`id`, `isShow`, activeValues)<br> <br> `id`: (`number` / `string`)对应当前操作面板的值 <br> <br> `isShow`: (`boolean`)`true` -> 展开, `false` -> 折叠 <br> <br> `activeValues`: (`Array`)当前状态为展开的面板值集合|
:::
::: comment ::: comment
::: :::
::: previousNext collapse
:::

3
example/docs/zh-CN/components/color.md
View File

@ -166,3 +166,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext color
:::

5
example/docs/zh-CN/components/colorPicker.md
View File

@ -19,7 +19,7 @@ export default {
} }
</script> </script>
::: title icon-picker 属性 ::: title Icon Picker 属性
::: :::
::: table ::: table
@ -34,3 +34,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext colorPicker
:::

3
example/docs/zh-CN/components/confirm.md
View File

@ -79,3 +79,6 @@ layer.confirm(content, options)
::: comment ::: comment
::: :::
::: previousNext confirm
:::

3
example/docs/zh-CN/components/container.md
View File

@ -81,3 +81,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext container
:::

34
example/docs/zh-CN/components/countup.md
View File

@ -33,14 +33,17 @@ export default {
::: demo ::: demo
<template> <template>
<lay-button @click="handlerClick" type="primary" size="sm">更新</lay-button>
<br/>
<br/>
<!-- 属性 --> <!-- 属性 -->
<lay-card style="width:200px;height:120px;display:inline-block; border:1px solid #eeeeee;box-shadow: 3px 3px 5px #888888"> <lay-card style="width:200px;height:120px;display:inline-block;">
<h1 style="padding:20px 15px"> <h1 style="padding:20px 15px">
<lay-count-up :end-val="countVal2" prefix="¥" suffix="↑"></lay-count-up> <lay-count-up :end-val="countVal2" prefix="¥" suffix="↑"></lay-count-up>
</h1> </h1>
</lay-card> </lay-card>
<!-- 插槽 --> <!-- 插槽 -->
<lay-card style="width:200px;height:120px;display:inline-block; margin-left:50px; border:1px solid #eeeeee;box-shadow: 3px 3px 5px #888888"> <lay-card style="width:200px;height:120px;display:inline-block;">
<h1 style="padding:20px 15px"> <h1 style="padding:20px 15px">
<lay-count-up :end-val="18" :duration="1"> <lay-count-up :end-val="18" :duration="1">
<template #prefix> <template #prefix>
@ -54,7 +57,6 @@ export default {
</lay-count-up> </lay-count-up>
</h1> </h1>
</lay-card> </lay-card>
<lay-button @click="handlerClick" type="primary" border="blue" size="sm" style="margin:0px 30px;">更新</lay-button>
</template> </template>
<script> <script>
@ -75,7 +77,7 @@ export default {
::: :::
::: title countUp 属性 ::: title Count Up 属性
::: :::
::: table ::: table
@ -94,8 +96,19 @@ export default {
::: :::
::: title Count Up 插槽
:::
::: title CountUpOptions 属性 ::: table
| 名称 | 描述 | 参数 |
| ----- | -------- | ---- |
| prefix | 前缀 | -- |
| suffix | 后缀 | -- |
:::
::: title Count Up Options 属性
::: :::
::: table ::: table
@ -113,14 +126,5 @@ export default {
::: :::
::: title countUp 插槽 ::: previousNext countUp
:::
::: table
| 名称 | 描述 | 参数 |
| ----- | -------- | ---- |
| prefix | 前缀 | -- |
| suffix | 后缀 | -- |
::: :::

3
example/docs/zh-CN/components/datePicker.md
View File

@ -24,3 +24,6 @@ export default {
</script> </script>
::: :::
::: previousNext datePicker
:::

7
example/docs/zh-CN/components/dropdown.md
View File

@ -70,7 +70,7 @@ export default {
::: :::
::: title 下拉属性 ::: title Dropdown 属性
::: :::
::: table ::: table
@ -81,7 +81,7 @@ export default {
::: :::
::: title 下拉插槽 ::: title Dropdown 插槽
::: :::
::: table ::: table
@ -94,3 +94,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext dropdown
:::

5
example/docs/zh-CN/components/empty.md
View File

@ -47,7 +47,7 @@ export default {
::: :::
::: title empty 属性 ::: title Empty 属性
::: :::
::: table ::: table
@ -60,3 +60,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext empty
:::

5
example/docs/zh-CN/components/field.md
View File

@ -64,7 +64,7 @@ export default {
::: :::
::: title 字段属性 ::: title Field 属性
::: :::
::: table ::: table
@ -77,3 +77,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext field
:::

3
example/docs/zh-CN/components/form.md
View File

@ -582,3 +582,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext form
:::

7
example/docs/zh-CN/components/grid.md
View File

@ -139,7 +139,7 @@ export default {
::: :::
::: title 行属性 ::: title Row 属性
::: :::
::: table ::: table
@ -150,7 +150,7 @@ export default {
::: :::
::: title 列属性 ::: title Col 属性
::: :::
::: table ::: table
@ -170,3 +170,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext grid
:::

3
example/docs/zh-CN/components/icon.md
View File

@ -1133,3 +1133,6 @@ npm install @layui/icons-vue
::: comment ::: comment
::: :::
::: previousNext iconfont
:::

3
example/docs/zh-CN/components/iconPicker.md
View File

@ -116,3 +116,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext iconPicker
:::

7
example/docs/zh-CN/components/input.md
View File

@ -106,7 +106,7 @@ export default {
::: :::
::: title 输入框属性 ::: title Input 属性
::: :::
::: table ::: table
@ -120,7 +120,7 @@ export default {
::: :::
::: title 输入框属性 ::: title Input 属性
::: :::
::: table ::: table
@ -135,3 +135,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext input
:::

7
example/docs/zh-CN/components/inputNumber.md
View File

@ -111,7 +111,7 @@
::: :::
::: title input-number属性 ::: title Input Number 属性
::: :::
::: table ::: table
@ -130,7 +130,7 @@
::: :::
::: title 事件 ::: title Input Number 事件
::: :::
::: table ::: table
@ -143,3 +143,6 @@
::: comment ::: comment
::: :::
::: previousNext inputNumber
:::

3
example/docs/zh-CN/components/layout.md
View File

@ -190,3 +190,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext layout
:::

5
example/docs/zh-CN/components/line.md
View File

@ -37,7 +37,7 @@ export default {
::: :::
::: title 分割属性 ::: title Line 属性
::: :::
::: table ::: table
@ -50,3 +50,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext line
:::

3
example/docs/zh-CN/components/load.md
View File

@ -129,3 +129,6 @@ layer.load(load, options)
::: comment ::: comment
::: :::
::: previousNext load
:::

105
example/docs/zh-CN/components/menu.md
View File

@ -11,15 +11,15 @@
<lay-menu-item title="首页" id="1"></lay-menu-item> <lay-menu-item title="首页" id="1"></lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item> <lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item> <lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-menu-item title="目录" id="7"> <lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单一" id="8"></lay-menu-item> <lay-menu-item title="菜单一" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item> <lay-menu-item title="菜单二" id="9"></lay-menu-item>
<lay-menu-item title="菜单三" id="10"> <lay-sub-menu title="菜单三" id="10">
<lay-menu-item title="菜单一" id="11"></lay-menu-item> <lay-menu-item title="菜单一" id="11"></lay-menu-item>
<lay-menu-item title="菜单二" id="12"></lay-menu-item> <lay-menu-item title="菜单二" id="12"></lay-menu-item>
<lay-menu-item title="菜单三" id="13"></lay-menu-item> <lay-menu-item title="菜单三" id="13"></lay-menu-item>
</lay-menu-item> </lay-sub-menu>
</lay-menu-item> </lay-sub-menu>
</lay-menu> </lay-menu>
</template> </template>
@ -47,23 +47,62 @@ export default {
::: demo ::: demo
<template> <template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree"> <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" :tree="true">
<lay-menu-item title="首页" id="1"> <lay-menu-item title="首页" id="1"></lay-menu-item>
<template v-slot:title>
<router-link to="">无感</router-link>
</template>
</lay-menu-item>
<lay-menu-item title="用户" id="2"></lay-menu-item> <lay-menu-item title="用户" id="2"></lay-menu-item>
<lay-menu-item title="角色" id="3"></lay-menu-item> <lay-menu-item title="角色" id="3"></lay-menu-item>
<lay-menu-item title="目录" id="7"> <lay-sub-menu title="目录" id="7">
<lay-menu-item title="菜单一" id="8"></lay-menu-item> <lay-menu-item title="菜单一" id="8"></lay-menu-item>
<lay-menu-item title="菜单二" id="9"></lay-menu-item> <lay-menu-item title="菜单二" id="9"></lay-menu-item>
<lay-menu-item title="菜单三" id="10"> <lay-sub-menu title="菜单三" id="10">
<lay-menu-item title="菜单一" id="11"></lay-menu-item> <lay-menu-item title="菜单一" id="11"></lay-menu-item>
<lay-menu-item title="菜单二" id="12"></lay-menu-item> <lay-menu-item title="菜单二" id="12"></lay-menu-item>
<lay-menu-item title="菜单三" id="13"></lay-menu-item> <lay-menu-item title="菜单三" id="13"></lay-menu-item>
</lay-menu-item> </lay-sub-menu>
</lay-sub-menu>
</lay-menu>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const openKeys = ref(["7"])
const selectedKey = ref("5")
return {
openKeys,
selectedKey
}
}
}
</script>
:::
::: title 菜单插槽
:::
::: demo
<template>
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
<lay-menu-item id="1">
<router-link to="">首页</router-link>
</lay-menu-item> </lay-menu-item>
<lay-sub-menu id="7">
<template v-slot:title>
<router-link to="">目录</router-link>
</template>
<lay-menu-item id="8">
<router-link to="">菜单一</router-link>
</lay-menu-item>
<lay-menu-item id="9">
<router-link to="">菜单二</router-link>
</lay-menu-item>
</lay-sub-menu>
</lay-menu> </lay-menu>
</template> </template>
@ -88,7 +127,7 @@ export default {
::: :::
::: title 菜单属性 ::: title Menu 属性
::: :::
::: table ::: table
@ -100,7 +139,40 @@ export default {
::: :::
::: title 菜单插槽 ::: title Menu Item 属性
:::
::: table
| 插槽 | 描述 | 备注 |
| ----- | -------- | ---- |
| title | 菜单标题 | -- |
:::
::: title Menu Item 插槽
:::
::: table
| 插槽 | 描述 | 备注 |
| ----- | -------- | ---- |
| title | 菜单标题 | -- |
:::
::: title Sub Menu 属性
:::
::: table
| 插槽 | 描述 | 备注 |
| ----- | -------- | ---- |
| title | 菜单标题 | -- |
:::
::: title Sub Menu 插槽
::: :::
::: table ::: table
@ -113,3 +185,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext nav
:::

3
example/docs/zh-CN/components/modal.md
View File

@ -344,3 +344,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext modal
:::

3
example/docs/zh-CN/components/msg.md
View File

@ -97,3 +97,6 @@ layer.msg(content, options)
::: comment ::: comment
::: :::
::: previousNext msg
:::

92
example/docs/zh-CN/components/page.md
View File

@ -7,7 +7,7 @@
::: demo ::: demo
<template> <template>
<lay-page :limit="limit" :total="total" :show-page="showPage"></lay-page> <lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage"></lay-page>
</template> </template>
<script> <script>
@ -37,7 +37,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-page :limit="limit" :total="total"></lay-page> <lay-page :limit="limit" @limit="limit = $event" :total="total"></lay-page>
</template> </template>
<script> <script>
@ -65,7 +65,7 @@ export default {
::: demo ::: demo
<template> <template>
<lay-page :limit="limit" :total="total"> <lay-page :limit="limit" @limit="limit = $event" :total="total">
<template v-slot:prev>上</template> <template v-slot:prev>上</template>
<template v-slot:next>下</template> <template v-slot:next>下</template>
</lay-page> </lay-page>
@ -96,11 +96,11 @@ export default {
::: demo ::: demo
<template> <template>
<lay-page :limit="limit" :total="total" :show-page="showPage" theme="red"></lay-page> <lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage" theme="red"></lay-page>
<br> <br>
<lay-page :limit="limit" :total="total" :show-page="showPage" theme="blue"></lay-page> <lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage" theme="blue"></lay-page>
<br> <br>
<lay-page :limit="limit" :total="total" :show-page="showPage" theme="orange"></lay-page> <lay-page :limit="limit" @limit="limit = $event" :total="total" :show-page="showPage" theme="orange"></lay-page>
</template> </template>
<script> <script>
@ -124,13 +124,13 @@ export default {
::: :::
::: title 完整分页 ::: title 指定分页容量
::: :::
::: demo ::: demo
<template> <template>
<lay-page :limit="limit" :total="total" :show-count="showCount" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page> <lay-page :limit="limit" :total="total" showCount showPage :limits="[10,50,100,200]" @limit="limit=$event"></lay-page>
</template> </template>
<script> <script>
@ -141,6 +141,66 @@ export default {
const limit = ref(20) const limit = ref(20)
const total = ref(100) const total = ref(100)
return {
limit,
total
}
}
}
</script>
:::
::: title 每页数量切换事件(limit)
:::
::: demo
<template>
<lay-page :limit="limit" showPage showCount :total="total" @limit="limit=$event" :show-limit="showLimit" ></lay-page>
<div>每页数量:{{limit}}</div>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const limit = ref(5)
const total = ref(9999)
const showLimit = ref(true)
return {
limit,
total,
showLimit,
}
}
}
</script>
:::
::: title 完整分页
:::
::: demo
<template>
<lay-page :limit="limit" :total="9999" :show-count="showCount" @limit="limit=$event" :show-page="showPage" :show-limit="showLimit" :show-refresh="showRefresh" showSkip="showSkip"></lay-page>
每页数量:{{limit}}
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const limit = ref(5)
const total = ref(9999)
const showCount = ref(true) const showCount = ref(true)
const showPage = ref(true) const showPage = ref(true)
const showLimit = ref(true) const showLimit = ref(true)
@ -162,13 +222,13 @@ export default {
::: :::
::: title 切换事件 ::: title 页码切换事件(jump)
::: :::
::: demo ::: demo
<template> <template>
<lay-page :limit="limit" :total="total" @jump="jump" :show-page="showSkip"></lay-page> <lay-page :limit="limit" :total="total" @jump="jump" @limit="limit = $event" :show-page="showSkip"></lay-page>
</template> </template>
<script> <script>
@ -196,7 +256,7 @@ export default {
::: :::
::: title 分页属性 ::: title Page 属性
::: :::
::: table ::: table
@ -210,10 +270,12 @@ export default {
| showLimit | 显示每页数量 | `false` | | showLimit | 显示每页数量 | `false` |
| showRefresh | 显示刷新按钮 | `false` | | showRefresh | 显示刷新按钮 | `false` |
| showSkip | 显示跳转 | `false` | | showSkip | 显示跳转 | `false` |
| pages | 显示切页按钮数量 | `10` |
| limits | 切换每页数量的选择项 | `[10,20,30,40,50]` |
::: :::
::: title 分页事件 ::: title Page 事件
::: :::
::: table ::: table
@ -221,10 +283,11 @@ export default {
| 事件 | 描述 | 参数 | | 事件 | 描述 | 参数 |
| ---- | -------- | --------------------- | | ---- | -------- | --------------------- |
| jump | 切换回调 | { current: 当前页面 } | | jump | 切换回调 | { current: 当前页面 } |
| limit | 每页数量变化 | 变化后的值 |
::: :::
::: title 分页插槽 ::: title Page 插槽
::: :::
::: table ::: table
@ -238,3 +301,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext page
:::

5
example/docs/zh-CN/components/panel.md
View File

@ -24,7 +24,7 @@ export default {
::: :::
::: title 面板插槽 ::: title Panel 插槽
::: :::
::: table ::: table
@ -37,3 +37,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext panel
:::

5
example/docs/zh-CN/components/progress.md
View File

@ -113,7 +113,7 @@ export default {
::: :::
::: title 进度属性 ::: title Progress 属性
::: :::
::: table ::: table
@ -131,3 +131,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext progress
:::

7
example/docs/zh-CN/components/radio.md
View File

@ -97,7 +97,7 @@ export default {
::: :::
::: title 单选框属性 ::: title Radio 属性
::: :::
::: table ::: table
@ -110,7 +110,7 @@ export default {
::: :::
::: title 单选框事件 ::: title Radio 事件
::: :::
::: table ::: table
@ -123,3 +123,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext radio
:::

9
example/docs/zh-CN/components/rate.md
View File

@ -269,7 +269,7 @@ export default {
::: :::
::: title 评分属性 ::: title Rate 属性
::: :::
::: table ::: table
@ -287,7 +287,7 @@ export default {
::: :::
::: title 插槽 ::: title Rate 插槽
::: :::
::: table ::: table
@ -298,7 +298,7 @@ export default {
::: :::
::: title 事件 ::: title Rate 事件
::: :::
::: table ::: table
@ -311,3 +311,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext rate
:::

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

@ -27,6 +27,40 @@ export default {
} }
</script> </script>
::: title 数据联动
:::
::: demo
<template>
<lay-select v-model="value">
<lay-select-option value="1" label="学习"></lay-select-option>
<lay-select-option value="2" label="编码"></lay-select-option>
<lay-select-option value="3" label="运动"></lay-select-option>
</lay-select>
<lay-button @click="change1">点击切换(当前值:{{value}})</lay-button>
</template>
<script>
import { ref } from 'vue'
export default {
name:'selectChange',
setup() {
const value = ref(null);
var i = 1;
function change1(){
value.value=i++%3+1
}
return {
value,
change1
}
}
}
</script>
::: :::
::: title 选择禁用 ::: title 选择禁用
@ -74,6 +108,7 @@ export default {
<lay-select-option value="6" label="打篮球"></lay-select-option> <lay-select-option value="6" label="打篮球"></lay-select-option>
<lay-select-option value="7" label="rap"></lay-select-option> <lay-select-option value="7" label="rap"></lay-select-option>
</lay-select> </lay-select>
<lay-button @click="mvalue=[1,5,7]">点击切换(当前值:{{mvalue.join()}})</lay-button>
</template> </template>
<script> <script>
@ -95,7 +130,7 @@ export default {
::: :::
::: title select 属性 ::: title Select 属性
::: :::
::: table ::: table
@ -112,7 +147,18 @@ export default {
::: :::
::: title select-option 属性 ::: title Select 事件
:::
::: table
| 属性 | 描述 | 接收值 |
| ------ | ---------- | --------------- |
| change | 切换事件 | value |
:::
::: title Select Option 属性
::: :::
::: table ::: table
@ -128,7 +174,7 @@ export default {
::: :::
::: title select-option 插槽 ::: title Select Option 插槽
::: :::
::: table ::: table
@ -139,16 +185,8 @@ export default {
::: :::
::: title select 事件
:::
::: table
| 属性 | 描述 | 接收值 |
| ------ | ---------- | --------------- |
| change | 切换事件 | value |
:::
::: comment ::: comment
::: :::
::: previousNext select
:::

7
example/docs/zh-CN/components/skeleton.md
View File

@ -82,7 +82,7 @@ export default {
::: :::
::: title 骨架屏属性 ::: title Skeleton 属性
::: :::
::: table ::: table
@ -96,7 +96,7 @@ export default {
::: :::
::: title 骨架屏插槽 ::: title Skeleton 插槽
::: :::
::: table ::: table
@ -110,3 +110,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext skeleton
:::

8
example/docs/zh-CN/components/slider.md
View File

@ -1,3 +1,6 @@
::: anchor
:::
::: title 横向 ::: title 横向
::: :::
@ -91,7 +94,7 @@ export default {
</script> </script>
::: :::
::: title slider 属性 ::: title Slider 属性
::: :::
::: table ::: table
@ -108,3 +111,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext slider
:::

114
example/docs/zh-CN/components/step.md
View File

@ -15,8 +15,50 @@
<lay-step-item></lay-step-item> <lay-step-item></lay-step-item>
<lay-step-item></lay-step-item> <lay-step-item></lay-step-item>
</lay-step> </lay-step>
<lay-button size="xs" @click="nexts">下一步</lay-button> <div style="margin-top: 10px">
<lay-button size="xs" @click="previous">上一步</lay-button> <lay-button size="xs" @click="previous">上一步</lay-button>
<lay-button size="xs" @click="nexts">下一步</lay-button>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
const active = ref(-1);
const nexts = () => {
if (active.value++ >=3) active.value = 0
};
const previous = () => {
if (active.value-- ===0) active.value = 0
};
return {
loading,
active
}
}
}
</script>
:::
::: title composition 为row 的排版
:::
::: demo
<template>
<div>
<lay-step :active="active" composition="row">
<lay-step-item title="First" content="First step"></lay-step-item>
<lay-step-item title="Second" content="Second step"></lay-step-item>
<lay-step-item title="Third" content="Third step"></lay-step-item>
<lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
</lay-step>
</div> </div>
</template> </template>
@ -96,8 +138,8 @@ export default {
<lay-step-item title="Second" content="Second step"></lay-step-item> <lay-step-item title="Second" content="Second step"></lay-step-item>
<lay-step-item title="Third" content="Third step"></lay-step-item> <lay-step-item title="Third" content="Third step"></lay-step-item>
</lay-step> </lay-step>
<lay-button size="xs" @click="next">下一步</lay-button>
<lay-button size="xs" @click="previous">上一步</lay-button> <lay-button size="xs" @click="previous">上一步</lay-button>
<lay-button size="xs" @click="next">下一步</lay-button>
</div> </div>
</template> </template>
@ -139,8 +181,8 @@ export default {
<lay-step-item title="Third" content="Third step"></lay-step-item> <lay-step-item title="Third" content="Third step"></lay-step-item>
<lay-step-item title="Fourth" content="Fourth step"></lay-step-item> <lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
</lay-step> </lay-step>
<lay-button size="xs" @click="nexts">下一步</lay-button>
<lay-button size="xs" @click="previous">上一步</lay-button> <lay-button size="xs" @click="previous">上一步</lay-button>
<lay-button size="xs" @click="nexts">下一步</lay-button>
</div> </div>
</template> </template>
@ -180,8 +222,8 @@ export default {
<lay-step-item title="Second" content="Second step"></lay-step-item> <lay-step-item title="Second" content="Second step"></lay-step-item>
<lay-step-item title="Third" content="Third step"></lay-step-item> <lay-step-item title="Third" content="Third step"></lay-step-item>
</lay-step> </lay-step>
<lay-button size="xs" @click="next">下一步</lay-button>
<lay-button size="xs" @click="previous">上一步</lay-button> <lay-button size="xs" @click="previous">上一步</lay-button>
<lay-button size="xs" @click="next">下一步</lay-button>
</div> </div>
</template> </template>
@ -221,8 +263,8 @@ export default {
<lay-step-item title="Second" content="Second step" icon="layui-icon-tree"></lay-step-item> <lay-step-item title="Second" content="Second step" icon="layui-icon-tree"></lay-step-item>
<lay-step-item title="Third" content="Third step" icon="layui-icon-share"></lay-step-item> <lay-step-item title="Third" content="Third step" icon="layui-icon-share"></lay-step-item>
</lay-step> </lay-step>
<lay-button size="xs" @click="next">下一步</lay-button>
<lay-button size="xs" @click="previous">上一步</lay-button> <lay-button size="xs" @click="previous">上一步</lay-button>
<lay-button size="xs" @click="next">下一步</lay-button>
</div> </div>
</template> </template>
@ -266,8 +308,8 @@ export default {
<lay-step-item title="Second" content="Second step"></lay-step-item> <lay-step-item title="Second" content="Second step"></lay-step-item>
<lay-step-item title="Third" content="Third step"></lay-step-item> <lay-step-item title="Third" content="Third step"></lay-step-item>
</lay-step> </lay-step>
<lay-button size="xs" @click="next">下一步</lay-button>
<lay-button size="xs" @click="previous">上一步</lay-button> <lay-button size="xs" @click="previous">上一步</lay-button>
<lay-button size="xs" @click="next">下一步</lay-button>
</div> </div>
</template> </template>
@ -337,7 +379,51 @@ export default {
::: :::
::: title step步骤条属性 ::: title 简洁版
:::
简洁版不支持`垂直``横向``描述``排版`
::: demo
<template>
<div>
<lay-step :active="active" simple @onChange="onChange">
<lay-step-item title="First"></lay-step-item>
<lay-step-item title="Second"></lay-step-item>
<lay-step-item title="Third"></lay-step-item>
</lay-step>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const loading = ref(true);
const active = ref(0);
const next = () => {
if (active.value++ >=2) active.value = 0
};
const previous = () => {
if (active.value-- ===0) active.value = 0
};
const onChange = (index) => {
active.value = index
};
return {
loading,
active
}
}
}
</script>
:::
::: title Step 属性
::: :::
::: table ::: table
@ -348,12 +434,15 @@ export default {
| center | 居中布局 | boolean | `true` `false` | `false` | | center | 居中布局 | boolean | `true` `false` | `false` |
| direction | 垂直/平行布局 | string |`horizontal` `vertical` | `horizontal` | | direction | 垂直/平行布局 | string |`horizontal` `vertical` | `horizontal` |
| space | 宽度 | string | - | `auto` | | space | 宽度 | string | - | `auto` |
| currentStatus | 当前状态显示 | string | `primary` `success` `fail` `warning` | `primary` | | currentStatus | 当前状态显示 | string | `primary` `success` `fail` `warning` | `success` |
| composition | 排版 | string | `default` `row` | `default` |
| simple | 简洁版 | boolean | `true` `false` |`false`|
| onChange | 点击切换时监听 | function | - |function(index){}|
::: :::
::: title stepItem步骤条属性 ::: title Step Item 属性
::: :::
::: table ::: table
@ -368,7 +457,7 @@ export default {
::: :::
::: title stepItem步骤条slot ::: title Step Item 插槽
::: :::
::: table ::: table
@ -382,3 +471,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext step
:::

7
example/docs/zh-CN/components/switch.md
View File

@ -111,7 +111,7 @@ export default {
::: :::
::: title 开关属性 ::: title Switch 属性
::: :::
::: table ::: table
@ -126,7 +126,7 @@ export default {
::: :::
::: title 开关事件 ::: title Switch 事件
::: :::
::: table ::: table
@ -139,3 +139,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext switch
:::

9
example/docs/zh-CN/components/tab.md
View File

@ -169,7 +169,7 @@ export default {
return { return {
current5, current5,
change5, change5,
beforeClose， beforeClose,
close5 close5
} }
} }
@ -220,7 +220,7 @@ export default {
::: :::
::: title 选项卡属性 ::: title Tab 属性
::: :::
::: table ::: table
@ -235,7 +235,7 @@ export default {
::: :::
::: title 选项卡事件 ::: title Tab 事件
::: :::
::: table ::: table
@ -249,3 +249,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext tab
:::

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

@ -315,7 +315,7 @@ export default {
### <div id="tableColumn"></div> ### <div id="tableColumn"></div>
::: title Table Column 属性 ::: title Table 数据
::: :::
::: table ::: table
@ -331,3 +331,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext table
:::

7
example/docs/zh-CN/components/textarea.md
View File

@ -85,7 +85,7 @@ export default {
::: :::
::: title 文本域属性 ::: title Textarea 属性
::: :::
::: table ::: table
@ -99,7 +99,7 @@ export default {
::: :::
::: title 文本域事件 ::: title Textarea 事件
::: :::
::: table ::: table
@ -114,3 +114,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext textarea
:::

5
example/docs/zh-CN/components/timeline.md
View File

@ -120,7 +120,7 @@ export default {
::: :::
::: title Timeline Item 属性 ::: title Timeline Item 插槽
::: :::
::: table ::: table
@ -133,3 +133,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext timeline
:::

5
example/docs/zh-CN/components/tooltip.md
View File

@ -113,7 +113,7 @@
</style> </style>
::: :::
::: title tooltip属性 ::: title Tooltip 属性
::: :::
::: table ::: table
@ -131,3 +131,6 @@
::: comment ::: comment
::: :::
::: previousNext tooltip
:::

7
example/docs/zh-CN/components/transfer.md
View File

@ -86,7 +86,7 @@ export default {
::: :::
::: title transfer 属性 ::: title Transfer 属性
::: :::
::: table ::: table
@ -99,7 +99,7 @@ export default {
::: :::
::: title transfer 插槽 ::: title Transfer 插槽
::: :::
::: table ::: table
@ -112,3 +112,6 @@ export default {
::: comment ::: comment
::: :::
::: previousNext transfer
:::

9
example/docs/zh-CN/components/tree.md
View File

@ -216,7 +216,7 @@ function handleClick(node) {
::: :::
::: title tree attributes ::: title Tree 属性
::: :::
::: table ::: table
@ -231,7 +231,7 @@ function handleClick(node) {
::: :::
::: title TreeData ::: title Tree 数据
::: :::
::: table ::: table
@ -246,7 +246,7 @@ function handleClick(node) {
::: :::
::: title tree events ::: title Tree 事件
::: :::
::: table ::: table
@ -259,3 +259,6 @@ function handleClick(node) {
::: comment ::: comment
::: :::
::: previousNext tree
:::

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

@ -11,14 +11,31 @@
<template> <template>
<lay-timeline> <lay-timeline>
<lay-timeline-item title="0.3.x"> <lay-timeline-item title="0.3.x">
<ul>
<a name="0-3-4"> </a>
<li>
<h3>0.3.4 <span class="layui-badge-rim">2022-01-09</span></h3>
<ul>
<li>[新增] avatar-list 头像列表组件。</li>
<li>[修复] button 按钮 disabled 为 true 时, 仍触发 click 事件。</li>
<li>[修复] menu-item 与 sub-menu 组件的 title 属性必填警告。</li>
<li>[升级] vite 2.7.10。</li>
</ul>
</li>
</ul>
<ul> <ul>
<a name="0-3-3"> </a> <a name="0-3-3"> </a>
<li> <li>
<h3>0.3.3 <span class="layui-badge-rim">2022-01-03</span></h3> <h3>0.3.3 <span class="layui-badge-rim">2022-01-09</span></h3>
<ul> <ul>
<li>[新增] setup 步骤条组件。</li> <li>[新增] setup 步骤条组件。</li>
<li>[新增] slider 滑块组件 vertical 属性, 支持垂直布局。</li>
<li>[新增] timeline-item 时间线组件 dot 插槽, 支持自定义节点内容。</li> <li>[新增] timeline-item 时间线组件 dot 插槽, 支持自定义节点内容。</li>
<li>[修复] menu 组件 layui-nav-more 切换动画。</li> <li>[新增] sub-menu 目录组件, 与 menu-item 组合使用。</li>
<li>[修复] menu 菜单组件 layui-nav-more 切换动画。</li>
<li>[修复] select 下拉选择组件外部参数变更组件内的数值不生效的问题</li>
<li>[修复] page 分页组件 limit 数量过多时, 展示部分页数。</li>
<li>[推出] layui-vue-admin 后台模板 </li>
</ul> </ul>
</li> </li>
</ul> </ul>

2
example/docs/zh-CN/guide/introduce.md
View File

@ -3,7 +3,7 @@
<p> <p>
<a href="http://layui-vue.pearadmin.com"> <a href="http://layui-vue.pearadmin.com">
<img src="https://sentsin.gitee.io/res/images/layui/layui.png" alt="layui" width="500"> <img src="../../../src/assets/logo-new.png" alt="layui" width="500">
</a> </a>
</p> </p>

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

@ -129,13 +129,13 @@
莫名点 莫名点
</lay-col> </lay-col>
<lay-col md="8"> <lay-col md="8">
焦点：skeleton setup 焦点：skeleton step
</lay-col> </lay-col>
<lay-col md="4"> <lay-col md="4">
地点：中国 未知 地点：中国 上海
</lay-col> </lay-col>
<lay-col md="6"> <lay-col md="6">
其他：Gitee Github 其他：<a href="https://gitee.com/dingyongya">Gitee</a> <a href="https://github.com/dyywork">Github</a>
</lay-col> </lay-col>
</lay-row> </lay-row>
</lay-card> </lay-card>

7
example/src/assets/css/markdown.css
View File

@ -110,10 +110,6 @@ form {
margin: 0; margin: 0;
} }
.source .layui-avatar {
margin-right: 30px;
}
.site-doc-icon { .site-doc-icon {
margin-bottom: 50px; margin-bottom: 50px;
font-size: 0; font-size: 0;
@ -265,3 +261,6 @@ body::-webkit-scrollbar {
.layui-menu .layui-menu-item-group > .layui-menu-body-title { .layui-menu .layui-menu-item-group > .layui-menu-body-title {
padding-left: 15px; padding-left: 15px;
} }
.lay-link:hover{
color: #5FB878;
}

BIN
example/src/assets/logo-new.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

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.3.2 </a> <a href="javascript:void(0)"> 0.3.4 </a>
</li> </li>
</ul> </ul>
</lay-header> </lay-header>

46
example/src/plugin/common-plugins.ts
View File

@ -1,16 +1,17 @@
import vue from '@vitejs/plugin-vue' import vue from "@vitejs/plugin-vue";
import Markdown from 'vite-plugin-md' import Markdown from "vite-plugin-md";
import container from 'markdown-it-container' import container from "markdown-it-container";
import highlight from './highlight' import highlight from "./highlight";
import snippet from './snippet' import snippet from "./snippet";
import demo from './demo' import demo from "./demo";
import createTitle from './create-title' import createTitle from "./create-title";
import createBlock from './create-block' import createBlock from "./create-block";
import createDescribe from './create-describe' import createDescribe from "./create-describe";
import createTable from './create-table' import createTable from "./create-table";
import createComment from './create-comment' import createComment from "./create-comment";
import createAnchor from './create-anchor' import createAnchor from "./create-anchor";
import preWrapper from './pre-wrapper' import preWrapper from "./pre-wrapper";
import previousNext from "./previous-next";
const plugins = [ const plugins = [
vue({ vue({
@ -26,15 +27,16 @@ const plugins = [
markdownItSetup(md) { markdownItSetup(md) {
md.use(snippet) md.use(snippet)
.use(preWrapper) .use(preWrapper)
.use(container, 'demo', demo) .use(container, "demo", demo)
.use(...createTable('table', '')) .use(...createTable("table", ""))
.use(...createBlock('block', '')) .use(...createBlock("block", ""))
.use(...createTitle('title', '')) .use(...createTitle("title", ""))
.use(...createDescribe('describe', '')) .use(...createDescribe("describe", ""))
.use(...createComment('comment', '')) .use(...createComment("comment", ""))
.use(...createAnchor('anchor', '')) .use(...createAnchor("anchor", ""))
.use(...previousNext("previousNext", ""));
}, },
}), }),
] as any ] as any;
export default plugins export default plugins;

55
example/src/plugin/previous-next.ts Normal file
View File

@ -0,0 +1,55 @@
import container from "markdown-it-container";
import type Token from "markdown-it/lib/token";
import menus from "../view/utils/menus";
type ContainerArgs = [
typeof container,
string,
{
render(tokens: Token[], idx: number): string;
}
];
export default function createContainer(
klass: string,
defaultTitle: string
): ContainerArgs {
return [
container,
klass,
{
render(tokens, idx) {
const token = tokens[idx];
const info = token.info.trim().slice(klass.length).trim();
const menusChild = menus.map((item) => item.children).flat(1);
let prevIndex = 0;
let nextIndex = 0;
menusChild.forEach((item, index) => {
if (item.subTitle === info) {
prevIndex = index - 1;
nextIndex = index + 1;
}
});
if (token.nesting === 1) {
return `<div style="display: flex; justify-content: space-between">
<div><router-link to="${
menusChild[prevIndex]?.path
}" class="lay-link" style="display: ${
prevIndex < 0 ? "none" : ""
}"> <lay-icon type="layui-icon-left"/>${
menusChild[prevIndex]?.title
}</router-link></div>
<div><router-link to="${
menusChild[nextIndex]?.path
}" class="lay-link" style="display: ${
nextIndex >= menusChild.length ? "none" : ""
}">${
menusChild[nextIndex]?.title
} <lay-icon type="layui-icon-right"/></router-link> </div>
</div>`;
} else {
return ``;
}
},
},
];
}

334
example/src/view/component.vue
View File

@ -52,6 +52,7 @@
<script> <script>
import { ref, watch } from "vue"; import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router"; import { useRouter, useRoute } from "vue-router";
import menus from "./utils/menus";
export default { export default {
setup() { setup() {
const route = useRoute(); const route = useRoute();
@ -69,339 +70,6 @@ export default {
} }
); );
const menus = [
{
id: 1,
title: "通用",
children: [
{
id: 20,
title: "颜色",
subTitle: "color",
path: "/zh-CN/components/color",
},
{
id: 6,
title: "按钮",
subTitle: "button",
path: "/zh-CN/components/button",
},
{
id: 7,
title: "图标",
subTitle: "iconfont",
path: "/zh-CN/components/icon",
},
{
id: 10,
title: "动画",
subTitle: "animation",
path: "/zh-CN/components/animation",
},
],
},
{
id: 1,
title: "布局",
children: [
{
id: 111,
title: "骨架屏",
subTitle: "skeleton",
path: "/zh-CN/components/skeleton",
},
{
id: 4,
title: "布局",
subTitle: "layout",
path: "/zh-CN/components/layout",
},
{
id: 5,
title: "容器",
subTitle: "container",
path: "/zh-CN/components/container",
},
{
id: 11,
title: "栅格",
subTitle: "grid",
path: "/zh-CN/components/grid",
},
{
id: 8,
title: "面板",
subTitle: "panel",
path: "/zh-CN/components/panel",
},
{
id: 9,
title: "卡片",
subTitle: "card",
path: "/zh-CN/components/card",
},
],
},
{
id: 1,
title: "导航",
children: [
{
id: 16,
title: "菜单",
subTitle: "nav",
path: "/zh-CN/components/menu",
},
{
id: 17,
title: "面包屑",
subTitle: "breadcrumb",
path: "/zh-CN/components/breadcrumb",
},
{
id: 28,
title: "选项卡",
subTitle: "tab",
path: "/zh-CN/components/tab",
},
{
id: 27,
title: "下拉菜单",
subTitle: "dropdown",
path: "/zh-CN/components/dropdown",
},
{
id: 42,
title: "返回顶部",
subTitle: "backtop",
path: "/zh-CN/components/backtop",
},
],
},
{
id: 1,
title: "表单",
children: [
{
id: 36,
title: "开关",
subTitle: "switch",
path: "/zh-CN/components/switch",
},
{
id: 32,
title: "复选框",
subTitle: "checkbox",
path: "/zh-CN/components/checkbox",
},
{
id: 33,
title: "单选框",
subTitle: "radio",
path: "/zh-CN/components/radio",
},
{
id: 34,
title: "输入框",
subTitle: "input",
path: "/zh-CN/components/input",
},
{
id: 341,
title: "数字输入框",
subTitle: "inputNumber",
path: "/zh-CN/components/inputNumber",
},
{
id: 35,
title: "文本域",
subTitle: "textarea",
path: "/zh-CN/components/textarea",
},
{
id: 39,
title: "下拉选择",
subTitle: "select",
path: "/zh-CN/components/select",
},
{
id: 40,
title: "颜色选择器",
subTitle: "colorPicker",
path: "/zh-CN/components/colorPicker",
},
{
id: 29,
title: "图标选择器",
subTitle: "iconPicker",
path: "/zh-CN/components/iconPicker",
},
{
id: 26,
title: "评分",
subTitle: "rate",
path: "/zh-CN/components/rate",
},
{
id: 37,
title: "滑块",
subTitle: "slider",
path: "/zh-CN/components/slider",
},
{
id: 12,
title: "表单",
subTitle: "form",
path: "/zh-CN/components/form",
},
],
},
{
id: 1,
title: "展示",
children: [
{
id: 18,
title: "进度",
subTitle: "progress",
path: "/zh-CN/components/progress",
},
{
id: 19,
title: "时间线",
subTitle: "timeline",
path: "/zh-CN/components/timeline",
},
{
id: 21,
title: "折叠面板",
subTitle: "collapse",
path: "/zh-CN/components/collapse",
},
{
id: 22,
title: "表格",
subTitle: "table",
path: "/zh-CN/components/table",
},
{
id: 23,
title: "头像",
subTitle: "avatar",
path: "/zh-CN/components/avatar",
},
{
id: 25,
title: "空",
subTitle: "empty",
path: "/zh-CN/components/empty",
},
{
id: 29,
title: "分页",
subTitle: "page",
path: "/zh-CN/components/page",
},
{
id: 30,
title: "树形组件",
subTitle: "tree",
path: "/zh-CN/components/tree",
},
{
id: 31,
title: "穿梭框",
subTitle: "transfer",
path: "/zh-CN/components/transfer",
},
{
id: 38,
title: "轮播",
subTitle: "carousel",
path: "/zh-CN/components/carousel",
},
{
id: 43,
title: "数字滚动",
subTitle: "countUp",
path: "/zh-CN/components/countup",
},
],
},
{
id: 1,
title: "辅助",
children: [
{
id: 13,
title: "徽章",
subTitle: "badge",
path: "/zh-CN/components/badge",
},
{
id: 14,
title: "区块",
subTitle: "block",
path: "/zh-CN/components/block",
},
{
id: 15,
title: "分割",
subTitle: "line",
path: "/zh-CN/components/line",
},
{
id: 24,
title: "字段",
subTitle: "field",
path: "/zh-CN/components/field",
},
{
id: 25,
title: "文字提示",
subTitle: "tooltip",
path: "/zh-CN/components/tooltip",
},
{
id: 99,
title: "分步",
subTitle: "setup",
path: "/zh-CN/components/step",
},
],
},
{
id: 1,
title: "反馈",
children: [
{
id: 90,
title: "弹层",
subTitle: "modal",
path: "/zh-CN/components/modal",
},
{
id: 91,
title: "加载",
subTitle: "modal",
path: "/zh-CN/components/load",
},
{
id: 92,
title: "询问",
subTitle: "confirm",
path: "/zh-CN/components/confirm",
},
{
id: 93,
title: "消息",
subTitle: "msg",
path: "/zh-CN/components/msg",
},
],
},
];
const selected = ref(1); const selected = ref(1);
const handleClick = function (menu) { const handleClick = function (menu) {

14
example/src/view/ecology.vue
View File

@ -28,6 +28,20 @@
</ul> </ul>
</div> </div>
</fieldset> </fieldset>
<fieldset class="layui-elem-field layui-field-title">
<legend style="margin-bottom: 20px; text-align: center">后台模板</legend>
<div class="layui-field-box">
<ul class="layui-row layui-col-space6">
<li class="layui-col-sm24">
<div class="alone">
<a href="https://gitee.com/layui-vue/layui-vue-admin" target="_blank"
>layui - admin<cite>通用型 vue 3.0 后台模板</cite></a
>
</div>
</li>
</ul>
</div>
</fieldset>
</div> </div>
</template> </template>

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.3.2</cite></span> <span>当前版本：v<cite class="site-showv">0.3.4</cite></span>
<span <span
><router-link ><router-link
class="layui-inline site-down" class="layui-inline site-down"

340
example/src/view/utils/menus.ts Normal file
View File

@ -0,0 +1,340 @@
const menus = [
{
id: 1,
title: "通用",
children: [
{
id: 20,
title: "颜色",
subTitle: "color",
path: "/zh-CN/components/color",
},
{
id: 6,
title: "按钮",
subTitle: "button",
path: "/zh-CN/components/button",
},
{
id: 7,
title: "图标",
subTitle: "iconfont",
path: "/zh-CN/components/icon",
},
{
id: 10,
title: "动画",
subTitle: "animation",
path: "/zh-CN/components/animation",
},
],
},
{
id: 1,
title: "布局",
children: [
{
id: 4,
title: "布局",
subTitle: "layout",
path: "/zh-CN/components/layout",
},
{
id: 5,
title: "容器",
subTitle: "container",
path: "/zh-CN/components/container",
},
{
id: 11,
title: "栅格",
subTitle: "grid",
path: "/zh-CN/components/grid",
},
{
id: 8,
title: "面板",
subTitle: "panel",
path: "/zh-CN/components/panel",
},
{
id: 9,
title: "卡片",
subTitle: "card",
path: "/zh-CN/components/card",
},
{
id: 10,
title: "骨架",
subTitle: "skeleton",
path: "/zh-CN/components/skeleton",
},
],
},
{
id: 1,
title: "导航",
children: [
{
id: 16,
title: "菜单",
subTitle: "nav",
path: "/zh-CN/components/menu",
},
{
id: 17,
title: "面包屑",
subTitle: "breadcrumb",
path: "/zh-CN/components/breadcrumb",
},
{
id: 28,
title: "选项卡",
subTitle: "tab",
path: "/zh-CN/components/tab",
},
{
id: 27,
title: "下拉菜单",
subTitle: "dropdown",
path: "/zh-CN/components/dropdown",
},
{
id: 42,
title: "返回顶部",
subTitle: "backtop",
path: "/zh-CN/components/backtop",
},
],
},
{
id: 1,
title: "表单",
children: [
{
id: 36,
title: "开关",
subTitle: "switch",
path: "/zh-CN/components/switch",
},
{
id: 32,
title: "复选框",
subTitle: "checkbox",
path: "/zh-CN/components/checkbox",
},
{
id: 33,
title: "单选框",
subTitle: "radio",
path: "/zh-CN/components/radio",
},
{
id: 34,
title: "输入框",
subTitle: "input",
path: "/zh-CN/components/input",
},
{
id: 341,
title: "数字输入框",
subTitle: "inputNumber",
path: "/zh-CN/components/inputNumber",
},
{
id: 35,
title: "文本域",
subTitle: "textarea",
path: "/zh-CN/components/textarea",
},
{
id: 39,
title: "下拉选择",
subTitle: "select",
path: "/zh-CN/components/select",
},
{
id: 40,
title: "颜色选择器",
subTitle: "colorPicker",
path: "/zh-CN/components/colorPicker",
},
{
id: 29,
title: "图标选择器",
subTitle: "iconPicker",
path: "/zh-CN/components/iconPicker",
},
{
id: 26,
title: "评分",
subTitle: "rate",
path: "/zh-CN/components/rate",
},
{
id: 37,
title: "滑块",
subTitle: "slider",
path: "/zh-CN/components/slider",
},
{
id: 12,
title: "表单",
subTitle: "form",
path: "/zh-CN/components/form",
},
],
},
{
id: 1,
title: "展示",
children: [
{
id: 18,
title: "进度",
subTitle: "progress",
path: "/zh-CN/components/progress",
},
{
id: 19,
title: "时间线",
subTitle: "timeline",
path: "/zh-CN/components/timeline",
},
{
id: 21,
title: "折叠面板",
subTitle: "collapse",
path: "/zh-CN/components/collapse",
},
{
id: 22,
title: "表格",
subTitle: "table",
path: "/zh-CN/components/table",
},
{
id: 23,
title: "头像",
subTitle: "avatar",
path: "/zh-CN/components/avatar",
},
{
id: 25,
title: "空",
subTitle: "empty",
path: "/zh-CN/components/empty",
},
{
id: 29,
title: "分页",
subTitle: "page",
path: "/zh-CN/components/page",
},
{
id: 30,
title: "树形组件",
subTitle: "tree",
path: "/zh-CN/components/tree",
},
{
id: 31,
title: "穿梭框",
subTitle: "transfer",
path: "/zh-CN/components/transfer",
},
{
id: 38,
title: "轮播",
subTitle: "carousel",
path: "/zh-CN/components/carousel",
},
{
id: 43,
title: "数字滚动",
subTitle: "countUp",
path: "/zh-CN/components/countup",
},
],
},
{
id: 1,
title: "辅助",
children: [
{
id: 13,
title: "徽章",
subTitle: "badge",
path: "/zh-CN/components/badge",
},
{
id: 14,
title: "区块",
subTitle: "block",
path: "/zh-CN/components/block",
},
{
id: 15,
title: "分割",
subTitle: "line",
path: "/zh-CN/components/line",
},
{
id: 24,
title: "字段",
subTitle: "field",
path: "/zh-CN/components/field",
},
{
id: 25,
title: "文字提示",
subTitle: "tooltip",
path: "/zh-CN/components/tooltip",
},
{
id: 99,
title: "分步",
subTitle: "step",
path: "/zh-CN/components/step",
},
{
id: 100,
title: "分割面板",
subTitle: "splitPanel",
path: "/zh-CN/components/splitPanel",
},
],
},
{
id: 1,
title: "反馈",
children: [
{
id: 90,
title: "弹层",
subTitle: "modal",
path: "/zh-CN/components/modal",
},
{
id: 91,
title: "加载",
subTitle: "load",
path: "/zh-CN/components/load",
},
{
id: 92,
title: "询问",
subTitle: "confirm",
path: "/zh-CN/components/confirm",
},
{
id: 93,
title: "消息",
subTitle: "msg",
path: "/zh-CN/components/msg",
},
],
},
];
export default menus;

9
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@layui/layui-vue", "name": "@layui/layui-vue",
"version": "0.3.2", "version": "0.3.4",
"author": "sleeprite", "author": "sleeprite",
"license": "MIT", "license": "MIT",
"description": "a component library for Vue 3 base on layui-vue", "description": "a component library for Vue 3 base on layui-vue",
@ -28,7 +28,8 @@
"build:example": "vite build example", "build:example": "vite build example",
"lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix", "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
"lint:prettier": "prettier --write 'src/**/*'", "lint:prettier": "prettier --write 'src/**/*'",
"commit": "git cz" "commit": "git cz",
"prepublishOnly": "npm run build"
}, },
"dependencies": { "dependencies": {
"@layui/hooks-vue": "^0.1.6", "@layui/hooks-vue": "^0.1.6",
@ -60,14 +61,14 @@
"eslint-config-prettier": "^8.3.0", "eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.2.0", "eslint-plugin-vue": "^8.2.0",
"less": "^4.1.2",
"markdown-it-container": "^3.0.0", "markdown-it-container": "^3.0.0",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"prismjs": "^1.25.0", "prismjs": "^1.25.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"rollup": "^2.61.0", "rollup": "^2.61.0",
"typescript": "^4.5.2", "typescript": "^4.5.2",
"less": "^4.1.2", "vite": "2.7.10",
"vite": "2.7.6",
"vite-plugin-md": "^0.11.6" "vite-plugin-md": "^0.11.6"
}, },
"files": [ "files": [

12
src/css/layui.css
View File

@ -2885,12 +2885,10 @@ body .layui-table-tips .layui-layer-content {
line-height: 60px; line-height: 60px;
} }
.layui-nav .layui-nav-item a { .layui-nav .layui-nav-item > a {
display: block; display: block;
padding: 0 30px; padding: 0 30px;
color: #fff;
color: rgba(255, 255, 255, 0.7); color: rgba(255, 255, 255, 0.7);
-webkit-transition: all 0.3s;
} }
.layui-nav .layui-this:after, .layui-nav .layui-this:after,
@ -3010,18 +3008,18 @@ body .layui-table-tips .layui-layer-content {
line-height: 42px; line-height: 42px;
} }
.layui-nav-tree .layui-nav-item a { .layui-nav-tree .layui-nav-item > a {
position: relative; position: relative;
height: 42px; height: 42px;
line-height: 42px; line-height: 42px;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
padding: 5px 30px 5px 30px;
} }
.layui-nav-tree .layui-nav-item > a { .layui-nav-tree .layui-nav-item * {
padding-top: 5px; color: rgba(255, 255, 255, 0.7);
padding-bottom: 5px;
} }
.layui-nav-tree .layui-nav-more { .layui-nav-tree .layui-nav-more {

23
src/index.ts
View File

@ -9,6 +9,7 @@ import { layer } from "@layui/layer-vue";
import LayLayer from "./module/layer/index"; import LayLayer from "./module/layer/index";
import LayBacktop from "./module/backTop/index"; import LayBacktop from "./module/backTop/index";
import LayAvatar from "./module/avatar/index"; import LayAvatar from "./module/avatar/index";
import LayAvatarList from "./module/avatarList/index";
import LayRadio from "./module/radio/index"; import LayRadio from "./module/radio/index";
import LayButton from "./module/button/index"; import LayButton from "./module/button/index";
import LayButtonContainer from "./module/buttonContainer/index"; import LayButtonContainer from "./module/buttonContainer/index";
@ -70,8 +71,9 @@ import LaySkeleton from "./module/skeleton/index";
import LaySkeletonItem from "./module/skeletonItem/index"; import LaySkeletonItem from "./module/skeletonItem/index";
import LayStep from "./module/step/index"; import LayStep from "./module/step/index";
import LayStepItem from "./module/stepItem/index"; import LayStepItem from "./module/stepItem/index";
import LaySubMenu from "./module/subMenu/index"
const components: Record<string, IDefineComponent> = { export const components: Record<string, IDefineComponent> = {
LayRadio, LayRadio,
LayButton, LayButton,
LayIcon, LayIcon,
@ -107,6 +109,7 @@ const components: Record<string, IDefineComponent> = {
LayBreadcrumb, LayBreadcrumb,
LayBreadcrumbItem, LayBreadcrumbItem,
LayAvatar, LayAvatar,
LayAvatarList,
LayField, LayField,
LaySelect, LaySelect,
LayScroll, LayScroll,
@ -136,6 +139,7 @@ const components: Record<string, IDefineComponent> = {
LayCountUp, LayCountUp,
LayStep, LayStep,
LayStepItem, LayStepItem,
LaySubMenu
}; };
const install = (app: App, options?: InstallOptions): void => { const install = (app: App, options?: InstallOptions): void => {
@ -148,13 +152,9 @@ const install = (app: App, options?: InstallOptions): void => {
}; };
export { export {
LayStep,
LayStepItem,
LaySkeleton,
LaySkeletonItem,
LayRadio, LayRadio,
LayIcon,
LayButton, LayButton,
LayIcon,
LayBacktop, LayBacktop,
LayLayout, LayLayout,
LaySide, LaySide,
@ -187,6 +187,7 @@ export {
LayBreadcrumb, LayBreadcrumb,
LayBreadcrumbItem, LayBreadcrumbItem,
LayAvatar, LayAvatar,
LayAvatarList,
LayField, LayField,
LaySelect, LaySelect,
LayScroll, LayScroll,
@ -208,7 +209,15 @@ export {
LayCarousel, LayCarousel,
LayCarouselItem, LayCarouselItem,
LayColorPicker, LayColorPicker,
LayLayer LayLayer,
LayTooltip,
LayInputNumber,
LaySkeleton,
LaySkeletonItem,
LayCountUp,
LayStep,
LayStepItem,
LaySubMenu
}; };
export { layer }; export { layer };

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

@ -40,3 +40,8 @@
height: 28px; height: 28px;
width: 28px; width: 28px;
} }
.layui-avatar-list .layui-avatar {
margin-left: -10px;
display: inline-block;
}

9
src/module/avatarList/index.ts Normal file
View File

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

15
src/module/avatarList/index.vue Normal file
View File

@ -0,0 +1,15 @@
<script lang="ts">
export default {
name: "LayAvatarList",
};
</script>
<script setup lang="ts">
import { defineProps } from "vue";
</script>
<template>
<div class="layui-avatar-list">
<slot></slot>
</div>
</template>

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

@ -27,6 +27,14 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
nativeType: "button", nativeType: "button",
}); });
const emit = defineEmits(["click"]);
const onClick = (event : any) => {
if(!props.disabled) {
emit("click", event);
}
}
const classes = computed(() => { const classes = computed(() => {
return [ return [
props.type ? `layui-btn-${props.type}` : "", props.type ? `layui-btn-${props.type}` : "",
@ -48,6 +56,7 @@ const classes = computed(() => {
classes, classes,
]" ]"
:type="nativeType" :type="nativeType"
@click="onClick"
> >
<i <i
v-if="loading" v-if="loading"

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

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

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

@ -1,59 +1,35 @@
<template> <script lang="ts">
<li export default {
v-if="slots.default" name: "LayMenuItem"
class="layui-nav-item" }
:class="[openKeys.includes(id) && isTree ? 'layui-nav-itemed' : '']" </script>
>
<a href="javascript:void(0)" @click="openHandle">
{{ title }}
<i :class="[openKeys.includes(id) && !isTree ? 'layui-nav-mored' : '']" class="layui-icon layui-icon-down layui-nav-more"></i>
</a>
<dl
class="layui-nav-child"
:class="[
openKeys.includes(id) && !isTree ? 'layui-show' : '',
!isTree ? 'layui-anim layui-anim-upbit' : '',
]"
>
<slot></slot>
</dl>
</li>
<li <script setup lang="ts">
v-else import { defineProps, inject, Ref, useSlots } from "vue";
class="layui-nav-item"
:class="[selectedKey === id ? 'layui-this' : '']"
@click="selectHandle()"
>
<slot v-if="slots.title" name="title"></slot>
<a v-else href="javascript:void(0)">
{{ title }}
</a>
</li>
</template>
<script setup name="LayMenuItem" lang="ts">
import { defineProps, inject, Ref, ref, useSlots } from "vue";
const slots = useSlots(); const slots = useSlots();
const props = defineProps<{ const props = defineProps<{
id: string; id: string;
title: string; title?: string;
}>(); }>();
const isTree = inject("isTree");
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>; const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
const openHandle = function () {
if (openKeys.value.includes(props.id)) {
openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
} else {
openKeys.value.push(props.id);
}
};
const selectHandle = function () { const selectHandle = function () {
selectedKey.value = props.id; selectedKey.value = props.id;
}; };
</script> </script>
<template>
<li
class="layui-nav-item"
:class="[selectedKey === id ? 'layui-this' : '']"
@click="selectHandle()"
>
<a href="javascript:void(0)">
<slot v-if="slots.default"></slot>
<span v-else>{{ title }}</span>
</a>
</li>
</template>

223
src/module/page/index.vue
View File

@ -1,122 +1,163 @@
<template> <template>
<div class="layui-box layui-laypage layui-laypage-default"> <div class="layui-box layui-laypage layui-laypage-default">
<span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span <span v-if="showCount" class="layui-laypage-count"
><a >共 {{ total }} 条 {{ maxPage }} 页</span
href="javascript:;" >
class="layui-laypage-prev" <a
:class="[currentPage === 1 ? 'layui-disabled' : '']" href="javascript:;"
@click="prev()" class="layui-laypage-prev"
><slot v-if="slots.prev" name="prev"></slot> :class="[currentPage === 1 ? 'layui-disabled' : '']"
<template v-else>上一页</template></a @click="prev()"
> >
<template v-if="showPage"> <slot v-if="slots.prev" name="prev"></slot>
<template v-for="index of totalPage" :key="index"> <template v-else>上一页</template>
<span v-if="index === currentPage" class="layui-laypage-curr" </a>
><em <template v-if="showPage">
class="layui-laypage-em" <template v-for="index of totalPage" :key="index">
:class="[theme ? 'layui-bg-' + theme : '']" <span v-if="index === currentPage" class="layui-laypage-curr">
></em <em
><em>{{ index }}</em></span class="layui-laypage-em"
> :class="[theme ? 'layui-bg-' + theme : '']"
<a v-else href="javascript:;" @click="jump(index)"> ></em>
{{ index }} <em>{{ index }}</em>
</a> </span>
</template> <a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
</template> </template>
</template>
<a <a
href="javascript:;" href="javascript:;"
class="layui-laypage-next" class="layui-laypage-next"
:class="[currentPage === totalPage ? 'layui-disabled' : '']" :class="[currentPage === maxPage ? 'layui-disabled' : '']"
@click="next()" @click="next()"
><slot v-if="slots.next" name="next"></slot> >
<template v-else>下一页</template></a <slot v-if="slots.next" name="next"></slot>
><span v-if="showLimit" class="layui-laypage-limits" <template v-else>下一页</template>
><select v-model="inlimit"> </a>
<option value="10">10 条/页</option> <span v-if="showLimit" class="layui-laypage-limits">
<option value="20">20 条/页</option> <select v-model="inlimit">
<option value="30">30 条/页</option> <option v-for="val of limits" :key="val" :value="val">
<option value="40">40 条/页</option> {{ val }} 条/页
<option value="50">50 条/页</option> </option>
</select></span </select>
><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh" </span>
><i class="layui-icon layui-icon-refresh"></i></a <a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
><span v-if="showSkip" class="layui-laypage-skip" <i class="layui-icon layui-icon-refresh"></i>
>到第<input </a>
v-model="currentPageShow" <span v-if="showSkip" class="layui-laypage-skip">
type="number" 到第
class="layui-input layui-input-number" <input
/>页<button type="button" class="layui-laypage-btn" @click="jumpPage()"> v-model="currentPageShow"
确定 @keypress.enter="jumpPage()"
</button></span type="number"
> class="layui-input layui-input-number"
</div> />页
<button
type="button"
class="layui-laypage-btn"
@click="jumpPage()"
:disabled="currentPageShow > maxPage"
>
确定
</button>
</span>
</div>
</template> </template>
<script setup name="LayPage" lang="ts"> <script setup name="LayPage" lang="ts">
import { defineProps, Ref, ref, watch, useSlots, computed, ComputedRef } from "vue"; import { defineProps, Ref, ref, watch, useSlots, computed } from "vue";
const slots = useSlots(); const slots = useSlots();
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
total: number; total: number;
limit: number; limit: number;
theme?: string; theme?: string;
showPage?: boolean | string; showPage?: boolean | string;
showSkip?: boolean | string; showSkip?: boolean | string;
showCount?: boolean | string; showCount?: boolean | string;
showLimit?: boolean | string; showLimit?: boolean | string;
showInput?: boolean | string; showInput?: boolean | string;
showRefresh?: boolean | string; showRefresh?: boolean | string;
}>(), pages?: number;
{ limits?: number[];
limit: 10, }>(),
theme: "green", {
showPage: false, limit: 10,
showSkip: false, theme: "green",
showCount: false, showPage: false,
showLimit: true, showSkip: false,
showInput: false, showCount: false,
showRefresh: false, showLimit: true,
} showInput: false,
showRefresh: false,
pages: 10,
limits: () => [10, 20, 30, 40, 50],
}
); );
const limits = ref(props.limits);
const inlimit = ref(props.limit); const pages = props.pages / 2;
const totalPage = ref(Math.ceil(props.total / inlimit.value)); const inlimit = computed({
get() {
return props.limit;
},
set(v: number) {
emit("limit", v);
},
});
const maxPage = ref(0);
const totalPage = computed(() => {
maxPage.value = Math.ceil(props.total / props.limit);
let r: number[] = [],
start =
maxPage.value <= props.pages
? 1
: currentPage.value > pages
? currentPage.value - pages
: 1;
for (let i = start; ; i++) {
if (r.length >= props.pages || i > maxPage.value) {
break;
}
r.push(i);
}
return r;
});
const currentPage: Ref<number> = ref(1); const currentPage: Ref<number> = ref(1);
const currentPageShow: Ref<number> = ref(currentPage.value); const currentPageShow: Ref<number> = ref(currentPage.value);
const emit = defineEmits(["jump"]);
const emit = defineEmits(["jump", "limit"]);
const prev = function () { const prev = function () {
if (currentPage.value === 1) { if (currentPage.value === 1) {
return; return;
} }
currentPage.value--; currentPage.value--;
}; };
const next = function () { const next = function () {
if (currentPage.value === totalPage.value) { if (currentPage.value === maxPage.value) {
return; return;
} }
currentPage.value++; currentPage.value++;
}; };
const jump = function (page: number) { const jump = function (page: number) {
currentPage.value = page; currentPage.value = page;
}; };
const jumpPage = function () { const jumpPage = function () {
currentPage.value = currentPageShow.value; currentPage.value = currentPageShow.value;
}; };
watch(inlimit, function () { watch(inlimit, function () {
currentPage.value = 1; currentPage.value = 1;
totalPage.value = Math.ceil(props.total / inlimit.value); // maxPage.value = Math.ceil(props.total / inlimit.value);
}); });
watch(currentPage, function () { watch(currentPage, function () {
currentPageShow.value = currentPage.value; currentPageShow.value = currentPage.value;
emit("jump", { current: currentPage.value }); emit("jump", { current: currentPage.value });
}); });
</script> </script>

340
src/module/select/index.vue
View File

@ -1,91 +1,91 @@
<template> <template>
<div <div
ref="selectRef" ref="selectRef"
class="layui-unselect layui-form-select" class="layui-unselect layui-form-select"
:class="{ 'layui-form-selected': openState }" :class="{ 'layui-form-selected': openState }"
> >
<div class="layui-select-title" @click="open"> <div class="layui-select-title" @click="open">
<input <input
type="text" type="text"
:placeholder=" :placeholder="
selectItem.value !== null && selectItem.value !== null &&
Array.isArray(selectItem.value) && Array.isArray(selectItem.value) &&
selectItem.value.length > 0 selectItem.value.length > 0
? '' ? ''
: emptyMessage ?? placeholder : emptyMessage ?? placeholder
" "
:disabled="disabled" :disabled="disabled"
readonly readonly
:value=" :value="
!selectItem.multiple && selectItem.value !== null !selectItem.multiple && selectItem.value !== null
? selectItem.label ? selectItem.label
: null : null
" "
:name="name" :name="name"
:class="[ :class="[
'layui-input', 'layui-input',
'layui-unselect', 'layui-unselect',
{ 'layui-disabled': disabled }, { 'layui-disabled': disabled },
]" ]"
/> />
<i :class="['layui-edge', { 'layui-disabled': disabled }]"></i> <i :class="['layui-edge', { 'layui-disabled': disabled }]"></i>
<!-- 多选 --> <!-- 多选 -->
<div <div
v-if="selectItem.multiple && Array.isArray(selectItem.label)" v-if="selectItem.multiple && Array.isArray(selectItem.label)"
class="layui-multiple-select-row" class="layui-multiple-select-row"
> >
<div class="layui-multiple-select-badge"> <div class="layui-multiple-select-badge">
<template v-for="(item, index) in selectItem.label" :key="index"> <template v-for="(item, index) in selectItem.label" :key="index">
<lay-badge theme="green"> <lay-badge theme="green">
<span>{{ item }}</span> <span>{{ item }}</span>
<i <i
:class="['layui-icon', { 'layui-icon-close': true }]" :class="['layui-icon', { 'layui-icon-close': true }]"
v-if=" v-if="
!disabled && !disabled &&
!( !(
Array.isArray(selectItem.value) && Array.isArray(selectItem.value) &&
selectItem.value.length > 0 && selectItem.value.length > 0 &&
disabledItemMap[selectItem.value[index]] disabledItemMap[selectItem.value[index]]
) )
" "
@click=" @click="
removeItemHandle($event, { removeItemHandle($event, {
label: item, label: item,
value: Array.isArray(selectItem.value) value: Array.isArray(selectItem.value)
? selectItem.value[index] ? selectItem.value[index]
: null, : null,
}) })
" "
> >
</i> </i>
</lay-badge> </lay-badge>
</template> </template>
</div> </div>
</div> </div>
</div> </div>
<dl class="layui-anim layui-anim-upbit"> <dl class="layui-anim layui-anim-upbit">
<!-- 多选不支持空提示 --> <!-- 多选不支持空提示 -->
<template v-if="!multiple && showEmpty"> <template v-if="!multiple && showEmpty">
<lay-select-option :value="null" :label="emptyMessage ?? placeholder" /> <lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
</template> </template>
<slot></slot> <slot></slot>
</dl> </dl>
</div> </div>
</template> </template>
<script setup name="LaySelect" lang="ts"> <script setup name="LaySelect" lang="ts">
import "./index.less"; import "./index.less";
import LaySelectOption from "../selectOption/index.vue"; import LaySelectOption from "../selectOption/index.vue";
import { import {
defineProps, defineProps,
provide, provide,
isProxy, isProxy,
ref, ref,
watch, watch,
computed, computed,
reactive, reactive,
toRefs, toRefs,
Ref, Ref,
} from "vue"; } from "vue";
import { useClickOutside } from "@layui/hooks-vue"; import { useClickOutside } from "@layui/hooks-vue";
import { SelectItem } from "../type"; import { SelectItem } from "../type";
@ -94,115 +94,127 @@ const selectRef = ref<null | HTMLElement>(null);
const isClickOutside = useClickOutside(selectRef); const isClickOutside = useClickOutside(selectRef);
watch(isClickOutside, () => { watch(isClickOutside, () => {
if (isClickOutside.value) { if (isClickOutside.value) {
openState.value = false; openState.value = false;
} }
}); });
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
modelValue?: string | number | [] | null; modelValue?: string | number | [] | null;
name?: string; name?: string;
placeholder?: string; placeholder?: string;
disabled?: boolean; disabled?: boolean;
showEmpty?: boolean; showEmpty?: boolean;
emptyMessage?: string; emptyMessage?: string;
multiple?: boolean; multiple?: boolean;
}>(), }>(),
{ {
modelValue: null, modelValue: null,
placeholder: "请选择", placeholder: "请选择",
disabled: false, disabled: false,
showEmpty: true, showEmpty: true,
multiple: false, multiple: false,
} }
); );
const openState = ref(false); const openState = ref(false);
const open = function () { const open = function () {
// 禁用 // 禁用
if (props.disabled) { if (props.disabled) {
openState.value = false; openState.value = false;
return; return;
} }
openState.value = !openState.value; openState.value = !openState.value;
}; };
const emit = defineEmits(["update:modelValue", "change"]); const emit = defineEmits(["update:modelValue", "change"]);
const selectItem = ref<SelectItem>({ const selectItem = ref<SelectItem>({
value: !props.multiple value: !props.multiple
? props.modelValue ? props.modelValue
: props.modelValue : props.modelValue
? ([] as any[]).concat(props.modelValue) ? ([] as any[]).concat(props.modelValue)
: [], : [],
label: props.multiple ? [] : null, label: props.multiple ? [] : null,
multiple: props.multiple, multiple: props.multiple,
} as SelectItem); } as SelectItem);
watch( watch(
() => selectItem.value.value, () => selectItem.value.value,
(val) => { (val) => {
emit("update:modelValue", val); emit("update:modelValue", val);
emit("change", val); emit("change", val);
}, },
{ {
deep: true, deep: true,
} }
); );
watch( watch(props, () => {
() => props.modelValue, let value = props.modelValue;
(value) => { if (props.multiple) {
selectItem.value.value = value; if (Array.isArray(value)) {
if (!value && value !== 0) { selectItem.value.value = value;
props.multiple && (selectItem.value.value = []); selectItem.value.label = value.map((o) => ItemsMap.value[o]);
selectItem.value.label = props.multiple ? [] : null; } else {
} console.error("多选时请传入数组值");
} }
); } else {
selectItem.value.value = value;
//@ts-ignore
selectItem.value.label = ItemsMap.value[value] || "";
}
});
// 禁止操作子项 // 禁止操作子项
const disabledItemMap: { [key: string | number]: boolean } = {}; const disabledItemMap: { [key: string | number]: boolean } = {};
const selectItemHandle = function ( const selectItemHandle = function (
_selectItem: SelectItem, _selectItem: SelectItem,
isChecked?: boolean isChecked?: boolean
) { ) {
if (!props.multiple) { if (!props.multiple) {
openState.value = false; openState.value = false;
} }
disabledItemMap[_selectItem.value as string | number] = disabledItemMap[_selectItem.value as string | number] =
_selectItem.disabled as boolean; _selectItem.disabled as boolean;
if (typeof isChecked !== "boolean") { if (typeof isChecked !== "boolean") {
props.multiple props.multiple
? (selectItem.value.label as any[]).push(_selectItem.label) ? (selectItem.value.label as any[]).push(_selectItem.label)
: (selectItem.value.label = _selectItem.label); : (selectItem.value.label = _selectItem.label);
return; return;
} }
let values = selectItem.value.value; let values = selectItem.value.value;
if (props.multiple && Array.isArray(values)) { if (props.multiple && Array.isArray(values)) {
const _values = values as any[]; const _values = values as any[];
const _labels = selectItem.value.label as any[]; const _labels = selectItem.value.label as any[];
if (isChecked) { if (isChecked) {
_values.push(_selectItem.value); _values.push(_selectItem.value);
_labels.push(_selectItem.label); _labels.push(_selectItem.label);
} else { } else {
_values.splice(_values.indexOf(_selectItem.value), 1); _values.splice(_values.indexOf(_selectItem.value), 1);
_labels.splice(_labels.indexOf(_selectItem.label), 1); _labels.splice(_labels.indexOf(_selectItem.label), 1);
} }
selectItem.value.value = _values; selectItem.value.value = _values;
selectItem.value.label = _labels; selectItem.value.label = _labels;
} else { } else {
selectItem.value.value = _selectItem.value; selectItem.value.value = _selectItem.value;
selectItem.value.label = _selectItem.label; selectItem.value.label = _selectItem.label;
} }
}; };
const removeItemHandle = function (e: MouseEvent, _selectItem: SelectItem) { const removeItemHandle = function (e: MouseEvent, _selectItem: SelectItem) {
e.stopPropagation(); e.stopPropagation();
selectItemHandle(_selectItem, false); selectItemHandle(_selectItem, false);
};
const ItemsMap: Ref<{ [index: string]: string }> = ref({});
const selectItemPush = function (p: SelectItem) {
if (p.value !== null) {
//@ts-ignore
ItemsMap.value[p.value] = p.label;
}
}; };
provide("selectItemHandle", selectItemHandle); provide("selectItemHandle", selectItemHandle);
provide("selectItem", selectItem); provide("selectItem", selectItem);
provide("selectItemPush", selectItemPush);
</script> </script>

104
src/module/selectOption/index.vue
View File

@ -1,65 +1,81 @@
<template> <template>
<dd <dd
:value="value" :value="value"
:class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]" :class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]"
@click="selectHandle" @click="selectHandle"
> >
<template v-if="selectItem.multiple"> <template v-if="selectItem.multiple">
<lay-checkbox <lay-checkbox
skin="primary" skin="primary"
v-model="selected" v-model="selected"
@change="selectHandle" @change="selectHandle"
label="" label=""
/> />
</template> </template>
<slot>{{ label }}</slot> <slot>{{ label }}</slot>
</dd> </dd>
</template> </template>
<script lang="ts"> <script lang="ts">
export default { export default {
name: "LaySelectOption", name: "LaySelectOption",
}; };
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import LayCheckbox from "../checkbox"; import LayCheckbox from "../checkbox";
import { SelectItem, SelectItemHandle } from "../type"; import { SelectItem, SelectItemHandle, SelectItemPush } from "../type";
import { computed, defineProps, inject, onMounted, Ref } from "vue"; import { computed, defineProps, inject, onMounted, Ref } from "vue";
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
value: string | null | undefined; value: string | null | undefined;
label?: string; label?: string;
disabled?: boolean; disabled?: boolean;
}>(), }>(),
{ {
disabled: false, disabled: false,
} }
); );
const selectItemHandle = inject("selectItemHandle") as SelectItemHandle; const selectItemHandle = inject("selectItemHandle") as SelectItemHandle;
const selectItem = inject("selectItem") as Ref<SelectItem>; const selectItem = inject("selectItem") as Ref<SelectItem>;
const selectItemPush = inject("selectItemPush") as Ref<SelectItemPush>;
const selectHandle = function () { const selectHandle = function () {
!props.disabled && callSelectItemHandle(!selected.value); !props.disabled && callSelectItemHandle(!selected.value);
} };
const callSelectItemHandle = function(isChecked ?: boolean){ const callSelectItemHandle = function (isChecked?: boolean) {
selectItemHandle({ // console.log("callSelectItemHandle");
value : props.value, selectItemHandle(
label : props.label, {
disabled : props.disabled value: props.value,
}, isChecked); label: props.label,
} disabled: props.disabled,
},
isChecked
);
};
const selected = computed({ const selected = computed({
get(){ get() {
const selectValues = selectItem.value.value; const selectValues = selectItem.value.value;
if (Array.isArray(selectValues)) { if (Array.isArray(selectValues)) {
return (selectValues as any[]).indexOf(props.value) > -1; return (selectValues as any[]).indexOf(props.value) > -1;
} }
return selectItem.value.value === props.value return selectItem.value.value === props.value;
}, },
set(val){} set(val) {},
}) });
onMounted(() => selected.value && callSelectItemHandle()) const callSelectItemPush = function () {
let item = {
value: props.value,
label: props.label,
disabled: props.disabled,
};
selectItemPush(item);
};
onMounted(() => {
callSelectItemPush();
selected.value && callSelectItemHandle();
});
</script> </script>

175
src/module/step/index.less
View File

@ -1,11 +1,16 @@
@width-height-pace: 20px; @width-height-pace: 24px;
@step-color: #5FB878; @step-color: @step-success-color;
@step-fail-color: #FF5722;
@step-primary-color: #1E9FFF;
@step-warning-color: #FFB800;
@step-success-color: #5FB878;
.lay-step{ .lay-step{
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
.lay-step-item{ .lay-step-item{
flex-grow: 1; flex-grow: 1;
position: relative;
} }
.is-item-center{ .is-item-center{
@ -16,9 +21,10 @@
flex-grow: 0 !important; flex-grow: 0 !important;
} }
.lay-step-item-pace{ .lay-step-item-pace{
cursor: pointer;
width: @width-height-pace; width: @width-height-pace;
height: @width-height-pace; height: @width-height-pace;
border: 2px #8D8D8D solid; border: 1px #8D8D8D solid;
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
line-height: @width-height-pace; line-height: @width-height-pace;
@ -28,69 +34,88 @@
margin: 0 auto; margin: 0 auto;
} }
.lay-step-item-active{ .lay-step-item-active{
border: 2px @step-color solid; border: 1px @step-color solid;
color: #FFFFFF; color: @step-color;
background: @step-color;
} }
.lay-step-item-wait{ .lay-step-item-wait{
border: 2px #000000 solid; border: 1px #000000 solid;
color: #000000; color: #000000;
} }
.lay-step-item--success { .lay-step-item--success {
border: 2px @step-color solid; border: 1px @step-color solid;
color: #FFFFFF; color: #FFFFFF;
background: @step-color; background: @step-color;
} }
.lay-step-item--fail{ .lay-step-item--fail{
border: 2px #FF5722 solid; border: 1px @step-fail-color solid;
color: #FFFFFF; color: #FFFFFF;
background: #FF5722; background: @step-fail-color;
} }
.lay-step-item--warning{ .lay-step-item--warning{
border: 2px #FFB800 solid; border: 1px @step-warning-color solid;
color: #FFFFFF; color: #FFFFFF;
background: #FFB800; background: @step-warning-color;
} }
.lay-step-item--primary{ .lay-step-item--primary{
border: 2px #1E9FFF solid; border: 1px @step-primary-color solid;
color: #FFFFFF; color: #FFFFFF;
background: #1E9FFF; background: @step-primary-color;
} }
.lay-step-item-success { .lay-step-item-success {
border: 2px @step-color solid; border: 1px @step-color solid;
color: #FFFFFF; color: #FFFFFF;
background: @step-color; background: @step-color;
} }
.lay-step-item-fail{ .lay-step-item-fail{
border: 2px #FF5722 solid; border: 1px @step-fail-color solid;
color: #FFFFFF; color: #FFFFFF;
background: #FF5722; background: @step-fail-color;
} }
.lay-step-item-warning{ .lay-step-item-warning{
border: 2px #FFB800 solid; border: 1px @step-warning-color solid;
color: #FFFFFF; color: #FFFFFF;
background: #FFB800; background: @step-warning-color;
} }
.lay-step-item-primary{ .lay-step-item-primary{
border: 2px #1E9FFF solid; border: 1px @step-primary-color solid;
color: #FFFFFF; color: #FFFFFF;
background: #1E9FFF; background: @step-primary-color;
} }
.lay-step-item-content{ .lay-step-item-content{
color: #8D8D8D; color: #8D8D8D;
cursor: pointer;
.lay-step-item-content-title{ .lay-step-item-content-title{
font-weight: bold; font-weight: bold;
font-size: 16px; font-size: 16px;
} }
} }
.lay-step-item-content-row {
color: #8D8D8D;
position: absolute;
top: 5px;
left: 24px;
width: calc( 100% - 26px );
.lay-step-item-content-title{
word-wrap:break-word;
max-width: calc(100% - 8px);
font-weight: bold;
display: inline-block;
margin-left: 2px;
background: #ffffff;
padding: 0 8px;
font-size: 16px;
}
}
.lay-step-item-content-active{ .lay-step-item-content-active{
color: @step-color; color: @step-color;
} }
@ -99,13 +124,13 @@
color: @step-color; color: @step-color;
} }
.lay-step-item-content--fail{ .lay-step-item-content--fail{
color: #FF5722; color: @step-fail-color;
} }
.lay-step-item-content--warning{ .lay-step-item-content--warning{
color: #FFB800; color: @step-warning-color;
} }
.lay-step-item-content--primary{ .lay-step-item-content--primary{
color: #1E9FFF; color: @step-primary-color;
} }
.lay-step-item-content-wait{ .lay-step-item-content-wait{
@ -115,13 +140,13 @@
color: @step-color; color: @step-color;
} }
.lay-step-item-content-fail{ .lay-step-item-content-fail{
color: #FF5722; color: @step-fail-color;
} }
.lay-step-item-content-warning{ .lay-step-item-content-warning{
color: #FFB800; color: @step-warning-color;
} }
.lay-step-item-content-primary{ .lay-step-item-content-primary{
color: #1E9FFF; color: @step-primary-color;
} }
@ -134,9 +159,9 @@
content: ""; content: "";
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); // transform: translateY(-50%);
display: block; display: block;
height: 2px; height: 1px;
width: 100%; width: 100%;
background: #C9C5C5; background: #C9C5C5;
} }
@ -146,22 +171,99 @@
.lay-step-item-line-active:before { .lay-step-item-line-active:before {
transition: background 150ms; transition: background 150ms;
background: #5FB878 !important; background: @step-success-color !important;
} }
.lay-step-item-line-fail:before { .lay-step-item-line-fail:before {
transition: background 150ms; transition: background 150ms;
background: #FF5722 !important; background: @step-fail-color !important;
} }
.lay-step-item-line-warning:before { .lay-step-item-line-warning:before {
transition: background 150ms; transition: background 150ms;
background: #FFB800 !important; background: @step-warning-color !important;
} }
.lay-step-item-line-primary:before { .lay-step-item-line-primary:before {
transition: background 150ms; transition: background 150ms;
background: #1E9FFF !important; background: @step-primary-color !important;
}
.lay-step-simple{
height: 30px;
padding: 0 8px;
line-height: 30px;
color: #ffffff;
background-color: #cecece;
cursor: pointer;
}
.lay-step-item-simple{
padding: 0 18px;
}
.lay-step-item-simple:after{
content: "";
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
border: 15px solid;
border-color: transparent transparent transparent #cecece;
background-color: transparent;
border-radius: 0;
display: block;
height: auto;
width: auto;
}
.lay-step-item-simple:before{
content: "";
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
border: 15px solid;
border-color: transparent transparent transparent #cecece;
background-color: transparent;
border-radius: 0;
display: block;
height: auto;
width: auto;
}
.lay-step-item-simple-border:before{
left: 1px;
border-color: transparent transparent transparent #ffffff;
}
.lay-step-item-simple-active {
background-color: #9fd4ae;
}
.lay-step-item-simple-success {
background-color: @step-color;
}
.lay-step-item-simple-fail {
background-color: @step-fail-color;
}
.lay-step-item-simple-warning {
background-color: @step-warning-color;
}
.lay-step-item-simple-primary {
background-color: @step-primary-color;
}
.lay-step-item-simple-active-border:after{
border-color: transparent transparent transparent #9fd4ae !important;
}
.lay-step-item-simple-success-border:after{
border-color: transparent transparent transparent @step-success-color!important;
}
.lay-step-item-simple-fail-border:after{
border-color: transparent transparent transparent @step-fail-color!important;
}
.lay-step-item-simple-warning-border:after{
border-color: transparent transparent transparent @step-warning-color!important;
}
.lay-step-item-simple-primary-border:after{
border-color: transparent transparent transparent @step-primary-color!important;
} }
} }
@ -179,12 +281,15 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 50%; left: 50%;
transform: translateX(-50%); // transform: translateX(-50%);
display: block; display: block;
width: 2px; width: 1px;
height: 100%; height: 100%;
background: #C9C5C5; background: #C9C5C5;
} }
.lay-step-item-content{
margin-left: 8px;
}
.is-vertical{ .is-vertical{
display: flex; display: flex;
} }

22
src/module/step/index.vue
View File

@ -5,7 +5,14 @@
</template> </template>
<script setup name="layStep" lang="ts"> <script setup name="layStep" lang="ts">
import { ref, watch, provide, defineProps, withDefaults } from "vue"; import {
ref,
watch,
provide,
defineProps,
withDefaults,
defineEmits,
} from "vue";
import "./index.less"; import "./index.less";
export interface LayStepProps { export interface LayStepProps {
@ -14,6 +21,8 @@ export interface LayStepProps {
direction?: string; direction?: string;
space?: string; space?: string;
currentStatus?: string; currentStatus?: string;
composition?: string;
simple?: boolean;
} }
const props = withDefaults(defineProps<LayStepProps>(), { const props = withDefaults(defineProps<LayStepProps>(), {
@ -21,11 +30,19 @@ const props = withDefaults(defineProps<LayStepProps>(), {
center: false, center: false,
direction: "horizontal", direction: "horizontal",
space: "auto", space: "auto",
currentStatus: "primary", currentStatus: "success",
composition: "default",
simple: false,
}); });
const steps = ref([]); const steps = ref([]);
const emits = defineEmits(["onChange"]);
const change = (index) => {
emits("onChange", index - 1);
};
watch(steps, () => { watch(steps, () => {
steps.value.forEach( steps.value.forEach(
(instance: { setIndex: (arg0: any) => void }, index: any) => { (instance: { setIndex: (arg0: any) => void }, index: any) => {
@ -37,6 +54,7 @@ watch(steps, () => {
provide("LayStep", { provide("LayStep", {
props, props,
steps, steps,
change,
}); });
</script> </script>

73
src/module/stepItem/index.vue
View File

@ -1,8 +1,9 @@
<template> <template>
<div <div
v-if="!simple"
:class="[ :class="[
'lay-step-item', 'lay-step-item',
isLast && !isCenter ? 'lay-step-item-last' : '', isLast && !isCenter && composition !== 'row' ? 'lay-step-item-last' : '',
isCenter ? 'is-item-center' : '', isCenter ? 'is-item-center' : '',
isVertical ? 'is-vertical' : '', isVertical ? 'is-vertical' : '',
]" ]"
@ -27,6 +28,7 @@
isWait ? 'lay-step-item-wait' : '', isWait ? 'lay-step-item-wait' : '',
isCenter ? 'is-center' : '', isCenter ? 'is-center' : '',
]" ]"
@click="onChange(index + 1)"
> >
<slot name="pace"> <slot name="pace">
<template v-if="icon"> <template v-if="icon">
@ -42,20 +44,40 @@
</slot> </slot>
</div> </div>
</div> </div>
<slot> <div
<div :class="[
:class="[ 'lay-step-item-content',
'lay-step-item-content', composition === 'row' ? 'lay-step-item-content-row' : '',
isActive ? `lay-step-item-content-active` : '', isActive ? `lay-step-item-content-active` : '',
isCurrent === index ? `lay-step-item-content--${currentStatus}` : '', isCurrent === index ? `lay-step-item-content--${currentStatus}` : '',
status ? `lay-step-item-content-${status}` : '', status ? `lay-step-item-content-${status}` : '',
isWait ? 'lay-step-item-content-wait' : '', isWait ? 'lay-step-item-content-wait' : '',
]" ]"
> @click="onChange(index + 1)"
>
<slot>
<div class="lay-step-item-content-title">{{ title }}</div> <div class="lay-step-item-content-title">{{ title }}</div>
<p>{{ content }}</p> <p>{{ content }}</p>
</div> </slot>
</slot> </div>
</div>
<div
v-else
:class="[
'lay-step-item',
'lay-step-simple',
!isStart ? 'lay-step-item-simple' : '',
'lay-step-item-simple-border',
isActive ? 'lay-step-item-simple-active' : '',
isCurrent === index ? `lay-step-item-simple-${currentStatus}` : '',
isCurrentBorder === index
? `lay-step-item-simple-${currentStatus}-border`
: '',
isSimpleActive ? 'lay-step-item-simple-active-border' : '',
]"
@click="onChange(index + 1)"
>
<slot>{{ index + 1 }}.{{ title }}</slot>
</div> </div>
</template> </template>
@ -95,6 +117,10 @@ const setIndex = (val: number) => {
index.value = val; index.value = val;
}; };
const onChange = (index) => {
parents.change(index);
};
const stepsCount = computed(() => { const stepsCount = computed(() => {
return parents.steps.value.length; return parents.steps.value.length;
}); });
@ -102,10 +128,21 @@ const stepsCount = computed(() => {
const currentStatus = computed(() => { const currentStatus = computed(() => {
return parents.props.currentStatus; return parents.props.currentStatus;
}); });
const simple = computed(() => {
return parents.props.simple;
});
const composition = computed(() => {
return parents.props.composition;
});
const isCurrent = computed(() => { const isCurrent = computed(() => {
return parents.props.active; return parents.props.active;
}); });
console.log(isCurrent);
const isCurrentBorder = computed(() => {
return parents.props.active + 1;
});
const space = computed(() => { const space = computed(() => {
return parents.props.space; return parents.props.space;
}); });
@ -126,6 +163,10 @@ const isWait: ComputedRef<boolean> = computed(() => {
return index.value === parents.props.active + 1; return index.value === parents.props.active + 1;
}); });
const isSimpleActive: ComputedRef<boolean> = computed(() => {
return index.value - 1 <= parents.props.active;
});
const isActive: ComputedRef<boolean> = computed(() => { const isActive: ComputedRef<boolean> = computed(() => {
return index.value <= parents.props.active; return index.value <= parents.props.active;
}); });
@ -135,6 +176,10 @@ const isLast: ComputedRef<boolean> = computed(() => {
); );
}); });
const isStart: ComputedRef<boolean> = computed(() => {
return parents.steps.value[0]?.itemId === currentInstance.uid;
});
const stepItemState = reactive({ const stepItemState = reactive({
itemId: computed(() => currentInstance?.uid), itemId: computed(() => currentInstance?.uid),
setIndex, setIndex,

2
src/module/count/index.ts → src/module/subMenu/index.ts
View File

@ -3,7 +3,7 @@ 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 || "laySubMenu", Component);
}; };
export default Component as IDefineComponent; export default Component as IDefineComponent;

57
src/module/subMenu/index.vue Normal file
View File

@ -0,0 +1,57 @@
<script lang="ts">
export default {
name: "LaySubMenu",
};
</script>
<script setup lang="ts">
import { computed, defineProps, inject, Ref, useSlots } from "vue";
const slots = useSlots();
const props = defineProps<{
id: string;
title?: string;
}>();
const isTree = inject("isTree");
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
const openKeys: Ref<string[]> = inject("openKeys") as Ref<string[]>;
const openHandle = function () {
if (openKeys.value.includes(props.id)) {
openKeys.value.splice(openKeys.value.indexOf(props.id), 1);
} else {
openKeys.value.push(props.id);
}
};
const isOpen = computed(() => {
return openKeys.value.includes(props.id);
});
</script>
<template>
<li
class="layui-nav-item"
:class="[isOpen && isTree ? 'layui-nav-itemed' : '']"
>
<a href="javascript:void(0)" @click="openHandle()">
<slot v-if="slots.title" name="title"></slot>
<span v-else>{{ title }}</span>
<i
:class="[isOpen && !isTree ? 'layui-nav-mored' : '']"
class="layui-icon layui-icon-down layui-nav-more"
></i>
</a>
<dl
class="layui-nav-child"
:class="[
isOpen && !isTree ? 'layui-show' : '',
!isTree ? 'layui-anim layui-anim-upbit' : '',
]"
>
<slot></slot>
</dl>
</li>
</template>

180
src/module/tree/index.less Normal file
View File

@ -0,0 +1,180 @@
.layui-tree {
line-height: 22px;
}
.layui-tree .layui-form-checkbox {
margin: 0 !important;
}
.layui-tree-set {
width: 100%;
position: relative;
}
.layui-tree-pack {
display: none;
padding-left: 20px;
position: relative;
}
.layui-tree-iconClick,
.layui-tree-main {
display: inline-block;
vertical-align: middle;
}
.layui-tree-line .layui-tree-pack {
padding-left: 27px;
}
.layui-tree-line .layui-tree-set .layui-tree-set:after {
content: "";
position: absolute;
top: 14px;
left: -9px;
width: 17px;
height: 0;
border-top: 1px dotted #c0c4cc;
}
.layui-tree-entry {
position: relative;
padding: 3px 0;
height: 20px;
white-space: nowrap;
}
.layui-tree-entry:hover {
background-color: #eee;
}
.layui-tree-line .layui-tree-entry:hover {
background-color: rgba(0, 0, 0, 0);
}
.layui-tree-line .layui-tree-entry:hover .layui-tree-txt {
color: #999;
text-decoration: underline;
transition: 0.3s;
}
.layui-tree-main {
cursor: pointer;
padding-right: 10px;
}
.layui-tree-line .layui-tree-set:before {
content: "";
position: absolute;
top: 0;
left: -9px;
width: 0;
height: 100%;
border-left: 1px dotted #c0c4cc;
}
.layui-tree-line .layui-tree-set.layui-tree-setLineShort:before {
height: 13px;
}
.layui-tree-line .layui-tree-set.layui-tree-setHide:before {
height: 0;
}
.layui-tree-iconClick {
position: relative;
height: 20px;
line-height: 20px;
margin: 0 10px;
color: #c0c4cc;
}
.layui-tree-icon {
height: 12px;
line-height: 12px;
width: 12px;
text-align: center;
border: 1px solid #c0c4cc;
}
.layui-tree-iconClick .layui-icon {
font-size: 18px;
}
.layui-tree-icon .layui-icon {
font-size: 12px;
color: #666;
}
.layui-tree-iconArrow {
padding: 0 5px;
}
.layui-tree-iconArrow:after {
content: "";
position: absolute;
left: 4px;
top: 3px;
z-index: 100;
width: 0;
height: 0;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent #c0c4cc;
transition: 0.5s;
}
.layui-tree-btnGroup,
.layui-tree-editInput {
position: relative;
vertical-align: middle;
display: inline-block;
}
.layui-tree-spread
> .layui-tree-entry
> .layui-tree-iconClick
> .layui-tree-iconArrow:after {
transform: rotate(90deg) translate(3px, 4px);
}
.layui-tree-txt {
display: inline-block;
vertical-align: middle;
color: #555;
}
.layui-tree-search {
margin-bottom: 15px;
color: #666;
}
.layui-tree-btnGroup .layui-icon {
display: inline-block;
vertical-align: middle;
padding: 0 2px;
cursor: pointer;
}
.layui-tree-btnGroup .layui-icon:hover {
color: #999;
transition: 0.3s;
}
.layui-tree-entry:hover .layui-tree-btnGroup {
visibility: visible;
}
.layui-tree-editInput {
height: 20px;
line-height: 20px;
padding: 0 3px;
border: none;
background-color: rgba(0, 0, 0, 0.05);
}
.layui-tree-emptyText {
text-align: center;
color: #999;
}

7
src/module/tree/index.vue
View File

@ -1,9 +1,3 @@
<!--
* @Date: 2021-10-16 13:22:38
* @LastEditors: 落小梅
* @LastEditTime: 2021-10-16 13:53:14
* @FilePath: \layui-vue\src\module\tree\new-tree\index.vue
-->
<script lang="ts"> <script lang="ts">
export default { export default {
name: "LayTree", name: "LayTree",
@ -16,6 +10,7 @@ import TreeNode from "./TreeNode.vue";
import { computed } from "vue"; import { computed } from "vue";
import { useTree } from "./useTree"; import { useTree } from "./useTree";
import { TreeData } from "./tree"; import { TreeData } from "./tree";
import "./index.less";
type StringFn = () => string; type StringFn = () => string;
type StringOrNumber = string | number; type StringOrNumber = string | number;

4
src/module/type/select.ts
View File

@ -9,3 +9,7 @@ export interface SelectItem {
export interface SelectItemHandle { export interface SelectItemHandle {
(selectItem: SelectItem, isChecked?: boolean): void; (selectItem: SelectItem, isChecked?: boolean): void;
} }
export interface SelectItemPush {
(selectItem: SelectItem): void
}