vant-field的使用+下拉框

首先先在pages.json中引入vant-filed

1.普通vant-field的使用，没有双向绑定，所以用到了change事件

<van-field
                  :value="reportContent.eventInfo"
                  label="事件详情"
                  type="textarea"
                  placeholder="请填写当前事件的详细描述"
                    @change="onChangeEventInfo"
                  input-align="right"
                  autosize
                />

// vant-field不能是实现数据双向绑定，可以通过触发change获取当前输入
            onChangeEventName(event){
                this.reportContent.eventName = event.detail
            },

2.vant-filed结合ul实现下拉框

<!--所属区域及下拉框-->
            <van-field label="所属区域" placeholder="请输入所属区域" id="serachInputRegion" class="inputInfo" v-model="searchRegion" v-on:focus="focusRegion()" v-on:blur="blurRegion()"></van-field>
            <ul class="sel-ul" v-show="showRegion" id="region">
                <div class="text-center" v-show="searchRegion > 0">
                    <div class="loading">
                        <span>加载中</span>
                    </div>
                </div>
                <div class="text-center" v-show="!showloadingRegion">
                    <div v-show="regionList.length > 0">
                        <li class="loc-item" v-for="(item, index) in regionList" :value="item" :key="index" :data-index="index" @touchstart="chooseRegion(item)">
                            <div class="area">{{ item.areaName }}</div>
                            <div class="town">{{ item.township }}-{{ item.community }}-{{ item.areaName }}</div>
                        </li>
                    </div>
                    <div class="text-center" v-show="!regionList.length">
                        <div class="noData">暂无数据返回</div>
                    </div>
                </div>
            </ul>

方法:

focusRegion() {
            this.showRegion = true
            this.showloadingRegion = true
            if (document.querySelector('#serachInputRegion') === document.activeElement) {
                this.debounceRegion(500)
            }
        },
        blurRegion() {
            this.showRegion = false
        },
　　　　// 函数防抖
        debounceRegion(wait) {
            clearTimeout(this.timeRegion)
            this.timeRegion = setTimeout(() => {
                this.getRegionData(this.searchRegion.trim())     // 获取数据的方法
            }, wait)
        },
　　　　　　chooseRegion(val) {
            this.searchRegion = val.areaName
            this.searchRegionCode = val.code
            console.log(val)
            this.famerData.region = val.pcode
        },

监听：

mounted(){
　　const that = this
　　document.addEventListener('click', (e) => {
   　　if (e.target.className !== 'inputInfo') {
      　　that.$nextTick(() => {
          　　that.showCustomer = false
      　　})
      }
    })
},
watch: {
        searchRegion: {
            handler() {
                this.focusRegion()
            },
        },
    },

样式：

.sel-ul {
    position: absolute;
    z-index: 999;
    width: 55%;
    list-style: none;
    background-color: white;
    left: 270px;
    // border: 1px solid #aaa;
    .text-center {
        font-size: 28px;
        box-sizing: border-box;
        .loading {
            line-height: 50px;
            margin-left: 20px;
        }
        .noData {
            margin-left: 20px;
        }
        .loc-item {
            position: relative;
            z-index: 9999;
            cursor: pointer;
            height: 90px;
            box-sizing: border-box;
            padding-left: 20px;
            font-size: 34px;
            padding-top: 5px;
            border: 1px solid rgb(226, 224, 224);
            .area {
                margin-right: 20px;
            }
            .town {
                font-size: 30px;
                color: rgb(91, 95, 95);
            }
        }
    }
}

 

 

 

插入:使用vant-cell可以做从手机底部弹出的效果(vant-pop)

 <van-cell title="任务名称" :value="reportContent.eventName" @click="showPopup">
 </van-cell>

<van-popup :show="showRenWu" position="bottom" round>
<van-picker
show-toolbar
:columns="renWuList"
defaultIndex="2"
@cancel="onCancel"
@confirm="onConfirm"
/>
</van-popup>

showPopup() {
                this.showRenWu = true;
            },
             onConfirm(event) {
                 // console.log(event)
                 this.reportContent.eventName = event.detail.value
                 // console.log( this.reportContent.eventName)
                 this.showRenWu = false;
                  // const { picker, value, index } = event.detail;
                },
                onCancel() {
                  this.showRenWu = false;
                },