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

淩亂°似流年 2022-09-03 07:25 306阅读 0赞

效果图：

![20210806111306109.png][]

使用：

<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:

<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>

[20210806111306109.png]: /images/20220829/68aa4a7c20b54cd18ac9c92bee66903f.png