您当前的位置: 首页 > 解决方案

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

  • 作者: admin
  • 发布于 2020-05-29 09:48:33
  • 来源:  
  • 栏目:解决方案

导语: 前言 开发小程序过程中,个人比较喜欢Vant的UI,美中不足的是Vant的Icon组件自带的图标实在太少了,于是探索一番之后找到

 

前言

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

 

01.jpg

相关链接

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图标啦



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部