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 属性
|
||||
:::
|
||||
|
||||
|
||||
@ -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 完整表格
|
||||
:::
|
||||
|
||||
@ -334,6 +384,7 @@ export default {
|
||||
| key | 数据字段 | -- |
|
||||
| customSlot | 自定义插槽 | -- |
|
||||
| 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">
|
||||
export default {
|
||||
name: "LayIconPicker",
|
||||
@ -100,10 +20,8 @@ const props = withDefaults(defineProps<LayIconPickerProps>(), {
|
||||
page: false,
|
||||
});
|
||||
|
||||
const dropdownRef = ref<null | HTMLElement>(null);
|
||||
|
||||
const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
const dropdownRef = ref<null | HTMLElement>(null);
|
||||
const selectedIcon: Ref<string> = ref(props.modelValue as string);
|
||||
|
||||
const selectIcon = function (icon: string) {
|
||||
@ -114,7 +32,6 @@ const selectIcon = function (icon: string) {
|
||||
};
|
||||
|
||||
const icones: Ref = ref([]);
|
||||
|
||||
const total = ref(icons.length);
|
||||
const totalPage = ref(total.value / 12);
|
||||
const currentPage: Ref = ref(1);
|
||||
@ -201,3 +118,83 @@ const searchList = function (str: string, container: any) {
|
||||
return newList;
|
||||
};
|
||||
</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