Vant Weapp 组件库

1.安装vant

1.1 打开项目路径，使用 cd ../ 确保路径是整个项目路径

1.2 输入 npm i @vant/weapp -S --production

1.3 工具->构建npm

2.使用

2.1 在app.json中

"usingComponents": {
    "van-overlay": "@vant/weapp/overlay/index",
    "van-icon": "@vant/weapp/icon/index",
    "van-sticky": "@vant/weapp/sticky/index",
    "van-notice-bar": "@vant/weapp/notice-bar/index",
    "van-divider": "@vant/weapp/divider/index",
    "van-loading": "@vant/weapp/loading/index",
    "van-search": "@vant/weapp/search/index",
    "van-sidebar": "@vant/weapp/sidebar/index",
    "van-sidebar-item": "@vant/weapp/sidebar-item/index",
    "van-card": "@vant/weapp/card/index",
    "van-tab": "@vant/weapp/tab/index",
    "van-tabs": "@vant/weapp/tabs/index",
    "van-empty": "@vant/weapp/empty/index",
    "van-cell": "@vant/weapp/cell/index",
    "van-cell-group": "@vant/weapp/cell-group/index",
    "van-row": "@vant/weapp/row/index",
    "van-col": "@vant/weapp/col/index",
    "van-popup": "@vant/weapp/popup/index",
    "van-button": "@vant/weapp/button/index",
    "van-grid": "@vant/weapp/grid/index",
    "van-grid-item": "@vant/weapp/grid-item/index",
    "van-stepper": "@vant/weapp/stepper/index",
    "van-tag": "@vant/weapp/tag/index",
    "van-swipe-cell": "@vant/weapp/swipe-cell/index",
    "van-radio": "@vant/weapp/radio/index",
    "van-radio-group": "@vant/weapp/radio-group/index",
    "van-checkbox": "@vant/weapp/checkbox/index",
    "van-checkbox-group": "@vant/weapp/checkbox-group/index",
    "van-submit-bar": "@vant/weapp/submit-bar/index",
    "van-field": "@vant/weapp/field/index",
    "van-area": "@vant/weapp/area/index",
    "van-switch": "@vant/weapp/switch/index",
    "van-goods-action": "@vant/weapp/goods-action/index",
    "van-goods-action-icon": "@vant/weapp/goods-action-icon/index",
    "van-goods-action-button": "@vant/weapp/goods-action-button/index",
    "van-dialog": "@vant/weapp/dialog/index"
  }

2.2 wxml中

<van-button>button</van-button>

3.文档

https://www.w3cschool.cn/vantlesson

4.具体使用

4.1 复选框（checkbox）

可以结合cell-group使用

<van-checkbox-group value="{{result}}" bind:change="onChangeList">
  <van-cell-group>
    <van-checkbox id="{{item.goodId}}" name="{{item.goodId}}"  checked-color="#FF0033"></van-checkbox>
  </van-cell-group>
</van-checkbox-group>

<van-checkbox value="{{ checkedAll }}" bind:change="selectAll" checked-color="#FF0033">全选 </van-checkbox>

data : {
  result : [],        //记录被选中的单选框
  checkedAll : false, //是否全选
},

/**
 * 点击单选按钮
 */
onChangeList: function (event) {
  //console.log(event)
  var array = event.detail; //所有被选中的data值
  this.setData({
    result: array,
  })
  this.isCheckedAll();
},
/**
 * 判断是否全选
 */
isCheckedAll(){
  //根据result和currentGoods长度判断
  if(this.data.currentGoods.length == this.data.result.length){
    this.setData({
      checkedAll : true
    })
  } else {
    this.setData({
      checkedAll : false
    })
  }
},

/**
 * 全选按钮
 */
selectAll(e){
  //checkbox value 根据result里面的 name属性来绑定的
  if(this.data.checkedAll){ //已经全选
    this.setData({
      result: []
    })
  } else { //没有全选
    var arr = [];
    this.data.currentGoods.forEach(item => {
      arr.push(item.goodId.toString());
    });
    this.setData({
      result : arr
    })
  }
  this.calculatePrice();
  this.isCheckedAll();
},

4.2 Dialog组件

需要在wxml里加入 js中才可以使用

<van-dialog id="van-dialog" />

Dialog.alert({
      title: '标题',
      message: '弹窗内容',
  }).then(() => {
      // on close
)}