vue3 气泡卡片手写

使用Vue3手写气泡卡片可以参考以下示例：

<template>
  <div>
    <el-table-column prop="date_time" label="日期" align="center">
      <template slot="header" slot-scope="scope">
        日期
        <el-popover class="item" effect="dark" placement="top" content="开始时间和结束时间不能小于2019-06-13">
          <i class="el-icon-info"></i>
        </el-popover>
      </template>
    </el-table-column>

    <div class="wt-step">
      <div class="horizontal">
        <div class="item-wrapper">
          <div v-for="(item, index) of dataProgress" :key="index" @tap="switchTap(index)">
            <el-popover>
              <template slot="content">
                <p>{{ item.sceneNode }}</p>
              </template>
              <!-- step内容 -->
              <div class="line" v-if="index !== dataProgress.length - 1"></div>
              <div :class="[{ active: item.serviceState }]" v-if="type === 'default'">
                {{ index + 1 }}
              </div>
              <div :class="[ { active: item.serviceState }, { 'icon-check': item.serviceState } ]" v-else></div>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataProgress: [
        // 数据对象，根据需要自定义
      ],
      type: 'default' // 根据实际情况设置类型
    };
  },
  methods: {
    switchTap(index) {
      // 点击事件处理逻辑
    }
  }
};
</script>

上述代码是一个基于Vue3的气泡卡片示例，其中使用了`el-popover`组件来实现气泡效果。在模板中，根据需要放置气泡卡片内容，并在`el-popover`中设置相应的悬浮提示信息。通过使用`v-if`和`v-else`指令可以根据条件动态切换卡片的样式。请根据实际需求进行修改和调整。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [Vue+elementUI table 给表头添加气泡显示](https://blog.csdn.net/sm923/article/details/125567459)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue 手写step 组件结合a-popover一起使用](https://blog.csdn.net/weixin_44242623/article/details/115489502)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]