shop-app/src/components/commonIndexBar/index.vue

<template>
  <view v-if="modelValue" class="wrap" @click.stop="close">
    <view class="wrap-content" @click.stop>
      <wd-index-bar sticky>
        <view v-for="item in areaDataC" :key="item.index">
          <wd-index-anchor :index="item.index" />
          <wd-cell
            border
            clickable
            v-for="city in item.data"
            :key="city"
            :title="city"
            @click="handleClick(item.index, city)"
          ></wd-cell>
        </view>
      </wd-index-bar>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { defineProps, defineEmits } from 'vue'
  // **定义类型**
  interface AreaItem {
    index: string
    data: string[]
  }
  // **定义 Props**
  const props = defineProps<{
    areaData: AreaItem[]
    modelValue: boolean
  }>()
  // **定义 Emit 事件**
  const emit = defineEmits(['update:modelValue', 'handleClick'])

  // **点击城市**
  const handleClick = (index: string, city: string) => {
    emit('handleClick', { index, city }) // 触发父组件事件
    emit('update:modelValue', false) // 关闭弹窗
  }
  const areaDataC = computed(() => props.areaData)
  // **点击背景关闭弹窗**
  const close = () => {
    emit('update:modelValue', false)
  }
</script>

<style lang="scss" scoped>
  .wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    .wrap-content {
      position: relative;
      top: 176rpx;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom));
      overflow: hidden;
      background: white;
      border-radius: 10px;
    }
  }
</style>