uni app 自定义带popup弹窗的input组件

工作需要。自定义了个带popup弹窗的input组件。此组件满足个人需求，不喜勿喷。应该可以看明白怎么回事，也能自己改改，所以就不要联系了，点赞收藏就好

<template><view class="dialog_main"><input v-model="inputvalueClone" class="select_input" placeholder-class="down_select_input_placeholder"placeholder="请输入或选择" @focus="input_focus" @input="input_value" /><view class="select_mian" v-if="showPickerClone"><view class="button_main"><text></text><text class="button_name" @click="qd_click">确定</text></view><scroll-view v-if="showPickerClone" class="scroll_y" :scroll-y="true"><view class="list_main" :id="index" v-for="(item, index) in datalistClone" :key="index"><text v-if="!item.ishow" @click="item_click(item)" class="item_name">{{ item[showkey]  }}</text></view></scroll-view></view></view>
</template><script>import myclient from '../../utils/myclient.js'import utils from '../../utils/utils.js';export default {data() {return {inputvalueClone: "",showPickerClone: false,datalistClone: [],selectedIndex: 0, // 当前选中的索引  };},/*** 组件的属性列表*/props: {showkey: {type: String,default: ''},clienturl: {type: String,default: ''},paramsvalue: {type: String,default: ''},params: {type: Object,default: ''},reqmethod: {type: String,default: 'POST'},datapath: {type: String,default: ''},inputvalue: {type: String,default: ''},callback: {type: String,default: ''}},/*** 组件的方法列表*/methods: {input_value: function(e) {var value = e.detail.valuethis.inputvalueClone = valueif (value.length == 0) {this.datalistClone = utils.setShow(this.datalistClone, true)} else {for (var i = 0; i < this.datalistClone.length; i++) {this.datalistClone[i].ishow = trueif (this.datalistClone[i][this.showkey].indexOf(value) >= 0) {this.datalistClone[i].ishow = false}}this.$forceUpdate()}},input_focus: function() {var that = thismyclient.callGetorPost(this.clienturl, this.reqmethod, this.params, false, function(res) {var paths = that.datapath.split('.');var datas = res;for (let i = 0; i < paths.length; i++) {datas = datas[paths[i]];}if (that.inputvalueClone.length == 0) {that.datalistClone = utils.setShow(datas, true)} else {for (var i = 0; i < datas.length; i++) {datas[i].ishow = trueif (datas[i][that.showkey].indexOf(that.inputvalueClone) >= 0) {datas[i].ishow = false}}that.datalistClone = datas}that.showPickerClone = true})},item_click(e) {this.showPickerClone = falsethis.$emit('callBack', {detail: e,value: this.inputvalueClone});},qd_click: function() {this.showPickerClone = falsethis.$emit('callBack', {value: this.inputvalueClone});}},watch: {inputvalue: {handler: function(newval, oldval) {this.inputvalueClone = newval},immediate: true}}};
</script><style lang="scss" scoped>@function tovmin($rpx) {//$rpx为需要转换的字号@return #{$rpx * 100 / 750}vmin;}.dialog_main {width: 100vw;display: flex;flex-direction: column;}.select_mian {width: 80vw;min-height: 10vh;max-height: 50vh;box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(7, 165, 166, 0.11);z-index: 2;border: solid 2rpx #efefef;}.button_main {width: 100%;height: 80rpx;display: flex;flex-direction: row;border-bottom: #00a99d dotted 2rpx;justify-content: space-between;}.button_name {color: #00a99d;display: flex;align-items: center;text-align: center;justify-content: center;width: 100rpx;height: 100%;}/* 在这里添加你的样式 */.scroll_y {width: 100%;height: 100%;}.list_main {width: 100vw;display: flex;flex-direction: column;align-items: center;vertical-align: center;}.item_name {font-size: 28;padding-top: 5rpx;padding-bottom: 5rpx;width: 100%;min-height: tovmin(80);display: flex;align-items: center;justify-content: center;text-align: left;margin-right: tovmin(32);color: #333;font-weight: 600;overflow-y: auto;overflow-x: scroll;align-items: center;border-bottom: solid #efefef 2rpx;white-space: normal;word-break: break-all;word-wrap: break-word;}.select_input {color: #333;margin-bottom: 10rpx;padding: 0 20px 0px 0px;font-size: 14px;flex: 1;font-weight: 600;}
</style>

讲一下：

myclient 封装的网络请求

utils 是封装的工具类，setshow 是给各个对象添加一个字段isshow 用户对象是否展示出来

showkey 列表中要展示的字段，比如name

clienturl 要访问的接口获取列表数据

paramsvalue 输入框输入的值放在接口参数的那个字段比如keyword //本示例中么有用此字段的后面会加上

params 接口参数

reqmethod 接口请求方式 GET POST

datapath 接口返回的数据取支路径例如data.data.list

inputvalue 输入框默认值，也就是 keyword的默认值例如 params={keyword:5} 那么 inputvalue=5

callback：点确定或列表回调

使用：