mpvue——引入vant_weapp組件

克隆倉庫

克隆后，將dist目錄下的所有文件復制到項目中的/static/vant/目錄下，vant目錄是我自己創建為了區分的

git clone https://github.com/youzan/vant-weapp.git

 

注意:一定要確保復制完全了,我當時復制的時候common文件夾沒復制過來,就出現錯誤了!

 

引入

直接在用的頁面的main.json中引用了,這里的配置是根據我的目錄結構來的,如果你和我前面的操作一致,那么直接復制粘貼就可以了,不然就要自己修改哦~

https://youzan.github.io/vant-weapp/#/intro官方文檔,有些新功能更新,這里的引入可能還沒加進來,大家可以自己去官方的網站看下

"usingComponents": {
        "van-action-sheet": "/static/vant/cell-group/index",
        "van-area": "/static/vant/area/index",
        "van-badge": "/static/vant/badge/index",
        "van-badge-group": "/static/vant/badge-group/index",
        "van-button": "/static/vant/button/index",
        "van-card": "/static/vant/card/index",
        "van-cell": "/static/vant/cell/index",
        "van-cell-group": "/static/vant/cell-group/index",
        "van-checkbox": "/static/vant/checkbox/index",
        "van-checkbox-group": "/static/vant/checkbox-group/index",
        "van-col": "/static/vant/col/index",
        "van-collapse": "/static/vant/collapse/index",
        "van-datetime-picker": "/static/vant/datetime-picker/index",
        "van-dialog": "/static/vant/dialog/index",
        "van-field": "/static/vant/field/index",
        "van-goods-action": "/static/vant/goods-action/index",
        "van-goods-action-button": "/static/vant/goods-action-button/index",
        "van-goods-action-icon": "/static/vant/goods-action-icon/index",
        "van-icon": "/static/vant/icon/index",
        "van-info": "/static/vant/info/index",
        "van-loading": "/static/vant/loading/index",
        "van-nav-bar": "/static/vant/nav-bar/index",
        "van-notice-bar": "/static/vant/notice-bar/index","van-notify": "/static/vant/notify/index",
        "van-overlay": "/static/vant/overlay/index",
        "van-panel": "/static/vant/panel/index",
        "van-picker": "/static/vant/picker/index",
        "van-picker-column": "/static/vant/picker-column/index",
        "van-popup": "/static/vant/popup/index",
        "van-progress": "/static/vant/progress/index",
        "van-radio": "/static/vant/radio/index",
        "van-radio-group": "/static/vant/radio-group/index",
        "van-rate": "/static/vant/rate/index",
        "van-row": "/static/vant/row/index",
        "van-search": "/static/vant/search/index",
        "van-slider": "/static/vant/slider/index",
        "van-stepper": "/static/vant/stepper/index",
        "van-steps": "/static/vant/steps/index",
        "van-submit-bar": "/static/vant/submit-bar/index",
        "van-swipe-cell": "/static/vant/swipe-cell/index",
        "van-switch": "/static/vant/switch/index",
        "van-switch-cell": "/static/vant/switch-cell/index",
        "van-tab": "/static/vant/tab/index",
        "van-tabbar": "/static/vant/tabbar/index",
        "van-tabbar-item": "/static/vant/tabbar-item/index",
        "van-tabs": "/static/vant/tabs/index",
        "van-tag": "/static/vant/tag/index",
        "van-toast": "/static/vant/toast/index",
        "van-tree-select": "/static/vant/tree-select/index"
    }

 

 

 使用

在頁面中直接使用就ok了,只要和引入中命名一致

 <van-cell-group name="form-list">
            <div class="form-item">
              <label class="label-text" for="prizeName">獎品名稱</label>
              <van-field
                class="input"
                adjust-position="true"
                input-align="right"
                id="prize"
                name="prizeName"
                v-model="contactFormData.prizeName"
                placeholder="請輸入獎品名稱"
              />
            </div>
            <div class="form-item">
              <label class="label-text" for="prizeNumber">獎品數量</label>
              <van-field
                class="input"
                adjust-position="true"
                input-align="right"
                id="prizeNumber"
                name="prizeNumber"
                type="number"
                v-model="contactFormData.prizeNumber"
                placeholder="請輸入獎品數量"
                onkeyup = "value=value.replace(/[^0-9]/g,'')"
                onpaste = "value=value.replace(/[^0-9]/g,'')"
                oncontextmenu = "value=value.replace(/[^0-9]/g,'')"
              />
            </div>
            <div class="form-item">
              <label class="label-text" for="userName">聯系人</label>
              <van-field
                class="input"
                adjust-position="true"
                input-align="right"
                id="userName"
                name="userName"
                v-model="contactFormData.userName"
                placeholder="請輸入姓名"
              />
            </div>
            <div class="form-item">
              <label class="label-text" for="mobile">聯系電話</label>
              <van-field
                class="input"
                adjust-position="true"
                input-align="right"
                id="mobile"
                name="mobile"
                type="number"
                v-model="contactFormData.mobile"
                placeholder="請輸入聯系電話"
                maxlength="11"
              />
            </div>
            <div class="form-item">
              <label class="label-text" for="goodsLink">商品鏈接</label>
              <van-field
                class="input"
                adjust-position="true"
                input-align="right"
                id="goodsLink"
                name="goodsLink"
                v-model="contactFormData.goodsLink"
                placeholder="請輸入商品鏈接"
              />
            </div>
            <div class="form-item h200">
              <label class="label-text" for="prize">備注信息</label>
              <van-field
                class="input-big"
                adjust-position="true"
                type="textarea"
                id="remark"
                name="remark"
                v-model="contactFormData.remark"
                rows="2"
                autosize
                placeholder="請輸入備注信息"
              />
            </div>
          </van-cell-group>

 

不要忘記，引入后重新編譯一下哦！