用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2020-5-28 00:31

前言开发小程序过程中,个人比较喜欢Vant的UI,美中不足的是Vant的Icon组件自带的图标实在太少了,于是探索一番之后找到了在Vant中使用Material Design图标的方法。示意图如下:相关链接Material DesignVantWeapp正 ...

前言

开发小程序过程中,个人比较喜欢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图标啦

结语

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 空本町 来自: segmentfault