Vue Element |
您所在的位置:网站首页 › vue调用第三方js里面的方法 › Vue Element |
Element-ui一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,在Vue中使用是很方便的。 关于引用icon(第三方),有一种不用下载项目到本地的方法, 前言element自带的有icon,使用起来也很方便。但是美中不足的是,官方提供的图标库只是部分,在需要新的icon时,我就想到了引入第三方icon。对我来说,阿里的icon库就很方便,之前的项目也是用的这个库。 先是查看了Element官方文档,没发现有提示如何引用第三方icon,就尝试Google一下教程。这里看到了方丈先生的文章Vue Element使用icon图标(第三方),按照他的方法试着操作了一遍,成功引用了。 但是我发现,每次新增或修改icon,我都要重新下载项目吗? 要怎么做,就可以只更新引用阿里icon的链接,在项目中像使用el-icon-iconName一样?
element使用icon的两种方式 思考过一番后,想到一个方法,既然下载到本地的也是去修改iconfont.css里面的内容,那我不就可以在index.html里面引用阿里的在线css链接,在App.vue里面,引入我要修改添加的样式。不就OK了吗? 想完就去尝试可能性。结果一如所想。下面是具体操作~ 教程关于在阿里icon上注册、登录、创建项目用来存放icon的具体流程,可以参考方丈先生的文章Vue Element使用icon图标(第三方) 1. 在阿里icon上创建一个给element扩展的项目创建icon项目
2. 添加icon到项目中 在图标库中找到你想要的icon后,加入购物车,然后点击右上角的购物车,把icon添加到你的element扩展项目里吧~
添加icon到项目中 3. 生成icon的在线css链接生成在线css链接 4. 在Vue项目中,引用在线css链接和新建css样式文件 (重点) 4.1 在Vue项目中创建iconfont.css文件,当然名字自定义。 [class^="el-icon-ali"], [class*="el-icon-ali"] { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }这里的 el-icon-ali 是我自己起的icon前缀名。 4.2 引用阿里项目在线的css链接 我是在index.html里面引用的。放在前面
link引用 4.3 引用自己创建的css文件
在main.js中引入 根据你创建文件的路径来引用哦。 PS:emmmmm.....其实我的main.js引用会报错,还没处理。我是在App.vue文件里面引用css的。(尴尬又不失礼貌的微笑🙂
App.vue文件引用 4.4 可以在项目中使用你的icon啦~~~~
组件中的两种icon使用方式
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |