| | |
| | | <template> |
| | | <view |
| | | class="c-check-box" |
| | | :class="displayType==='dialog'?'c-check-box-dialog':''" |
| | | :class="displayType==='dialog'?'c-check-box-dialog':'c-check-box-plane'" |
| | | > |
| | | <AtInput |
| | | ref="input" |
| | |
| | | v-if="displayType==='dialog'" |
| | | class="at-icon at-icon-chevron-right" |
| | | /> |
| | | <text |
| | | class="empty-text" |
| | | v-if="displayType==='plane' && options.length<=0" |
| | | >{{emptyText}}</text> |
| | | </AtInput> |
| | | <AtCheckbox |
| | | ref="check" |
| | |
| | | }, |
| | | // 占位提示 |
| | | placeholder: String, |
| | | // 空选项的提示 |
| | | emptyText: { |
| | | type: String, |
| | | default: '', |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | max-width: calc(100% - 80px); |
| | | } |
| | | } |
| | | |
| | | } |
| | | .c-check-box-plane { |
| | | .at-input { |
| | | padding: 24px 0; |
| | | .at-input__children { |
| | | padding-right: 20px; |
| | | &::after { |
| | | display: none; |
| | | } |
| | | .empty-text { |
| | | color: #ccc; |
| | | font-size: 34px; |
| | | } |
| | | } |
| | | } |
| | | |
| | | } |
| | |
| | | <view |
| | | v-if="isNeedBackIcon" |
| | | class="c-nav-back-icon" |
| | | @tap="evt => onBack()" |
| | | @tap="evt => handleBack()" |
| | | > |
| | | <AtIcon |
| | | value='chevron-left' |
| | |
| | | ></AtIcon> |
| | | </view> |
| | | </view> |
| | | <view class="c-nav-title"> |
| | | <view :class="[isNeedBackIcon ? 'c-nav-title-back' : 'c-nav-title']"> |
| | | {{ title }} |
| | | </view> |
| | | </view> |
| | |
| | | title: { |
| | | type: String, |
| | | default: '', |
| | | }, |
| | | onBack: { |
| | | type: Function, |
| | | default: () => {}, |
| | | }, |
| | | }, |
| | | computed: {}, |
| | |
| | | this.statusBarHeight = statusBarHeight; |
| | | }, |
| | | |
| | | onBack() { |
| | | Taro.navigateBack({ |
| | | delta: 1, |
| | | }); |
| | | handleBack() { |
| | | this.onBack(); |
| | | // Taro.navigateBack({ |
| | | // delta: 1, |
| | | // }); |
| | | }, |
| | | |
| | | $getStatusBarHeight() { |
| | |
| | | align-items: center; |
| | | width: 100%; |
| | | height: 100%; |
| | | padding-left: 20px; |
| | | padding-left: 16px; |
| | | box-sizing: border-box; |
| | | } |
| | | .c-nav-back-icon { |
| | |
| | | align-items: center; |
| | | width: 100%; |
| | | height: 100%; |
| | | padding-left: 20px; |
| | | padding-left: 4px; |
| | | box-sizing: border-box; |
| | | } |
| | | } |
| | | .c-nav-title-back { |
| | | font-size: 34px; |
| | | color: #000; |
| | | font-weight: 500; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | } |
| | | .c-nav-title { |
| | | display: flex; |
| | | align-items: center; |