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

最新推荐文章于 2025-06-03 17:06:43 发布

新时代农民工Top

最新推荐文章于 2025-06-03 17:06:43 发布

阅读量993

点赞数 1

CC 4.0 BY-SA版权

文章标签： css html javascript

本文链接：https://blog.csdn.net/web00_11/article/details/129862768

该文章展示了一个使用Vue.js编写的自定义单选框组件，用于人员权限分配。组件包含可写和可读两个选项，不选择时默认为none权限。组件使用了Flex布局和自定义样式，点击按钮会触发权限更改并发射事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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>

效果图
在这里插入图片描述