标题组件扩展

src/components/subTop.vue

@@ -8,6 +8,18 @@
       class="title-top-bg"
     ></div>
     <span class="title-top-content" :style="{ 'text-align': props.left }">{{ topTitle || '--' }}</span>
+    <div v-if="isDown" class="down-list" :style="{ width: downWidth }">
+      <el-dropdown :hide-on-click="true" :style="{ width: '90%' }" trigger="click" @command="handleCommand">
+        <span class="el-dropdown-link">
+          {{ currentVal && currentVal[labelField] ? currentVal[labelField] : downTitle }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu class="down-menu">
+            <el-dropdown-item v-for="(n, index) in optionsList" :key="n[valueField]" :command="n[valueField]">{{ n[labelField] }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+    </div>
   </div>
 </template>
 <script setup>
@@ -26,24 +38,96 @@ const props = defineProps({
     type: String,
     default: 'left',
   },
+  options: {
+    type: Array,
+    default: () => {
+      return [
+        { label: '耿马镇', value: '42611' },
+        { label: '勐撒镇', value: '9259' },
+        { label: '勐永镇', value: '17787' },
+        { label: '孟定镇', value: '42610' },
+        { label: '勐简乡', value: '17788' },
+        { label: '贺派乡', value: '40161' },
+        { label: '四排山乡', value: '40163' },
+        { label: '大兴乡', value: '40159' },
+      ];
+    },
+  },
+  isDown: {
+    type: Boolean,
+    default: true,
+  },
+  downTitle: {
+    type: String,
+    default: '全县',
+  },
+  labelField: {
+    type: String,
+    default: 'label',
+  },
+  valueField: {
+    type: String,
+    default: 'value',
+  },
+  downWidth: {
+    type: String,
+    default: '100px',
+  },
 });
 
 let topTitle = ref('');
 let pos = ref('');
 
+let optionsList = reactive(props.options);
+let currentVal = reactive(null);
+
 watch(
-  () => (props.title, props.postion),
+  () => (props.title, props.postion, props.options),
   () => {
     topTitle.value = props.title;
     pos.value = props.postion;
+    optionsList = props.options;
   },
   {
     deep: true,
     immediate: true,
   }
 );
+
+const handleCommand = (data) => {
+  let index = optionsList.findIndex((m) => {
+    return m[props.valueField] == data;
+  });
+
+  if (index > -1) {
+    currentVal = optionsList[index];
+  }
+  console.info('handleCommand', currentVal);
+};
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
+.down-menu {
+  background: transparent;
+}
+
+.el-dropdown-link {
+  color: $color-custom-main !important;
+  i {
+    color: $color-custom-main !important;
+  }
+}
+.el-dropdown__popper {
+  background: rgba(0, 0, 0, 0.8) !important;
+  border: 0 !important;
+}
+.el-popper__arrow::before {
+  background: rgba(0, 0, 0, 0.8) !important;
+}
+.el-dropdown-menu__item:hover,
+.el-dropdown-menu__item:active {
+  background: rgba(255, 255, 255, 0.2) !important;
+  color: #fff !important;
+}
 .title-top-warp {
   position: relative;
   height: 38px;
@@ -77,5 +161,22 @@ watch(
     top: 0;
     z-index: 2;
   }
+  .down-list {
+    display: inline-block;
+    position: absolute;
+    right: 32px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    border: 1px solid $color-custom-main;
+    border-radius: 4px;
+    padding: 6px;
+    text-align: center;
+    ::v-deep() {
+      .el-dropdown {
+        display: inline-block;
+      }
+    }
+  }
 }
 </style>

src/styles/global.scss

@@ -1,6 +1,6 @@
 // color
 $legacy-ie: 10;
-$color-primary: #20a0ff;
+$color-primary: #35D0C0;
 $color-success: #13ce66;
 $color-warning: #f7ba2a;
 $color-danger: #ff4949;
@@ -58,4 +58,6 @@ $color-types: (
   ),
 );
 
+$color-custom-main: #35D0C0;
+
 @import 'utils/utils';