[新增] iconPicker 组件
This commit is contained in:
parent
26b1441c60
commit
4eb431415c
@ -1,7 +1,7 @@
|
||||
::: demo
|
||||
|
||||
<template>
|
||||
<lay-icon-picker type="layui-icon-face-smile"></lay-icon-picker>
|
||||
<lay-icon-picker v-model="icon" type="layui-icon-face-smile"></lay-icon-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -10,6 +10,8 @@ import { ref } from 'vue'
|
||||
export default {
|
||||
setup() {
|
||||
|
||||
const icon = ref("layui-icon-home")
|
||||
|
||||
return {
|
||||
}
|
||||
}
|
||||
|
@ -18,10 +18,14 @@
|
||||
style="margin-top: 0px; margin-bottom: 0px"
|
||||
>
|
||||
<li class="layui-nav-item">
|
||||
<a href="https://gitee.com/layui-vue/layui-vue-sample"> 案例 </a>
|
||||
<a href="https://gitee.com/layui-vue/layui-vue-sample">
|
||||
案例
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a href="https://gitee.com/layui-vue/layui-vue"> 仓库 </a>
|
||||
<a href="https://gitee.com/layui-vue/layui-vue">
|
||||
仓库
|
||||
</a>
|
||||
</li>
|
||||
<li class="layui-nav-item">
|
||||
<a
|
||||
|
@ -4214,7 +4214,6 @@ body .layui-table-tips .layui-layer-content {
|
||||
|
||||
.layui-menu {
|
||||
position: relative;
|
||||
margin: 5px 0;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
|
@ -1,6 +1,17 @@
|
||||
<template>
|
||||
<lay-dropdown>
|
||||
<input />
|
||||
<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 class="layui-iconpicker-search">
|
||||
@ -27,677 +38,14 @@
|
||||
</div>
|
||||
<div class="layui-iconpicker-list">
|
||||
<ul>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-heart-fill"></i>
|
||||
<p class="layui-elip">实心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-heart"></i>
|
||||
<p class="layui-elip">空心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-light"></i>
|
||||
<p class="layui-elip">亮度/晴</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-time"></i>
|
||||
<p class="layui-elip">时间/历史</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-bluetooth"></i>
|
||||
<p class="layui-elip">蓝牙</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-at"></i>
|
||||
<p class="layui-elip">@艾特</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-mute"></i>
|
||||
<p class="layui-elip">静音</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-mike"></i>
|
||||
<p class="layui-elip">录音/麦克风</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-key"></i>
|
||||
<p class="layui-elip">密钥/钥匙</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-gift"></i>
|
||||
<p class="layui-elip">礼物/活动</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-email"></i>
|
||||
<p class="layui-elip">邮箱</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-rss"></i>
|
||||
<p class="layui-elip">RSS</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-wifi"></i>
|
||||
<p class="layui-elip">WiFi</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-logout"></i>
|
||||
<p class="layui-elip">退出/注销</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-android"></i>
|
||||
<p class="layui-elip">Android 安卓</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-ios"></i>
|
||||
<p class="layui-elip">Apple IOS 苹果</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-windows"></i>
|
||||
<p class="layui-elip">Windows</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-transfer"></i>
|
||||
<p class="layui-elip">穿梭框</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-service"></i>
|
||||
<p class="layui-elip">客服</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-subtraction"></i>
|
||||
<p class="layui-elip">减</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-addition"></i>
|
||||
<p class="layui-elip">加</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-slider"></i>
|
||||
<p class="layui-elip">滑块</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-print"></i>
|
||||
<p class="layui-elip">打印</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-export"></i>
|
||||
<p class="layui-elip">导出</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-cols"></i>
|
||||
<p class="layui-elip">列</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-screen-restore"></i>
|
||||
<p class="layui-elip">退出全屏</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-screen-full"></i>
|
||||
<p class="layui-elip">全屏</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-rate-half"></i>
|
||||
<p class="layui-elip">半星</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-rate"></i>
|
||||
<p class="layui-elip">星星-空心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-rate-solid"></i>
|
||||
<p class="layui-elip">星星-实心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-cellphone"></i>
|
||||
<p class="layui-elip">手机</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-vercode"></i>
|
||||
<p class="layui-elip">验证码</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-login-wechat"></i>
|
||||
<p class="layui-elip">微信</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-login-qq"></i>
|
||||
<p class="layui-elip">QQ</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-login-weibo"></i>
|
||||
<p class="layui-elip">微博</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-password"></i>
|
||||
<p class="layui-elip">密码</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-username"></i>
|
||||
<p class="layui-elip">用户名</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-refresh-3"></i>
|
||||
<p class="layui-elip">刷新-粗</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-auz"></i>
|
||||
<p class="layui-elip">授权</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-spread-left"></i>
|
||||
<p class="layui-elip">左向右伸缩菜单</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-shrink-right"></i>
|
||||
<p class="layui-elip">右向左伸缩菜单</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-snowflake"></i>
|
||||
<p class="layui-elip">雪花</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-tips"></i>
|
||||
<p class="layui-elip">提示说明</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-note"></i>
|
||||
<p class="layui-elip">便签</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-home"></i>
|
||||
<p class="layui-elip">主页</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-senior"></i>
|
||||
<p class="layui-elip">高级</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-refresh"></i>
|
||||
<p class="layui-elip">刷新</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-refresh-1"></i>
|
||||
<p class="layui-elip">刷新</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-flag"></i>
|
||||
<p class="layui-elip">旗帜</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-theme"></i>
|
||||
<p class="layui-elip">主题</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-notice"></i>
|
||||
<p class="layui-elip">消息-通知</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-website"></i>
|
||||
<p class="layui-elip">网站</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-console"></i>
|
||||
<p class="layui-elip">控制台</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-face-surprised"></i>
|
||||
<p class="layui-elip">表情-惊讶</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-set"></i>
|
||||
<p class="layui-elip">设置-空心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-template-1"></i>
|
||||
<p class="layui-elip">模板</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-app"></i>
|
||||
<p class="layui-elip">应用</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-template"></i>
|
||||
<p class="layui-elip">模板</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-praise"></i>
|
||||
<p class="layui-elip">赞</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-tread"></i>
|
||||
<p class="layui-elip">踩</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-male"></i>
|
||||
<p class="layui-elip">男</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-female"></i>
|
||||
<p class="layui-elip">女</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-camera"></i>
|
||||
<p class="layui-elip">相机-空心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-camera-fill"></i>
|
||||
<p class="layui-elip">相机-实心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-more"></i>
|
||||
<p class="layui-elip">菜单-水平</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-more-vertical"></i>
|
||||
<p class="layui-elip">菜单-垂直</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-rmb"></i>
|
||||
<p class="layui-elip">金额-人民币</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-dollar"></i>
|
||||
<p class="layui-elip">金额-美元</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-diamond"></i>
|
||||
<p class="layui-elip">钻石-等级</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-fire"></i>
|
||||
<p class="layui-elip">火</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-return"></i>
|
||||
<p class="layui-elip">返回</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-location"></i>
|
||||
<p class="layui-elip">位置-地图</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-read"></i>
|
||||
<p class="layui-elip">办公-阅读</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-survey"></i>
|
||||
<p class="layui-elip">调查</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-face-smile"></i>
|
||||
<p class="layui-elip">表情-微笑</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-face-cry"></i>
|
||||
<p class="layui-elip">表情-哭泣</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-cart-simple"></i>
|
||||
<p class="layui-elip">购物车</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-cart"></i>
|
||||
<p class="layui-elip">购物车</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-next"></i>
|
||||
<p class="layui-elip">下一页</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-prev"></i>
|
||||
<p class="layui-elip">上一页</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-upload-drag"></i>
|
||||
<p class="layui-elip">上传-空心-拖拽</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-upload"></i>
|
||||
<p class="layui-elip">上传-实心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-download-circle"></i>
|
||||
<p class="layui-elip">下载-圆圈</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-component"></i>
|
||||
<p class="layui-elip">组件</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-file-b"></i>
|
||||
<p class="layui-elip">文件-粗</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-user"></i>
|
||||
<p class="layui-elip">用户</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-find-fill"></i>
|
||||
<p class="layui-elip">发现-实心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-loading"></i>
|
||||
<p class="layui-elip">loading</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-loading-1"></i>
|
||||
<p class="layui-elip">loading</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-add-1"></i>
|
||||
<p class="layui-elip">添加</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-play"></i>
|
||||
<p class="layui-elip">播放</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-pause"></i>
|
||||
<p class="layui-elip">暂停</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-headset"></i>
|
||||
<p class="layui-elip">音频-耳机</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-video"></i>
|
||||
<p class="layui-elip">视频</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-voice"></i>
|
||||
<p class="layui-elip">语音-声音</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-speaker"></i>
|
||||
<p class="layui-elip">消息-通知-喇叭</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-fonts-del"></i>
|
||||
<p class="layui-elip">删除线</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-fonts-code"></i>
|
||||
<p class="layui-elip">代码</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-fonts-html"></i>
|
||||
<p class="layui-elip">HTML</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-fonts-strong"></i>
|
||||
<p class="layui-elip">字体加粗</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-unlink"></i>
|
||||
<p class="layui-elip">删除链接</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-picture"></i>
|
||||
<p class="layui-elip">图片</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-link"></i>
|
||||
<p class="layui-elip">链接</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-face-smile-b"></i>
|
||||
<p class="layui-elip">表情-笑-粗</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-align-left"></i>
|
||||
<p class="layui-elip">左对齐</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-align-right"></i>
|
||||
<p class="layui-elip">右对齐</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-align-center"></i>
|
||||
<p class="layui-elip">居中对齐</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-fonts-u"></i>
|
||||
<p class="layui-elip">字体-下划线</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-fonts-i"></i>
|
||||
<p class="layui-elip">字体-斜体</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-tabs"></i>
|
||||
<p class="layui-elip">Tabs 选项卡</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-radio"></i>
|
||||
<p class="layui-elip">单选框-选中</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-circle"></i>
|
||||
<p class="layui-elip">单选框-候选</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-edit"></i>
|
||||
<p class="layui-elip">编辑</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-share"></i>
|
||||
<p class="layui-elip">分享</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-delete"></i>
|
||||
<p class="layui-elip">删除</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-form"></i>
|
||||
<p class="layui-elip">表单</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-cellphone-fine"></i>
|
||||
<p class="layui-elip">手机-细体</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-dialogue"></i>
|
||||
<p class="layui-elip">聊天 对话 沟通</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-fonts-clear"></i>
|
||||
<p class="layui-elip">文字格式化</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-layer"></i>
|
||||
<p class="layui-elip">窗口</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-date"></i>
|
||||
<p class="layui-elip">日期</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-water"></i>
|
||||
<p class="layui-elip">水 下雨</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-code-circle"></i>
|
||||
<p class="layui-elip">代码-圆圈</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-carousel"></i>
|
||||
<p class="layui-elip">轮播组图</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-prev-circle"></i>
|
||||
<p class="layui-elip">翻页</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-layouts"></i>
|
||||
<p class="layui-elip">布局</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-util"></i>
|
||||
<p class="layui-elip">工具</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-templeate-1"></i>
|
||||
<p class="layui-elip">选择模板</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-upload-circle"></i>
|
||||
<p class="layui-elip">上传-圆圈</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-tree"></i>
|
||||
<p class="layui-elip">树</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-table"></i>
|
||||
<p class="layui-elip">表格</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-chart"></i>
|
||||
<p class="layui-elip">图表</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-chart-screen"></i>
|
||||
<p class="layui-elip">图标 报表 屏幕</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-engine"></i>
|
||||
<p class="layui-elip">引擎</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-triangle-d"></i>
|
||||
<p class="layui-elip">下三角</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-triangle-r"></i>
|
||||
<p class="layui-elip">右三角</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-file"></i>
|
||||
<p class="layui-elip">文件</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-set-sm"></i>
|
||||
<p class="layui-elip">设置-小型</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-reduce-circle"></i>
|
||||
<p class="layui-elip">减少-圆圈</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-add-circle"></i>
|
||||
<p class="layui-elip">添加-圆圈</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-404"></i>
|
||||
<p class="layui-elip">404</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-about"></i>
|
||||
<p class="layui-elip">关于</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-up"></i>
|
||||
<p class="layui-elip">箭头 向上</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-down"></i>
|
||||
<p class="layui-elip">箭头 向下</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-left"></i>
|
||||
<p class="layui-elip">箭头 向左</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-right"></i>
|
||||
<p class="layui-elip">箭头 向右</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-circle-dot"></i>
|
||||
<p class="layui-elip">圆点</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-search"></i>
|
||||
<p class="layui-elip">搜索</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-set-fill"></i>
|
||||
<p class="layui-elip">设置-实心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-group"></i>
|
||||
<p class="layui-elip">群组</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-friends"></i>
|
||||
<p class="layui-elip">好友</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-reply-fill"></i>
|
||||
<p class="layui-elip">回复 评论 实心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-menu-fill"></i>
|
||||
<p class="layui-elip">菜单 隐身 实心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-log"></i>
|
||||
<p class="layui-elip">记录</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-picture-fine"></i>
|
||||
<p class="layui-elip">图片-细体</p>
|
||||
</li>
|
||||
<li class="layui-this">
|
||||
<i class="layui-icon layui-icon-face-smile-fine"></i>
|
||||
<p class="layui-elip">表情-笑-细体</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-list"></i>
|
||||
<p class="layui-elip">列表</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-release"></i>
|
||||
<p class="layui-elip">发布 纸飞机</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
<p class="layui-elip">对 OK</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-help"></i>
|
||||
<p class="layui-elip">帮助</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-chat"></i>
|
||||
<p class="layui-elip">客服</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-top"></i>
|
||||
<p class="layui-elip">top 置顶</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-star"></i>
|
||||
<p class="layui-elip">收藏-空心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-star-fill"></i>
|
||||
<p class="layui-elip">收藏-实心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-close-fill"></i>
|
||||
<p class="layui-elip">关闭-实心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-close"></i>
|
||||
<p class="layui-elip">关闭-空心</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-ok-circle"></i>
|
||||
<p class="layui-elip">正确</p>
|
||||
</li>
|
||||
<li>
|
||||
<i class="layui-icon layui-icon-add-circle-fine"></i>
|
||||
<p class="layui-elip">添加-圆圈-细体</p>
|
||||
<li
|
||||
v-for="icon in icons"
|
||||
:key="icon"
|
||||
@click="selectIcon(icon.class)"
|
||||
:class="[selectedIcon === icon.class ? 'layui-this' : '']"
|
||||
>
|
||||
<i class="layui-icon" :class="[icon.class]"></i>
|
||||
<p class="layui-elip">{{ icon.name }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -707,10 +55,20 @@
|
||||
</template>
|
||||
|
||||
<script setup name="LayIconPicker" lang="ts">
|
||||
import { defineProps } from 'vue'
|
||||
import { defineProps, Ref, ref } from 'vue'
|
||||
import icons from '../resource/icons'
|
||||
|
||||
const props =
|
||||
defineProps<{
|
||||
type?: string
|
||||
modelValue?: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
|
||||
const selectedIcon: Ref<String> = ref(props.modelValue as String)
|
||||
|
||||
const selectIcon = function (icon: String) {
|
||||
emit('update:modelValue', icon)
|
||||
selectedIcon.value = icon
|
||||
}
|
||||
</script>
|
170
src/module/resource/icons.ts
Normal file
170
src/module/resource/icons.ts
Normal file
@ -0,0 +1,170 @@
|
||||
export default [
|
||||
{ name: "实心", class: "layui-icon-heart-fill" },
|
||||
{ name: "空心", class: "layui-icon-heart" },
|
||||
{ name: "亮度/晴", class: "layui-icon-light" },
|
||||
{ name: "时间/历史", class: "layui-icon-time" },
|
||||
{ name: "蓝牙", class: "layui-icon-bluetooth" },
|
||||
{ name: "@艾特", class: "layui-icon-at" },
|
||||
{ name: "静音", class: "layui-icon-mute" },
|
||||
{ name: "录音/麦克风", class: "layui-icon-mike" },
|
||||
{ name: "密钥/钥匙", class: "layui-icon-key" },
|
||||
{ name: "礼物/活动", class: "layui-icon-gift" },
|
||||
{ name: "邮箱", class: "layui-icon-email" },
|
||||
{ name: "RSS", class: "layui-icon-rss" },
|
||||
{ name: "WiFi", class: "layui-icon-wifi" },
|
||||
{ name: "退出/注销", class: "layui-icon-logout" },
|
||||
{ name: "Android 安卓", class: "layui-icon-android" },
|
||||
{ name: "Apple IOS 苹果", class: "layui-icon-ios" },
|
||||
{ name: "Windows", class: "layui-icon-windows" },
|
||||
{ name: "穿梭框", class: "layui-icon-transfer" },
|
||||
{ name: "客服", class: "layui-icon-service" },
|
||||
{ name: "减", class: "layui-icon-subtraction" },
|
||||
{ name: "加", class: "layui-icon-addition" },
|
||||
{ name: "滑块", class: "layui-icon-slider" },
|
||||
{ name: "打印", class: "layui-icon-print" },
|
||||
{ name: "导出", class: "layui-icon-export" },
|
||||
{ name: "列", class: "layui-icon-cols" },
|
||||
{ name: "退出全屏", class: "layui-icon-screen-restore" },
|
||||
{ name: "全屏", class: "layui-icon-screen-full"},
|
||||
{ name: "半星", class: "layui-icon-rate-half" },
|
||||
{ name: "星星-空心", class: "layui-icon-rate" },
|
||||
{ name: "星星-实心", class: "layui-icon-rate-solid" },
|
||||
{ name: "手机", class: "layui-icon-cellphone" },
|
||||
{ name: "验证码", class: "layui-icon-vercode"},
|
||||
{ name: "微信", class: "layui-icon-login-wechat" },
|
||||
{ name: "QQ", class: "layui-icon-login-qq" },
|
||||
{ name: "微博", class: "layui-icon-login-weibo" },
|
||||
{ name: "密码", class: "layui-icon-password" },
|
||||
{ name: "用户名", class: "layui-icon-username" },
|
||||
{ name: "刷新-粗", class: "layui-icon-refresh-3" },
|
||||
{ name: "授权", class: "layui-icon-auz" },
|
||||
{ name: "左向右伸缩菜单", class: "layui-icon-spread-left" },
|
||||
{ name: "右向左伸缩菜单", class: "layui-icon-shrink-right" },
|
||||
{ name: "雪花", class: "layui-icon-snowflake" },
|
||||
{ name: "提示说明", class: "layui-icon-tips" },
|
||||
{ name: "便签", class: "layui-icon-note" },
|
||||
{ name: "主页", class: "layui-icon-home" },
|
||||
{ name: "高级", class: "layui-icon-senior" },
|
||||
{ name: "刷新", class: "layui-icon-refresh" },
|
||||
{ name: "刷新", class: "layui-icon-refresh-1" },
|
||||
{ name: "旗帜", class: "layui-icon-flag" },
|
||||
{ name: "主题", class: "layui-icon-theme" },
|
||||
{ name: "消息-通知", class: "layui-icon-notice" },
|
||||
{ name: "网站", class: "layui-icon-website" },
|
||||
{ name: "控制台", class: "layui-icon-console" },
|
||||
{ name: "表情-惊讶", class: "layui-icon-face-surprised" },
|
||||
{ name: "设置-空心", class: "layui-icon-set" },
|
||||
{ name: "模板", class: "layui-icon-template-1" },
|
||||
{ name: "应用", class: "layui-icon-app" },
|
||||
{ name: "模板", class: "layui-icon-template" },
|
||||
{ name: "赞", class: "layui-icon-praise" },
|
||||
{ name: "踩", class: "layui-icon-tread" },
|
||||
{ name: "男", class: "layui-icon-male" },
|
||||
{ name: "女", class: "layui-icon-female" },
|
||||
{ name: "相机-空心", class: "layui-icon-camera" },
|
||||
{ name: "相机-实心", class: "layui-icon-camera-fill" },
|
||||
{ name: "菜单-水平", class: "layui-icon-more" },
|
||||
{ name: "菜单-垂直", class: "layui-icon-more-vertical" },
|
||||
{ name: "金额-人民币", class: "layui-icon-rmb" },
|
||||
{ name: "金额-美元", class: "layui-icon-dollar" },
|
||||
{ name: "钻石-等级", class: "layui-icon-diamond" },
|
||||
{ name: "火", class: "layui-icon-fire" },
|
||||
{ name: "返回", class: "layui-icon-return" },
|
||||
{ name: "位置-地图", class: "layui-icon-location" },
|
||||
{ name: "办公-阅读", class: "layui-icon-read" },
|
||||
{ name: "调查", class: "layui-icon-survey" },
|
||||
{ name: "表情-微笑", class: "layui-icon-face-smile" },
|
||||
{ name: "表情-哭泣", class: "layui-icon-face-cry" },
|
||||
{ name: "购物车", class: "layui-icon-cart-simple" },
|
||||
{ name: "购物车", class: "layui-icon-cart" },
|
||||
{ name: "下一页", class: "layui-icon-next" },
|
||||
{ name: "上一页", class: "layui-icon-prev" },
|
||||
{ name: "上传-空心-拖拽", class: "layui-icon-upload-drag" },
|
||||
{ name: "上传-实心", class: "layui-icon-upload" },
|
||||
{ name: "下载-圆圈", class: "layui-icon-download-circle" },
|
||||
{ name: "组件", class: "layui-icon-component" },
|
||||
{ name: "文件-粗", class: "layui-icon-file-b" },
|
||||
{ name: "用户", class: "layui-icon-user" },
|
||||
{ name: "发现-实心", class: "layui-icon-find-fill" },
|
||||
{ name: "loading", class: "layui-icon-loading" },
|
||||
{ name: "loading", class: "layui-icon-loading-1" },
|
||||
{ name: "添加", class: "layui-icon-add-1" },
|
||||
{ name: "播放", class: "layui-icon-play" },
|
||||
{ name: "暂停", class: "layui-icon-pause" },
|
||||
{ name: "音频-耳机", class: "layui-icon-headset" },
|
||||
{ name: "视频", class: "layui-icon-video" },
|
||||
{ name: "语音-声音", class: "layui-icon-voice" },
|
||||
{ name: "消息-通知-喇叭", class: "layui-icon-speaker" },
|
||||
{ name: "删除线", class: "layui-icon-fonts-del" },
|
||||
{ name: "代码", class: "layui-icon-fonts-code" },
|
||||
{ name: "HTML", class: "layui-icon-fonts-html" },
|
||||
{ name: "字体加粗", class: "layui-icon-fonts-strong" },
|
||||
{ name: "删除链接", class: "layui-icon-unlink" },
|
||||
{ name: "图片", class: "layui-icon-picture" },
|
||||
{ name: "链接", class: "layui-icon-link" },
|
||||
{ name: "表情-笑-粗", class: "layui-icon-face-smile-b" },
|
||||
{ name: "左对齐", class: "layui-icon-align-left" },
|
||||
{ name: "右对齐", class: "layui-icon-align-right" },
|
||||
{ name: "居中对齐", class: "layui-icon-align-center" },
|
||||
{ name: "字体-下划线", class: "layui-icon-fonts-u" },
|
||||
{ name: "字体-斜体", class: "layui-icon-fonts-i" },
|
||||
{ name: "Tabs 选项卡", class: "layui-icon-tabs" },
|
||||
{ name: "单选框-选中", class: "layui-icon-radio" },
|
||||
{ name: "单选框-候选", class: "layui-icon-circle" },
|
||||
{ name: "编辑", class: "layui-icon-edit" },
|
||||
{ name: "分享", class: "layui-icon-share" },
|
||||
{ name: "删除", class: "layui-icon-delete" },
|
||||
{ name: "表单", class: "layui-icon-form" },
|
||||
{ name: "手机-细体", class: "layui-icon-cellphone-fine" },
|
||||
{ name: "聊天 对话 沟通", class: "layui-icon-dialogue" },
|
||||
{ name: "文字格式化", class: "layui-icon-fonts-clear" },
|
||||
{ name: "窗口", class: "layui-icon-layer" },
|
||||
{ name: "日期", class: "layui-icon-date" },
|
||||
{ name: "水 下雨", class: "layui-icon-water" },
|
||||
{ name: "代码-圆圈", class: "layui-icon-code-circle" },
|
||||
{ name: "轮播组图", class: "layui-icon-carousel" },
|
||||
{ name: "翻页", class: "layui-icon-prev-circle" },
|
||||
{ name: "布局", class: "layui-icon-layouts" },
|
||||
{ name: "工具", class: "layui-icon-util" },
|
||||
{ name: "选择模板", class: "layui-icon-templeate-1" },
|
||||
{ name: "上传-圆圈", class: "layui-icon-upload-circle" },
|
||||
{ name: "树", class: "layui-icon-tree" },
|
||||
{ name: "表格", class: "layui-icon-table" },
|
||||
{ name: "图表", class: "layui-icon-chart" },
|
||||
{ name: "图标 报表 屏幕", class: "layui-icon-chart-screen" },
|
||||
{ name: "引擎", class: "layui-icon-engine" },
|
||||
{ name: "下三角", class: "layui-icon-triangle-d" },
|
||||
{ name: "右三角", class: "layui-icon-triangle-r" },
|
||||
{ name: "文件", class: "layui-icon-file" },
|
||||
{ name: "设置-小型", class: "layui-icon-set-sm" },
|
||||
{ name: "减少-圆圈", class: "layui-icon-reduce-circle" },
|
||||
{ name: "添加-圆圈", class: "layui-icon-add-circle" },
|
||||
{ name: "404", class: "layui-icon-404" },
|
||||
{ name: "关于", class: "layui-icon-about" },
|
||||
{ name: "箭头 向上", class: "layui-icon-up" },
|
||||
{ name: "箭头 向下", class: "layui-icon-down" },
|
||||
{ name: "箭头 向左", class: "layui-icon-left" },
|
||||
{ name: "箭头 向右", class: "layui-icon-right" },
|
||||
{ name: "圆点", class: "layui-icon-circle-dot" },
|
||||
{ name: "搜索", class: "layui-icon-search" },
|
||||
{ name: "设置-实心", class: "layui-icon-set-fill" },
|
||||
{ name: "群组", class: "layui-icon-group" },
|
||||
{ name: "好友", class: "layui-icon-friends" },
|
||||
{ name: "回复 评论 实心", class: "layui-icon-reply-fill" },
|
||||
{ name: "菜单 隐身 实心", class: "layui-icon-menu-fill" },
|
||||
{ name: "记录", class: "layui-icon-log" },
|
||||
{ name: "图片-细体", class: "layui-icon-picture-fine" },
|
||||
{ name: "表情-笑-细体", class: "layui-icon-face-smile-fine" },
|
||||
{ name: "列表", class: "layui-icon-list" },
|
||||
{ name: "发布 纸飞机", class: "layui-icon-release" },
|
||||
{ name: "对 OK", class: "layui-icon-ok" },
|
||||
{ name: "帮助", class: "layui-icon-help" },
|
||||
{ name: "客服", class: "layui-icon-chat" },
|
||||
{ name: "top 置顶", class: "layui-icon-top" },
|
||||
{ name: "收藏-空心", class: "layui-icon-star" },
|
||||
{ name: "收藏-实心", class: "layui-icon-star-fill" },
|
||||
{ name: "关闭-实心", class: "layui-icon-close-fill" },
|
||||
{ name: "关闭-空心", class: "layui-icon-close" },
|
||||
{ name: "正确", class: "layui-icon-ok-circle" },
|
||||
{ name: "添加-圆圈-细体", class: "layui-icon-add-circle-fine" },
|
||||
]
|
Loading…
Reference in New Issue
Block a user