feat：create customized Select component

src/components/pc/BlockChainBrowser/DataFilter/index.vue

@@ -4,14 +4,12 @@
       <slot name="left" />
     </div>
     <div>
-      <Select :value="value" @change="setValue">
-        <Option
-          v-for="(option, i) in optionList"
-          :key="i"
-          :value="option.value"
-          :label="option.name"
-        ></Option>
-      </Select>
+      <MySelect
+        style="width: 310px;"
+        :selectedValue="value"
+        :optionList="optionList"
+        @change="setValue"
+      ></MySelect>
     </div>
   </div>
 </template>
@@ -19,18 +17,19 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { iOptionItem } from './types'
-import { Select, Option } from 'element-ui'
-
+import MySelect from '@/components/pc/Select.vue'
 export default Vue.extend({
   components: {
-    Select,
-    Option,
+    MySelect,
   },
   props: {
     value: [String, Number],
     setValue: Function,
     optionList: Array as PropType<iOptionItem[]>,
   },
+  data() {
+    return {}
+  },
 })
 </script>
 

src/components/pc/Select.vue

+<template>
+  <div class="c-select flex items-center justify-between relative" ref="select">
+    <div class="c-selected-name">
+      {{ selectedName }}
+    </div>
+    <div class="c-arrow">
+      <div
+        class="c-img transform transition-transform bg-cover"
+        :class="{
+          '-rotate-180': open,
+        }"
+        :style="{
+          backgroundImage: `url(${arrowDownIcon})`,
+        }"
+      ></div>
+    </div>
+    <transition name="slide">
+      <div
+        class="absolute top-full z-50 c-optionList w-full left-0 mt-1"
+        v-if="open"
+      >
+        <div
+          v-for="(option, i) in optionList"
+          :key="i"
+          class="relative px-5 h-9 leading-9 text-text-color"
+          :class="{
+            ' text-footer-color': option.value === selectedValue,
+          }"
+          @click="$emit('change', option.value)"
+        >
+          {{ option.name }}
+          <div
+            class="absolute w-full h-full top-0 left-0 hover:bg-footer-color"
+            style="opacity: 0.03;"
+            :class="{
+              ' bg-footer-color': option.value === selectedValue,
+            }"
+          ></div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import arrowDownIcon from '@/assets/images/blockChainBrowser/arrow-down-dark.png'
+
+export default Vue.extend({
+  props: {
+    optionList: Array as PropType<
+      {
+        name: string
+        value: string | number
+      }[]
+    >,
+    selectedValue: [String, Number],
+  },
+  data() {
+    return {
+      arrowDownIcon,
+      open: false,
+    }
+  },
+  mounted() {
+    window.addEventListener('click', this.clickGrobal)
+  },
+  beforeDestroy() {
+    window.removeEventListener('click', this.clickGrobal)
+  },
+  methods: {
+    clickGrobal(e: MouseEvent) {
+      const selectEl = this.$refs.select as HTMLElement
+      const clickoutside = !selectEl.contains(e.target as HTMLElement)
+      if (clickoutside) {
+        this.open = false
+      } else {
+        this.open = !this.open
+      }
+    },
+  },
+  computed: {
+    selectedName(): string {
+      return (
+        this.optionList.find((i) => i.value === this.selectedValue)?.name || ''
+      )
+    },
+  },
+})
+</script>
+<style lang="scss" scoped>
+.c-select {
+  padding: 0 20px;
+  height: 30px;
+  background: #ffffff;
+  border-radius: 15px;
+  border: 1px solid #d9dcde;
+  .c-img {
+    width: 9px;
+    height: 6px;
+  }
+  .c-optionList {
+    min-height: 0px;
+    max-height: calc(36px * 5);
+    background: #ffffff;
+    box-shadow: 0px 2px 15px 0px rgba(31, 52, 112, 0.06);
+    border-radius: 4px;
+    border: 1px solid #ebeff1;
+  }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity 5s;
+  }
+  .fade-enter,
+  .fade-leave-to {
+    opacity: 0;
+  }
+
+  .slide-enter-active {
+    transition: all 0.3s ease-in-out;
+  }
+  .slide-enter {
+    opacity: 0;
+  }
+}
+</style>