180 lines
3.3 KiB
Vue
180 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<view class="uni-table-checkbox" @click="selected">
|
||
|
|
<view v-if="!indeterminate" class="checkbox__inner" :class="{'is-checked':isChecked,'is-disable':isDisabled}">
|
||
|
|
<view class="checkbox__inner-icon"></view>
|
||
|
|
</view>
|
||
|
|
<view v-else class="checkbox__inner checkbox--indeterminate">
|
||
|
|
<view class="checkbox__inner-icon"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'TableCheckbox',
|
||
|
|
emits:['checkboxSelected'],
|
||
|
|
props: {
|
||
|
|
indeterminate: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
checked: {
|
||
|
|
type: [Boolean,String],
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
disabled: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
index: {
|
||
|
|
type: Number,
|
||
|
|
default: -1
|
||
|
|
},
|
||
|
|
cellData: {
|
||
|
|
type: Object,
|
||
|
|
default () {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
checked(newVal){
|
||
|
|
if(typeof this.checked === 'boolean'){
|
||
|
|
this.isChecked = newVal
|
||
|
|
}else{
|
||
|
|
this.isChecked = true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
indeterminate(newVal){
|
||
|
|
this.isIndeterminate = newVal
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
isChecked: false,
|
||
|
|
isDisabled: false,
|
||
|
|
isIndeterminate:false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
if(typeof this.checked === 'boolean'){
|
||
|
|
this.isChecked = this.checked
|
||
|
|
}
|
||
|
|
this.isDisabled = this.disabled
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
selected() {
|
||
|
|
if (this.isDisabled) return
|
||
|
|
this.isIndeterminate = false
|
||
|
|
this.isChecked = !this.isChecked
|
||
|
|
this.$emit('checkboxSelected', {
|
||
|
|
checked: this.isChecked,
|
||
|
|
data: this.cellData
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
$checked-color: #007aff;
|
||
|
|
$border-color: #DCDFE6;
|
||
|
|
$disable:0.4;
|
||
|
|
|
||
|
|
.uni-table-checkbox {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: row;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
position: relative;
|
||
|
|
margin: 5px 0;
|
||
|
|
cursor: pointer;
|
||
|
|
|
||
|
|
// 多选样式
|
||
|
|
.checkbox__inner {
|
||
|
|
/* #ifndef APP-NVUE */
|
||
|
|
flex-shrink: 0;
|
||
|
|
box-sizing: border-box;
|
||
|
|
/* #endif */
|
||
|
|
position: relative;
|
||
|
|
width: 16px;
|
||
|
|
height: 16px;
|
||
|
|
border: 1px solid $border-color;
|
||
|
|
border-radius: 2px;
|
||
|
|
background-color: #fff;
|
||
|
|
z-index: 1;
|
||
|
|
|
||
|
|
.checkbox__inner-icon {
|
||
|
|
position: absolute;
|
||
|
|
/* #ifdef APP-NVUE */
|
||
|
|
top: 2px;
|
||
|
|
/* #endif */
|
||
|
|
/* #ifndef APP-NVUE */
|
||
|
|
top: 2px;
|
||
|
|
/* #endif */
|
||
|
|
left: 5px;
|
||
|
|
height: 7px;
|
||
|
|
width: 3px;
|
||
|
|
border: 1px solid #fff;
|
||
|
|
border-left: 0;
|
||
|
|
border-top: 0;
|
||
|
|
opacity: 0;
|
||
|
|
transform-origin: center;
|
||
|
|
transform: rotate(45deg);
|
||
|
|
box-sizing: content-box;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.checkbox--indeterminate {
|
||
|
|
border-color: $checked-color;
|
||
|
|
background-color: $checked-color;
|
||
|
|
|
||
|
|
.checkbox__inner-icon {
|
||
|
|
position: absolute;
|
||
|
|
opacity: 1;
|
||
|
|
transform: rotate(0deg);
|
||
|
|
height: 2px;
|
||
|
|
top: 0;
|
||
|
|
bottom: 0;
|
||
|
|
margin: auto;
|
||
|
|
left: 0px;
|
||
|
|
right: 0px;
|
||
|
|
bottom: 0;
|
||
|
|
width: auto;
|
||
|
|
border: none;
|
||
|
|
border-radius: 2px;
|
||
|
|
transform: scale(0.5);
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
&:hover{
|
||
|
|
border-color: $checked-color;
|
||
|
|
}
|
||
|
|
// 禁用
|
||
|
|
&.is-disable {
|
||
|
|
/* #ifdef H5 */
|
||
|
|
cursor: not-allowed;
|
||
|
|
/* #endif */
|
||
|
|
background-color: #F2F6FC;
|
||
|
|
border-color: $border-color;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 选中
|
||
|
|
&.is-checked {
|
||
|
|
border-color: $checked-color;
|
||
|
|
background-color: $checked-color;
|
||
|
|
|
||
|
|
.checkbox__inner-icon {
|
||
|
|
opacity: 1;
|
||
|
|
transform: rotate(45deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
// 选中禁用
|
||
|
|
&.is-disable {
|
||
|
|
opacity: $disable;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|