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.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()
        },