mpvue的使用（二）使用vant-weapp

1.安装vant-weapp依赖包

npm i vant-weapp -S --production

下载完成以后进入node_modules/_vant_weapp下的dist文件夹复制将其dist的文件放到static目录下

//在使用页面的文件夹内新建main.json
{
     "usingComponents": {
         "van-button": "../../static/vant-weapp/dist/button/index"
     }
 }

在XX.vue中

 <van-button type="default">测试按钮</van-button>
 

2.使用Toast和Dialog
解决无法出现提示

//main.json中
import Toast from "../../../../static/vant/toast/toast";
import Dialog from "../../../../static/vant/dialog/dialog";
//xx.vue中
<van-toast id="van-toast" />
<van-dialog id="van-dialog" />

3.van-popup
解决出现遮罩层无法点击关闭

<van-cell title="展示弹出层" is-link @click="showPopup" />
<van-popup
  :show="show"
  position="bottom"
  :overlay="true"
  custom-style="height: 50%"
  @close="closeClick"（##重点）
></van-popup>
onClose() {
    this.show=false;
  }  

4.Sidebar
修改宽度

##templete 
<div class="classify-one-list">
    <van-sidebar
style="display: inline-block;width:100%"
:active-key="activeKey"
@change="onChange"
>
    <van-sidebar-item v-for="item in Classify_list" :title="item.name" :key="item.id" />
     </van-sidebar>
</div>
##CSS
.van-sidebar {
  width: 100% !important;
  width: var(--sidebar-width, 100%) !important;
  view {
    display: inline-block !important;
  }
}
 .classify-one-list {
    /deep/ .van-hairline--top-bottom {
      display: inline-block !important;
      width: var(--sidebar-width, 100%) !important;
      height: 100% !important;
    }
overflow-y: auto;
    overflow-x: hidden;
    overflow: auto;
}
.classify-one-list::-webkit-scrollbar {
    display: none;
  }