city-gather/src/subPack-charge/components/search.vue

<script lang="ts" setup>
import { ref } from 'vue'
import { StaticUrl } from '@/config'
// 如果需要从外部传入动态文本，可以使用 props
defineProps<{
  initialMapModeText?: string
}>()
// 如果需要从外部传入点击事件处理方法，也可以定义 emit
defineEmits<{
  (e: 'mapModeClick'): void
}>()
// 定义动态文本
const mapModeText = ref('地图模式')
// 定义点击事件处理方法
function onMapModeClick() {
  // 在这里添加点击逻辑
  console.log('地图模式被点击')
  // 示例：切换显示文本
  // mapModeText.value = mapModeText.value === '地图模式' ? '列表模式' : '地图模式'
}
</script>

<template>
  <view class="flex items-center justify-between">
    <view class="search-box flex items-center">
      <view class="mr-16rpx flex items-center">
        <image :src="`${StaticUrl}/location-black.png`" class="h33.8rpx min-w28.97rpx w28.97rpx" />
        <text class="ml-1">
          贵阳
        </text>
      </view>
      <view class="h-36rpx border-2rpx border-#AAAAAA border-solid" />
      <view class="ml-16rpx text-#AAAAAA">
        请输入目的地/电站名
      </view>
    </view>
    <view class="search-box flex items-center gap-20rpx" @click="onMapModeClick">
      <image :src="`${StaticUrl}/charge-map.png`" class="h-40rpx w-40rpx" mode="" />
      <text>
        {{ mapModeText }}
      </text>
    </view>
  </view>
</template>

<style scoped lang="scss">
.search-box{
background: rgba(255, 255, 255, 0.7);
border-radius: 16rpx;
padding: 10rpx 20rpx;
}
</style>