Merge branch 'develop' of https://gitee.com/dingyongya/layui-vue into split-panel
Conflicts: src/index.ts
This commit is contained in:
dingyongya
commit
3d0daef5be
@ -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
|
||||
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 事件
|
||||
::: title Backtop 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -110,7 +110,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 插槽
|
||||
::: title Backtop 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -39,7 +39,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 徽章属性
|
||||
::: title Badge 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 徽章插槽
|
||||
::: title Badge 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -82,7 +82,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 面包屑属性
|
||||
::: title Breadcrumb 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -93,7 +93,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 面包屑插槽
|
||||
::: title Breadcrumb 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -108,7 +108,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 卡片属性
|
||||
::: title Card 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -119,7 +119,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 卡片插槽
|
||||
::: title Card 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -118,7 +118,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 轮播属性
|
||||
::: title Carousel 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -132,7 +132,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 轮播事件
|
||||
::: title Carousel 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -188,7 +188,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 复选框属性
|
||||
::: title Checkbox 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -203,7 +203,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 复选框事件
|
||||
::: title Checkbox 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -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,17 +210,6 @@ 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
|
||||
:::
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
::: title icon-picker 属性
|
||||
::: title Icon Picker 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -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,17 +126,5 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title countUp 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 名称 | 描述 | 参数 |
|
||||
| ----- | -------- | ---- |
|
||||
| prefix | 前缀 | -- |
|
||||
| suffix | 后缀 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: previousNext countUp
|
||||
:::
|
||||
@ -70,7 +70,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 下拉属性
|
||||
::: title Dropdown 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -81,7 +81,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 下拉插槽
|
||||
::: title Dropdown 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -47,7 +47,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title empty 属性
|
||||
::: title Empty 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -64,7 +64,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 字段属性
|
||||
::: title Field 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -139,7 +139,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 行属性
|
||||
::: title Row 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -150,7 +150,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 列属性
|
||||
::: title Col 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -106,7 +106,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 输入框属性
|
||||
::: title Input 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -120,7 +120,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 输入框属性
|
||||
::: title Input 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -111,7 +111,7 @@
|
||||
:::
|
||||
|
||||
|
||||
::: title input-number属性
|
||||
::: title Input Number 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -130,7 +130,7 @@
|
||||
|
||||
:::
|
||||
|
||||
::: title 事件
|
||||
::: title Input Number 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -37,7 +37,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 分割属性
|
||||
::: title Line 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -47,7 +47,7 @@ export default {
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" :tree="true">
|
||||
<lay-menu-item title="首页" id="1"></lay-menu-item>
|
||||
<lay-menu-item title="用户" id="2"></lay-menu-item>
|
||||
<lay-menu-item title="角色" id="3"></lay-menu-item>
|
||||
@ -66,6 +66,49 @@ export default {
|
||||
<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-sub-menu>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
@ -84,59 +127,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 菜单插槽
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" v-model:tree="isTree">
|
||||
<lay-menu-item id="1">
|
||||
<template v-slot:title>
|
||||
<router-link to="">首页</router-link>
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="7">
|
||||
<template v-slot:title>
|
||||
<router-link to="">目录</router-link>
|
||||
</template>
|
||||
<lay-menu-item id="8">
|
||||
<template v-slot:title>
|
||||
<router-link to="">菜单一</router-link>
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
<lay-menu-item id="9">
|
||||
<template v-slot:title>
|
||||
<router-link to="">菜单二</router-link>
|
||||
</template>
|
||||
</lay-menu-item>
|
||||
</lay-menu-item>
|
||||
</lay-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const isTree = ref(true)
|
||||
const selectedKey = ref("5")
|
||||
const openKeys = ref(["7"])
|
||||
|
||||
return {
|
||||
isTree,
|
||||
openKeys,
|
||||
selectedKey
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
:::
|
||||
|
||||
::: title 菜单属性
|
||||
::: title Menu 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -148,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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -24,7 +24,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 面板插槽
|
||||
::: title Panel 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -113,7 +113,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 进度属性
|
||||
::: title Progress 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -97,7 +97,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 单选框属性
|
||||
::: title Radio 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -110,7 +110,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 单选框事件
|
||||
::: title Radio 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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,17 +185,6 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title select 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 接收值 |
|
||||
| ------ | ---------- | --------------- |
|
||||
| change | 切换事件 | value |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
|
||||
@ -82,7 +82,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 骨架屏属性
|
||||
::: title Skeleton 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -96,7 +96,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 骨架屏插槽
|
||||
::: title Skeleton 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -1,3 +1,6 @@
|
||||
::: anchor
|
||||
:::
|
||||
|
||||
::: title 横向
|
||||
:::
|
||||
|
||||
@ -91,7 +94,7 @@ export default {
|
||||
</script>
|
||||
:::
|
||||
|
||||
::: title slider 属性
|
||||
::: title Slider 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -423,7 +423,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title step步骤条属性
|
||||
::: title Step 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -442,7 +442,7 @@ export default {
|
||||
:::
|
||||
|
||||
|
||||
::: title stepItem步骤条属性
|
||||
::: title Step Item 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -457,7 +457,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title stepItem步骤条slot
|
||||
::: title Step Item 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -111,7 +111,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 开关属性
|
||||
::: title Switch 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -126,7 +126,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 开关事件
|
||||
::: title Switch 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -130,15 +130,15 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 控制是否关闭
|
||||
::: title 关闭前置
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab type="card" v-model="current5" allow-close @change="change5" @close="close5" :beforeClose="beforeClose">
|
||||
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
<lay-tab-item title="选项一" id="1" closable="true"><div style="padding:20px">选项一</div></lay-tab-item>
|
||||
<lay-tab-item title="选项二" id="2" closable="false"><div style="padding:20px">选项二</div></lay-tab-item>
|
||||
<lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
|
||||
<lay-tab-item title="选项四" id="4"><div style="padding:20px">选项四</div></lay-tab-item>
|
||||
<lay-tab-item title="选项五" id="5"><div style="padding:20px">选项五</div></lay-tab-item>
|
||||
@ -169,7 +169,7 @@ export default {
|
||||
return {
|
||||
current5,
|
||||
change5,
|
||||
beforeClose，
|
||||
beforeClose,
|
||||
close5
|
||||
}
|
||||
}
|
||||
@ -178,15 +178,14 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
|
||||
::: title 嵌套循环
|
||||
:::
|
||||
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-tab type="card" v-model="current6" @change="change6">
|
||||
<lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id">
|
||||
<lay-tab type="card" allow-close v-model="current6" @change="change6">
|
||||
<lay-tab-item v-for="a in arr" :key="a" :title="a.title" :id="a.id" :closable="a.closable">
|
||||
内容{{a.id}}
|
||||
</lay-tab-item>
|
||||
</lay-tab>
|
||||
@ -204,12 +203,11 @@ export default {
|
||||
}
|
||||
|
||||
const arr = ref([
|
||||
{id:'1', title:'选项一'},
|
||||
{id:'2', title:'选项二'}
|
||||
{id:'1', title:'选项一', closable: false},
|
||||
{id:'2', title:'选项二'},
|
||||
{id:'3', title:'选项三'}
|
||||
])
|
||||
|
||||
arr.value.push({id:'3', title:'选项三'})
|
||||
|
||||
return {
|
||||
current6,
|
||||
arr
|
||||
@ -220,22 +218,22 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 选项卡属性
|
||||
::: title Tab 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ----------- | -------- | -------------- |
|
||||
| v-model | 当前激活 | -- |
|
||||
| type | 主题样式 | -- |
|
||||
| allow-close | 允许关闭 | `true` `false` |
|
||||
| before-close | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭 |
|
||||
| before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 |
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| ------------ | ------------------------------------ | ----------------------------------------- |
|
||||
| v-model | 当前激活 | -- |
|
||||
| type | 主题样式 | -- |
|
||||
| allow-close | 允许关闭 | `true` `false` |
|
||||
| before-close | `Function`关闭之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行关闭 |
|
||||
| before-leave | `Function`切换标签之前的回调钩子函数 | 参数(`id`), `return false` 表示不进行切换 |
|
||||
|
||||
:::
|
||||
|
||||
::: title 选项卡事件
|
||||
::: title Tab 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -247,6 +245,19 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title Tab Item 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
| 属性 | 描述 | 可选值 |
|
||||
| -------- | -------- | ------ |
|
||||
| id | 唯一标识 | -- |
|
||||
| title | 头部标题 | -- |
|
||||
| closable | 允许关闭 | -- |
|
||||
|
||||
:::
|
||||
|
||||
::: comment
|
||||
:::
|
||||
|
||||
|
||||
@ -315,7 +315,7 @@ export default {
|
||||
|
||||
### <div id="tableColumn"></div>
|
||||
|
||||
::: title Table Column 属性
|
||||
::: title Table 数据
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -85,7 +85,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 文本域属性
|
||||
::: title Textarea 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title 文本域事件
|
||||
::: title Textarea 事件
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -120,7 +120,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title Timeline Item 属性
|
||||
::: title Timeline Item 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -113,7 +113,7 @@
|
||||
</style>
|
||||
:::
|
||||
|
||||
::: title tooltip属性
|
||||
::: title Tooltip 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -86,7 +86,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title transfer 属性
|
||||
::: title Transfer 属性
|
||||
:::
|
||||
|
||||
::: table
|
||||
@ -99,7 +99,7 @@ export default {
|
||||
|
||||
:::
|
||||
|
||||
::: title transfer 插槽
|
||||
::: title Transfer 插槽
|
||||
:::
|
||||
|
||||
::: table
|
||||
|
||||
@ -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
|
||||
|
||||
@ -11,16 +11,45 @@
|
||||
<template>
|
||||
<lay-timeline>
|
||||
<lay-timeline-item title="0.3.x">
|
||||
<ul>
|
||||
<a name="0-3-5"> </a>
|
||||
<li>
|
||||
<h3>0.3.5 <span class="layui-badge-rim">2022-01-19</span></h3>
|
||||
<ul>
|
||||
<li>[修复] dropdown 下拉菜单 content 显示位置问题。</li>
|
||||
<li>[升级] icons-vue 1.0.3 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-3-4"> </a>
|
||||
<li>
|
||||
<h3>0.3.4 <span class="layui-badge-rim">2022-01-19</span></h3>
|
||||
<ul>
|
||||
<li>[新增] avatar-list 头像列表组件。</li>
|
||||
<li>[新增] tab-item 选项卡组件 closable 属性, 控制当前选项卡 close 支持。</li>
|
||||
<li>[修复] button 按钮 disabled 为 true 时, 触发 click 事件。</li>
|
||||
<li>[修复] menu-item 与 sub-menu 组件的 title 属性必填警告。</li>
|
||||
<li>[修复] layout 组件 side 因 flex 布局宽度不固定。</li>
|
||||
<li>[优化] layer 的 children slot 渲染机制。</li>
|
||||
<li>[升级] layer-vue 1.2.5 版本。</li>
|
||||
<li>[升级] vue 3.2.27 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<a name="0-3-3"> </a>
|
||||
<li>
|
||||
<h3>0.3.3 <span class="layui-badge-rim">2022-01-05</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>[新增] sub-menu 目录组件, 与 menu-item 组合使用。</li>
|
||||
<li>[修复] menu 组件 layui-nav-more 切换动画。</li>
|
||||
<li>[修复] menu 菜单组件 layui-nav-more 切换动画。</li>
|
||||
<li>[修复] select 下拉选择组件外部参数变更组件内的数值不生效的问题</li>
|
||||
<li>[修复] page 分页组件 limit 数量过多时, 展示部分页数。</li>
|
||||
<li>[推出] layui-vue-admin 后台模板 </li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -35,7 +64,7 @@
|
||||
<li>[增强] menu 菜单组件, 初步支持无限级嵌套。</li>
|
||||
<li>[修复] layer.close layer.closeAll 函数无法触发 OutAnim 过度动画问题。</li>
|
||||
<li>[废弃] menu-child-item 组件, 使用 menu-item 替代。</li>
|
||||
<li>[升级] layer-vue 1.2.4。</li>
|
||||
<li>[升级] layer-vue 1.2.4 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -53,7 +82,7 @@
|
||||
<li>[修复] rate 评分 mouseleave 事件绑定警告。</li>
|
||||
<li>[修复] npm 安装 layui-vue 不必要的依赖警告。</li>
|
||||
<li>[集成] eslint, prettier 规范插件 。</li>
|
||||
<li>[升级] icons-vue 1.0.2。</li>
|
||||
<li>[升级] icons-vue 1.0.2 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@ -72,7 +101,7 @@
|
||||
<li>[修复] layer 弹层 v-model 切换状态后, 让其保持 area 与 offset 状态。</li>
|
||||
<li>[修复] transfer 穿梭框组件按钮样式, 使其增加减少操作按钮对齐。</li>
|
||||
<li>[修复] tree 树开启 checkbox 时, 无法选中的问题。</li>
|
||||
<li>[升级] layer-vue 1.2.2。</li>
|
||||
<li>[升级] layer-vue 1.2.2 版本。</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -110,10 +110,6 @@ form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.source .layui-avatar {
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
.site-doc-icon {
|
||||
margin-bottom: 50px;
|
||||
font-size: 0;
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"
|
||||
|
||||
23
package.json
23
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",
|
||||
@ -24,20 +24,21 @@
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build --emptyOutDir && npm run build:types",
|
||||
"build:es": "es use",
|
||||
"build:umd": "umd use",
|
||||
"build:types": "rimraf types && tsc -d",
|
||||
"build:example": "vite build example",
|
||||
"lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
|
||||
"lint:prettier": "prettier --write 'src/**/*'",
|
||||
"commit": "git cz"
|
||||
"lint:prettier": "prettier --write 'src/**/*'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@layui/hooks-vue": "^0.1.6",
|
||||
"@layui/icons-vue": "^1.0.2",
|
||||
"@layui/layer-vue": "^1.2.4",
|
||||
"@layui/icons-vue": "^1.0.3",
|
||||
"@layui/layer-vue": "^1.2.5",
|
||||
"async-validator": "^4.0.7",
|
||||
"countup.js": "^2.0.8",
|
||||
"evtd": "^0.2.3",
|
||||
"vue": "^3.2.26",
|
||||
"vue": "^3.2.27",
|
||||
"vue-router": "^4.0.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -51,8 +52,8 @@
|
||||
"@typescript-eslint/eslint-plugin": "^5.8.0",
|
||||
"@typescript-eslint/parser": "^5.8.0",
|
||||
"@vitejs/plugin-vue": "^1.9.3",
|
||||
"@vue/compiler-sfc": "^3.2.26",
|
||||
"@vue/server-renderer": "^3.2.26",
|
||||
"@vue/compiler-sfc": "^3.2.27",
|
||||
"@vue/server-renderer": "^3.2.27",
|
||||
"commitizen": "^4.2.4",
|
||||
"cz-conventional-changelog": "3.3.0",
|
||||
"escape-html": "^1.0.3",
|
||||
@ -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",
|
||||
"rollup": "^2.64.0",
|
||||
"typescript": "^4.5.2",
|
||||
"less": "^4.1.2",
|
||||
"vite": "2.7.6",
|
||||
"vite": "2.7.12",
|
||||
"vite-plugin-md": "^0.11.6"
|
||||
},
|
||||
"files": [
|
||||
|
||||
@ -2610,7 +2610,6 @@ body .layui-table-tips .layui-layer-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 38px;
|
||||
z-index: 899;
|
||||
min-width: 100%;
|
||||
max-height: 360px;
|
||||
|
||||
@ -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";
|
||||
@ -112,6 +113,7 @@ const components: Record<string, IDefineComponent> = {
|
||||
LayBreadcrumb,
|
||||
LayBreadcrumbItem,
|
||||
LayAvatar,
|
||||
LayAvatarList,
|
||||
LayField,
|
||||
LaySelect,
|
||||
LayScroll,
|
||||
@ -191,6 +193,7 @@ export {
|
||||
LayBreadcrumb,
|
||||
LayBreadcrumbItem,
|
||||
LayAvatar,
|
||||
LayAvatarList,
|
||||
LayField,
|
||||
LaySelect,
|
||||
LayScroll,
|
||||
|
||||
@ -40,3 +40,8 @@
|
||||
height: 28px;
|
||||
width: 28px;
|
||||
}
|
||||
|
||||
.layui-avatar-list .layui-avatar {
|
||||
margin-left: -10px;
|
||||
display: inline-block;
|
||||
}
|
||||
@ -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 || "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,9 +1,7 @@
|
||||
.layui-layout {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-basis: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ const slots = useSlots();
|
||||
|
||||
const props = defineProps<{
|
||||
id: string;
|
||||
title: string;
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -149,10 +149,24 @@ const vertical_style = reactive({
|
||||
height: props.modelValue,
|
||||
});
|
||||
|
||||
function throttle(func: Function) {
|
||||
let timer: any = null;
|
||||
return function (args: any) {
|
||||
if (!timer) {
|
||||
timer = setTimeout(() => {
|
||||
timer = null;
|
||||
func(args);
|
||||
}, 60);
|
||||
}
|
||||
};
|
||||
}
|
||||
const moveAction = throttle(handle_mousemove);
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
function handle_mousedown() {
|
||||
on("selectstart", window, handle_select, { once: true });
|
||||
on("mouseup", window, handle_mouseup);
|
||||
on("mousemove", window, handle_mousemove);
|
||||
on("mousemove", window, moveAction);
|
||||
}
|
||||
|
||||
function handle_mousemove(e: MouseEvent) {
|
||||
@ -179,7 +193,7 @@ function handle_mousemove(e: MouseEvent) {
|
||||
function handle_mouseup() {
|
||||
// off('selectstart', document, handle_select)
|
||||
off("mouseup", window, handle_mouseup);
|
||||
off("mousemove", window, handle_mousemove);
|
||||
off("mousemove", window, moveAction);
|
||||
}
|
||||
|
||||
function handle_select(e: Event): void {
|
||||
|
||||
@ -11,7 +11,7 @@ const slots = useSlots();
|
||||
|
||||
const props = defineProps<{
|
||||
id: string;
|
||||
title: string;
|
||||
title?: string;
|
||||
}>();
|
||||
|
||||
const isTree = inject("isTree");
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
>
|
||||
{{ children.props.title }}
|
||||
<i
|
||||
v-if="allowClose"
|
||||
v-if="allowClose && children.props.closable != false"
|
||||
class="layui-icon layui-icon-close layui-unselect layui-tab-close"
|
||||
@click.stop="close(index, children.props.id)"
|
||||
></i>
|
||||
|
||||
@ -9,3 +9,7 @@ export interface SelectItem {
|
||||
export interface SelectItemHandle {
|
||||
(selectItem: SelectItem, isChecked?: boolean): void;
|
||||
}
|
||||
|
||||
export interface SelectItemPush {
|
||||
(selectItem: SelectItem): void
|
||||
}
|
||||
@ -3,7 +3,7 @@
|
||||
* <p>
|
||||
* @param elem dom
|
||||
* */
|
||||
export function getTop(elem) {
|
||||
export function getTop(elem: any) : any {
|
||||
return (
|
||||
elem.offsetTop + ((elem.offsetParent && getTop(elem.offsetParent)) || 0)
|
||||
);
|
||||
@ -14,7 +14,7 @@ export function getTop(elem) {
|
||||
* <p>
|
||||
* @param elem dom
|
||||
* */
|
||||
export function getLeft(elem) {
|
||||
export function getLeft(elem: any) : any {
|
||||
return (
|
||||
elem.offsetLeft + ((elem.offsetParent && getLeft(elem.offsetParent)) || 0)
|
||||
);
|
||||
@ -27,7 +27,7 @@ export function getLeft(elem) {
|
||||
* @param events 事件
|
||||
* @param handler 事件回调
|
||||
* */
|
||||
export function on(elem, events, handler) {
|
||||
export function on(elem: any, events: any, handler: any) {
|
||||
[]
|
||||
.concat(events)
|
||||
.forEach((event) => elem.addEventListener(event, handler, false));
|
||||
@ -40,8 +40,8 @@ export function on(elem, events, handler) {
|
||||
* @param events 事件
|
||||
* @param handler 事件回调
|
||||
* */
|
||||
export function once(elem, events, handler) {
|
||||
const listener = function (_this, args) {
|
||||
export function once(elem: any, events: any, handler: any) {
|
||||
const listener = function (_this: any, args: any) {
|
||||
handler.apply(_this, args);
|
||||
off(elem, events, listener);
|
||||
};
|
||||
@ -55,7 +55,7 @@ export function once(elem, events, handler) {
|
||||
* @param events 事件
|
||||
* @param handler 事件回调
|
||||
* */
|
||||
export function off(elem, events, handler) {
|
||||
export function off(elem: any, events: any, handler: any) {
|
||||
[]
|
||||
.concat(events)
|
||||
.forEach((event) => elem.removeEventListener(event, handler, false));
|
||||
@ -30,11 +30,12 @@ export default defineConfig({
|
||||
assetFileNames: 'index.css',
|
||||
},
|
||||
plugins: [
|
||||
// @ts-ignore
|
||||
babel({
|
||||
exclude: 'node_modules/**',
|
||||
extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
|
||||
presets: ['@babel/preset-env', '@babel/preset-typescript'],
|
||||
}),
|
||||
})
|
||||
],
|
||||
external: ['vue', 'vue-router'],
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user