组件pullDownSelect

整页模板，可Ctrl+A复制完整粘贴

<template> <view class="box"> <input type="text" style="font-size: 14px;height: 100%;line-height: 36px;" v-model="value" :placeholder="placeholder" placeholder-style="color: rgba(0, 0, 0, .25)" :disabled="disabled"> <view class="icon" style="color: rgba(0, 0, 0, .25);height: 100%;"> <i class="el-icon-caret-bottom" v-if="disabled" style="font-size: 12px;line-height: 34px;"></i> <i class="el-icon-search" v-else style="font-size: 12px;line-height: 34px;"></i> </view> <view class="popup" :style="{display: display}"> <view class="popup_box text-line-1" v-for="(item, index) in search_data" :key="index" @click="select(item, index)">{{ item[key_name] }}</view> </view> </view> </template> <script> export default { name: "pullDownSelect", props: { placeholder: { type: String, default: "" }, data: { type: Array, default () { return [{ name: "全国", value: "全国value" }, { name: "北京", value: "北京value" }, { name: "安徽", value: "安徽value" }] } }, key_name: { type: String, default: "name" }, key_value: { type: String, default: "value" }, //标识&可放form里的字段 form_key: { type: String, default: "" }, disabled: { type: Boolean, default: true } }, computed: { search_data() { return this.data.filter(item => item[this.key_name].indexOf(this.value) !== -1) } }, data() { return { value: "", display: "none" } }, methods: { select(item, index) { this.display = "none !important" setTimeout(() => { this.display = "none" }, 100) this.value = item[this.key_name] let data = { form_key: this.form_key, name: item[this.key_name], value: item[this.key_value] } this.$emit("change", data) } } } </script> <style lang="scss"> .box { width: 100%; height: 36px; padding: 0 12px; background: #fff; border-radius: 4px; border: 1px solid #fff; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; box-sizing: border-box; } .box::after { content: ""; position: absolute; top: 36px; left: 0; width: 100%; height: 5px; } .box:hover { border-color: #99d3ff; } .box:hover .icon { color: #0092ff !important } .box:hover .popup { display: inline-block !important; } .popup { position: absolute; top: 38px; left: -1px; width: 100%; max-height: 240px; padding: 4px; border: 1px solid #e9edf3; z-index: 99; background-color: #FFF; border-radius: 12px; box-shadow: 0 16px 24px 0 rgba(41, 80, 155, .1); animation: acheb .3s linear forwards; box-sizing: border-box; overflow-y: scroll; display: none; } .popup_box { height: 36px; line-height: 36px; padding: 0 8px; border-radius: 4px; color: rgba(0, 0, 0, .85); display: flex; font-size: 14px; justify-content: space-between; } .popup_box:hover { background-color: #f5f6fa; color: #0092ff } ::-webkit-scrollbar { display: none; width: 0; height: 0; color: transparent; } </style>

使用

<view style="width: 120px;"> <pullDownSelect placeholder="省份" @change="change"></pullDownSelect> </view> change(e) { console.log(e) }