trike-datav/src/components/areaList.vue

<script setup>
import { defineProps, defineEmits, ref, nextTick, } from "vue"
import { useRouter } from 'vue-router'
const router = useRouter()
const emit = defineEmits(['offAreaList']);
const choseArea = ref(false);

const list = ref([
  {
    name: '泸县',
    pinyin: 'luxian',
  },
  {
    name: '江阳区',
    pinyin: 'jiangyang',
  },
  {
    name: '龙马潭区',
    pinyin: 'longma',
  },
  {
    name: '纳溪区',
    pinyin: 'naxi',
  },
  {
    name: '合江县',
    pinyin: 'hejiang',
  },
  {
    name: '叙永县',
    pinyin: 'xuyong',
  },
  {
    name: '古蔺县',
    pinyin: 'gulin',
  },
])

// 选镇
const choseTownFn = (item) => {
  emit('offAreaList', item);
}

const open = () => {
  choseArea.value = true;
}

const close = () => {
  choseArea.value = false;
}

const show = () => {
  choseArea.value = !choseArea.value;
}

defineExpose({
  open, close, show
})

</script>

<template>
  <transition name="fade">
    <div class="address" v-show="choseArea == true">
      <div
        class="address-li"
        @click="choseTownFn(item)"
        v-for="(item, index) in list"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
  </transition>
</template>

<style lang="scss" scoped>
.address {
  left: 1vw;
  top: 18px;
  position: absolute;
  width: 10vw;
  height: 18vh;
  background-color: #001e32;
  color: #c7dbe3;
  z-index: 9999;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 5px;

  .address-li {
    padding: 2px 5px;
    cursor: pointer;

    border-bottom: 0.1px solid #0e293c;
  }
}

.address::-webkit-scrollbar {
  width: 10px;
  background-color: #153041;
}

.address::-webkit-scrollbar-track {
  background-color: #153041;
}

::-webkit-scrollbar-thumb {
  background-color: #4ab9d0;
  border-radius: 5px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>