vue之封装checkbox 和 checkboxGroup组件

vue之封装checkbox 和 checkboxGroup组件

Checkbox.vue

<template>
  <label :class="['x_checkbox', { 'is-checked': isChecked }]">
    <!-- isChecked {{ isChecked }} -->
    <span class="x_checkbox_input">
      <span class="x_checkbox_inner"></span>
      <input
        type="checkbox"
        class="x_checkbox_original"
        :name="name"
        v-model="model"
        :value="label"
      />
    </span>
    <span class="x_checkbox_label">
      <slot />
      <!-- 如果 checkbox没有传递内容时候 渲染label -->
      <template v-if="!$slots.default">{{ label }}</template>
    </span>
  </label>
</template>

<script>
export default {
  name: "Checkbox",
  inject: {
    CheckboxGroup: {
      default: "",
    },
  },
  props: {
    label: {
      type: [String, Number, Boolean],
      default: "",
    },
    value: {
      type: Boolean,
      default: false,
    },
    name: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  computed: {
    // 计算 checkbox选中的值 -> 父组件传递儿来的
    model: {
      get() {
        return this.isCheckGroup ? this.CheckboxGroup.value : this.value;
      },
      set(value) {
        // 更改值 需要触发父组件的事件(也就是父组件给当前组件注册的事件)
        this.isCheckGroup
          ? this.CheckboxGroup.$emit("input", value)
          : this.$emit("input", value);
      },
    },
    // 判断是否 使用了组合radio CheckboxGroup包裹
    isCheckGroup() {
      return !!this.CheckboxGroup; // !!this.CheckboxGroup(布尔值)
    },
    isChecked() {
      // 如果是group包裹 判断label是否在model之中
      // 如果是单独使用，直接使用model
      return this.isCheckGroup ? this.model.includes(this.label) : this.model;
    },
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
.x_checkbox {
  color: #606266;
  font-weight: 500;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  outline: none;
  font-size: 14px;
  margin-right: 30px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  .x_checkbox_input {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;
    .x_checkbox_inner {
      border: 1px solid #dcdfe6;
      border-radius: 100%;
      width: 14px;
      height: 14px;
      background: #fff;
      position: relative;
      cursor: pointer;
      display: inline-block;
      box-sizing: border-box;
      &:after {
        width: 4px;
        height: 4px;
        border-radius: 100%;
        background: #fff;
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.15s ease-in;
      }
    }
    .x_checkbox_original {
      opacity: 0;
      outline: none;
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      margin: 0;
    }
  }
  .x_checkbox_label {
    font-size: 14px;
    padding-left: 10px;
  }
}
// checkbox 被选中
.x_checkbox.is-checked {
  .x_checkbox_input {
    .x_checkbox_inner {
      border-color: #409eff;
      background: #409eff;
      &:after {
        transform: translate(-50%, -50%) scale(1);
      }
    }
  }
  .x_checkbox_label {
    color: #409eff;
  }
}
</style>

CheckboxGroup.vue

<template>
  <div>
    <slot />
  </div>
</template>

<script>
export default {
  name: "CheckboxGroup",
  provide() {
    return {
      CheckboxGroup: this,
    };
  },
  props: {
    // CheckboxGroup组件 接受到value值
    // 之后得触发一下 当前input事件 动态改变父组件的value值
    // CheckboxGroup组件 操作radio组件 -> 使用provide 和 inject
    value: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>
<style  lang="scss" scoped>
</style>

使用组件

<template>
  <div class="home">
    checkFlag {{ checkFlag }}
    <x-checkbox v-model="checkFlag">篮球</x-checkbox>
    <br />
    hoppy {{ hoppy }}
    <x-checkbox-group v-model="hoppy">
      <x-checkbox label="游戏"></x-checkbox>
      <x-checkbox label="篮球"></x-checkbox>
      <x-checkbox label="吃饭"></x-checkbox>
    </x-checkbox-group>
  </div>
</template>

<script>
import XCheckbox from "./Test/Checkbox.vue";
import XCheckboxGroup from "./Test/CheckboxGroup.vue";
export default {
  name: "Home",
  components: {
    XCheckbox,
    XCheckboxGroup,
  },
  data() {
    return {
      checkFlag: false,
      hoppy: ["游戏", "篮球", "吃饭"],
    };
  },
  methods: {
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: calc(100% - 34px);
  width: calc(100% - 34px);
  background: #fff;
  padding: 16px;
  border: 1px solid #ccc;
}
</style>