Merge branch 'develop' of gitee.com:layui-vue/layui-vue into develop
This commit is contained in:
halo
commit
adaf72fc21
@ -97,4 +97,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext animation
|
||||
:::
|
||||
@ -38,9 +38,7 @@ export default {
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
|
||||
setup() {
|
||||
|
||||
const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
|
||||
@ -61,8 +59,11 @@ export default {
|
||||
|
||||
<template>
|
||||
<lay-avatar :src="src" size="xs"></lay-avatar>
|
||||
|
||||
<lay-avatar :src="src" size="sm"></lay-avatar>
|
||||
|
||||
<lay-avatar :src="src"></lay-avatar>
|
||||
|
||||
<lay-avatar :src="src" size="lg"></lay-avatar>
|
||||
</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
|
||||
@ -97,4 +130,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
:::
|
||||
|
||||
::: previousNext avatar
|
||||
:::
|
||||
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 事件
|
||||
::: title Backtop 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -110,7 +110,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 插槽
|
||||
::: title Backtop 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -120,3 +120,6 @@ export default {
|
||||
| default| 自定义内容 |
|
||||
|
||||
:::
|
||||
|
||||
::: previousNext backtop
|
||||
:::
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 徽章属性
|
||||
::: title Badge 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 徽章插槽
|
||||
::: title Badge 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -63,4 +63,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext badge
|
||||
:::
|
||||
@ -62,4 +62,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext block
|
||||
:::
|
||||
@ -82,7 +82,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 面包屑属性
|
||||
::: title Breadcrumb 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -93,7 +93,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 面包屑插槽
|
||||
::: title Breadcrumb 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -105,4 +105,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext breadcrumb
|
||||
:::
|
||||
@ -122,7 +122,7 @@ export default {
|
||||
<lay-button type="normal" radius>百搭按钮</lay-button>
|
||||
<lay-button type="warm" 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>
|
||||
|
||||
<script>
|
||||
@ -131,7 +131,12 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const onClick = () => {
|
||||
console.log("click event");
|
||||
}
|
||||
|
||||
return {
|
||||
onClick
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -337,3 +342,6 @@ export default {
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext button
|
||||
:::
|
||||
@ -108,7 +108,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 卡片属性
|
||||
::: title Card 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -119,7 +119,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 卡片插槽
|
||||
::: title Card 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -133,4 +133,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext card
|
||||
:::
|
||||
@ -118,7 +118,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 轮播属性
|
||||
::: title Carousel 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -132,7 +132,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 轮播事件
|
||||
::: title Carousel 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -144,4 +144,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext carousel
|
||||
:::
|
||||
@ -188,7 +188,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 复选框属性
|
||||
::: title Checkbox 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -203,7 +203,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 复选框事件
|
||||
::: title Checkbox 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -215,4 +215,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext checkbox
|
||||
:::
|
||||
@ -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
|
||||
@ -187,7 +198,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title Collapse-item 插槽
|
||||
::: title Collapse Item 插槽
|
||||
:::
|
||||
|
||||
::: 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
|
||||
:::
|
||||
|
||||
::: previousNext collapse
|
||||
:::
|
||||
@ -165,4 +165,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext color
|
||||
:::
|
||||
@ -19,7 +19,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
::: title icon-picker 属性
|
||||
::: title Icon Picker 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -33,4 +33,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext colorPicker
|
||||
:::
|
||||
@ -78,4 +78,7 @@ layer.confirm(content, options)
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext confirm
|
||||
:::
|
||||
@ -80,4 +80,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext container
|
||||
:::
|
||||
@ -33,14 +33,17 @@ export default {
|
||||
::: demo
|
||||
|
||||
<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">
|
||||
<lay-count-up :end-val="countVal2" prefix="¥" suffix="↑"></lay-count-up>
|
||||
</h1>
|
||||
</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">
|
||||
<lay-count-up :end-val="18" :duration="1">
|
||||
<template #prefix>
|
||||
@ -54,7 +57,6 @@ export default {
|
||||
</lay-count-up>
|
||||
</h1>
|
||||
</lay-card>
|
||||
<lay-button @click="handlerClick" type="primary" border="blue" size="sm" style="margin:0px 30px;">更新</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -75,7 +77,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title countUp 属性
|
||||
::: title Count Up 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -94,8 +96,19 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title Count Up 插槽
|
||||
:::
|
||||
|
||||
::: title CountUpOptions 属性
|
||||
::: table
|
||||
|
||||
| 名称 | 描述 | 参数 |
|
||||
| ----- | -------- | ---- |
|
||||
| prefix | 前缀 | -- |
|
||||
| suffix | 后缀 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: title Count Up Options 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -113,14 +126,5 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title countUp 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 名称 | 描述 | 参数 |
|
||||
| ----- | -------- | ---- |
|
||||
| prefix | 前缀 | -- |
|
||||
| suffix | 后缀 | -- |
|
||||
|
||||
::: previousNext countUp
|
||||
:::
|
||||
@ -24,3 +24,6 @@ export default {
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: previousNext datePicker
|
||||
:::
|
||||
@ -70,7 +70,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 下拉属性
|
||||
::: title Dropdown 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -81,7 +81,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 下拉插槽
|
||||
::: title Dropdown 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -93,4 +93,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext dropdown
|
||||
:::
|
||||
@ -47,7 +47,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title empty 属性
|
||||
::: title Empty 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -59,4 +59,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext empty
|
||||
:::
|
||||
@ -64,7 +64,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 字段属性
|
||||
::: title Field 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -76,4 +76,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext field
|
||||
:::
|
||||
@ -581,4 +581,7 @@ export default {
|
||||
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext form
|
||||
:::
|
||||
@ -139,7 +139,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 行属性
|
||||
::: title Row 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -150,7 +150,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 列属性
|
||||
::: title Col 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -169,4 +169,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext grid
|
||||
:::
|
||||
@ -1132,4 +1132,7 @@ npm install @layui/icons-vue
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext iconfont
|
||||
:::
|
||||
@ -115,4 +115,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext iconPicker
|
||||
:::
|
||||
@ -106,7 +106,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 输入框属性
|
||||
::: title Input 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -120,7 +120,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 输入框属性
|
||||
::: title Input 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -134,4 +134,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext input
|
||||
:::
|
||||
@ -111,7 +111,7 @@
|
||||
:::
|
||||
|
||||
|
||||
::: title input-number属性
|
||||
::: title Input Number 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -130,7 +130,7 @@
|
||||
|
||||
:::
|
||||
|
||||
::: title 事件
|
||||
::: title Input Number 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -142,4 +142,7 @@
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext inputNumber
|
||||
:::
|
||||
@ -189,4 +189,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext layout
|
||||
:::
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 分割属性
|
||||
::: title Line 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -49,4 +49,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext line
|
||||
:::
|
||||
@ -128,4 +128,7 @@ layer.load(load, options)
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext load
|
||||
:::
|
||||
@ -11,15 +11,15 @@
|
||||
<lay-menu-item title="首页" id="1"></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="7">
|
||||
<lay-sub-menu title="目录" id="7">
|
||||
<lay-menu-item title="菜单一" id="8"></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="12"></lay-menu-item>
|
||||
<lay-menu-item title="菜单三" id="13"></lay-menu-item>
|
||||
</lay-menu-item>
|
||||
</lay-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
@ -47,23 +47,62 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
|
||||
<lay-menu-item title="首页" id="1">
|
||||
<template v-slot:title>
|
||||
<router-link to="">无感</router-link>
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" :tree="true">
|
||||
<lay-menu-item title="首页" id="1"></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="7">
|
||||
<lay-sub-menu title="目录" id="7">
|
||||
<lay-menu-item title="菜单一" id="8"></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="12"></lay-menu-item>
|
||||
<lay-menu-item title="菜单三" id="13"></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-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-menu-item>
|
||||
</lay-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
@ -88,7 +127,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 菜单属性
|
||||
::: title Menu 属性
|
||||
:::
|
||||
|
||||
::: 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
|
||||
@ -112,4 +184,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext nav
|
||||
:::
|
||||
@ -343,4 +343,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext modal
|
||||
:::
|
||||
@ -96,4 +96,7 @@ layer.msg(content, options)
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext msg
|
||||
:::
|
||||
@ -7,7 +7,7 @@
|
||||
::: demo
|
||||
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" :total="total"></lay-page>
|
||||
<lay-page :limit="limit" @limit="limit = $event" :total="total"></lay-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -65,7 +65,7 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-page :limit="limit" :total="total">
|
||||
<lay-page :limit="limit" @limit="limit = $event" :total="total">
|
||||
<template v-slot:prev>上</template>
|
||||
<template v-slot:next>下</template>
|
||||
</lay-page>
|
||||
@ -96,11 +96,11 @@ export default {
|
||||
::: demo
|
||||
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@ -124,13 +124,13 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 完整分页
|
||||
::: title 指定分页容量
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@ -141,6 +141,66 @@ export default {
|
||||
|
||||
const limit = ref(20)
|
||||
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 showPage = ref(true)
|
||||
const showLimit = ref(true)
|
||||
@ -162,13 +222,13 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 切换事件
|
||||
::: title 页码切换事件(jump)
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<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>
|
||||
|
||||
<script>
|
||||
@ -196,7 +256,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 分页属性
|
||||
::: title Page 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -210,10 +270,12 @@ export default {
|
||||
| showLimit | 显示每页数量 | `false` |
|
||||
| showRefresh | 显示刷新按钮 | `false` |
|
||||
| showSkip | 显示跳转 | `false` |
|
||||
| pages | 显示切页按钮数量 | `10` |
|
||||
| limits | 切换每页数量的选择项 | `[10,20,30,40,50]` |
|
||||
|
||||
:::
|
||||
|
||||
::: title 分页事件
|
||||
::: title Page 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -221,10 +283,11 @@ export default {
|
||||
| 事件 | 描述 | 参数 |
|
||||
| ---- | -------- | --------------------- |
|
||||
| jump | 切换回调 | { current: 当前页面 } |
|
||||
| limit | 每页数量变化 | 变化后的值 |
|
||||
|
||||
:::
|
||||
|
||||
::: title 分页插槽
|
||||
::: title Page 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -237,4 +300,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext page
|
||||
:::
|
||||
@ -24,7 +24,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 面板插槽
|
||||
::: title Panel 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -36,4 +36,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext panel
|
||||
:::
|
||||
@ -113,7 +113,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 进度属性
|
||||
::: title Progress 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -130,4 +130,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext progress
|
||||
:::
|
||||
@ -97,7 +97,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 单选框属性
|
||||
::: title Radio 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -110,7 +110,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 单选框事件
|
||||
::: title Radio 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -122,4 +122,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext radio
|
||||
:::
|
||||
@ -269,7 +269,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 评分属性
|
||||
::: title Rate 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -287,7 +287,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 插槽
|
||||
::: title Rate 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -298,7 +298,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 事件
|
||||
::: title Rate 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -310,4 +310,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext rate
|
||||
:::
|
||||
@ -27,6 +27,40 @@ export default {
|
||||
}
|
||||
</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 选择禁用
|
||||
@ -74,6 +108,7 @@ export default {
|
||||
<lay-select-option value="6" label="打篮球"></lay-select-option>
|
||||
<lay-select-option value="7" label="rap"></lay-select-option>
|
||||
</lay-select>
|
||||
<lay-button @click="mvalue=[1,5,7]">点击切换(当前值:{{mvalue.join()}})</lay-button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -95,7 +130,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title select 属性
|
||||
::: title Select 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -112,7 +147,18 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title select-option 属性
|
||||
::: title Select 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 接收值 |
|
||||
| ------ | ---------- | --------------- |
|
||||
| change | 切换事件 | value |
|
||||
|
||||
:::
|
||||
|
||||
::: title Select Option 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -128,7 +174,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title select-option 插槽
|
||||
::: title Select Option 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -139,16 +185,8 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title select 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 接收值 |
|
||||
| ------ | ---------- | --------------- |
|
||||
| change | 切换事件 | value |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext select
|
||||
:::
|
||||
@ -82,7 +82,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 骨架屏属性
|
||||
::: title Skeleton 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -96,7 +96,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 骨架屏插槽
|
||||
::: title Skeleton 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -109,4 +109,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext skeleton
|
||||
:::
|
||||
@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 横向
|
||||
:::
|
||||
|
||||
@ -91,7 +94,7 @@ export default {
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title slider 属性
|
||||
::: title Slider 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -108,3 +111,6 @@ export default {
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext slider
|
||||
:::
|
||||
|
||||
@ -15,8 +15,50 @@
|
||||
<lay-step-item></lay-step-item>
|
||||
<lay-step-item></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="nexts">下一步</lay-button>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
<div style="margin-top: 10px">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -96,8 +138,8 @@ export default {
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -139,8 +181,8 @@ export default {
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
<lay-step-item title="Fourth" content="Fourth step"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="nexts">下一步</lay-button>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
<lay-button size="xs" @click="nexts">下一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -180,8 +222,8 @@ export default {
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
</div>
|
||||
</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="Third" content="Third step" icon="layui-icon-share"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -266,8 +308,8 @@ export default {
|
||||
<lay-step-item title="Second" content="Second step"></lay-step-item>
|
||||
<lay-step-item title="Third" content="Third step"></lay-step-item>
|
||||
</lay-step>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
<lay-button size="xs" @click="previous">上一步</lay-button>
|
||||
<lay-button size="xs" @click="next">下一步</lay-button>
|
||||
</div>
|
||||
</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
|
||||
@ -348,12 +434,15 @@ export default {
|
||||
| center | 居中布局 | boolean | `true` `false` | `false` |
|
||||
| direction | 垂直/平行布局 | string |`horizontal` `vertical` | `horizontal` |
|
||||
| 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
|
||||
@ -368,7 +457,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title stepItem步骤条slot
|
||||
::: title Step Item 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -381,4 +470,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext step
|
||||
:::
|
||||
@ -111,7 +111,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 开关属性
|
||||
::: title Switch 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -126,7 +126,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 开关事件
|
||||
::: title Switch 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -138,4 +138,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext switch
|
||||
:::
|
||||
@ -169,7 +169,7 @@ export default {
|
||||
return {
|
||||
current5,
|
||||
change5,
|
||||
beforeClose，
|
||||
beforeClose,
|
||||
close5
|
||||
}
|
||||
}
|
||||
@ -220,7 +220,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 选项卡属性
|
||||
::: title Tab 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -235,7 +235,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 选项卡事件
|
||||
::: title Tab 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -248,4 +248,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext tab
|
||||
:::
|
||||
@ -315,7 +315,7 @@ export default {
|
||||
|
||||
### <div id="tableColumn"></div>
|
||||
|
||||
::: title Table Column 属性
|
||||
::: title Table 数据
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -331,3 +331,6 @@ export default {
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext table
|
||||
:::
|
||||
@ -85,7 +85,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 文本域属性
|
||||
::: title Textarea 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 文本域事件
|
||||
::: title Textarea 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -113,4 +113,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext textarea
|
||||
:::
|
||||
@ -120,7 +120,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title Timeline Item 属性
|
||||
::: title Timeline Item 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -132,4 +132,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext timeline
|
||||
:::
|
||||
@ -113,7 +113,7 @@
|
||||
</style>
|
||||
:::
|
||||
|
||||
::: title tooltip属性
|
||||
::: title Tooltip 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -130,4 +130,7 @@
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext tooltip
|
||||
:::
|
||||
@ -86,7 +86,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title transfer 属性
|
||||
::: title Transfer 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title transfer 插槽
|
||||
::: title Transfer 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -111,4 +111,7 @@ export default {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext transfer
|
||||
:::
|
||||
@ -216,7 +216,7 @@ function handleClick(node) {
|
||||
|
||||
:::
|
||||
|
||||
::: title tree attributes
|
||||
::: title Tree 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -231,7 +231,7 @@ function handleClick(node) {
|
||||
|
||||
:::
|
||||
|
||||
::: title TreeData
|
||||
::: title Tree 数据
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -246,7 +246,7 @@ function handleClick(node) {
|
||||
|
||||
:::
|
||||
|
||||
::: title tree events
|
||||
::: title Tree 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -258,4 +258,7 @@ function handleClick(node) {
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
::: previousNext tree
|
||||
:::
|
||||
@ -11,14 +11,31 @@
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<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>
|
||||
<a name="0-3-3"> </a>
|
||||
<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>
|
||||
<li>[新增] setup 步骤条组件。</li>
|
||||
<li>[新增] slider 滑块组件 vertical 属性, 支持垂直布局。</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>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
|
||||
<p>
|
||||
<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>
|
||||
</p>
|
||||
|
||||
|
||||
@ -129,13 +129,13 @@
|
||||
莫名点
|
||||
</lay-col>
|
||||
<lay-col md="8">
|
||||
焦点：skeleton setup
|
||||
焦点：skeleton step
|
||||
</lay-col>
|
||||
<lay-col md="4">
|
||||
地点：中国 未知
|
||||
地点：中国 上海
|
||||
</lay-col>
|
||||
<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-row>
|
||||
</lay-card>
|
||||
|
||||
@ -110,10 +110,6 @@ form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.source .layui-avatar {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.site-doc-icon {
|
||||
margin-bottom: 50px;
|
||||
font-size: 0;
|
||||
@ -265,3 +261,6 @@ body::-webkit-scrollbar {
|
||||
.layui-menu .layui-menu-item-group > .layui-menu-body-title {
|
||||
padding-left: 15px;
|
||||
}
|
||||
.lay-link:hover{
|
||||
color: #5FB878;
|
||||
}
|
||||
BIN
example/src/assets/logo-new.png
Normal file
BIN
example/src/assets/logo-new.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@ -43,7 +43,7 @@
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="javascript:void(0)"> 0.3.2 </a>
|
||||
<a href="javascript:void(0)"> 0.3.4 </a>
|
||||
</li>
|
||||
</ul>
|
||||
</lay-header>
|
||||
|
||||
@ -1,16 +1,17 @@
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import Markdown from 'vite-plugin-md'
|
||||
import container from 'markdown-it-container'
|
||||
import highlight from './highlight'
|
||||
import snippet from './snippet'
|
||||
import demo from './demo'
|
||||
import createTitle from './create-title'
|
||||
import createBlock from './create-block'
|
||||
import createDescribe from './create-describe'
|
||||
import createTable from './create-table'
|
||||
import createComment from './create-comment'
|
||||
import createAnchor from './create-anchor'
|
||||
import preWrapper from './pre-wrapper'
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import Markdown from "vite-plugin-md";
|
||||
import container from "markdown-it-container";
|
||||
import highlight from "./highlight";
|
||||
import snippet from "./snippet";
|
||||
import demo from "./demo";
|
||||
import createTitle from "./create-title";
|
||||
import createBlock from "./create-block";
|
||||
import createDescribe from "./create-describe";
|
||||
import createTable from "./create-table";
|
||||
import createComment from "./create-comment";
|
||||
import createAnchor from "./create-anchor";
|
||||
import preWrapper from "./pre-wrapper";
|
||||
import previousNext from "./previous-next";
|
||||
|
||||
const plugins = [
|
||||
vue({
|
||||
@ -26,15 +27,16 @@ const plugins = [
|
||||
markdownItSetup(md) {
|
||||
md.use(snippet)
|
||||
.use(preWrapper)
|
||||
.use(container, 'demo', demo)
|
||||
.use(...createTable('table', ''))
|
||||
.use(...createBlock('block', ''))
|
||||
.use(...createTitle('title', ''))
|
||||
.use(...createDescribe('describe', ''))
|
||||
.use(...createComment('comment', ''))
|
||||
.use(...createAnchor('anchor', ''))
|
||||
.use(container, "demo", demo)
|
||||
.use(...createTable("table", ""))
|
||||
.use(...createBlock("block", ""))
|
||||
.use(...createTitle("title", ""))
|
||||
.use(...createDescribe("describe", ""))
|
||||
.use(...createComment("comment", ""))
|
||||
.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
55
example/src/plugin/previous-next.ts
Normal 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 ``;
|
||||
}
|
||||
},
|
||||
},
|
||||
];
|
||||
}
|
||||
@ -52,6 +52,7 @@
|
||||
<script>
|
||||
import { ref, watch } from "vue";
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
import menus from "./utils/menus";
|
||||
export default {
|
||||
setup() {
|
||||
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 handleClick = function (menu) {
|
||||
|
||||
@ -28,6 +28,20 @@
|
||||
</ul>
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
>
|
||||
</div>
|
||||
<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
|
||||
><router-link
|
||||
class="layui-inline site-down"
|
||||
|
||||
340
example/src/view/utils/menus.ts
Normal file
340
example/src/view/utils/menus.ts
Normal 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;
|
||||
11
package.json
11
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "0.3.2",
|
||||
"version": "0.3.4",
|
||||
"author": "sleeprite",
|
||||
"license": "MIT",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
@ -28,7 +28,8 @@
|
||||
"build:example": "vite build example",
|
||||
"lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
|
||||
"lint:prettier": "prettier --write 'src/**/*'",
|
||||
"commit": "git cz"
|
||||
"commit": "git cz",
|
||||
"prepublishOnly": "npm run build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@layui/hooks-vue": "^0.1.6",
|
||||
@ -60,14 +61,14 @@
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-vue": "^8.2.0",
|
||||
"less": "^4.1.2",
|
||||
"markdown-it-container": "^3.0.0",
|
||||
"prettier": "^2.5.1",
|
||||
"prismjs": "^1.25.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup": "^2.61.0",
|
||||
"typescript": "^4.5.2",
|
||||
"less": "^4.1.2",
|
||||
"vite": "2.7.6",
|
||||
"vite": "2.7.10",
|
||||
"vite-plugin-md": "^0.11.6"
|
||||
},
|
||||
"files": [
|
||||
@ -79,4 +80,4 @@
|
||||
"last 2 versions and > 2%",
|
||||
"ie > 10"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -2885,12 +2885,10 @@ body .layui-table-tips .layui-layer-content {
|
||||
line-height: 60px;
|
||||
}
|
||||
|
||||
.layui-nav .layui-nav-item a {
|
||||
.layui-nav .layui-nav-item > a {
|
||||
display: block;
|
||||
padding: 0 30px;
|
||||
color: #fff;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
-webkit-transition: all 0.3s;
|
||||
}
|
||||
|
||||
.layui-nav .layui-this:after,
|
||||
@ -3010,18 +3008,18 @@ body .layui-table-tips .layui-layer-content {
|
||||
line-height: 42px;
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-item a {
|
||||
.layui-nav-tree .layui-nav-item > a {
|
||||
position: relative;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
padding: 5px 30px 5px 30px;
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-item > a {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
.layui-nav-tree .layui-nav-item * {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.layui-nav-tree .layui-nav-more {
|
||||
|
||||
23
src/index.ts
23
src/index.ts
@ -9,6 +9,7 @@ import { layer } from "@layui/layer-vue";
|
||||
import LayLayer from "./module/layer/index";
|
||||
import LayBacktop from "./module/backTop/index";
|
||||
import LayAvatar from "./module/avatar/index";
|
||||
import LayAvatarList from "./module/avatarList/index";
|
||||
import LayRadio from "./module/radio/index";
|
||||
import LayButton from "./module/button/index";
|
||||
import LayButtonContainer from "./module/buttonContainer/index";
|
||||
@ -70,8 +71,9 @@ import LaySkeleton from "./module/skeleton/index";
|
||||
import LaySkeletonItem from "./module/skeletonItem/index";
|
||||
import LayStep from "./module/step/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,
|
||||
LayButton,
|
||||
LayIcon,
|
||||
@ -107,6 +109,7 @@ const components: Record<string, IDefineComponent> = {
|
||||
LayBreadcrumb,
|
||||
LayBreadcrumbItem,
|
||||
LayAvatar,
|
||||
LayAvatarList,
|
||||
LayField,
|
||||
LaySelect,
|
||||
LayScroll,
|
||||
@ -136,6 +139,7 @@ const components: Record<string, IDefineComponent> = {
|
||||
LayCountUp,
|
||||
LayStep,
|
||||
LayStepItem,
|
||||
LaySubMenu
|
||||
};
|
||||
|
||||
const install = (app: App, options?: InstallOptions): void => {
|
||||
@ -148,13 +152,9 @@ const install = (app: App, options?: InstallOptions): void => {
|
||||
};
|
||||
|
||||
export {
|
||||
LayStep,
|
||||
LayStepItem,
|
||||
LaySkeleton,
|
||||
LaySkeletonItem,
|
||||
LayRadio,
|
||||
LayIcon,
|
||||
LayButton,
|
||||
LayIcon,
|
||||
LayBacktop,
|
||||
LayLayout,
|
||||
LaySide,
|
||||
@ -187,6 +187,7 @@ export {
|
||||
LayBreadcrumb,
|
||||
LayBreadcrumbItem,
|
||||
LayAvatar,
|
||||
LayAvatarList,
|
||||
LayField,
|
||||
LaySelect,
|
||||
LayScroll,
|
||||
@ -208,7 +209,15 @@ export {
|
||||
LayCarousel,
|
||||
LayCarouselItem,
|
||||
LayColorPicker,
|
||||
LayLayer
|
||||
LayLayer,
|
||||
LayTooltip,
|
||||
LayInputNumber,
|
||||
LaySkeleton,
|
||||
LaySkeletonItem,
|
||||
LayCountUp,
|
||||
LayStep,
|
||||
LayStepItem,
|
||||
LaySubMenu
|
||||
};
|
||||
|
||||
export { layer };
|
||||
|
||||
@ -40,3 +40,8 @@
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.layui-avatar-list .layui-avatar {
|
||||
margin-left: -10px;
|
||||
display: inline-block;
|
||||
}
|
||||
9
src/module/avatarList/index.ts
Normal file
9
src/module/avatarList/index.ts
Normal 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
15
src/module/avatarList/index.vue
Normal 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>
|
||||
@ -27,6 +27,14 @@ const props = withDefaults(defineProps<LayButtonProps>(), {
|
||||
nativeType: "button",
|
||||
});
|
||||
|
||||
const emit = defineEmits(["click"]);
|
||||
|
||||
const onClick = (event : any) => {
|
||||
if(!props.disabled) {
|
||||
emit("click", event);
|
||||
}
|
||||
}
|
||||
|
||||
const classes = computed(() => {
|
||||
return [
|
||||
props.type ? `layui-btn-${props.type}` : "",
|
||||
@ -48,6 +56,7 @@ const classes = computed(() => {
|
||||
classes,
|
||||
]"
|
||||
:type="nativeType"
|
||||
@click="onClick"
|
||||
>
|
||||
<i
|
||||
v-if="loading"
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<span class="layui-count"></span>
|
||||
</template>
|
||||
|
||||
<script setup name="LayCount" lang="ts"></script>
|
||||
@ -1,59 +1,35 @@
|
||||
<template>
|
||||
<li
|
||||
v-if="slots.default"
|
||||
class="layui-nav-item"
|
||||
:class="[openKeys.includes(id) && isTree ? 'layui-nav-itemed' : '']"
|
||||
>
|
||||
<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>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayMenuItem"
|
||||
}
|
||||
</script>
|
||||
|
||||
<li
|
||||
v-else
|
||||
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 lang="ts">
|
||||
import { defineProps, inject, Ref, useSlots } from "vue";
|
||||
|
||||
<script setup name="LayMenuItem" lang="ts">
|
||||
import { defineProps, inject, Ref, ref, useSlots } from "vue";
|
||||
const slots = useSlots();
|
||||
|
||||
const props = defineProps<{
|
||||
id: string;
|
||||
title: 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 selectHandle = function () {
|
||||
selectedKey.value = props.id;
|
||||
};
|
||||
</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>
|
||||
@ -1,122 +1,163 @@
|
||||
<template>
|
||||
<div class="layui-box layui-laypage layui-laypage-default">
|
||||
<span v-if="showCount" class="layui-laypage-count">共 {{ total }} 条</span
|
||||
><a
|
||||
href="javascript:;"
|
||||
class="layui-laypage-prev"
|
||||
:class="[currentPage === 1 ? 'layui-disabled' : '']"
|
||||
@click="prev()"
|
||||
><slot v-if="slots.prev" name="prev"></slot>
|
||||
<template v-else>上一页</template></a
|
||||
>
|
||||
<template v-if="showPage">
|
||||
<template v-for="index of totalPage" :key="index">
|
||||
<span v-if="index === currentPage" class="layui-laypage-curr"
|
||||
><em
|
||||
class="layui-laypage-em"
|
||||
:class="[theme ? 'layui-bg-' + theme : '']"
|
||||
></em
|
||||
><em>{{ index }}</em></span
|
||||
>
|
||||
<a v-else href="javascript:;" @click="jump(index)">
|
||||
{{ index }}
|
||||
</a>
|
||||
</template>
|
||||
</template>
|
||||
<div class="layui-box layui-laypage layui-laypage-default">
|
||||
<span v-if="showCount" class="layui-laypage-count"
|
||||
>共 {{ total }} 条 {{ maxPage }} 页</span
|
||||
>
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="layui-laypage-prev"
|
||||
:class="[currentPage === 1 ? 'layui-disabled' : '']"
|
||||
@click="prev()"
|
||||
>
|
||||
<slot v-if="slots.prev" name="prev"></slot>
|
||||
<template v-else>上一页</template>
|
||||
</a>
|
||||
<template v-if="showPage">
|
||||
<template v-for="index of totalPage" :key="index">
|
||||
<span v-if="index === currentPage" class="layui-laypage-curr">
|
||||
<em
|
||||
class="layui-laypage-em"
|
||||
:class="[theme ? 'layui-bg-' + theme : '']"
|
||||
></em>
|
||||
<em>{{ index }}</em>
|
||||
</span>
|
||||
<a v-else href="javascript:;" @click="jump(index)">{{ index }}</a>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="layui-laypage-next"
|
||||
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
|
||||
@click="next()"
|
||||
><slot v-if="slots.next" name="next"></slot>
|
||||
<template v-else>下一页</template></a
|
||||
><span v-if="showLimit" class="layui-laypage-limits"
|
||||
><select v-model="inlimit">
|
||||
<option value="10">10 条/页</option>
|
||||
<option value="20">20 条/页</option>
|
||||
<option value="30">30 条/页</option>
|
||||
<option value="40">40 条/页</option>
|
||||
<option value="50">50 条/页</option>
|
||||
</select></span
|
||||
><a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh"
|
||||
><i class="layui-icon layui-icon-refresh"></i></a
|
||||
><span v-if="showSkip" class="layui-laypage-skip"
|
||||
>到第<input
|
||||
v-model="currentPageShow"
|
||||
type="number"
|
||||
class="layui-input layui-input-number"
|
||||
/>页<button type="button" class="layui-laypage-btn" @click="jumpPage()">
|
||||
确定
|
||||
</button></span
|
||||
>
|
||||
</div>
|
||||
<a
|
||||
href="javascript:;"
|
||||
class="layui-laypage-next"
|
||||
:class="[currentPage === maxPage ? 'layui-disabled' : '']"
|
||||
@click="next()"
|
||||
>
|
||||
<slot v-if="slots.next" name="next"></slot>
|
||||
<template v-else>下一页</template>
|
||||
</a>
|
||||
<span v-if="showLimit" class="layui-laypage-limits">
|
||||
<select v-model="inlimit">
|
||||
<option v-for="val of limits" :key="val" :value="val">
|
||||
{{ val }} 条/页
|
||||
</option>
|
||||
</select>
|
||||
</span>
|
||||
<a v-if="showRefresh" href="javascript:;" class="layui-laypage-refresh">
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
</a>
|
||||
<span v-if="showSkip" class="layui-laypage-skip">
|
||||
到第
|
||||
<input
|
||||
v-model="currentPageShow"
|
||||
@keypress.enter="jumpPage()"
|
||||
type="number"
|
||||
class="layui-input layui-input-number"
|
||||
/>页
|
||||
<button
|
||||
type="button"
|
||||
class="layui-laypage-btn"
|
||||
@click="jumpPage()"
|
||||
:disabled="currentPageShow > maxPage"
|
||||
>
|
||||
确定
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 props = withDefaults(
|
||||
defineProps<{
|
||||
total: number;
|
||||
limit: number;
|
||||
theme?: string;
|
||||
showPage?: boolean | string;
|
||||
showSkip?: boolean | string;
|
||||
showCount?: boolean | string;
|
||||
showLimit?: boolean | string;
|
||||
showInput?: boolean | string;
|
||||
showRefresh?: boolean | string;
|
||||
}>(),
|
||||
{
|
||||
limit: 10,
|
||||
theme: "green",
|
||||
showPage: false,
|
||||
showSkip: false,
|
||||
showCount: false,
|
||||
showLimit: true,
|
||||
showInput: false,
|
||||
showRefresh: false,
|
||||
}
|
||||
defineProps<{
|
||||
total: number;
|
||||
limit: number;
|
||||
theme?: string;
|
||||
showPage?: boolean | string;
|
||||
showSkip?: boolean | string;
|
||||
showCount?: boolean | string;
|
||||
showLimit?: boolean | string;
|
||||
showInput?: boolean | string;
|
||||
showRefresh?: boolean | string;
|
||||
pages?: number;
|
||||
limits?: number[];
|
||||
}>(),
|
||||
{
|
||||
limit: 10,
|
||||
theme: "green",
|
||||
showPage: false,
|
||||
showSkip: false,
|
||||
showCount: false,
|
||||
showLimit: true,
|
||||
showInput: false,
|
||||
showRefresh: false,
|
||||
pages: 10,
|
||||
limits: () => [10, 20, 30, 40, 50],
|
||||
}
|
||||
);
|
||||
|
||||
const inlimit = ref(props.limit);
|
||||
const totalPage = ref(Math.ceil(props.total / inlimit.value));
|
||||
const limits = ref(props.limits);
|
||||
const pages = props.pages / 2;
|
||||
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 currentPageShow: Ref<number> = ref(currentPage.value);
|
||||
const emit = defineEmits(["jump"]);
|
||||
|
||||
const emit = defineEmits(["jump", "limit"]);
|
||||
|
||||
const prev = function () {
|
||||
if (currentPage.value === 1) {
|
||||
return;
|
||||
}
|
||||
currentPage.value--;
|
||||
if (currentPage.value === 1) {
|
||||
return;
|
||||
}
|
||||
currentPage.value--;
|
||||
};
|
||||
|
||||
const next = function () {
|
||||
if (currentPage.value === totalPage.value) {
|
||||
return;
|
||||
}
|
||||
currentPage.value++;
|
||||
if (currentPage.value === maxPage.value) {
|
||||
return;
|
||||
}
|
||||
currentPage.value++;
|
||||
};
|
||||
|
||||
const jump = function (page: number) {
|
||||
currentPage.value = page;
|
||||
currentPage.value = page;
|
||||
};
|
||||
|
||||
const jumpPage = function () {
|
||||
currentPage.value = currentPageShow.value;
|
||||
currentPage.value = currentPageShow.value;
|
||||
};
|
||||
|
||||
watch(inlimit, function () {
|
||||
currentPage.value = 1;
|
||||
totalPage.value = Math.ceil(props.total / inlimit.value);
|
||||
currentPage.value = 1;
|
||||
// maxPage.value = Math.ceil(props.total / inlimit.value);
|
||||
});
|
||||
|
||||
watch(currentPage, function () {
|
||||
currentPageShow.value = currentPage.value;
|
||||
emit("jump", { current: currentPage.value });
|
||||
currentPageShow.value = currentPage.value;
|
||||
emit("jump", { current: currentPage.value });
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,91 +1,91 @@
|
||||
<template>
|
||||
<div
|
||||
ref="selectRef"
|
||||
class="layui-unselect layui-form-select"
|
||||
:class="{ 'layui-form-selected': openState }"
|
||||
>
|
||||
<div class="layui-select-title" @click="open">
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="
|
||||
selectItem.value !== null &&
|
||||
Array.isArray(selectItem.value) &&
|
||||
selectItem.value.length > 0
|
||||
? ''
|
||||
: emptyMessage ?? placeholder
|
||||
"
|
||||
:disabled="disabled"
|
||||
readonly
|
||||
:value="
|
||||
!selectItem.multiple && selectItem.value !== null
|
||||
? selectItem.label
|
||||
: null
|
||||
"
|
||||
:name="name"
|
||||
:class="[
|
||||
'layui-input',
|
||||
'layui-unselect',
|
||||
{ 'layui-disabled': disabled },
|
||||
]"
|
||||
/>
|
||||
<i :class="['layui-edge', { 'layui-disabled': disabled }]"></i>
|
||||
<!-- 多选 -->
|
||||
<div
|
||||
v-if="selectItem.multiple && Array.isArray(selectItem.label)"
|
||||
class="layui-multiple-select-row"
|
||||
>
|
||||
<div class="layui-multiple-select-badge">
|
||||
<template v-for="(item, index) in selectItem.label" :key="index">
|
||||
<lay-badge theme="green">
|
||||
<span>{{ item }}</span>
|
||||
<i
|
||||
:class="['layui-icon', { 'layui-icon-close': true }]"
|
||||
v-if="
|
||||
!disabled &&
|
||||
!(
|
||||
Array.isArray(selectItem.value) &&
|
||||
selectItem.value.length > 0 &&
|
||||
disabledItemMap[selectItem.value[index]]
|
||||
)
|
||||
"
|
||||
@click="
|
||||
removeItemHandle($event, {
|
||||
label: item,
|
||||
value: Array.isArray(selectItem.value)
|
||||
? selectItem.value[index]
|
||||
: null,
|
||||
})
|
||||
"
|
||||
>
|
||||
</i>
|
||||
</lay-badge>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dl class="layui-anim layui-anim-upbit">
|
||||
<!-- 多选不支持空提示 -->
|
||||
<template v-if="!multiple && showEmpty">
|
||||
<lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
|
||||
</template>
|
||||
<slot></slot>
|
||||
</dl>
|
||||
</div>
|
||||
<div
|
||||
ref="selectRef"
|
||||
class="layui-unselect layui-form-select"
|
||||
:class="{ 'layui-form-selected': openState }"
|
||||
>
|
||||
<div class="layui-select-title" @click="open">
|
||||
<input
|
||||
type="text"
|
||||
:placeholder="
|
||||
selectItem.value !== null &&
|
||||
Array.isArray(selectItem.value) &&
|
||||
selectItem.value.length > 0
|
||||
? ''
|
||||
: emptyMessage ?? placeholder
|
||||
"
|
||||
:disabled="disabled"
|
||||
readonly
|
||||
:value="
|
||||
!selectItem.multiple && selectItem.value !== null
|
||||
? selectItem.label
|
||||
: null
|
||||
"
|
||||
:name="name"
|
||||
:class="[
|
||||
'layui-input',
|
||||
'layui-unselect',
|
||||
{ 'layui-disabled': disabled },
|
||||
]"
|
||||
/>
|
||||
<i :class="['layui-edge', { 'layui-disabled': disabled }]"></i>
|
||||
<!-- 多选 -->
|
||||
<div
|
||||
v-if="selectItem.multiple && Array.isArray(selectItem.label)"
|
||||
class="layui-multiple-select-row"
|
||||
>
|
||||
<div class="layui-multiple-select-badge">
|
||||
<template v-for="(item, index) in selectItem.label" :key="index">
|
||||
<lay-badge theme="green">
|
||||
<span>{{ item }}</span>
|
||||
<i
|
||||
:class="['layui-icon', { 'layui-icon-close': true }]"
|
||||
v-if="
|
||||
!disabled &&
|
||||
!(
|
||||
Array.isArray(selectItem.value) &&
|
||||
selectItem.value.length > 0 &&
|
||||
disabledItemMap[selectItem.value[index]]
|
||||
)
|
||||
"
|
||||
@click="
|
||||
removeItemHandle($event, {
|
||||
label: item,
|
||||
value: Array.isArray(selectItem.value)
|
||||
? selectItem.value[index]
|
||||
: null,
|
||||
})
|
||||
"
|
||||
>
|
||||
</i>
|
||||
</lay-badge>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<dl class="layui-anim layui-anim-upbit">
|
||||
<!-- 多选不支持空提示 -->
|
||||
<template v-if="!multiple && showEmpty">
|
||||
<lay-select-option :value="null" :label="emptyMessage ?? placeholder" />
|
||||
</template>
|
||||
<slot></slot>
|
||||
</dl>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup name="LaySelect" lang="ts">
|
||||
import "./index.less";
|
||||
import LaySelectOption from "../selectOption/index.vue";
|
||||
import {
|
||||
defineProps,
|
||||
provide,
|
||||
isProxy,
|
||||
ref,
|
||||
watch,
|
||||
computed,
|
||||
reactive,
|
||||
toRefs,
|
||||
Ref,
|
||||
defineProps,
|
||||
provide,
|
||||
isProxy,
|
||||
ref,
|
||||
watch,
|
||||
computed,
|
||||
reactive,
|
||||
toRefs,
|
||||
Ref,
|
||||
} from "vue";
|
||||
import { useClickOutside } from "@layui/hooks-vue";
|
||||
import { SelectItem } from "../type";
|
||||
@ -94,115 +94,127 @@ const selectRef = ref<null | HTMLElement>(null);
|
||||
const isClickOutside = useClickOutside(selectRef);
|
||||
|
||||
watch(isClickOutside, () => {
|
||||
if (isClickOutside.value) {
|
||||
openState.value = false;
|
||||
}
|
||||
if (isClickOutside.value) {
|
||||
openState.value = false;
|
||||
}
|
||||
});
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue?: string | number | [] | null;
|
||||
name?: string;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
showEmpty?: boolean;
|
||||
emptyMessage?: string;
|
||||
multiple?: boolean;
|
||||
}>(),
|
||||
{
|
||||
modelValue: null,
|
||||
placeholder: "请选择",
|
||||
disabled: false,
|
||||
showEmpty: true,
|
||||
multiple: false,
|
||||
}
|
||||
defineProps<{
|
||||
modelValue?: string | number | [] | null;
|
||||
name?: string;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
showEmpty?: boolean;
|
||||
emptyMessage?: string;
|
||||
multiple?: boolean;
|
||||
}>(),
|
||||
{
|
||||
modelValue: null,
|
||||
placeholder: "请选择",
|
||||
disabled: false,
|
||||
showEmpty: true,
|
||||
multiple: false,
|
||||
}
|
||||
);
|
||||
|
||||
const openState = ref(false);
|
||||
|
||||
const open = function () {
|
||||
// 禁用
|
||||
if (props.disabled) {
|
||||
openState.value = false;
|
||||
return;
|
||||
}
|
||||
openState.value = !openState.value;
|
||||
// 禁用
|
||||
if (props.disabled) {
|
||||
openState.value = false;
|
||||
return;
|
||||
}
|
||||
openState.value = !openState.value;
|
||||
};
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
const selectItem = ref<SelectItem>({
|
||||
value: !props.multiple
|
||||
? props.modelValue
|
||||
: props.modelValue
|
||||
? ([] as any[]).concat(props.modelValue)
|
||||
: [],
|
||||
label: props.multiple ? [] : null,
|
||||
multiple: props.multiple,
|
||||
value: !props.multiple
|
||||
? props.modelValue
|
||||
: props.modelValue
|
||||
? ([] as any[]).concat(props.modelValue)
|
||||
: [],
|
||||
label: props.multiple ? [] : null,
|
||||
multiple: props.multiple,
|
||||
} as SelectItem);
|
||||
|
||||
watch(
|
||||
() => selectItem.value.value,
|
||||
(val) => {
|
||||
emit("update:modelValue", val);
|
||||
emit("change", val);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
() => selectItem.value.value,
|
||||
(val) => {
|
||||
emit("update:modelValue", val);
|
||||
emit("change", val);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(value) => {
|
||||
selectItem.value.value = value;
|
||||
if (!value && value !== 0) {
|
||||
props.multiple && (selectItem.value.value = []);
|
||||
selectItem.value.label = props.multiple ? [] : null;
|
||||
}
|
||||
}
|
||||
);
|
||||
watch(props, () => {
|
||||
let value = props.modelValue;
|
||||
if (props.multiple) {
|
||||
if (Array.isArray(value)) {
|
||||
selectItem.value.value = value;
|
||||
selectItem.value.label = value.map((o) => ItemsMap.value[o]);
|
||||
} else {
|
||||
console.error("多选时请传入数组值");
|
||||
}
|
||||
} else {
|
||||
selectItem.value.value = value;
|
||||
//@ts-ignore
|
||||
selectItem.value.label = ItemsMap.value[value] || "";
|
||||
}
|
||||
});
|
||||
|
||||
// 禁止操作子项
|
||||
const disabledItemMap: { [key: string | number]: boolean } = {};
|
||||
const selectItemHandle = function (
|
||||
_selectItem: SelectItem,
|
||||
isChecked?: boolean
|
||||
_selectItem: SelectItem,
|
||||
isChecked?: boolean
|
||||
) {
|
||||
if (!props.multiple) {
|
||||
openState.value = false;
|
||||
}
|
||||
disabledItemMap[_selectItem.value as string | number] =
|
||||
_selectItem.disabled as boolean;
|
||||
if (typeof isChecked !== "boolean") {
|
||||
props.multiple
|
||||
? (selectItem.value.label as any[]).push(_selectItem.label)
|
||||
: (selectItem.value.label = _selectItem.label);
|
||||
return;
|
||||
}
|
||||
let values = selectItem.value.value;
|
||||
if (props.multiple && Array.isArray(values)) {
|
||||
const _values = values as any[];
|
||||
const _labels = selectItem.value.label as any[];
|
||||
if (isChecked) {
|
||||
_values.push(_selectItem.value);
|
||||
_labels.push(_selectItem.label);
|
||||
} else {
|
||||
_values.splice(_values.indexOf(_selectItem.value), 1);
|
||||
_labels.splice(_labels.indexOf(_selectItem.label), 1);
|
||||
}
|
||||
selectItem.value.value = _values;
|
||||
selectItem.value.label = _labels;
|
||||
} else {
|
||||
selectItem.value.value = _selectItem.value;
|
||||
selectItem.value.label = _selectItem.label;
|
||||
}
|
||||
if (!props.multiple) {
|
||||
openState.value = false;
|
||||
}
|
||||
disabledItemMap[_selectItem.value as string | number] =
|
||||
_selectItem.disabled as boolean;
|
||||
if (typeof isChecked !== "boolean") {
|
||||
props.multiple
|
||||
? (selectItem.value.label as any[]).push(_selectItem.label)
|
||||
: (selectItem.value.label = _selectItem.label);
|
||||
return;
|
||||
}
|
||||
let values = selectItem.value.value;
|
||||
if (props.multiple && Array.isArray(values)) {
|
||||
const _values = values as any[];
|
||||
const _labels = selectItem.value.label as any[];
|
||||
if (isChecked) {
|
||||
_values.push(_selectItem.value);
|
||||
_labels.push(_selectItem.label);
|
||||
} else {
|
||||
_values.splice(_values.indexOf(_selectItem.value), 1);
|
||||
_labels.splice(_labels.indexOf(_selectItem.label), 1);
|
||||
}
|
||||
selectItem.value.value = _values;
|
||||
selectItem.value.label = _labels;
|
||||
} else {
|
||||
selectItem.value.value = _selectItem.value;
|
||||
selectItem.value.label = _selectItem.label;
|
||||
}
|
||||
};
|
||||
|
||||
const removeItemHandle = function (e: MouseEvent, _selectItem: SelectItem) {
|
||||
e.stopPropagation();
|
||||
selectItemHandle(_selectItem, false);
|
||||
e.stopPropagation();
|
||||
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("selectItem", selectItem);
|
||||
provide("selectItemPush", selectItemPush);
|
||||
</script>
|
||||
|
||||
@ -1,65 +1,81 @@
|
||||
<template>
|
||||
<dd
|
||||
:value="value"
|
||||
:class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]"
|
||||
@click="selectHandle"
|
||||
>
|
||||
<template v-if="selectItem.multiple">
|
||||
<lay-checkbox
|
||||
skin="primary"
|
||||
v-model="selected"
|
||||
@change="selectHandle"
|
||||
label=""
|
||||
/>
|
||||
</template>
|
||||
<slot>{{ label }}</slot>
|
||||
</dd>
|
||||
<dd
|
||||
:value="value"
|
||||
:class="[{ 'layui-this': selected }, { 'layui-disabled': disabled }]"
|
||||
@click="selectHandle"
|
||||
>
|
||||
<template v-if="selectItem.multiple">
|
||||
<lay-checkbox
|
||||
skin="primary"
|
||||
v-model="selected"
|
||||
@change="selectHandle"
|
||||
label=""
|
||||
/>
|
||||
</template>
|
||||
<slot>{{ label }}</slot>
|
||||
</dd>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LaySelectOption",
|
||||
name: "LaySelectOption",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import LayCheckbox from "../checkbox";
|
||||
import { SelectItem, SelectItemHandle } from "../type";
|
||||
import { SelectItem, SelectItemHandle, SelectItemPush } from "../type";
|
||||
import { computed, defineProps, inject, onMounted, Ref } from "vue";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
value: string | null | undefined;
|
||||
label?: string;
|
||||
disabled?: boolean;
|
||||
}>(),
|
||||
{
|
||||
disabled: false,
|
||||
}
|
||||
defineProps<{
|
||||
value: string | null | undefined;
|
||||
label?: string;
|
||||
disabled?: boolean;
|
||||
}>(),
|
||||
{
|
||||
disabled: false,
|
||||
}
|
||||
);
|
||||
|
||||
const selectItemHandle = inject("selectItemHandle") as SelectItemHandle;
|
||||
const selectItem = inject("selectItem") as Ref<SelectItem>;
|
||||
const selectItemPush = inject("selectItemPush") as Ref<SelectItemPush>;
|
||||
|
||||
const selectHandle = function () {
|
||||
!props.disabled && callSelectItemHandle(!selected.value);
|
||||
}
|
||||
const callSelectItemHandle = function(isChecked ?: boolean){
|
||||
selectItemHandle({
|
||||
value : props.value,
|
||||
label : props.label,
|
||||
disabled : props.disabled
|
||||
}, isChecked);
|
||||
}
|
||||
!props.disabled && callSelectItemHandle(!selected.value);
|
||||
};
|
||||
const callSelectItemHandle = function (isChecked?: boolean) {
|
||||
// console.log("callSelectItemHandle");
|
||||
selectItemHandle(
|
||||
{
|
||||
value: props.value,
|
||||
label: props.label,
|
||||
disabled: props.disabled,
|
||||
},
|
||||
isChecked
|
||||
);
|
||||
};
|
||||
const selected = computed({
|
||||
get(){
|
||||
const selectValues = selectItem.value.value;
|
||||
if (Array.isArray(selectValues)) {
|
||||
return (selectValues as any[]).indexOf(props.value) > -1;
|
||||
}
|
||||
return selectItem.value.value === props.value
|
||||
},
|
||||
set(val){}
|
||||
})
|
||||
onMounted(() => selected.value && callSelectItemHandle())
|
||||
get() {
|
||||
const selectValues = selectItem.value.value;
|
||||
if (Array.isArray(selectValues)) {
|
||||
return (selectValues as any[]).indexOf(props.value) > -1;
|
||||
}
|
||||
return selectItem.value.value === props.value;
|
||||
},
|
||||
set(val) {},
|
||||
});
|
||||
const callSelectItemPush = function () {
|
||||
let item = {
|
||||
value: props.value,
|
||||
label: props.label,
|
||||
disabled: props.disabled,
|
||||
};
|
||||
selectItemPush(item);
|
||||
};
|
||||
onMounted(() => {
|
||||
callSelectItemPush();
|
||||
selected.value && callSelectItemHandle();
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,11 +1,16 @@
|
||||
@width-height-pace: 20px;
|
||||
@step-color: #5FB878;
|
||||
@width-height-pace: 24px;
|
||||
@step-color: @step-success-color;
|
||||
@step-fail-color: #FF5722;
|
||||
@step-primary-color: #1E9FFF;
|
||||
@step-warning-color: #FFB800;
|
||||
@step-success-color: #5FB878;
|
||||
|
||||
.lay-step{
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
.lay-step-item{
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.is-item-center{
|
||||
@ -16,9 +21,10 @@
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
.lay-step-item-pace{
|
||||
cursor: pointer;
|
||||
width: @width-height-pace;
|
||||
height: @width-height-pace;
|
||||
border: 2px #8D8D8D solid;
|
||||
border: 1px #8D8D8D solid;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
line-height: @width-height-pace;
|
||||
@ -28,69 +34,88 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
.lay-step-item-active{
|
||||
border: 2px @step-color solid;
|
||||
color: #FFFFFF;
|
||||
background: @step-color;
|
||||
border: 1px @step-color solid;
|
||||
color: @step-color;
|
||||
}
|
||||
|
||||
.lay-step-item-wait{
|
||||
border: 2px #000000 solid;
|
||||
border: 1px #000000 solid;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.lay-step-item--success {
|
||||
border: 2px @step-color solid;
|
||||
border: 1px @step-color solid;
|
||||
color: #FFFFFF;
|
||||
background: @step-color;
|
||||
}
|
||||
|
||||
.lay-step-item--fail{
|
||||
border: 2px #FF5722 solid;
|
||||
border: 1px @step-fail-color solid;
|
||||
color: #FFFFFF;
|
||||
background: #FF5722;
|
||||
background: @step-fail-color;
|
||||
}
|
||||
|
||||
.lay-step-item--warning{
|
||||
border: 2px #FFB800 solid;
|
||||
border: 1px @step-warning-color solid;
|
||||
color: #FFFFFF;
|
||||
background: #FFB800;
|
||||
background: @step-warning-color;
|
||||
}
|
||||
.lay-step-item--primary{
|
||||
border: 2px #1E9FFF solid;
|
||||
border: 1px @step-primary-color solid;
|
||||
color: #FFFFFF;
|
||||
background: #1E9FFF;
|
||||
background: @step-primary-color;
|
||||
}
|
||||
|
||||
.lay-step-item-success {
|
||||
border: 2px @step-color solid;
|
||||
border: 1px @step-color solid;
|
||||
color: #FFFFFF;
|
||||
background: @step-color;
|
||||
}
|
||||
|
||||
.lay-step-item-fail{
|
||||
border: 2px #FF5722 solid;
|
||||
border: 1px @step-fail-color solid;
|
||||
color: #FFFFFF;
|
||||
background: #FF5722;
|
||||
background: @step-fail-color;
|
||||
}
|
||||
|
||||
.lay-step-item-warning{
|
||||
border: 2px #FFB800 solid;
|
||||
border: 1px @step-warning-color solid;
|
||||
color: #FFFFFF;
|
||||
background: #FFB800;
|
||||
background: @step-warning-color;
|
||||
}
|
||||
.lay-step-item-primary{
|
||||
border: 2px #1E9FFF solid;
|
||||
border: 1px @step-primary-color solid;
|
||||
color: #FFFFFF;
|
||||
background: #1E9FFF;
|
||||
background: @step-primary-color;
|
||||
}
|
||||
|
||||
.lay-step-item-content{
|
||||
color: #8D8D8D;
|
||||
cursor: pointer;
|
||||
.lay-step-item-content-title{
|
||||
font-weight: bold;
|
||||
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{
|
||||
color: @step-color;
|
||||
}
|
||||
@ -99,13 +124,13 @@
|
||||
color: @step-color;
|
||||
}
|
||||
.lay-step-item-content--fail{
|
||||
color: #FF5722;
|
||||
color: @step-fail-color;
|
||||
}
|
||||
.lay-step-item-content--warning{
|
||||
color: #FFB800;
|
||||
color: @step-warning-color;
|
||||
}
|
||||
.lay-step-item-content--primary{
|
||||
color: #1E9FFF;
|
||||
color: @step-primary-color;
|
||||
}
|
||||
|
||||
.lay-step-item-content-wait{
|
||||
@ -115,13 +140,13 @@
|
||||
color: @step-color;
|
||||
}
|
||||
.lay-step-item-content-fail{
|
||||
color: #FF5722;
|
||||
color: @step-fail-color;
|
||||
}
|
||||
.lay-step-item-content-warning{
|
||||
color: #FFB800;
|
||||
color: @step-warning-color;
|
||||
}
|
||||
.lay-step-item-content-primary{
|
||||
color: #1E9FFF;
|
||||
color: @step-primary-color;
|
||||
}
|
||||
|
||||
|
||||
@ -134,9 +159,9 @@
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
// transform: translateY(-50%);
|
||||
display: block;
|
||||
height: 2px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: #C9C5C5;
|
||||
}
|
||||
@ -146,22 +171,99 @@
|
||||
|
||||
.lay-step-item-line-active:before {
|
||||
transition: background 150ms;
|
||||
background: #5FB878 !important;
|
||||
background: @step-success-color !important;
|
||||
}
|
||||
|
||||
.lay-step-item-line-fail:before {
|
||||
transition: background 150ms;
|
||||
background: #FF5722 !important;
|
||||
background: @step-fail-color !important;
|
||||
}
|
||||
|
||||
.lay-step-item-line-warning:before {
|
||||
transition: background 150ms;
|
||||
background: #FFB800 !important;
|
||||
background: @step-warning-color !important;
|
||||
}
|
||||
|
||||
.lay-step-item-line-primary:before {
|
||||
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;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
// transform: translateX(-50%);
|
||||
display: block;
|
||||
width: 2px;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #C9C5C5;
|
||||
}
|
||||
.lay-step-item-content{
|
||||
margin-left: 8px;
|
||||
}
|
||||
.is-vertical{
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -5,7 +5,14 @@
|
||||
</template>
|
||||
|
||||
<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";
|
||||
|
||||
export interface LayStepProps {
|
||||
@ -14,6 +21,8 @@ export interface LayStepProps {
|
||||
direction?: string;
|
||||
space?: string;
|
||||
currentStatus?: string;
|
||||
composition?: string;
|
||||
simple?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayStepProps>(), {
|
||||
@ -21,11 +30,19 @@ const props = withDefaults(defineProps<LayStepProps>(), {
|
||||
center: false,
|
||||
direction: "horizontal",
|
||||
space: "auto",
|
||||
currentStatus: "primary",
|
||||
currentStatus: "success",
|
||||
composition: "default",
|
||||
simple: false,
|
||||
});
|
||||
|
||||
const steps = ref([]);
|
||||
|
||||
const emits = defineEmits(["onChange"]);
|
||||
|
||||
const change = (index) => {
|
||||
emits("onChange", index - 1);
|
||||
};
|
||||
|
||||
watch(steps, () => {
|
||||
steps.value.forEach(
|
||||
(instance: { setIndex: (arg0: any) => void }, index: any) => {
|
||||
@ -37,6 +54,7 @@ watch(steps, () => {
|
||||
provide("LayStep", {
|
||||
props,
|
||||
steps,
|
||||
change,
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,8 +1,9 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="!simple"
|
||||
:class="[
|
||||
'lay-step-item',
|
||||
isLast && !isCenter ? 'lay-step-item-last' : '',
|
||||
isLast && !isCenter && composition !== 'row' ? 'lay-step-item-last' : '',
|
||||
isCenter ? 'is-item-center' : '',
|
||||
isVertical ? 'is-vertical' : '',
|
||||
]"
|
||||
@ -27,6 +28,7 @@
|
||||
isWait ? 'lay-step-item-wait' : '',
|
||||
isCenter ? 'is-center' : '',
|
||||
]"
|
||||
@click="onChange(index + 1)"
|
||||
>
|
||||
<slot name="pace">
|
||||
<template v-if="icon">
|
||||
@ -42,20 +44,40 @@
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
<slot>
|
||||
<div
|
||||
:class="[
|
||||
'lay-step-item-content',
|
||||
isActive ? `lay-step-item-content-active` : '',
|
||||
isCurrent === index ? `lay-step-item-content--${currentStatus}` : '',
|
||||
status ? `lay-step-item-content-${status}` : '',
|
||||
isWait ? 'lay-step-item-content-wait' : '',
|
||||
]"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'lay-step-item-content',
|
||||
composition === 'row' ? 'lay-step-item-content-row' : '',
|
||||
isActive ? `lay-step-item-content-active` : '',
|
||||
isCurrent === index ? `lay-step-item-content--${currentStatus}` : '',
|
||||
status ? `lay-step-item-content-${status}` : '',
|
||||
isWait ? 'lay-step-item-content-wait' : '',
|
||||
]"
|
||||
@click="onChange(index + 1)"
|
||||
>
|
||||
<slot>
|
||||
<div class="lay-step-item-content-title">{{ title }}</div>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
@ -95,6 +117,10 @@ const setIndex = (val: number) => {
|
||||
index.value = val;
|
||||
};
|
||||
|
||||
const onChange = (index) => {
|
||||
parents.change(index);
|
||||
};
|
||||
|
||||
const stepsCount = computed(() => {
|
||||
return parents.steps.value.length;
|
||||
});
|
||||
@ -102,10 +128,21 @@ const stepsCount = computed(() => {
|
||||
const currentStatus = computed(() => {
|
||||
return parents.props.currentStatus;
|
||||
});
|
||||
|
||||
const simple = computed(() => {
|
||||
return parents.props.simple;
|
||||
});
|
||||
|
||||
const composition = computed(() => {
|
||||
return parents.props.composition;
|
||||
});
|
||||
const isCurrent = computed(() => {
|
||||
return parents.props.active;
|
||||
});
|
||||
console.log(isCurrent);
|
||||
|
||||
const isCurrentBorder = computed(() => {
|
||||
return parents.props.active + 1;
|
||||
});
|
||||
const space = computed(() => {
|
||||
return parents.props.space;
|
||||
});
|
||||
@ -126,6 +163,10 @@ const isWait: ComputedRef<boolean> = computed(() => {
|
||||
return index.value === parents.props.active + 1;
|
||||
});
|
||||
|
||||
const isSimpleActive: ComputedRef<boolean> = computed(() => {
|
||||
return index.value - 1 <= parents.props.active;
|
||||
});
|
||||
|
||||
const isActive: ComputedRef<boolean> = computed(() => {
|
||||
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({
|
||||
itemId: computed(() => currentInstance?.uid),
|
||||
setIndex,
|
||||
|
||||
@ -3,7 +3,7 @@ import Component from "./index.vue";
|
||||
import type { IDefineComponent } from "../type/index";
|
||||
|
||||
Component.install = (app: App) => {
|
||||
app.component(Component.name || "LayCount", Component);
|
||||
app.component(Component.name || "laySubMenu", Component);
|
||||
};
|
||||
|
||||
export default Component as IDefineComponent;
|
||||
57
src/module/subMenu/index.vue
Normal file
57
src/module/subMenu/index.vue
Normal 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
180
src/module/tree/index.less
Normal 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;
|
||||
}
|
||||
@ -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">
|
||||
export default {
|
||||
name: "LayTree",
|
||||
@ -16,6 +10,7 @@ import TreeNode from "./TreeNode.vue";
|
||||
import { computed } from "vue";
|
||||
import { useTree } from "./useTree";
|
||||
import { TreeData } from "./tree";
|
||||
import "./index.less";
|
||||
|
||||
type StringFn = () => string;
|
||||
type StringOrNumber = string | number;
|
||||
|
||||
@ -9,3 +9,7 @@ export interface SelectItem {
|
||||
export interface SelectItemHandle {
|
||||
(selectItem: SelectItem, isChecked?: boolean): void;
|
||||
}
|
||||
|
||||
export interface SelectItemPush {
|
||||
(selectItem: SelectItem): void
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user