vue标签选择器,vue显示代码组件
本文通过实例代码给大家介绍了某视频剪辑软件图标选择器的相关知识，图文实例代码相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
来源：http://www.ruoyi.vip/
从“vue”导入某视频剪辑软件
从" @/components/SvgIcon"//SVG组件导入SvgIcon
//全局注册
Vue.component(svg-icon ，SvgIcon)
const req=require.context( ./svg ，false，/\ .svg$/)
const require all=要求上下文=要求上下文。keys().映射（要求上下文)
要求全部（请求)
#替换默认配置
# multipass: true
#完整：正确
插件：
# -姓名
#
#或：
# -名称：假
# -名称：真
#
#或：
# -姓名：
# param1: 1
# param2: 2
-移除属性：
属性：
-"填充"
-"填充规则"
模板
div v-if= isExternal :style= styleExternalIcon class= SVG-external-icon SVG-icon v-on= $ listeners /
SVG v-else:class= SVG class aria-hidden= true v-on= $ listeners
使用：xlink:href= icon name rel= external no follow /
/svg
/模板
脚本
//doc:https://潘佳陈。github。io/vue-元素-管理-站点/功能/组件/SVG-图标。html #用法
从" @/utils/validate "导入{ isExternal }
导出默认值{
名称： SvgIcon ，
道具：{
iconClass: {
类型：字符串，
必填：真
},
类名：{
类型：字符串，
默认值：""
}
},
计算值：{
isExternal() {
返回isExternal(this.iconClass)
},
iconName() {
返回` # icon-$ { this . icon class } ` 0的值
},
svgClass() {
if (this.className) {
返回svg-icon this.className
}否则{
返回" svg图标"
}
},
styleExternalIcon() {
返回{
掩码：` URL($ { this。图标类})否-重复50% 50% `,
-WebKit-mask :` URL($ { this。图标类})否-重复50% 50%
}
}
}
}
/脚本
样式范围。SVG-图标{
宽度：1em
身高：1em
垂直对齐：-0.15 em；
填充：当前颜色
溢出：隐藏；
}。SVG-外部-图标{
背景色：当前颜色
面具-尺寸：覆盖！重要；
显示：内嵌-块；
}
/风格
！-@作者郑捷-
模板
div class=" icon-body "
El-input v-model= name style= position:relative；可清除的占位符=请输入图标名称@ clear=过滤器图标 @ input。native=筛选器图标
I slot= suffix class= El-icon-search El-input _ _ icon /
/el-input
div class=图标列表
图标列表中的 div v-for=(item，index :key= index @ click= selectedIcon(item)
SVG-icon:icon-class= item style= height:30px；宽度：16px/
span{{ item }}/span
/div
/div
/div
/模板
脚本
从导入图标 requireIcons
导出默认值{
名称： IconSelect ，
data() {
返回{
名称： ,
图标列表：图标
}
},
方法：{
filterIcons() {
this.iconList=icons
如果(this.name) {
这个。图标列表=这个。图标列表。过滤器(item=item。包括(这个。姓名))
}
},
选择药物（名称){
这个. emit(selected ，name)
document.body.click()
},
重置(){
this.name=
this.iconList=icons
}
}
}
/脚本
style rel= style sheet/scss lang= scss 范围。图标-正文{
宽度：100%;
填充：10px。图标列表{
高度：200像素
溢出-y:滚动；
部门{
高度：30px
行高：30px
边距-底部：-5px；
光标：指针；
宽度：33%;
浮动：左；
}
跨度{
显示：内嵌-块；
垂直对齐：-0.15 em；
填充：当前颜色
溢出：隐藏；
}
}
}
/风格
到此这篇关于某视频剪辑软件图标选择器的文章就介绍到这了，更多相关某视频剪辑软件选择器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。