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动态绑定图标内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue原样表格导出excel(Vue导出Excel功能的全过程记录)
- electronvue最新版本(Vue3和Electron实现桌面端应用详解)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- vue通过什么获取dom(vue异步更新dom的实现浅析)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
- vue统计代码行数(vue实现计数器简单制作)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue图片怎么上传服务器(vue-cropper组件实现图片切割上传)
- springbootvue项目代码(Vue+SpringBoot实现支付宝沙箱支付的示例代码)
- vue 富文本图片上传(vue.js云存储实现图片上传功能)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue3.0带参数的方法(Vue3中ref与toRef的区别浅析)
- 如何快速赚钱(如何快速赚钱方法真实有效)
- 这里输入关键词(如何输入关键词)
- 熊猫中国国宝(熊猫国宝酒53酱香)
- 春节会放假几天(春节会放假吗)
- 小浴室,大民生 缙云3200多户困难群众洗上免费热水澡(小浴室大民生缙云3200多户困难群众洗上免费热水澡)
- 元旦闲谭(元旦闲谭)
热门推荐
- 视图平滑动画(菜单栏 “三” 变形为“X”css3过渡动画)
- 阿里云服务器安全组在哪(阿里云服务器安全组设置规则)
- 虚拟机安装centos8网络设置(VMware安装CentOS虚拟机与配置网络的图文教程)
- python怎么去掉字符串的空格(Python切片操作去除字符串首尾的空格)
- 属于web服务器的有哪些(web服务器有几种类型?)
- php7.4类型属性实例详解(PHP 7.4中使用预加载的方法详解)
- php验证码初始化教程交流(PHP token验证生成原理实例分析)
- python实现的数据结构(Python嵌套式数据结构实例浅析)
- dedecms标签长度(dedecms使用SQL命令批量替换指定字符串的方法)
- html 设置canvas的背景图可缩放(浅析canvas元素的html尺寸和css尺寸对元素视觉的影响)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9