输入下拉框组件

src/components/Input.vue

 <template>
-  <el-input :id="id" ref="form-item" v-model="model" v-bind="attrs" v-on="$listeners" v-bind:disabled="isDisable"/>
+  <el-input :id="id" ref="form-item" v-model="model" v-bind="attrs" v-on="$listeners" v-bind:disabled="isDisable">
+    <template v-slot:suffix>
+      <slot name="suffix"></slot>
+    </template>
+  </el-input>
 </template>
 
 <script>

src/components/InputSelect.vue

+<template>
+  <div>
+    <el-popover
+      placement="bottom"
+      :width="width"
+      trigger="click"
+      popper-class="popoverInputClass"
+      v-model="popoverShow"
+    >
+      <ul class="el-select-dropdown__list">
+        <li
+          class="el-select-dropdown__item"
+          v-for="(item, idx) in liData"
+          :key="idx"
+          @click="selectItem(item)"
+        >
+          <span>{{ item }}</span>
+        </li>
+      </ul>
+      <c-input v-model="model" slot="reference">
+        <template v-slot:suffix>
+          <i
+            class="el-icon-arrow-down"
+            v-if="!popoverShow"
+            @click="popoverShow = false"
+          ></i>
+          <i class="el-icon-arrow-up" v-else @click="popoverShow = true"></i>
+        </template>
+      </c-input>
+    </el-popover>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      popoverShow: false,
+      width: null,
+    };
+  },
+  props: {
+    value: {
+      type: [String, Number],
+      default: undefined,
+    },
+    liData: {
+      type: Array,
+      default: [],
+    },
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value;
+      },
+      set(newVal) {
+        this.$emit("input", newVal);
+      },
+    },
+  },
+  mounted() {
+    this.width = this.$el.clientWidth;
+  },
+  methods: {
+    selectItem(val) {
+       this.popoverShow = false;
+       this.model = val;
+    },
+  },
+};
+</script>
+
+<style>
+.el-popper.popoverInputClass {
+  margin: 12px 0 5px;
+  padding: 0;
+}
+</style>
+
+<style scoped>
+.el-select-dropdown__list {
+  list-style: none;
+  padding: 6px 0;
+  margin: 0;
+  box-sizing: border-box;
+  padding-inline-start: 0;
+}
+.el-select-dropdown__item {
+  font-size: 14px;
+  padding: 0 20px;
+  position: relative;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #606266;
+  height: 34px;
+  line-height: 34px;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+</style>
\ No newline at end of file

src/components/index.js

@@ -46,6 +46,7 @@ import FunctionBtn from "./FunctionBtn"
 import BusinessButon from "./BusinessButton"
 
 import InfSearchGroup from "./InfSearchGroup"
+import InputSelect from "./InputSelect"
 
 export default {
     install(Vue) {
@@ -95,5 +96,6 @@ export default {
         Vue.component("c-bus-button", BusinessButon)
         Vue.component("c-infsearch-group", InfSearchGroup)
         Vue.component("c-codelabel", CodeLabel)
+        Vue.component("c-inputselect", InputSelect)
     }
 }
\ No newline at end of file