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

Posted 2023-04-03 新时代农民工Top

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

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

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

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

<!-- 
==============================================================================
html5
==============================================================================
-->

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

<!--
==============================================================================
javascript:Vue.js
==============================================================================
-->

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

<!--
==============================================================================
CSS3
==============================================================================
-->

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

效果图

vue的单选框