Vue2 -- 自定义单选内容的单选框组件

自定义单选内容的单选框组件

之前做的一个项目，在项目中有一个关于人员权限分配的功能，给人员指定各个模块的权限信息，分为

• write 可写权限
• read 可读权限
• none 没有权限

项目要求画面中只显示 W R 两个按钮控制指定权限信息，都不选择的时候权限为 none

<template>
  <div class="checkboxs">
    <label v-for="(dataItem, i) in dataList" :key="i">
      <input
        :id="permissionPhase.slice(0, 1).toUpperCase() + permissionPhase.slice(1) + '_' + dataItem.value.toLowerCase()"
        type="button"
        name="permissionCheckbox"
        class="checkbox"
        :class="permissionPhaseState ? (dataItem.isSelect ? (isDisabled ? dataItem.classname + ' not-checked' : dataItem.classname) : '') : 'not-select'"
        :disabled="isDisabled"
        :value="dataItem.value"
        @click="handleSetPermission(dataItem)"
      />
    label>
  div>
template>



<script>
export default {
  name: 'PermissionCheckbox',
  props: {
    isDisabled: {
      type: Boolean,
      default: false
    },
    permissionItem: {
      type: Array,
      default: () => []
    },
    permissionPhase: {
      type: String,
      default: ''
    },
    permissionPhaseState: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataList: [
        { permissionName: 'write', isSelect: false, value: 'W', classname: 'focus_W' },
        { permissionName: 'read', isSelect: false, value: 'R', classname: 'focus_R' },
      ],
    }
  },
  mounted() {
    this.dataList.forEach(item => {
      if(item.permissionName === this.permissionItem[0]) {
        item.isSelect = true
      } else {
        item.isSelect = false
      }
    })
  },
  watch: {
    permissionItem(newVal) {
      this.dataList.forEach(item => {
        if(item.permissionName === newVal[0]) {
          item.isSelect = true
        } else {
          item.isSelect = false
        }
      })
    }
  },
  computed: {
    permission() {
      if(this.dataList[0].isSelect) {
        return this.dataList[0].permissionName
      } else if(this.dataList[1].isSelect) {
        return this.dataList[1].permissionName
      } else {
        return 'none'
      }
    }
  },
  methods: {
    handleSetPermission(dataItem) {
      this.dataList.forEach(item => {
        if(item.permissionName === dataItem.permissionName) {
          item.isSelect = !item.isSelect
        } else {
          item.isSelect = false
        }
      })
      if(this.permission !== '') {
        this.$emit('click-button-permission', this.permission)
      }
    }
  }
}
script>



<style scoped>
.checkboxs {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  height: 28px;
}

.checkbox {
  cursor: pointer;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  line-height: 20px;
  outline: none;
  border: 0;
  border-radius: 4px;
  background-color: #cad6e8;
  text-align: center;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.focus_W {
  font-weight: 700;
  box-sizing: border-box;
  background-color: #ed7a06;
  border: 0;
  color: white;
  box-shadow: 0px 3px 3px rgba(237, 122, 6, .3);
}

.focus_R {
  font-weight: 700;
  box-sizing: border-box;
  background-color: #c0cb22;
  border: 0;
  color: white;
  box-shadow: 0px 3px 3px rgba(178, 188, 49, .3);
}

.not-checked {
  cursor: not-allowed;
  font-weight: 700;
  box-sizing: border-box;
  border: 0;
  color: white;
}

.not-select {
  cursor: not-allowed;
  font-weight: 700;
  box-sizing: border-box;
  border: 0;
  color: white;
}
style>

效果图