vue3 数据大屏 项目开发中，会需要一些单选的效果，图表使用自定义图片，这里将实现效果记录下来方便复用。

使用实例

<template>
  <div class="tabs">
    <item v-model:active="active" :list="list"></item>
  </div>
</template>

<script>
import item from "./item.vue";

export default {
  components: {item},
  data() {
    return {
      active: 0,
      list: [{
        title: '增压泵工艺'
      }, {
        title: '溶气泵工艺'
      }],
    }
  },
  watch: {},
  mounted() {

  },
  methods: {
    getActive(e) {
      this.$emit('update:active', e)
    }
  },
}
</script>
<style lang="scss">
.tabs {
  width: 100%;
  position: relative;
  height: 100%;
}
</style>

组件代码

<template>
  <div class="selectedList">
    <div class="selectedListItem" @click="getActive(index)" v-for="(item,index) in list" :key="index">
      <img v-if="active==index" src="./assets/icon_seleted.png" alt="">
      <img v-else src="./assets/icon_selete.png" alt="">
      <span>{{ item.title }}</span>
    </div>
  </div>
</template>

<script>

export default {
  components: {},
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    active: {
      type: Number,
      default() {
        return 0;
      }
    }
  },
  data() {
    return {}
  },
  watch: {},
  mounted() {

  },
  methods: {
    getActive(e) {
      this.$emit('update:active', e)
    }
  },
}
</script>
<style lang="scss">
.selectedList {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;

  .selectedListItem {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    cursor: pointer;

    img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }

    span {
      font-size: 18px;
      font-family: Alibaba;
      font-weight: normal;
      color: #FFFFFF;
      margin-right: 30px;
    }
  }
}
</style>