[微信小程序]关于Vant组件中使用Material Design的一点探索

前言

开发小程序过程当中，我的比较喜欢Vant的UI，美中不足的是Vant的Icon组件自带的图标实在太少了，因而探索一番以后找到了在Vant中使用Material Design图标的方法。示意图以下：

相关连接

Material Design
VantWeapp

正文

1. 引入Material Design样式表

在项目根目录的"utils"文件夹下新建“MD_Wxss/index.wxss”

//MD_Wxss/index.wxss
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-display: auto;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v43/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    display: flex;
    align-items: center;
}

2. 在“app.wxss”中加载上一步建立好的文件

@import '/utils/MD_Wxss/index.wxss';

3. 在WXML中测试使用Material Design

<view class="material-icons">
    room
</view>

至此，咱们已经可以看到崭新的图标出如今了小程序中。

4. 修改Vant组件源代码，使其可使用Material Design

找到icon组件的文件夹，打开index.wxml，将下面的代码复制进去。

<wxs src="../wxs/utils.wxs" module="utils" />

<view
  class="custom-class {{ classPrefix }} {{ isImageName ? 'van-icon--image' : classPrefix + '-' + name }}"
  style="position:relative;color: {{ color }};font-size: {{ utils.addUnit(size) }};{{ customStyle }}"
  bind:tap="onClick"
>
    <view wx:if="{{classPrefix!=='van-icon'}}">
        {{name}}
    </view>
    <van-info
        wx:if="{{ info !== null || dot }}"
        dot="{{ dot }}"
        info="{{ info }}"
        custom-class="van-icon__info"
    />
    <image
        wx:if="{{ isImageName }}"
        src="{{ name }}"
        mode="aspectFit"
        class="van-icon__image"
    />
</view>

主要是修改了两个地方：

• 为最外层的view加入样式

position:relative;//若是没有此代码，将没法正常使用van-icon组件的dot、info等功能

• 在最外层的view内加入一个新的view

//原理可见第三步
//此处使用条件判断主要是防止与Vant原生图标冲突
<view wx:if="{{classPrefix!=='van-icon'}}">
    {{name}}
</view>

自此，咱们在使用<van-icon>组件的时候只需:

<van-icon class-prefix='material-icons' size="50" name="work"/>

便可既保留该组件的所有功能，也可使用自定义组件。
可是，在这种状况下咱们每次使用自定义图标的时候都得添加一句

class-prefix='material-icons'

并且在使用其余的一些有调用<van-icon>组件的Vant组件时，也必须使用插槽，形成麻烦。
因此考虑将material-icons设置为默认的类前缀名。
只需找到icon组件的文件夹，打开index.js，将classPrefix的默认值修改成material-icons：

classPrefix: {
  type: String,
  value: 'material-icons',
}

这样咱们就能够向原生Vant图标同样使用Material Design图标啦

结语

鉴于笔者前端水平有限，若有冒犯之处还请见谅。一直都没有搜到关于这个解决这个问题的办法，目前的方法直接修改源代码感受会很混乱，只能期待之后能找到更优雅的解决方式吧。但愿本篇文章可以帮到和我有共同疑惑的小伙伴们，若是你们有发现更优雅的解决方案，欢迎留言～