Vue中封装组件-单选按钮组-LjRadioGroup

效果图：

使用：

<template>
  <div>
    <LjRadioGroup
      :showCancelBtn="true"
      currentItemName="a"
      :items="items"
      @handleClickItem="clickItem"
      @handleClickCancel="clickCancel"
    ></LjRadioGroup>
  </div>
</template>

<script>
import LjRadioGroup from "@/components/LjRadioGroup/index.vue";

export default {
  name: "",
  components: {LjRadioGroup },
  props: {},
  data() {
    return {
 //title和name属性必传。title为显示标题，name为唯一标识
      items: [
        { title: "A", name: "a" },
        { title: "B", name: "b" },
        { title: "C", name: "c" },
      ],
    };
  },
  computed: {},
  created() {},
  mounted() {},
  filters: {},
  methods: {
    clickItem(item) {
      console.log("item:", item);
    },
    clickCancel() {
      console.log("点击取消按钮");
    },
  },
  watch: {},
};
</script>

 LjRadioGroup.vue:

<!--LjRadioGroup-->
<template>
  <div class="LjRadioGroup">
    <span
      v-for="(item, index) in items"
      :key="index"
      :class="{ active: prop_currentItemName === item.name }"
      @click="clickItem(item)"
    >
      {{ item.title }}
    </span>
    <span v-if="showCancelBtn" @click="clickCancel()">取消</span>
  </div>
</template>

<script>
export default {
  name: "LjRadioGroup",
  components: {},
  props: {
    showCancelBtn: {
      type: Boolean,
      default: false,
    },
    //items数组中的name属性值。
    currentItemName: {
      type: String,
      default: "",
    },
    //title和name属性必传。title为显示标题，name为唯一标识
    items: {
      type: Array,
      default: () => [
        { title: "菜单1", name: "menu1" },
        { title: "菜单2", name: "menu2" },
        { title: "菜单3", name: "menu3" },
      ],
      required: true,
    },
  },
  data() {
    return {
      prop_currentItemName: this.currentItemName,
    };
  },
  computed: {},
  created() {},
  mounted() {},
  filters: {},
  methods: {
    clickItem(item) {
      this.prop_currentItemName = item.name;
      this.$emit("handleClickItem", item);
    },
    clickCancel() {
      this.prop_currentItemName = "";
      this.$emit("handleClickCancel");
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
$color-primary: #1dcbf3;
.LjRadioGroup {
  font-size: 15px;
  color: white;
  .active {
    color: $color-primary;
  }
  span {
    padding: 5px 10px;
    border: 1px solid $color-primary;
    &:hover {
      color: $color-primary;
      cursor: pointer;
    }
  }
}
</style>