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>
	<div>
		<component
			:is="icon"
			:style="{width : myicon.width , hight : myicon.hight}"
			:fill="myicon.fill"
		></component>

	</div>
</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动态绑定图标内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    vue中如何动态绑定图片,vue中通过data返回图片路径的方法

    在项目中遇到需要动态加载图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则会当成字符串来处理. HTML如下: JS如下: 以上这篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js中的图片引用路径的方式 基于vue 动态加载图片src的解决方法 vue cli使用绝对路径引用图片问题的解决

  • vue 动态绑定背景图片的方法

    vue动态绑定背景图片的方法,具体介绍如下所示: 1.backgroundImage && 三目运算符 <div class="right-con" :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'contain'}"> </div> 1.backgroundImage <div

  • 解决vue2.0动态绑定图片src属性值初始化时报错的问题

    在vue2.0中,经常会使用类似这样的语法 v-bind:src = " imgUrl "(缩写 :src = " imgUrl "),看一个案例 <template> <div> <img :src="imgUrl"> </div> </template> <script> export default { data(){ return { captcha_id: &quo

  • 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项目引入svg图标的完整步骤

    目录 1. 安装svg依赖 2. 创建svg文件夹存放svg图标 3. vue.config.js 中配置svg图片 4. 创建index.js 导入所有svg图标 5. main.js中引入icons/index.js 6. 创建SvgIcon公用组件 总结 1. 安装svg依赖 在vue中首先需要安装可以加载svg的依赖. npm安装:npm install svg-sprite-loader --save-dev 2. 创建svg文件夹存放svg图标 创建icons文件夹,在icons文件

  • Vue接口封装的完整步骤记录

    Vue接口封装的完整步骤记录

    首先根据接口写好对应页面的请求 内容如图尽量保证js文件名称与页面文件名称相同(易于查找) 根据文件目录动态引入/导出接口 提高便捷性 /** * 自动引入当前文件夹下所有module * require.context(directory, useSubdirectories = false, regExp = /^.//); * @param {String} directory 读取文件的路径 * @param {Boolean} directory 匹配文件的正则表达式 * @param

  • Vue使用echarts的完整步骤及解决各种报错

    Vue使用echarts的完整步骤及解决各种报错

    前言: Echarts,它是一个与框架无关的 JS 图表库,但是它基于Js,这样很多框架都能使用它,例如Vue,估计IONIC也能用,下次研究. 因为我的习惯,每次新尝试做一个功能的时候,总要新创建个小项目,做做Demo. 首先看自己电脑是否安装了Vue,打开终端命令:vue --version,我以前安装过Vue,但是不知道为何报错: vue/cli Error: Cannot find module ‘@vue/cli-shared-utils‘ 注意:如果是全局module出错,就全局更新

  • 手把手教你搭建一个vue项目的完整步骤

    手把手教你搭建一个vue项目的完整步骤

    目录 一.环境准备 1.安装node.js 2.检查node.js版本 3.为了提高我们的效率,可以使用淘宝的镜像源 二.搭建vue环境 1.全局安装vue-cli 三.创建vue项目 1.用cmd命令创建项目 1.1创建文件 1.2选择配置信息 1.3选择版本 1.4路径模式选择 1.5语法代码格式检查 1.6第三方文件存在的方式 1.7是否保存本次配置信息(保存预设) 1.8创建成功 1.9运行 1.10启动 1.11停止服务 2.用vue资源管理器创建 2.1进入vue资源管理器界面(vu

  • VSCode创建Vue项目的完整步骤教程

    VSCode创建Vue项目的完整步骤教程

    目录 一.配置环境 1.安装VS Code 2.安装node.js 3.安装配置脚手架vue-cli 二.创建vue项目 1.命令方式创建 2.重新初始化依赖 3.启动项目 补充:在VScode中如何使用vue代码 总结 一.配置环境 1.安装VS Code 官网下载 https://code.visualstudio.com/ 下载VS Code,按照步骤安装. 2.安装node.js (1)官网 https://nodejs.org/en/ 下载node.js,按照步骤安装即可,node.j

  • mpvue+vuex搭建小程序详细教程(完整步骤)

    本文介绍了mpvue+vuex搭建小程序详细教程(完整步骤),分享给大家,具体如下: 源码 mpvue-vuex-demo 构成 1.采用mpvue 官方脚手架搭建项目底层结构 2.采用Fly.js 作为http请求库 3.引入mpvue-router-patach,以便在mpvue小程序中能使用vue-router的写法 目录结构 ├── src // 我们的项目的源码编写文件 │ ├── components // 组件目录 │ ├── common //静态资源 │ │ └── font

  • Vue项目引入PWA的步骤

    Vue项目引入PWA的步骤

    Vue项目引入PWA很简单,操作步骤如下: 1. 安装依赖 vue add @vue/pwa 由于使用add关键字,安装成功后会在项目中创建一些文件,如果项目使用了git,可以很容易的看出文件变化: src文件夹下会生成一个registerServiceWorker.js文件,并在main.js中导入,这个文件自动生成了注册service worker的代码.registerServiceWorker.js的代码如下: import { register } from 'register-ser

  • Linux系统下使用rpm方式安装最新mysql5.7.17完整步骤

    Linux系统下使用rpm方式安装最新mysql5.7.17完整步骤

    1.下载以及前面的rpm安装步骤请参照 Linux 使用rpm方式安装最新mysql(5.7.16)步骤以及常见问题解决 2.四个rpm包安装完成后执行mysqld --initialize --user=mysql 如果提示目的文件夹内有文件: 直接将/var/lib/mysql/ 文件夹下的文件删除干净再次执行. 完成后 进入日志文件查找初始化生成的密码vi /var/log/mysqld.log 3.登录修改密码 mysql -u root -p 第一次更改密码前所有的操作都是禁止的,依次

  • PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析

    文件上传分为两个部分,HTML显示部分和PHP处理部分,HTML部分主要是让用户来选择所要上传的文件,然后通过PHP中的$_FILES,我们可以把文件上传到服务器的指定目录. 1.客户端页面 客户端的配置 1.表单页面 2.表单发送方式为post 3.表单form中添加enctype="multipart/form-data" <body> <form action="doaction.php" method="post" en

随机推荐