合并

src/components/content/tunnelScene/editEquComp/childComps/SelectInput.vue

@@ -0,0 +1,113 @@
+<template>
+  <div id="select-input">
+    <div class="select">
+      <div class="value" @click="isShowList = !isShowList">
+        <span>{{ selectedVal }}</span>
+        <img src="/images/htmlEditDialog/select-icon.png" alt="" />
+      </div>
+      <ul v-show="isShowList">
+        <li
+          v-for="(item, index) of params.options"
+          :key="index"
+          @click="handleClickItem(item)"
+        >
+          {{ item.label }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineEmits, defineProps, defineExpose } from "vue";
+const params = defineProps({
+  options: Array,
+  placeholder: String,
+});
+const emit = defineEmits(["selectChange"]);
+let isShowList = ref(false);
+let selectedVal = ref(params.placeholder);
+function handleClickItem(item) {
+  if (!item.value) return;
+  selectedVal.value = item.label;
+  isShowList.value = false;
+  emit("selectChange", item);
+}
+function reset() {
+  isShowList.value = false;
+  selectedVal.value = params.placeholder;
+}
+defineExpose({
+  reset,
+});
+</script>
+
+<style lang="scss" scoped>
+#select-input {
+  P {
+    width: 130px;
+    height: 35px;
+    font-size: 26px;
+    font-family: MicrosoftYaHei;
+    color: #ffffff;
+    line-height: 35px;
+  }
+  .select {
+    position: relative;
+    .value {
+      width: 284px;
+      height: 51px;
+      border: 1px solid #0f82af;
+      font-size: 28px;
+      font-family: MicrosoftYaHei;
+      color: #08b7b8;
+      line-height: 51px;
+      margin-top: 20px;
+      padding: 0px 0px 0px 10px;
+      position: relative;
+      img {
+        position: absolute;
+        right: 20px;
+        bottom: 18px;
+        cursor: pointer;
+      }
+      img:active {
+        transform: scale(0.9);
+      }
+    }
+    ul {
+      position: absolute;
+      width: 284px;
+      max-height: 300px;
+      background: #072247;
+      border-radius: 0px 0px 20px 20px;
+      border: 1px solid #0f82af;
+      z-index: 10000;
+      overflow-y: scroll;
+
+      li {
+        // height: 37px;
+        font-size: 28px;
+        font-family: MicrosoftYaHei;
+        color: #ffffff;
+        line-height: 37px;
+        padding: 10px 10px;
+        cursor: pointer;
+      }
+      li:hover {
+        color: #08b7b8;
+        background: #0f82af8f;
+      }
+    }
+    ul::-webkit-scrollbar {
+      height: 20px;
+      width: 20;
+    }
+    ul::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+      background: #53535380;
+    }
+  }
+}
+</style>