You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
179 lines
3.3 KiB
179 lines
3.3 KiB
<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>
|
|
|