zoukankan      html  css  js  c++  java
  • vue中使用svg

    在使用vue开发项目时,会遇到很多使用图标的场景。以使用阿里图标为例,假如你的项目中图标很固定,以后都不会变了,那么随便选择哪种方式的图标都可以。但是如果项目中图标会变,时不时的变个图标或者新增、减少一个图标,比较灵活的场景下使用svg会比较方便一些。

    1、安装包

    npm install svg-sprite-loader --save-dev

    2、项目中使用的是vue-cli2手脚架的话,配置如下:

    在build文件夹下找到webpack.bae.conf.js,

    module: {
        rules: [
             test: '/.svg$/',
             include: [reslove('src/icon')],
             loader: ''svg-sprite-loader,
             options: {
                  symboId: 'icon-[name]'       
            }          
        ]

    然后在找到如下代码,加上这一行 'exclude: [resolve('src/icons')],'

    {
            test: /.(png|jpe?g|gif|svg)(?.*)?$/,
            loader: 'url-loader',
            exclude: [resolve('src/icons')],
            options: {
              limit: 10000,
              name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
    },

    使用cli3配置如下:

    在新建的vue.config.js中,添加以下代码

    const path = require('path')
    function resolve(dir) {
        return path.join(__dirname, dir)
    }
    module.exports = {
        chainWebpack(config){
            config.module
                .rule('svg')
                .exclude.add(resolve('src/icons'))
                .end()
            config.module
                .rule('icons')
                .test(/.svg$/)
                .include.add(resolve('src/icons'))
                .end()
                .use('svg-sprite-loader')
                .loader('svg-sprite-loader')
                .options({
                    symbolId: 'icon-[name]'
                })
                .end()
        }
    }

     3、在src目录下新建文件夹icons,把所有svg文件放进去,然后再新建index.js文件,获取icons目录下的所有svg文件

    import Vue from 'vue'
    import SvgIcon from '@/components/SvgIcon'
    
    Vue.component('svg-icon', SvgIcon)
    
    const req = require.context('./svg', false, /.svg$/)
    const requireAll = requireContext=>requireContext.keys().map(requireContext)
    requireAll(req)

    4、在3步骤,引入了SvgIcon组件,这个需要自己手写代码如下

    <template>
      <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
          <use :href="iconName" />
      </svg>
    </template>
    
    <script>
    export default {
      name: 'SvgIcon',
      props:{
          iconClass:{
              type: String,
              require: true
          },
          className:{
              type: String,
              default: ''
          }
      },
      computed:{
          iconName(){
              return `#icon-${this.iconClass}`
          },
          svgClass(){
              if(this.className){
                  return 'svg-icon '+ this.className
              }else{
                  return `svg-icon`
              }
          }
      }
     }
    </script>
    
    <style scoped>
    .svg-icon{
         1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        /* overflow: hidden; */
    }
    </style>

    5、在main.js引入

    //全局使用svg
    import './icons'

    6、使用

    <svg-icon :iconName='location' />
  • 相关阅读:
    将 Web 项目从 Visual Studio .Net 2002/2003 转换到 Visual Studio 2005 的分步指南
    用 ASP.NET 2.0 改进的 ViewState 加快网站速度
    SQL行列转换实战
    分页存储过程
    分布式系统设计套件
    ASP.NET 2.0 本地化功能:本地化 Web 应用程序的新方法
    在 ASP.NET 页面中使用 TreeView 控件
    SQL Server中的几个方法和Transact SQL 常用语句以及函数[个人推荐]
    ASP.NET 常见问题 和 网页上加上百度搜索
    两台SQL Server数据同步解决方案
  • 原文地址:https://www.cnblogs.com/zmyxixihaha/p/13102417.html
Copyright © 2011-2022 走看看