创建一个页面: Icon.vue在router.js里配置 Icon页面的路由{ path: '/icon', name: 'icon', component: () => import('./views/Icon.vue') } 在index.vue里添加一项 <van-col span="6" class="marb20"> <van-icon name="records" /> Icon图标 </van-col> 至今为止呢,我们的首页显示的样式子是...
1.在index.html文件head标签内设置(图片要放在static静态资源文件夹内,防止打包之后文件图片找不到) <link rel="shortcut icon" href="./static/images/logo.png" type=&quo
第四种:使用$emit和$on配合传递事件 如果仅仅是父子一层,传递事件就使用第三种就可以了,如果多层传递或者是兄弟组件,还可以使用$emit和$on配合,其原理就是new 一个vue实例,然后在父子组件引入这个实例,这样在子组件触发的事件就会在父组件监听到了,这就是网上说的eventBus。 新建一个bus.js import Vue from '...
一、安装vue2-svg-icon npm install vue2-svg-icon --save-dev 二、引入main.js并注册组件 //The Vue build version to load with the `import` command//(runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vuefrom'vue'import Appfrom'./App'import routerfrom'...
vue@2 使用 svg-icon:webpack + svg-sprite-loader 项目结构 $ tree-Inode_modules . ├── README.md ├── package.json ├── pnpm-lock.yaml ├── public │ ├── index.html │ └── libs │ └── vue@2.6.14.min.js
vue3.0时代来了,各个UI组件库都相继支持vue3, ant-design-vue也为了vue3提出了ant-design-vue 2.x版本,其中很很多组件也做了相应的调整,例如Icon组件。 从2.0 开始,ant-design-vue 不再内置 Icon 组件,需使用独立的包@ant-design/icons-vue 要使用Icon组件需要通过组件的形式引用: ...
npm install vue-svg-icon --save-dev 2. 将svg图片放入src/svg 这里安利一个svg图片库iconfont src/svg路径暂时不可配置 src文件夹应和node_modules在同一个文件夹下 3. 在项目的main.js入口引入vue-svg-icon和需要使用的svg文件名(不需扩展名)
2.vue造轮子-icon 前言 前面的button做的差不多,但是现在要做一个效果就是 点击按钮会出现 loading 这个icon 再点击就消失 image.png 到这一步如何做? icon 发现重新使用了好多 icon,那么就做一个icon的组件 <template><svgclass="g-icon"aria-hidden="true"><use:xlink:href="`#i-${name}`"></use>...
将iconfont.eoticonfont.svgiconfont.ttficonfont.wofficonfont.woff2文件复制到你的font文件中。 修改iconfont.css文件 而后在你的main.js文件引入该css文件即可。 import '../packages/qiu-style/iconfont.css' 具体可查看笔者的qiucode-UI的文档:https://zhenqicai.github.io/qiucodeUI-docs/#/icon...