| | |
| | | <template> |
| | | <view class="c-select"> |
| | | <picker |
| | | v-if="!selectByPage" |
| | | mode="selector" |
| | | :range="options" |
| | | :value="current" |
| | |
| | | <view class="at-icon at-icon-chevron-right" /> |
| | | </AtInput> |
| | | </picker> |
| | | <view v-else-if="selectByPage.length > 5"> |
| | | <AtInput |
| | | :name="itemRes.name" |
| | | :title="itemRes.label" |
| | | :required="itemRes.required" |
| | | :error="itemRes.error" |
| | | :placeholder="placeholder" |
| | | :value="chose.name" |
| | | :onFocus="evt=>onGoToSelectorPage()" |
| | | > |
| | | <view class="at-icon at-icon-chevron-right" /> |
| | | </AtInput> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | import Taro from '@tarojs/taro'; |
| | | import { AtInput } from 'taro-ui-vue'; |
| | | import './cSelect.scss'; |
| | | |
| | |
| | | AtInput, |
| | | }, |
| | | props: { |
| | | options: Array, |
| | | placeholder: String, |
| | | // 表单数据资源(表单组件内部机制专用) |
| | | itemRes: Object, |
| | | // 选择菜单选项(浮窗模式) |
| | | options: Array, |
| | | // 占位提示 |
| | | placeholder: String, |
| | | // 开启选择菜单跳转选择页面模式,并指定功能页面 |
| | | selectByPage: String, |
| | | // 页面模式下,选择完成后的回调 |
| | | onSelectFromPage: Function, |
| | | }, |
| | | data() { |
| | | return {}; |
| | | return { |
| | | chose: {}, |
| | | }; |
| | | }, |
| | | computed: { |
| | | optionKey() { |
| | |
| | | const item = this.options[evt.value]; |
| | | this.itemRes.onChange(item[this.optionKey]); |
| | | }, |
| | | onGoToSelectorPage() { |
| | | let url = this.selectByPage; |
| | | if (this.selectByPage.indexOf('?') > 0) { |
| | | url += '&mode=CSelect'; |
| | | } else { |
| | | url += '?mode=CSelect'; |
| | | } |
| | | Taro.navigateTo({ |
| | | url, |
| | | events: { |
| | | 'CSelect:onSelected': data => { |
| | | const value = data.id || data.value || data.key; |
| | | this.chose = { |
| | | name: data.name, |
| | | value, |
| | | }; |
| | | this.itemRes.onChange(value); |
| | | this.onSelectFromPage(data); |
| | | }, |
| | | }, |
| | | }); |
| | | }, |
| | | }, |
| | | mounted() {}, |
| | | }; |