mpvue小程序中使用i-drawer组件

小程序具有简洁轻便，无需安装，打开即用的特点；遇到页面查询添加过多而感觉页面混乱，特使用iview-weapph中的i-drawer组件进行重构，既节省了空间又显得页面有条理。实现了如下的完整功能：

1.组件配置和引用：

(1).将iview-weapp的dist文件内容拷贝到static文件夹下的iview备用。文件如下:

(2).进入pages.json文件中（用来配置页面的路由已经引用UI组件等）,pages.json格式如下:

(3).找到你需要引用组件的页面,本地引入iview-weapp的i-drawer、i-button等组件(注意路径)：

"subPackages" : [
        {
            "root" : "pages/projects",
            "pages" : [
                {
                    "path" : "hotal/index",
                    "style" : {
            "enablePullDownRefresh" : true,
            "onReachBottomDistance": 150,// 页面触底距离 单位为px
                        "usingComponents" : {
                            "i-tabs" : "/static/iview/tabs/index",
                            "i-tab" : "/static/iview/tab/index",
              "i-modal": "/static/iview/modal/index",
              "i-select": "/static/iview/select/index",
              "i-drawer": "/static/iview/drawer/index",
              "i-button" : "/static/iview/button/index",
              "i-icon": "/static/iview/icon/index"
                        }
                    }
                }
            ]
        },
]      

(4).页面中使用：

html

<!-- 左边抽屉 -->
        <view class="top" style="position: fixed;top: 40px;left: 0;width: 100%;">
          <i-button @click="toggleLeft1" type="primary" style="width: 30px;">
            <i-icon type="add" />
          </i-button>
          <i-drawer mode="left" :visible="showLeft1" @close="toggleLeft1">
              <view class="demo-container">
                  单击遮罩层关闭:
               我是侧边展示内容
               csdn-尔嵘
               csdn-尔嵘
                             csdn-尔嵘
                             淘宝搜华诚荣邦百货
                             淘宝搜华诚荣邦百货
                             淘宝搜华诚荣邦百货
                             淘宝搜华诚荣邦百货
              </view>
            <view>
              淘宝搜华诚荣邦百货
                            淘宝搜华诚荣邦百货
                            淘宝搜华诚荣邦百货
                            淘宝搜华诚荣邦百货
            </view>
          </i-drawer>      

js

data() {
        return {
            modeLeft: "left",
            showLeft1: false,//抽屉
        }        
}
methods:{
    toggleLeft1() {
          this.showLeft1 = !this.showLeft1;
    },
}      

2.效果：