WebApp【公共组件库】@前端(For Git Submodule)
Tevin
2021-07-09 d270af0a5ae30d20da42fccb0b33dd023bec3eac
forms/select/CSelect.vue
@@ -18,6 +18,7 @@
                :name="itemRes.name"
                :title="itemRes.label"
                :required="itemRes.required"
                :disabled="itemRes.disabled"
                :error="itemRes.error"
                :placeholder="placeholder"
                :value="selected"
@@ -25,15 +26,18 @@
                <view class="at-icon at-icon-chevron-right" />
            </AtInput>
        </picker>
        <view v-else-if="selectByPage.length > 5">
        <view
            v-else-if="selectByPage.length > 5"
            @tap="evt => onGoToSelectorPage()"
        >
            <AtInput
                :name="itemRes.name"
                :title="itemRes.label"
                :required="itemRes.required"
                :disabled="itemRes.disabled"
                :error="itemRes.error"
                :placeholder="placeholder"
                :value="selected"
                :onFocus="evt=>onGoToSelectorPage()"
                :value="choose.name"
            >
                <view class="at-icon at-icon-chevron-right" />
            </AtInput>
@@ -44,6 +48,7 @@
<script>
import Taro from '@tarojs/taro';
import { AtInput } from 'taro-ui-vue';
import { $pagePoster } from '@components/common/PagePoster';
import './cSelect.scss';
export default {
@@ -52,14 +57,24 @@
        AtInput,
    },
    props: {
        options: Array,
        placeholder: String,
        // 表单数据资源(表单组件内部机制专用)
        itemRes: Object,
        // 选择菜单选项(浮窗模式)
        options: Array,
        // 占位提示
        placeholder: String,
        // 开启选择菜单跳转选择页面模式,并指定功能页面
        selectByPage: String,
        // 页面模式下,选择完成后的回调
        onSelectFromPage: Function,
    },
    data() {
        return {};
        return {
            choose: {
                name: '',
                value: null,
            },
        };
    },
    computed: {
        optionKey() {
@@ -90,16 +105,28 @@
            this.itemRes.onChange(item[this.optionKey]);
        },
        onGoToSelectorPage() {
            Taro.navigateTo({
                url: this.selectByPage,
                events: {
                    'CSelect:onSelected': data => {
                        this.onSelectFromPage(data);
                    },
                },
            let url = this.selectByPage;
            if (this.selectByPage.indexOf('?') > 0) {
                url += '&mode=CSelect';
            } else {
                url += '?mode=CSelect';
            }
            if (this._eventor) {
                // 销毁上次事件收发器
                this._eventor.destroy();
            }
            this._eventor = $pagePoster.createEventor();
            this._eventor.on('@linked', () => {
                this._eventor.emit('lastValue', this.choose.value);
            });
            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);
            });
            Taro.navigateTo({ url: url + '&eventorId=' + this._eventor.id });
        },
    },
    mounted() {},
};
</script>