[微信小程序]关于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

    room

至此，我们已经能够看到崭新的图标出现在了小程序中。

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

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

    
        {{name}}
    
    
    

主要是修改了两个地方：

• 为最外层的view加入样式

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

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

//原理可见第三步
//此处使用条件判断主要是防止与Vant原生图标冲突

    {{name}}

自此，我们在使用组件的时候只需:

即可既保留该组件的全部功能，也可以使用自定义组件。
但是，在这种情况下我们每次使用自定义图标的时候都得添加一句

class-prefix='material-icons'

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

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

这样我们就可以向原生Vant图标一样使用Material Design图标啦

结语

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