zoukankan      html  css  js  c++  java
  • vue+vant中引入iconfont字体图标的问题

     使用的是iconfont的图标,下载至本地使用的,图标比较少,使用的文件中引入,使用import或者css的@import都不行,一直报错最后被逼无奈,在main.js中引入的图标

     这不是我本意,后续有时间继续探讨在指定文件引入字体图标的问题
    使用的时候是van-field的组件中使用的,该组件自带了后缀图标的引入方法:

      <van-field
        v-model="value1"
        label="文本"
        left-icon="smile-o"
        right-icon="warning-o"
        placeholder="显示图标"
      />
    

      其中left-icon表示在左侧插入图标,right-icon表示在右侧插入图标,但是直接使用iconfont的方法写入不生效

      最后解决办法是在van-field的组件中插入van-icon的组件结合slot的方法插入,代码如下

      

    <van-field 
              v-model='textarea' 
              rows='2'
              maxlength = '200'
              label='请输入留言'
              show-word-limit
              placeholder='可以点击语音输入文字'
              @click-right-icon='getSpeak'>
              <van-icon class='iconfont' class-prefix='icon' slot='right-icon' name='yuyin'></van-icon>
    </van-field>
    

      其中class-prefix=‘icon’的写法固定,暂时未找到其原因,slot='right-icon'表示插入到van-field中的right-icon中,最后呈现效果

       



  • 相关阅读:
    Ocelot + IdentityServer4 坑自己
    撸一个简易商城
    visual studio2013负载测试简单问题记录
    Jquery简单动画的实现记录
    Jquery的一些简单使用记录
    图片变灰css3
    Jquery的一些取值
    ASP.NET WebApi 简单记录
    iframe的一些简单记录
    Jquery Select 下拉框处理
  • 原文地址:https://www.cnblogs.com/browse/p/14679602.html
Copyright © 2011-2022 走看看