工作需要。自定义了个带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.value
this.inputvalueClone = value
if (value.length == 0) {
this.datalistClone = utils.setShow(this.datalistClone, true)
} else {
for (var i = 0; i < this.datalistClone.length; i++) {
this.datalistClone[i].ishow = true
if (this.datalistClone[i][this.showkey].indexOf(value) >= 0) {
this.datalistClone[i].ishow = false
}
}
this.$forceUpdate()
}
},
input_focus: function() {
var that = this
myclient.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 = true
if (datas[i][that.showkey].indexOf(that.inputvalueClone) >= 0) {
datas[i].ishow = false
}
}
that.datalistClone = datas
}
that.showPickerClone = true
})
},
item_click(e) {
this.showPickerClone = false
this.$emit('callBack', {
detail: e,
value: this.inputvalueClone
});
},
qd_click: function() {
this.showPickerClone = false
this.$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：点确定或 列表回调
使用：
要使用的页面 增加
import inputselectVue from './component/inputselect.vue';
components: {
inputselectVue,
},
<inputselectVue class="select_input" showkey="strname"
:clienturl="strurl" :params="{keyword:0}" reqmethod="POST"
datapath="data.data.list" :inputvalue=" strname"
@callBack="name_callback">
</inputselectVue>
name_callback: function(e) {
console.log(JSON.stringify(e))
if (e.detail) {
this.strname= e.detail.strname;
} else {
this.strname= e.detail.value;
}
this.$forceUpdate()
},
