[微信小程序]關於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圖標啦

結語

鑑於筆者前端水平有限，若有冒犯之處還請見諒。一直都沒有搜到關於這個解決這個問題的辦法，目前的方法直接修改源代碼感受會很混亂，只能期待之後能找到更優雅的解決方式吧。但願本篇文章可以幫到和我有共同疑惑的小夥伴們，若是你們有發現更優雅的解決方案，歡迎留言～