vue 动态绑定指令(vue动态绑定图标的完整步骤)
类别:编程学习 浏览量:2961
时间:2022-03-28 01:01:10 vue 动态绑定指令
vue动态绑定图标的完整步骤0 图标和图片的不同
图标时字符,图片时二进制流。即图片加载会比图标慢,且加载图标最好不要用img标签,我们可以把图标当成组件用import的方法引入进来,然后当成标签引入。
1 安装svg
1.使用管理员身份运行cmd窗口,切换到项目目录下执行。
npm add svg
2 从图标库下载图标
1.阿里图标库
https://www.iconfont.cn/
2.下载svg
3.在compone目录下建立一个icons,在icons下建立一个svg目录,专门用来放图标。
3 查看插件的使用方法
- vue所有的插件都在node_modules中
- 根据下载时的插件名来找到插件e-cli-plugin-svg的README
4 展示图标
1 定义动态组件MyIcon.vue
1.其中myicon是从父组件传过来的属性
2.computed是用来根据myicon.name(图标的名字)来动态生成图标地址的。原因是在export default{}外引入组件时,我们接收到的props属性是传递不到export default{}外面的,所以采用computed来协助生成icon组件。
3.:style是动态绑定样式,此处绑定了宽,高。并在props中设置了默认值,如果父组件不传递宽高信息的话,就是使用默认值。
4.:fill是绑定填充属性样式的,也在props中设置了默认值。
<template> <li> <component :is="icon" :style="{width : myicon.width , hight : myicon.hight}" :fill="myicon.fill" ></component> </li> </template> <script> export default{ props:{ myicon:{ name:{ type:String }, width:{ type:String, default:'40px' }, hight:{ type:String, default:'40px' }, fill:{ type:String, default:'#000000' } } }, computed:{ icon(){ return () => import('@/components/icons/svg/'+ this.myicon.name +'.svg?inline') } } } </script> <style> </style>
2 在main,js中全局引入并定义组件MyIcon.vue
import mysvg from '@/components/MyIcon.vue' Vue.component('my-icon',mysvg)
3 调用my-icon作为父组件
1.把要传递的属性定义在myicon:{}中,其中name是必填项,它是图标的名字,不带后缀。
<template> <my-icon :name = "scope.row.icon" :width = "50px" :hight = "50px" :fill = "#ff00ff"> </my-icon> </template> <script> export default { data() { return { myicon:{ name: "position", width: "60px", hight: "60px", fill : "#ff00ff" }, } }, } </script> <style scoped lang="less"> </style>
总结
到此这篇关于vue动态绑定图标的文章就介绍到这了,更多相关vue动态绑定图标内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- vue各种模块(一篇文章学会Vue中间件管道)
- 小白vue教学(尤大大新活petite-vue的实现)
- vue原理详解(vue响应式原理与双向数据的深入解析)
- vue动态路由实现权限控制(vue2/vue3路由权限管理的方法实例)
- vue如何excel表格上传功能(Vue + iView实现Excel上传功能的完整代码)
- springbootvue数据交互系统(Springboot运用vue+echarts前后端交互实现动态圆环图)
- spring boot docker部署(docker部署springboot和vue项目的实现步骤)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- vue怎么编写规则(vue使用节流函数的踩坑实例指南)
- vue实现展开动画(Vue组件实现旋转木马动画)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- springboot+vue项目演示(springboot+VUE实现登录注册)
- vue接口请求类封装(Vue接口封装的完整步骤记录)
- vue3 ref 的用法(Vue3中watchEffect的用途浅析)
- 大果肉搭配薄瓜皮, 绿宝 脆甜爽口,不愧是甜瓜中的 佼佼者(大果肉搭配薄瓜皮)
- 河南尉氏县因地制宜发展果蔬种植 水坡镇绿宝甜瓜变 金瓜(河南尉氏县因地制宜发展果蔬种植)
- 谢广坤,你这么欺负谢腾飞,良心不会痛吗(你这么欺负谢腾飞)
- 乡村爱情15 宋晓峰怀疑自己孩子,腾飞与姜奶奶亲子鉴定出结果(宋晓峰怀疑自己孩子)
- 《乡村爱情13》开播,新版刘能以假乱真,编剧思维进入瓶颈(新版刘能以假乱真)
- 当年的 白洋淀战神 练肌肉 嘎子哥也成为行走的荷尔蒙(当年的白洋淀战神)
热门推荐
- thinkphp源码上传(ThinkPHP框架实现FTP图片上传功能示例)
- C#文件读写的方法
- canvas设置点击(Canvas高级路径操作之拖拽对象的实现)
- html5菜单栏(html5写一个BUI折叠菜单插件的实现方法)
- 阿里云怎么开启tomcat权限(腾讯云服务器tomcat端口无法访问的解决方法)
- python导出数据到mysql(python定时按日期备份MySQL数据并压缩)
- python3json序列化(Python3.5 Json与pickle实现数据序列化与反序列化操作示例)
- 香港云服务器(香港云服务器的优势是什么?)
- php如何异步操作(php链式操作的实现方式分析)
- vue实现一个tab栏(Vue实现tab导航栏并支持左右滑动功能)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9