帮助框

介绍

SchemaHelpBox是一个帮助框组件

引入

import Vue from 'vue';
import SchemaHelpBox from '@lambo-design-mobile/schema-help-box';

Vue.use(SchemaHelpBox);

代码演示

基础用法

<van-field readonly clickable label="样品分类" :value="value" placeholder="选择样品分类" @click="showPopup">展示帮助框</van-field>
<van-popup
        v-model="show"
        round
        position="bottom"
        style="height: 90%; padding-top: 4px;"
>
    <schema-help-box :rowName="rowName" :rowKey="rowKey" :dataUrl="dataUrl" :formFields="formFields" :fieldList="fieldList" @on-confirm="onConfirm" @on-clear="onClear"></schema-help-box>
</van-popup>

export default {
    data() {
        return {
            value: '',
            show: false,
            dataUrl: '',
            rowName: '',
            rowKey: '',
            fieldList: [],
            formFields: {}
        }
    },
    methods: {
        showPopup() {
            this.show = true;
        },
        onConfirm(rowKeyList, rowNameList, allList) {
            this.value = rowNameList.join(',')
            this.show = false;
        },
        onClear() {
            this.value = ''
        },
    }
}

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |---------|----------|----------|-----|----| | rowName | 业务主键名称字段 | string |-----|----| | rowKey | 业务主键编码字段 | string |-----|----| | dataUrl | 查询服务链接 | string |-----|----|

Events

| 事件名 | 说明 | 回调参数 | |------------|------|------------------------------------| | on-confirm | 点击确定 | (rowKeyList, rowNameList, allList) | | on-clear | 点击取消 | 无 |