zoukankan      html  css  js  c++  java
  • 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
          }
        }
      }

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

  • 相关阅读:
    5.2 输出一张随机图片
    5.1 Request 获取请求数据的几种方法
    5.Servlet 对象(request-response)
    4.Servlet(动态web资源)
    复选框、单选按钮、下拉列表的定义
    选择屏幕输入值的控制
    屏幕元素创建的基本语法
    屏幕对象的F1/F4输入帮助功能
    函数alv下的颜色设置
    BDIA增强
  • 原文地址:https://www.cnblogs.com/nanjie/p/8575332.html
Copyright © 2011-2022 走看看