• 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
          }
        }
      }

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

  • 相关阅读:
    tomcat 支持https
    linux环境下jdk 安装以及maven私服搭建
    消息中间间初识
    HDU 5527 Too Rich
    HDU 5534 Partial Tree
    HDU 5543 Pick The Sticks
    HDU 5542 The Battle of Chibi dp+树状数组
    CodeForces 842D Vitya and Strange Lesson
    Codeforces 858D Polycarp's phone book
    HDU 5489 Removed Interval
  • 原文地址:https://www.cnblogs.com/nanjie/p/8575332.html
Copyright © 2020-2023  润新知