elementui icon图标,vue使用element-ui组件
在Vue元素的前端应用中，图标是点缀界面必不可少的元素。元素界面组件中有很多常用图标，可以考虑扩展更多图标，引入vue-awesome组件，利用字体awesome内置的图标，实现更多图标的集成，可以在项目中使用更多图标元素。
目录
概述1。Vue-Awesome 2的使用介绍。导入元素图标和Vue-Awesome图标。
概述
Vue-Awesome是一个基于Vue.js的SVG图标组件，内置图标来自字体Awesome。
本文从图标管理的界面效果入手，然后逐一介绍Element的内置图标和Vue-Awesome的图标。
图标管理界面如下：
基于Vue-Awesome的图标管理如下。
查询提供图标查询的名称，限制一次可以显示多少个图标，并提供自定义颜色选项来更改图标的显示颜色。
1、Vue-Awesome的使用介绍
Vue-Awesome的npm安装命令如下：
npm安装vue-真棒
安装方法如下
从“vue”导入Vue
/*选择以下两种方式之一*/
//只介绍使用的图标，减少包装体积。
导入 vue-awesome/图标/标志
//或者在不关心包装体积的情况下一次性介绍所有图标。
导入“vue-awesome/icons”
/*选择任何注册组件的方式*/
从“vue-awesome/components/Icon”导入图标
//全局注册(在 main.js 文件中)
Vue.component(v形图标，图标)
//或者部分注册(在组件文件中)
导出默认值{
组件：{
v形图标:图标
}
}
界面代码如下所示，详细演示可以在https://justineo.github.io/vue-awesome/demo/.找到
！-基本用法-
v-icon name=beer/
！-添加选项-
v形图标名称=同步刻度=2 旋转/
v图标名称=注释翻转=水平/
v-icon name=code-branch label=分叉库/
！-堆栈图标-
v形图标标签=没有照片
v-icon name=camera/
v-icon name= ban scale= 2 class= alert /
/v图标
Vue-Awesome图标提供了prop的一些属性设置，如下表所示。
名称：字符串
图标名称。如果此组件不用作图标堆栈的容器，则此字段是必需的。所有合法值都对应于图标文件相对于图标目录的路径。请注意，在FontAwesome官网查找图标名词时，需要确认图标集的名称。比如图标500px的详情页会有一个URL参数style=brands，那么图标名称就是brands/500px。默认情况下，只能使用FontAwesome的免费图标。另外，因为纯色风格的图标最多，我们将其设置为默认图标集，所以路径前缀可以省略。当传入null时，不会呈现整个组件。
比例：数字字符串
用于调整图标大小，默认值为1。
旋转：布尔型
用于指定图标是否需要旋转。默认值为false。(不能与pulse一起使用。)
脉冲：布尔型
用于指定图标是否具有脉冲旋转的效果。默认值为false。(不能与spin一起使用。)
反向：布尔型
如果为真，图标颜色将被设置为#fff。默认值为false。
翻转：垂直 水平 两者
用于指定图标是否需要翻转。
标签:字符串
当指定时，图标的aria标签被设置。
标题：字符串
为图标设置标题。
另外，我们还可以注册自定义图标，如下图。
从“vue-awesome/components/Icon”导入图标
Icon.register({
百度：{
宽度：23.868，
身高：26，
d: M3.613 13.701c2.827-.
}
})
如果您的SVG文件有多个路径或多边形，并且/或者您想要预定义一些样式，您可以按如下方式注册它们：
路径模式：
从“vue-awesome/components/Icon”导入图标
Icon.register({
网络包：{
宽度：1200，
身高：1200，
路径：[
{
样式：填充：#8ED6FB ，
d: m 1035.6 879.3 l-418.1 236.5v 931.6 l 878 788.3 l 157.6 91zm 28.6-25.9v 358.8 l-153 88.3v 765 l 153 88.4 zm-901.5 25.9 l 418.1 236.5v 931.6 l 320.3 788.3 l-157
},
{
样式：填充：#1C78C0 ，
d: m 580.8 889.7 l-257-141.3v-280 l 257 148.4v 272.9 zm 36.7 0l 257-141.3v-280 l-257 148.4v 272.9 zm-18.3-283.6 zm 341.2 436 l 258-141.9 258 141.9-258 149-258-148
}
]
}
})
多边形模式：
从“vue-awesome/components/Icon”导入图标
Icon.register({
vue: {
宽度：256，
身高：221，
多边形：[
{
样式：填充：#41B883 ，
点数： 0，0 128，220.8 256，0 204.8，0 128，132.48 50.56，0 0
},
{
样式：填充：#35495E ，
点数： 50.56，0 128，133.12 204.8，0 157.44，0 128，51.2 97.92，0 50.56，0
}
]
}
})
对于这些自定义图标，我们可以在一个独立的JS文件中一起定义，然后全局加入。
图标的使用和其他图标没有区别，只是名称不同。
div style= height:100px；填充：10px
Spanvue-Awesome自定义图标：(在utils/Awesome-icon-customized . js中介绍)/span
v-icon name= Baidu scale= 2 :style= icon style /
v-icon name=vue scale=2 /
v-icon name= web pack scale= 2 spin/
v-icon name= html 5-c scale= 2 spin/
/div
2、导入Element 图标和Vue-Awesome图标
我们在管理页面的时候，需要提取元素图标和Vue-Awesome图标，这样才能显示界面。
图标，我们只需要在JS文件的列表中包含它的名称，如下面的定义所示。
const elementIcons=[
平台-元素，元素，删除-实体，删除，.
]
导出默认元素图标
输入相应元素的图表名称，并删除前缀el-icon-以形成所需列表的每个项目。
至于Vue-Awesome图标，我们安装了相应的组件后，它的图标资源也必须下载。我们在对应的node_modules目录下找到文件就可以看到了，如下图截图所示。
你可以看到它的每个图标对应一个js文件，不同风格有不同的目录。我们只需要自动添加相应的文件名。
定义一个射流研究…文件，如vue-awesome-icon.js，用来获取对应可怕的图标名称，如下逻辑所示
//Vue-牛逼图标自动加入
const req=要求。上下文( vue-awesome/icons ，true，/\ .js$/)
const require all=要求上下文=要求上下文。按键()
const re=/\ .\/(.*)\.js/
const vueawesomeicon=require all(req).过滤器((键)={
返回key.indexOf(index.js) 0
}).地图(我={
return i.match(re)[1]
})
导出默认vueAwesomeIcons
通过要求。上下文的操作以及仅需过滤器的数组过滤，我们就可以获得对应的可怕的图标名称了。
在管理页面里面，我们需要引入元素和太棒了的图标管理文件，如下所示。
从导入元素图标./element-icons //引入元素图标
从导入vueAwesomeIcons ./vue-awesome-icons //引入太棒了图标
然后构造页面的数据数据，如下所示，其中搜索框是用来承载查询条件的。
导出默认值{
名称："图标",
data() {
返回{
//查询表单
搜索表单：{
标签: ,
页面大小：50,
颜色： #409EFF
},
//自定义挽救(保存的简写)图标集合
svgIcons，
//元素图标集合
元素图标，
//vueAwesome图标集合
vueAwesomeIcons
}
},
然后增加几个计算函数，用来处理数据的过滤查询等操作。
计算值：{
iconStyle: function() {
return { color:这个。搜索表单。颜色}
},
elementIconsFiltered:function(){
常数那个=这个
var list=that。元素图标。过滤器(项目={
返回项目。的索引。搜索表单。标签)=0
})
if (that.searchForm.pagesize 0) {
返回list.slice(0，that.searchForm.pagesize)
}否则{
返回列表
}
},
vueawesomeiconcsfiltered:function(){
常数那个=这个
var list=that。vueawesomeicon。过滤器(项目={
返回项目。的索引。搜索表单。标签)=0
})
if (that.searchForm.pagesize 0) {
返回list.slice(0，that.searchForm.pagesize)
}否则{
返回列表
}
}
},
然后在方法里面，对常规的图标进行生成处理即可。
方法：{
generateElementIconCode(symbol){
返回I class= El-icon-$ { symbol } style= color:$ { this .搜索表单。color }；/`
},
generateAwesomeIconCode(symbol){
return ` v-icon name= $ { symbol } style= color:$ { this。搜索表单。color }；/`
},
手柄剪贴板(文本，事件){
如果（文本){
剪贴板（文本，事件)
}
}
}
对于界面的展示，我们以太棒了图标展示为例介绍，如下所示。
el-tab-pane label=Vue-Awesome图标
差异
v-for= vueawesomeiconcsfiltered的项目
:key=item
@ click= handle clipboard(generateAwesomeIconCode(item)，$event)
el-tooltip placement=top
div slot= content " { generateAwesomeIconCode(item)} }/div
图标项目
v-icon:name= item scale= 2 :style= icon style /
span{{ item }}/span
/div
/El-工具提示
/div
/El-选项卡-窗格
这样就可以实现对应图标的动态过滤和展示了。
以上就是某视频剪辑软件元素前端应用开发之图标的维护和使用的详细内容，更多关于某视频剪辑软件元素之图标的维护和使用的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。