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

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

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

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

效果图