Vant使用自定义字体图标库

遇到问题:改变日期值后,组件返回的日期值未实时更新

问题分析:组件滚动的默认动画时长为1000ms,最新值会在动画结束更新并返回,用户在动画完成前点击确认获取的不是最新值.

解决方案:修改动画滚动时长属性swipe-duration,设置为200ms

Vant使用自定义字体图标库

打开阿里巴巴图标库，选择图标，加入购物车，然后放到想要的项目中，

项目配置成

生成font class代码，

浏览器打开，找到

url('//at.alicdn.com/t/font_3050680_fz0rcp1v26g.ttf?t=1640224095568') format('truetype');

下载url

建立icon.css文件，可以全局引入或者局部引入

import './icon/icon.css'

css文件内容

这里的iconfont 要改造成icon-ls

定义 font-family名称要是下面icon-ls的开头

  @font-face {
    font-family: "icon-ls"; /* Project id 3050680 */
    src: url('./iconfont.ttf') format('truetype');
  }
  
  .icon-ls {
    font-family: "icon-ls" !important;
    font-size: 16px;
    color: #00b696;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-ls-igw-dayin:before {
    content: "\e626";
  }
  
  .icon-ls-igw-rili:before {
    content: "\e8cf";
  }
  

引用

class-prefix 就是font-family

name 就是icon-ls后面携带的

<van-icon class-prefix="icon-ls" name="igw-rili" size="24" />