123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344 |
- <template>
- <view
- class="u-checkbox"
- :style="[checkboxStyle]"
- @tap.stop="wrapperClickHandler"
- :class="[`u-checkbox-label--${parentData.iconPlacement}`, parentData.borderBottom && parentData.placement === 'column' && 'u-border-bottom']"
- >
- <view
- class="u-checkbox__icon-wrap"
- @tap.stop="iconClickHandler"
- :class="iconClasses"
- :style="[iconWrapStyle]"
- >
- <slot name="icon">
- <u-icon
- class="u-checkbox__icon-wrap__icon"
- name="checkbox-mark"
- :size="elIconSize"
- :color="elIconColor"
- />
- </slot>
- </view>
- <text
- @tap.stop="labelClickHandler"
- :style="{
- color: elDisabled ? elInactiveColor : elLabelColor,
- fontSize: elLabelSize,
- lineHeight: elLabelSize
- }"
- >{{label}}</text>
- </view>
- </template>
- <script>
- import props from './props.js';
-
- export default {
- name: "u-checkbox",
- mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
- data() {
- return {
- isChecked: false,
-
-
- parentData: {
- iconSize: 12,
- labelDisabled: null,
- disabled: null,
- shape: 'square',
- activeColor: null,
- inactiveColor: null,
- size: 18,
- value: null,
- iconColor: null,
- placement: 'row',
- borderBottom: false,
- iconPlacement: 'left'
- }
- }
- },
- computed: {
-
- elDisabled() {
- return this.disabled !== '' ? this.disabled : this.parentData.disabled !== null ? this.parentData.disabled : false;
- },
-
- elLabelDisabled() {
- return this.labelDisabled !== '' ? this.labelDisabled : this.parentData.labelDisabled !== null ? this.parentData.labelDisabled :
- false;
- },
-
- elSize() {
- return this.size ? this.size : (this.parentData.size ? this.parentData.size : 21);
- },
-
- elIconSize() {
- return this.iconSize ? this.iconSize : (this.parentData.iconSize ? this.parentData.iconSize : 12);
- },
-
- elActiveColor() {
- return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : '#2979ff');
- },
-
- elInactiveColor() {
- return this.inactiveColor ? this.inactiveColor : (this.parentData.inactiveColor ? this.parentData.inactiveColor :
- '#c8c9cc');
- },
-
- elLabelColor() {
- return this.labelColor ? this.labelColor : (this.parentData.labelColor ? this.parentData.labelColor : '#606266')
- },
-
- elShape() {
- return this.shape ? this.shape : (this.parentData.shape ? this.parentData.shape : 'circle');
- },
-
- elLabelSize() {
- return uni.$u.addUnit(this.labelSize ? this.labelSize : (this.parentData.labelSize ? this.parentData.labelSize :
- '15'))
- },
- elIconColor() {
- const iconColor = this.iconColor ? this.iconColor : (this.parentData.iconColor ? this.parentData.iconColor :
- '#ffffff');
-
- if (this.elDisabled) {
-
- return this.isChecked ? this.elInactiveColor : 'transparent'
- } else {
- return this.isChecked ? iconColor : 'transparent'
- }
- },
- iconClasses() {
- let classes = []
-
- classes.push('u-checkbox__icon-wrap--' + this.elShape)
- if (this.elDisabled) {
- classes.push('u-checkbox__icon-wrap--disabled')
- }
- if (this.isChecked && this.elDisabled) {
- classes.push('u-checkbox__icon-wrap--disabled--checked')
- }
-
-
- classes = classes.join(' ')
-
- return classes
- },
- iconWrapStyle() {
-
- const style = {}
- style.backgroundColor = this.isChecked && !this.elDisabled ? this.elActiveColor : '#ffffff'
- style.borderColor = this.isChecked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor
- style.width = uni.$u.addUnit(this.elSize)
- style.height = uni.$u.addUnit(this.elSize)
-
- if (this.parentData.iconPlacement === 'right') {
- style.marginRight = 0
- }
- return style
- },
- checkboxStyle() {
- const style = {}
- if (this.parentData.borderBottom && this.parentData.placement === 'row') {
- uni.$u.error('检测到您将borderBottom设置为true,需要同时将u-checkbox-group的placement设置为column才有效')
- }
-
- if (this.parentData.borderBottom && this.parentData.placement === 'column') {
- style.paddingBottom = '8px'
- }
- return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle))
- }
- },
- mounted() {
- this.init()
- },
- methods: {
- init() {
-
- this.updateParentData()
- if (!this.parent) {
- uni.$u.error('u-checkbox必须搭配u-checkbox-group组件使用')
- }
-
- if (this.checked) {
- this.isChecked = true
- } else if (uni.$u.test.array(this.parentData.value)) {
-
- this.isChecked = this.parentData.value.some(item => {
- return item === this.name
- })
- }
- },
- updateParentData() {
- this.getParentData('u-checkbox-group')
- },
-
- wrapperClickHandler(e) {
- this.parentData.iconPlacement === 'right' && this.iconClickHandler(e)
- },
-
- iconClickHandler(e) {
- this.preventEvent(e)
-
- if (!this.elDisabled) {
- this.setRadioCheckedStatus()
- }
- },
-
- labelClickHandler(e) {
- this.preventEvent(e)
-
- if (!this.elLabelDisabled && !this.elDisabled) {
- this.setRadioCheckedStatus()
- }
- },
- emitEvent() {
- this.$emit('change', this.isChecked)
-
- this.$nextTick(() => {
- uni.$u.formValidate(this, 'change')
- })
- },
-
-
-
- setRadioCheckedStatus() {
-
- this.isChecked = !this.isChecked
- this.emitEvent()
- typeof this.parent.unCheckedOther === 'function' && this.parent.unCheckedOther(this)
- }
- },
- watch:{
- checked(){
- this.isChecked = this.checked
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- $u-checkbox-icon-wrap-margin-right:6px !default;
- $u-checkbox-icon-wrap-font-size:6px !default;
- $u-checkbox-icon-wrap-border-width:1px !default;
- $u-checkbox-icon-wrap-border-color:#c8c9cc !default;
- $u-checkbox-icon-wrap-icon-line-height:0 !default;
- $u-checkbox-icon-wrap-circle-border-radius:100% !default;
- $u-checkbox-icon-wrap-square-border-radius:3px !default;
- $u-checkbox-icon-wrap-checked-color:#fff !default;
- $u-checkbox-icon-wrap-checked-background-color:red !default;
- $u-checkbox-icon-wrap-checked-border-color:#2979ff !default;
- $u-checkbox-icon-wrap-disabled-background-color:#ebedf0 !default;
- $u-checkbox-icon-wrap-disabled-checked-color:#c8c9cc !default;
- $u-checkbox-label-margin-left:5px !default;
- $u-checkbox-label-margin-right:12px !default;
- $u-checkbox-label-color:$u-content-color !default;
- $u-checkbox-label-font-size:15px !default;
- $u-checkbox-label-disabled-color:#c8c9cc !default;
- .u-checkbox {
- /* #ifndef APP-NVUE */
- @include flex(row);
- /* #endif */
- overflow: hidden;
- flex-direction: row;
- align-items: center;
- &-label--left {
- flex-direction: row
- }
- &-label--right {
- flex-direction: row-reverse;
- justify-content: space-between
- }
- &__icon-wrap {
- /* #ifndef APP-NVUE */
- box-sizing: border-box;
- // nvue下,border-color过渡有问题
- transition-property: border-color, background-color, color;
- transition-duration: 0.2s;
- /* #endif */
- color: $u-content-color;
- @include flex;
- align-items: center;
- justify-content: center;
- color: transparent;
- text-align: center;
- margin-right: $u-checkbox-icon-wrap-margin-right;
- font-size: $u-checkbox-icon-wrap-font-size;
- border-width: $u-checkbox-icon-wrap-border-width;
- border-color: $u-checkbox-icon-wrap-border-color;
- border-style: solid;
- /* #ifdef MP-TOUTIAO */
- // 头条小程序兼容性问题,需要设置行高为0,否则图标偏下
- &__icon {
- line-height: $u-checkbox-icon-wrap-icon-line-height;
- }
- /* #endif */
- &--circle {
- border-radius: $u-checkbox-icon-wrap-circle-border-radius;
- }
- &--square {
- border-radius: $u-checkbox-icon-wrap-square-border-radius;
- }
- &--checked {
- color: $u-checkbox-icon-wrap-checked-color;
- background-color: $u-checkbox-icon-wrap-checked-background-color;
- border-color: $u-checkbox-icon-wrap-checked-border-color;
- }
- &--disabled {
- background-color: $u-checkbox-icon-wrap-disabled-background-color !important;
- }
- &--disabled--checked {
- color: $u-checkbox-icon-wrap-disabled-checked-color !important;
- }
- }
- &__label {
- /* #ifndef APP-NVUE */
- word-wrap: break-word;
- /* #endif */
- margin-left: $u-checkbox-label-margin-left;
- margin-right: $u-checkbox-label-margin-right;
- color: $u-checkbox-label-color;
- font-size: $u-checkbox-label-font-size;
- &--disabled {
- color: $u-checkbox-label-disabled-color;
- }
- }
- }
- </style>
|