| | |
| | | */ |
| | | |
| | | <template> |
| | | <view class="c-select"> |
| | | <picker |
| | | <view |
| | | class="c-select" |
| | | :class="readOnly ? 'read-only':''" |
| | | > |
| | | <!-- 下拉选择模式 --> |
| | | <view |
| | | v-if="!selectByPage" |
| | | mode="selector" |
| | | :range="options" |
| | | :value="current" |
| | | range-key="name" |
| | | @change="evt=>handleChange(evt.detail)" |
| | | class="c-select-slot-mode" |
| | | > |
| | | <AtInput |
| | | ref="input" |
| | | :name="itemRes.name" |
| | | :title="itemRes.label" |
| | | :required="itemRes.required" |
| | | :disabled="itemRes.disabled" |
| | | :error="itemRes.error" |
| | | :placeholder="placeholder" |
| | | :value="selected" |
| | | <picker |
| | | class="c-select-input" |
| | | mode="selector" |
| | | :range="options" |
| | | :value="current" |
| | | range-key="name" |
| | | @change="evt=>handleChange(evt.detail)" |
| | | > |
| | | <view class="at-icon at-icon-chevron-right" /> |
| | | </AtInput> |
| | | </picker> |
| | | <AtInput |
| | | ref="input" |
| | | :name="itemRes.name" |
| | | :title="itemRes.label" |
| | | :required="itemRes.required" |
| | | :disabled="itemRes.disabled" |
| | | :error="itemRes.error" |
| | | :placeholder="placeholder" |
| | | :value="selected" |
| | | > |
| | | <view |
| | | v-show="!readOnly" |
| | | class="at-icon at-icon-chevron-right" |
| | | /> |
| | | </AtInput> |
| | | </picker> |
| | | <view class="c-select-slot"> |
| | | <slot /> |
| | | </view> |
| | | </view> |
| | | <!-- 跳转页面模式 --> |
| | | <view |
| | | v-else-if="selectByPage.length > 5" |
| | | @tap="evt => onGoToSelectorPage()" |
| | |
| | | :placeholder="placeholder" |
| | | :value="choose.name" |
| | | > |
| | | <view class="at-icon at-icon-chevron-right" /> |
| | | <view |
| | | v-show="!readOnly" |
| | | class="at-icon at-icon-chevron-right" |
| | | /> |
| | | </AtInput> |
| | | </view> |
| | | </view> |
| | |
| | | selectByPage: String, |
| | | // 页面模式下,选择完成后的回调 |
| | | onSelectFromPage: Function, |
| | | // 只读模式 |
| | | readOnly: { |
| | | type: Boolean, |
| | | default: false, |
| | | }, |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | } else { |
| | | url += '?mode=CSelect'; |
| | | } |
| | | const eventor = $pagePoster.createEventor(); |
| | | eventor.on('@linked', () => { |
| | | eventor.emit('lastValue', this.choose.value); |
| | | if (this._eventor) { |
| | | // 销毁上次事件收发器 |
| | | this._eventor.destroy(); |
| | | } |
| | | this._eventor = $pagePoster.createEventor(); |
| | | this._eventor.on('@linked', () => { |
| | | this._eventor.emit('lastValue', this.choose.value); |
| | | }); |
| | | eventor.on('selected', data => { |
| | | this._eventor.on('selected', data => { |
| | | this.choose.name = data.name; |
| | | this.choose.value = data.value; |
| | | this.itemRes.onChange(data.value); |
| | | this.onSelectFromPage && this.onSelectFromPage(data.value); |
| | | eventor.destroy(); |
| | | }); |
| | | Taro.navigateTo({ url: url + '&eventorId=' + eventor.id }); |
| | | Taro.navigateTo({ url: url + '&eventorId=' + this._eventor.id }); |
| | | }, |
| | | }, |
| | | }; |