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