docs: update
This commit is contained in:
就眠儀式
parent
9e0e918e0a
commit
cc88c3a60c
@ -107,6 +107,31 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
::: title 静态面板
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-icon-picker v-model="icon" type="layui-icon-face-smile" page showSearch position="static"></lay-icon-picker>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
const icon = ref("layui-icon-home")
|
||||||
|
|
||||||
|
return {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
::: title icon-picker 属性
|
::: title icon-picker 属性
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -199,6 +199,56 @@ export default {
|
|||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
::: title 开启排序
|
||||||
|
:::
|
||||||
|
|
||||||
|
::: demo
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-table :columns="columns1" :dataSource="dataSource1"></lay-table>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
setup() {
|
||||||
|
|
||||||
|
const columns1 = [
|
||||||
|
{
|
||||||
|
title:"姓名",
|
||||||
|
width:"200px",
|
||||||
|
key:"name"
|
||||||
|
},{
|
||||||
|
title:"成绩",
|
||||||
|
width: "180px",
|
||||||
|
key:"score",
|
||||||
|
sort: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const dataSource1 = [
|
||||||
|
{name:"张三", score:100},
|
||||||
|
{name:"李四", score:80},
|
||||||
|
{name:"王二", score:99},
|
||||||
|
{name:"麻子", score:92},
|
||||||
|
{name:"无名", score:60},
|
||||||
|
{name:"有名", score:70},
|
||||||
|
]
|
||||||
|
|
||||||
|
return {
|
||||||
|
page,
|
||||||
|
change,
|
||||||
|
columns,
|
||||||
|
dataSource
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
::: title 完整表格
|
::: title 完整表格
|
||||||
:::
|
:::
|
||||||
|
|
||||||
@ -334,6 +384,7 @@ export default {
|
|||||||
| key | 数据字段 | -- |
|
| key | 数据字段 | -- |
|
||||||
| customSlot | 自定义插槽 | -- |
|
| customSlot | 自定义插槽 | -- |
|
||||||
| width | 宽度 | -- |
|
| width | 宽度 | -- |
|
||||||
|
| sort | 排序 | -- |
|
||||||
|
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
|||||||
@ -1,83 +1,3 @@
|
|||||||
<template>
|
|
||||||
<lay-dropdown ref="dropdownRef">
|
|
||||||
<div
|
|
||||||
class="layui-inline layui-border-box layui-iconpicker layui-iconpicker-split"
|
|
||||||
>
|
|
||||||
<div class="layui-inline layui-iconpicker-main">
|
|
||||||
<i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
|
|
||||||
</div>
|
|
||||||
<span class="layui-inline layui-iconpicker-suffix"
|
|
||||||
><i class="layui-icon layui-icon-down layui-anim"></i
|
|
||||||
></span>
|
|
||||||
</div>
|
|
||||||
<template #content>
|
|
||||||
<div class="layui-iconpicker-view layui-iconpicker-scroll">
|
|
||||||
<div v-if="showSearch" class="layui-iconpicker-search">
|
|
||||||
<div class="layui-form layui-input-wrap layui-input-wrap-prefix">
|
|
||||||
<div class="layui-input-prefix">
|
|
||||||
<i class="layui-icon layui-icon-search"></i>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value=""
|
|
||||||
placeholder="search"
|
|
||||||
autocomplete="off"
|
|
||||||
class="layui-input"
|
|
||||||
lay-affix="clear"
|
|
||||||
@input="search"
|
|
||||||
/>
|
|
||||||
<div class="layui-input-suffix layui-input-affix-event layui-hide">
|
|
||||||
<i class="layui-icon layui-icon-clear"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="layui-iconpicker-list">
|
|
||||||
<ul>
|
|
||||||
<li
|
|
||||||
v-for="icon in icones"
|
|
||||||
:key="icon"
|
|
||||||
:class="[selectedIcon === icon.class ? 'layui-this' : '']"
|
|
||||||
@click="selectIcon(icon.class)"
|
|
||||||
>
|
|
||||||
<i class="layui-icon" :class="[icon.class]"></i>
|
|
||||||
<p class="layui-elip">
|
|
||||||
{{ icon.name }}
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div v-if="page" class="layui-iconpicker-page">
|
|
||||||
<div
|
|
||||||
id="layui-laypage-1"
|
|
||||||
class="layui-box layui-laypage layui-laypage-default"
|
|
||||||
>
|
|
||||||
<span class="layui-laypage-count">共 {{ total }} 个</span
|
|
||||||
><a
|
|
||||||
href="javascript:;"
|
|
||||||
class="layui-laypage-prev"
|
|
||||||
:class="[currentPage === 1 ? 'layui-disabled' : '']"
|
|
||||||
@click="prev()"
|
|
||||||
><i class="layui-icon layui-icon-left"></i></a
|
|
||||||
><span class="layui-laypage-curr"
|
|
||||||
><em class="layui-laypage-em"></em
|
|
||||||
><em>{{ currentPage }} / {{ totalPage }}</em></span
|
|
||||||
><span class="layui-laypage-spr">…</span
|
|
||||||
><a href="javascript:;" class="layui-laypage-last" title="尾页"
|
|
||||||
>14</a
|
|
||||||
><a
|
|
||||||
href="javascript:;"
|
|
||||||
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
|
|
||||||
class="layui-laypage-next"
|
|
||||||
@click="next()"
|
|
||||||
><i class="layui-icon layui-icon-right"></i
|
|
||||||
></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</lay-dropdown>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
name: "LayIconPicker",
|
name: "LayIconPicker",
|
||||||
@ -100,10 +20,8 @@ const props = withDefaults(defineProps<LayIconPickerProps>(), {
|
|||||||
page: false,
|
page: false,
|
||||||
});
|
});
|
||||||
|
|
||||||
const dropdownRef = ref<null | HTMLElement>(null);
|
|
||||||
|
|
||||||
const emit = defineEmits(["update:modelValue"]);
|
const emit = defineEmits(["update:modelValue"]);
|
||||||
|
const dropdownRef = ref<null | HTMLElement>(null);
|
||||||
const selectedIcon: Ref<string> = ref(props.modelValue as string);
|
const selectedIcon: Ref<string> = ref(props.modelValue as string);
|
||||||
|
|
||||||
const selectIcon = function (icon: string) {
|
const selectIcon = function (icon: string) {
|
||||||
@ -114,7 +32,6 @@ const selectIcon = function (icon: string) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const icones: Ref = ref([]);
|
const icones: Ref = ref([]);
|
||||||
|
|
||||||
const total = ref(icons.length);
|
const total = ref(icons.length);
|
||||||
const totalPage = ref(total.value / 12);
|
const totalPage = ref(total.value / 12);
|
||||||
const currentPage: Ref = ref(1);
|
const currentPage: Ref = ref(1);
|
||||||
@ -201,3 +118,83 @@ const searchList = function (str: string, container: any) {
|
|||||||
return newList;
|
return newList;
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<lay-dropdown ref="dropdownRef">
|
||||||
|
<div
|
||||||
|
class="layui-inline layui-border-box layui-iconpicker layui-iconpicker-split"
|
||||||
|
>
|
||||||
|
<div class="layui-inline layui-iconpicker-main">
|
||||||
|
<i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
|
||||||
|
</div>
|
||||||
|
<span class="layui-inline layui-iconpicker-suffix"
|
||||||
|
><i class="layui-icon layui-icon-down layui-anim"></i
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
<template #content>
|
||||||
|
<div class="layui-iconpicker-view layui-iconpicker-scroll">
|
||||||
|
<div v-if="showSearch" class="layui-iconpicker-search">
|
||||||
|
<div class="layui-form layui-input-wrap layui-input-wrap-prefix">
|
||||||
|
<div class="layui-input-prefix">
|
||||||
|
<i class="layui-icon layui-icon-search"></i>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value=""
|
||||||
|
placeholder="search"
|
||||||
|
autocomplete="off"
|
||||||
|
class="layui-input"
|
||||||
|
lay-affix="clear"
|
||||||
|
@input="search"
|
||||||
|
/>
|
||||||
|
<div class="layui-input-suffix layui-input-affix-event layui-hide">
|
||||||
|
<i class="layui-icon layui-icon-clear"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-iconpicker-list">
|
||||||
|
<ul>
|
||||||
|
<li
|
||||||
|
v-for="icon in icones"
|
||||||
|
:key="icon"
|
||||||
|
:class="[selectedIcon === icon.class ? 'layui-this' : '']"
|
||||||
|
@click="selectIcon(icon.class)"
|
||||||
|
>
|
||||||
|
<i class="layui-icon" :class="[icon.class]"></i>
|
||||||
|
<p class="layui-elip">
|
||||||
|
{{ icon.name }}
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div v-if="page" class="layui-iconpicker-page">
|
||||||
|
<div
|
||||||
|
id="layui-laypage-1"
|
||||||
|
class="layui-box layui-laypage layui-laypage-default"
|
||||||
|
>
|
||||||
|
<span class="layui-laypage-count">共 {{ total }} 个</span
|
||||||
|
><a
|
||||||
|
href="javascript:;"
|
||||||
|
class="layui-laypage-prev"
|
||||||
|
:class="[currentPage === 1 ? 'layui-disabled' : '']"
|
||||||
|
@click="prev()"
|
||||||
|
><i class="layui-icon layui-icon-left"></i></a
|
||||||
|
><span class="layui-laypage-curr"
|
||||||
|
><em class="layui-laypage-em"></em
|
||||||
|
><em>{{ currentPage }} / {{ totalPage }}</em></span
|
||||||
|
><span class="layui-laypage-spr">…</span
|
||||||
|
><a href="javascript:;" class="layui-laypage-last" title="尾页"
|
||||||
|
>14</a
|
||||||
|
><a
|
||||||
|
href="javascript:;"
|
||||||
|
:class="[currentPage === totalPage ? 'layui-disabled' : '']"
|
||||||
|
class="layui-laypage-next"
|
||||||
|
@click="next()"
|
||||||
|
><i class="layui-icon layui-icon-right"></i
|
||||||
|
></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</lay-dropdown>
|
||||||
|
</template>
|
||||||
Loading…
Reference in New Issue
Block a user