自定義單選內(nèi)容的單選框組件

之前做的一個項目，在項目中有一個關(guān)于人員權(quán)限分配的功能，給人員指定各個模塊的權(quán)限信息，分為

• write 可寫權(quán)限
• read 可讀權(quán)限
• none 沒有權(quán)限

項目要求畫面中只顯示 W R 兩個按鈕控制指定權(quán)限信息，都不選擇的時候權(quán)限為 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>

效果圖