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

🌀(component): 优化 icon-picker 显示

Browse Source
This commit is contained in:
就眠儀式 2022-07-15 14:08:17 +08:00
parent 750ad79210
commit 1c5a379134
2 changed files with 26 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
package/component/src/component/iconPicker/index.less
View File

@ -66,19 +66,18 @@
}
.layui-iconpicker-list {
padding: 10px 10px 5px;
width: 320px;
width: 321px;
}
.layui-iconpicker-list ul {
margin-right: -6px;
margin: 6px;
}
.layui-iconpicker-list li {
vertical-align: top;
display: inline-block;
width: 60px;
margin: 0 5px 5px 0;
margin: 2.5px;
padding: 5px;
overflow: hidden;
border: 1px solid #eee;
@ -112,9 +111,7 @@
}
.layui-iconpicker-scroll .layui-iconpicker-list {
overflow: auto;
max-height: 220px;
overflow-x: hidden;
max-height: 200px;
}
.layui-iconpicker-page {

67
package/component/src/component/iconPicker/index.vue
View File

@ -10,6 +10,7 @@ import { Ref, ref } from "vue";
import { LayIconList as icons } from "@layui/icons-vue";
import LayDropdown from "../dropdown/index.vue";
import LayInput from "../input/index.vue";
import LayScroll from "../scroll/index.vue";
export interface LayIconPickerProps {
page?: boolean;
@ -135,67 +136,43 @@ const searchList = (str: string, container: any) => {
<template>
<lay-dropdown ref="dropdownRef">
<div
class="layui-inline layui-border-box layui-iconpicker layui-iconpicker-split"
>
<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>
<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">
<lay-input
@input="search"
@clear="clear"
autocomplete="true"
:allow-clear="true"
>
<lay-input @input="search" @clear="clear" autocomplete="true" :allow-clear="true">
<template #prefix>
<i class="layui-icon layui-icon-search"></i>
</template>
</lay-input>
</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>
<lay-scroll style="height:200px;" thumbColor="rgb(238, 238, 238)">
<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>
</lay-scroll>
</div>
<div v-if="page" class="layui-iconpicker-page">
<div id="layui-laypage-1" class="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>
<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>