文档待完善

基本使用

<template>
    <yb-keybuttons-popover
        :fields="fields"
        @inputChar="inputChar"
        @clearChar="clearChar"
        @clearCharAll="clearCharAll"
        width="500"
    >
        <el-input
            :value="valueText"
            readonly
            placeholder="请点击输入框打开按键面板"
        />
    </yb-keybuttons-popover>
</template>
<script>
    export default {
        data() {
            return {
                fields: [
                    {
                        label: '单价',
                        prop: '单价',
                    },
                    {
                        label: '数量',
                        prop: '数量',
                    },
                    {
                        label: '利润',
                        prop: '利润',
                    },
                ],
                valueText: '',
            };
        },
        methods: {
            setValue(value) {
                this.stacks = value;
                this.valueText = this.getValueText();
            },
            getValueText() {
                const stacks = this.stacks || [];
                return stacks.join(' ');
            },
            inputChar(e) {
                const char = e.currentTarget.dataset.char;
                const stacks = this.stacks || [];
                stacks.push(char);
                this.setValue(stacks);
            },
            clearChar(e) {
                const stacks = this.stacks || [];
                stacks.pop();
                this.setValue(stacks);
            },
            clearCharAll(e) {
                this.setValue([]);
            },
        },
    };
</script>

显示 复制 复制

插槽使用

<template>
    <yb-keybuttons-popover
        @inputChar="inputChar"
        @clearChar="clearChar"
        @clearCharAll="clearCharAll"
        width="500"
    >
        <el-input
            :value="valueText"
            readonly
            placeholder="请点击输入框打开按键面板"
        />
        <el-button slot="buttonAppended" size="mini">提交</el-button>
    </yb-keybuttons-popover>
</template>
<script>
    export default {
        data() {
            return {
                valueText: '',
            };
        },
        methods: {
            setValue(value) {
                this.stacks = value;
                this.valueText = this.getValueText();
            },
            getValueText() {
                const stacks = this.stacks || [];
                return stacks.join(' ');
            },
            inputChar(e) {
                const char = e.currentTarget.dataset.char;
                const stacks = this.stacks || [];
                stacks.push(char);
                this.setValue(stacks);
            },
            clearChar(e) {
                const stacks = this.stacks || [];
                stacks.pop();
                this.setValue(stacks);
            },
            clearCharAll(e) {
                this.setValue([]);
            },
        },
    };
</script>

显示 复制 复制

Props

参数	说明	类型	可选值	默认值
fields	设置额外字段	array	--	[]
fields[].label	字段显示中文名称	string	--	--
fields[].prop	字段名	string	--	--
fields[].rowKey	rowKey	string	--	--
fields[].children	字段子集	array	--	--
currentFieldsRowKey	设置当前字段的 rowKey	string	--	--
showConditionKeys	是否显示关系运算符	boolean	--	true
showOperatorKeys	是否显示算术运算符	boolean	--	true
width	软键盘宽度	string | number	--	1200

Events

参数	说明	回调参数
inputChar	值改变时触发	(e:Event)
clearChar	点击清除时触发	(e:Event)
clearCharAll	点击清空全部时触发	(e:Event)

Scoped Slot

name	说明
default	触发软键盘内容
buttonAppended	清空全部按钮后面插入的内容