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-cli请求数据的方式(vue-cli配置使用Vuex的全过程记录)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- springboot vue 异地登录(vue+springboot实现登录验证码)
- vue基础语法对象(浅析从面向对象思维理解Vue组件)
- vue自定义列组件(vue自定义表格列的实现过程记录)
- vue代码统计(Vue实现计数器案例)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vue-cli4开发多页面应用(深入理解Vue-cli4路由配置)
- vue实现商品详情讲解(京东 Vue3 组件库支持小程序开发的详细流程)
- vue react和angular(详解React Angular Vue三大前端技术)
- vue怎么操作表格(如何在在Vue3中使用markdown 编辑器组件)
- vuejs filter过滤器的使用(Vue过滤器filter实现及应用场景详解)
- vue移动端页面不能上下滑动(vue移动端实现左滑编辑与删除的全过程)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vue过滤器filters怎么用(如何使用vue过滤器filter)
- vue如何excel表格上传功能(Vue + iView实现Excel上传功能的完整代码)
- AMD YES A卡还是N卡 A卡和N卡的区别(AMDYESA卡还是N卡)
- 以后显卡多了一个新选择,N卡和A卡外又多了个I卡(以后显卡多了一个新选择)
- 读卖乐园的彩灯(读卖乐园的彩灯)
- 新疆80后在淘宝卖干果 以前是 不务正业 如今帮乡亲致富(新疆80后在淘宝卖干果)
- 弄清楚了销 售 买 卖这四个字,母婴生意做起来就没那么难了(弄清楚了销售买)
- 数读 买首饰金是 投资黄金 吗 买金容易卖金难(数读买首饰金是)
热门推荐
- php构成方法的关键字是(PHP中的self关键字详解)
- 织梦dedecms开启付费授权(修改织梦DedeCMS广告模块后,前台显示未更新的解决方法)
- vue前端打包发布教程(Vue项目打包、合并及压缩优化网页响应速度)
- docker镜像实例(Docker的镜像制作与整套项目一键打包部署的实现)
- laravel数据库操作方式(Laravel 实现数据软删除功能)
- python读取mat文件(详解Python Matplot中文显示完美解决方案)
- nodejssocket文件传输(node+socket实现简易聊天室功能)
- tomcat解决乱码(解决tomcat 静态页面html中文乱码的解决终极篇)
- python成绩判断系统(Python根据成绩分析系统浅析)
- 列举服务器网络防御措施(如何对Web服务器进行飓风级防御)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9