vue element-ui的图标选择组件vue-fontawesome-elementui-icon-picker

最新推荐文章于 2024-08-28 07:36:28 发布
最新推荐文章于 2024-08-28 07:36:28 发布
阅读量1.5k 收藏 5
点赞数 4
分类专栏： # vue2 文章标签： 前端 vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37580383/article/details/121378967
版权

效果图

1. 安装

cnpm install vue-fontawesome-elementui-icon-picker

2.在main.js全局注册

import iconPicker from 'vue-fontawesome-elementui-icon-picker' // elementui图标库
Vue.use(iconPicker)

3.template代码

<el-form-item label="菜单图标:" prop="icon" class="default-form-item">
   <icon-picker v-model="menusForm.icon"></icon-picker>
</el-form-item>

Zero-To-One
关注
专栏目录
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 7119
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
季度选择控件element-ui+vue组件
热门推荐
cmy0816的博客
06-04 2万+
季度选择器其实是很经常用到的控件，elementui里面居然没有，情急之下利用elementui里面的其他组件做了个类似的组件，需要自取~ <template> <el-form-item label="日期"> <mark style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(...
Vue中使用e-icon-picker 图标选择组件
05-15 4565
gitee地址：https://gitee.com/cnovel/e-icon-picker 效果图： main.js中引入： import iconPicker from 'e-icon-picker'; import "e-icon-picker/lib/symbol.js"; //基本彩色图标库 import 'e-icon-picker/lib/index.css'; // 基本样式，包含基本图标 import 'font-awesome/css/font-awesome.min.c.
vue-awesome-icon-picker:一个Vuejs图标选择器组件，可以轻松选择并使用FontAwesome 5 Icon
05-23
VueAwesomeIconPicker 一个Vue.js图标选择器组件，可以轻松选择并使用FontAwesome 5 Icon。 目录 安装 使用npm安装 npm install --save @rightbraintechbd/vue-awesome-icon-picker 或通过cdn使用它 < script src =" https://unpkg.com/@rightbraintechbd/vue-awesome-icon-picker@1.1.0/dist/vue-awesome-icon-picker.min.js " > </ script > 然后在全局范围内注册该组件： import Vue from 'vue' ; import VueAwesomeIconPicker from '@rightbraintechbd/vue-awesome-icon-p
Vue3 Icon Picker 项目教程
最新发布
gitblog_00256的博客
08-28 360
Vue3 Icon Picker 项目教程 项目地址:https://gitcode.com/gh_mirrors/vu/vue3-icon-picker 1. 项目的目录结构及介绍 vue3-icon-picker/ ├── public/ │ └── index.html ├── src/ │ ├── assets/ │ ├── components/ │ │ └── Ic...
vue-fontawesome-elementui-icon-picker选择icon框架
qq_43235503的博客
05-10 483
vue-fontawesome-elementui-icon-picker选择icon框架
e-icon-picker 基于element-ui图标和fontawesome图标选择器组件
weixin_44942894的博客
01-18 2914
e-icon-picker 图标选择组件 简洁大方，专为element-ui和font-awesome图标库开发的图标选择组件，希望大家喜欢！ 喜欢的欢迎star 项目地址 Demo 在线测试 在线API 安装 因为项目使用了element-ui的组件进行二次开发，所以在使用此组件前请安装element-ui组件库。 安装方式请参考element-ui官网的相关文档。element-ui官网 ...
font-awesome-picker:一个Vue.js组件，可以轻松选择FontAwesome图标并根据需要使用它
05-10
fontAwesomePicker 一个Vue.js组件，可以轻松选择FontAwesome图标并根据需要使用它。 目录 安装 npm install --save font-awesome-picker 用法 确保已将FontAwesome> 5与选项的。 安装组件： import Vue from 'vue' ; import { fontAwesomePicker } from 'font-awesome-picker' ; export default { name : 'yourComponent' , components : { 'font-awesome-picker' : fontAwesomePicker , } , } 实例作为自定义元素： < font> </ font-awesome
ElementUI 实现图标选择器
凝弧
05-04 1万+
<!-- 图标选择器 <select-icon v-model=[绑定变量] :data=[选项数据] /> --> <template> <el-popover placement="bottom-start" popper-class="pupop-select-icon" transition="el-zoom-in-...
基于Vue和Element UI的图标选择器组件设计源码 - e-icon-picker
05-29
本源码提供了一个基于Vue和Element UI的图标选择器组件的设计。项目包含120个文件，其中包括48个...该组件允许用户在Element UI和Font Awesome图标之间进行选择，为开发者提供了一个便捷的工具来管理和使用图标资源。
2021-11-21 vue笔记-PC端框架:Element-UI组件库(二) element-ui常用组件的介绍和使用
GAARA
11-21 837
零.回顾 一.基本组件 0.有哪些基本组件? 1.layout布局:通过基础的 24 分栏，迅速简便地创建布局 有哪些布局? 示例:使用row组件和col组件+span进行基础布局 2.container布局容器:用于快速布局的容器组件,用户按需求复制相关网页结构的代码 容器组件的基本结构 常见页面布局 第一种 第二种 第三种 第四种(常用) 第五种 示例:使用第四种布局 二.表单组件 1.有哪些表单组件? 2.form表单:有输入框,选择器,单选框,多选框等控件组成,用以手机,校验,提交数据 有哪些表单?
element-ui@2.13.2.rar
05-29
Element UI 是一个基于 Vue.js 的开源前端组件库，它的版本号为 2.13.2，这表明你分享的压缩包包含的是该库的一个稳定更新。Element UI 旨在提供一套高质量、易于使用的界面组件，使得开发者在构建企业级后台管理...
font Awesome图标选择器
09-25
基于fontIconPicker与font Awesome的图标选择器，文件中有demo（测试可运行）与对应的说明文件，数据是使用的ajax取的本地json文件可能出现的跨域问题请自行解决，其余请参考说明文件，有问题留言。
vue-awesome-picker：一个Vue.js选择器组件
02-05
2019-08-28 弃坑一年多，但仍有不少同学在用，还是决定把坑填了，填坑中 Vue很棒的选择器 基于和的移动端选择器组件 产品特点 支持单列，多列和联级数据 内置时间，日期数据 滚轮3D效果 颜色可配置 演示版 PS：Demo已启用服务工作者 安装 npm install vue-awesome-picker --save 用法 /* main.js */ import AwesomePicker from 'vue-awesome-picker' ; Vue . use ( AwesomePicker ) ; /* 详细使用方法参照源码 App.vue */ < awesome-pic
Vue.js 图标选择组件实践详解
12-29
本文介绍了Vue.js 图标选择组件实践详解，分享给大家，具体如下： 背景 最近项目中在做一个自定义菜单需求，其中有一个为菜单设置小图标的功能，就是大家常见的左侧菜单 设置图标不难，方案就是字体图标，可供使用的图标库也有很多，比如阿里巴巴的 Iconfont，以及 Fontaswsome 等，问题在于如何优雅的提供几百个图标供用户选择，而不需要开发去一个一个的写标签，也不需要一个个的去找图标。 字体图标库 Fontawesome 方案 我们使用字体图标的方式，一般是一个   这样的标签，平常开发中用一些图标都是用到一个写
vue element-ui 菜单管理使用图标选择器组件
bianenhui91的专栏
01-26 716
【代码】vue element-ui 菜单管理使用图标选择器组件。
fontawesome-iconpicker 自定义字体图标选择器
weixin_30402343的博客
08-22 775
官网地址：https://farbelous.io/fontawesome-iconpicker/ 头部文件引入 <!--本地地址--> <link href="../css/bootstrap.min.css" rel="stylesheet"> <link href="./css/font-awesome.mi...
在Vue2.0中引入font-awesome，并在Element-ui中正确显示font-awesome的icon
sunshineTing2的博客
08-05 2599
npm install font-awesome --save 在main.js中引入 import 'font-awesome/css/font-awesome.css' 在App.vue的[class^="el-icon-fa"], [class*=" el-icon-fa"] { display: inline-block; font: normal normal nor...
Vue3 封装 element-plus 图标选择器
PrideZH的博客
01-24 2880
Vue3 封装 element-plus 图标选择器。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zero-To-One

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值