• vue的爬坑之路(四)之基于vuecli 动态添加iconfont的symbol方法


     

    我们做项目的时候有时会要求用到彩色的字体图标symbol。

    我在基于vue-cli的移动端项目中遇到了此问题,还牵扯到了li遍历动态添加iconfont的问题,折磨许久最终总结出以下问题

    1.引入iconfont.css与iconfont.js文件(可写在你使用icon的.vue页面,也可以引到最外层的app.vue里面)

    2.加入通用css代码(引入一次就行):

    .icon{
        vertical-align: -0.15em;
          fill: currentColor;
          overflow: hidden;
          margin:0 auto;/*px*/
           63px;
          height: 63px;
      }

    3.挑选相应图标并获取类名,应用于页面:

    <svg class="icon" aria-hidden="true">
       <use :xlink:href="#icon-shouyekuang-"></use>
    </svg>

    4.动态添加symbol图标,我把我遍历的方法粘贴出来供大家参考

    主要是移动端导航的切换,更改当前点击的icon颜色

     <ul class="iconfont">
              <li v-for="(nav,$index) in list">
                <router-link :class="{tabTactive:nav.href==currentUrl()}" v-bind:to="nav.href">
                  <svg class="icon" aria-hidden="true">
                      <use :xlink:href="nav.href==currentUrl() ? nav.srcActive : nav.src"></use>
                  </svg>
                  <span>{{nav.name}}</span>
                </router-link>
              </li>
    </ul>
    export default {
        data () {
          return {
            list: [
              {
                name: '首页',
                href: '/',
                src: '#icon-shouyekuang-',
                srcActive: '#icon-shouyeshuang-'
              },
              {
                name: '客服',
                href: '',
                src: '#icon-kefudan-',
                srcActive: '#icon-kefushuang-'
              },
              {
                name: '购物车',
                href: '/cart',
                src: '#icon-gouwuchedan-',
                srcActive: '#icon-gouwucheshuang-'
              }
            ]
          }
        },
        methods: {
          currentUrl () {
            var curUrl = window.location.pathname
            return curUrl
          }
        }
      }

    以上就是我费劲扒拉弄出来的东西,希望有人能用上

  • 相关阅读:
    Numpy学习1
    spark SQL学习(综合案例-日志分析)
    spark SQL学习(认识spark SQL)
    spark SQL学习(案例-统计每日销售)
    spark SQL学习(案例-统计每日uv)
    spark SQL学习(spark连接 mysql)
    spark SQL学习(spark连接hive)
    spark SQL学习(数据源之json)
    常用的Java工具类——十六种
    Idea格式化快捷键无效,没反应
  • 原文地址:https://www.cnblogs.com/nanjie/p/8575332.html
Copyright © 2020-2023  润新知