Skip to content

Commit

Permalink
feat: 支持事件注入(规则 field:eventName)
Browse files Browse the repository at this point in the history
  • Loading branch information
@BoBoooooo
BoBoooooo committed Apr 11, 2021
1 parent 042ab51 commit be10ddd
Show file tree
Hide file tree
Showing 3 changed files with 34 additions and 29 deletions.
53 changes: 25 additions & 28 deletions src/component/pro-form/src/ProFormItem.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
:readonly="readOnly || widget.options.readonly"
:disabled="readOnly || widget.options.disabled"
:style="{ width: widget.options.width }"
v-on="_$listeners"
></el-input>
<el-input
v-else
Expand All @@ -59,6 +60,7 @@
:style="{ width: widget.options.width }"
:suffix-icon="widget.options.suffix"
:prefix-icon="widget.options.prefix"
v-on="_$listeners"
>
<span slot="prepend" v-if="widget.options.prepend">
{{ widget.options.prepend }}
Expand Down Expand Up @@ -102,6 +104,7 @@
:placeholder="widget.options.placeholder"
:style="{ width: widget.options.width || '100%' }"
filterable
v-on="_$listeners"
>
<el-option v-for="(item, index) in optionsList" :key="index" :value="item.value" :label="widget.options.showLabel || widget.options.remote ? item.label : item.value">
<span style="float: left">{{ item.label || item.value }}</span>
Expand All @@ -112,6 +115,7 @@
<template v-if="widget.type == 'textarea'">
<el-input
type="textarea"
v-on="_$listeners"
:autosize="{ minRows: 5 }"
v-model="models[widget.model]"
:show-word-limit="widget.options.showWordLimit"
Expand All @@ -125,6 +129,7 @@

<template v-if="widget.type == 'number'">
<el-input-number
v-on="_$listeners"
v-model="models[widget.model]"
:style="{ width: widget.options.width }"
:step="widget.options.step"
Expand All @@ -135,15 +140,15 @@
</template>

<template v-if="widget.type == 'radio'">
<el-radio-group v-model="models[widget.model]" :style="{ width: widget.options.width }" :disabled="readOnly || widget.options.disabled">
<el-radio-group v-on="_$listeners" v-model="models[widget.model]" :style="{ width: widget.options.width }" :disabled="readOnly || widget.options.disabled">
<el-radio :style="{ display: widget.options.inline ? 'inline-block' : 'block' }" :label="item.value" v-for="(item, index) in optionsList" :key="index">
<template v-if="widget.options.showLabel">{{ item.label }}</template>
</el-radio>
</el-radio-group>
</template>

<template v-if="widget.type == 'checkbox'">
<el-checkbox-group v-model="models[widget.model]" :style="{ width: widget.options.width }">
<el-checkbox-group v-on="_$listeners" v-model="models[widget.model]" :style="{ width: widget.options.width }">
<template v-if="!widget.options.buttonStyle">
<el-checkbox
:style="{ display: widget.options.inline ? 'inline-block' : 'block' }"
Expand All @@ -164,6 +169,7 @@

<template v-if="widget.type == 'time'">
<el-time-picker
v-on="_$listeners"
v-model="models[widget.model]"
:is-range="widget.options.isRange"
:placeholder="widget.options.placeholder"
Expand All @@ -182,6 +188,7 @@

<template v-if="widget.type == 'date'">
<el-date-picker
v-on="_$listeners"
v-model="models[widget.model]"
:type="widget.options.type"
:placeholder="widget.options.placeholder"
Expand All @@ -201,19 +208,20 @@
</template>

<template v-if="widget.type == 'rate'">
<el-rate v-model="models[widget.model]" :max="widget.options.max" :disabled="readOnly || widget.options.disabled" :allow-half="widget.options.allowHalf"></el-rate>
<el-rate v-on="_$listeners" v-model="models[widget.model]" :max="widget.options.max" :disabled="readOnly || widget.options.disabled" :allow-half="widget.options.allowHalf"></el-rate>
</template>

<template v-if="widget.type == 'color'">
<el-color-picker v-model="models[widget.model]" :disabled="readOnly || widget.options.disabled" :show-alpha="widget.options.showAlpha"></el-color-picker>
<el-color-picker v-on="_$listeners" v-model="models[widget.model]" :disabled="readOnly || widget.options.disabled" :show-alpha="widget.options.showAlpha"></el-color-picker>
</template>

<template v-if="widget.type == 'switch'">
<el-switch v-model="models[widget.model]" :disabled="readOnly || widget.options.disabled"> </el-switch>
<el-switch v-on="_$listeners" v-model="models[widget.model]" :disabled="readOnly || widget.options.disabled"> </el-switch>
</template>

<template v-if="widget.type == 'slider'">
<el-slider
v-on="_$listeners"
v-model="models[widget.model]"
:min="widget.options.min"
:max="widget.options.max"
Expand All @@ -227,9 +235,8 @@
<template v-if="widget.type == 'cascader'">
<el-cascader
ref="cascader"
v-on="_$listeners"
v-model="models[widget.model]"
@visible-change="elCascaderOnlick"
@expand-change="elCascaderOnlick"
:disabled="readOnly || widget.options.disabled"
:clearable="widget.options.clearable"
:placeholder="widget.options.placeholder"
Expand Down Expand Up @@ -267,6 +274,7 @@
<!-- 官网:https://vue-treeselect.js.org -->
<treeselect
v-model="models[widget.model]"
v-on="_$listeners"
v-if="visible"
:placeholder="widget.options.placeholder"
:maxHeight="+widget.options.maxHeight"
Expand Down Expand Up @@ -636,6 +644,16 @@ export default class ProFormItem extends Vue {
return obj;
}

get _$listeners() {
const _l = {};
Object.keys(this.$listeners).forEach((k) => {
if (k.includes(this.widget.model)) {
_l[k.split(':')[1]] = this.$listeners[k];
}
});
return _l;
}

diGuiTree(tree) {
// 递归便利树结构
tree.forEach((item) => {
Expand All @@ -644,27 +662,6 @@ export default class ProFormItem extends Vue {
});
}

elCascaderOnlick() {
const that = this;
setTimeout(() => {
document.querySelectorAll('.el-cascader-node__label').forEach((el) => {
// eslint-disable-next-line func-names
(el as any).onclick = function () {
if (this.previousElementSibling) {
this.previousElementSibling.click();
}
that.$refs.cascader.dropDownVisible = false;
};
});
document.querySelectorAll('.el-cascader-panel .el-radio').forEach((el) => {
// eslint-disable-next-line func-names
(el as any).onclick = function () {
that.$refs.cascader.dropDownVisible = false;
};
});
}, 100);
}

// 按钮点击
btnOnClick(widget) {
this.$emit('btnOnClick', widget.options.eventName);
Expand Down
5 changes: 5 additions & 0 deletions src/component/pro-form/src/ProLayout.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
:remote="remote"
:formTableConfig="formTableConfig"
:key="citem.key"
v-on="$listeners"
></ProLayout>
<!-- 正常组件通过ProFormItem生成 -->
<ProFormItem
Expand All @@ -34,6 +35,7 @@
:readOnly="readOnly"
@btnOnClick="btnOnClick"
@chartOnClick="chartOnClick"
v-on="$listeners"
:formTableConfig="formTableConfig"
>
</ProFormItem>
Expand Down Expand Up @@ -90,6 +92,7 @@
:widget="citem"
:readOnly="readOnly"
@btnOnClick="btnOnClick"
v-on="$listeners"
@chartOnClick="chartOnClick"
:formTableConfig="formTableConfig"
>
Expand All @@ -109,6 +112,7 @@
@selection-change="getTableSelection"
@chartOnClick="chartOnClick"
@btnOnClick="btnOnClick"
v-on="$listeners"
:formTableConfig="formTableConfig"
></Tabs>
</div>
Expand All @@ -124,6 +128,7 @@
@chartOnClick="chartOnClick"
@btnOnClick="btnOnClick"
v-if="!item.hidden"
v-on="$listeners"
:formTableConfig="formTableConfig"
>
</ProFormItem>
Expand Down
5 changes: 4 additions & 1 deletion src/demo/component/examples/FormDemo.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
</el-row>
<el-row>
<el-col :span="16">
<pro-form :data="jsonData" :remote="remoteFuncs" :value="value" ref="proForm" :entity.sync="entity"> </pro-form>
<pro-form @personname:input="change" @jobno:change="change" :data="jsonData" :remote="remoteFuncs" :value="value" ref="proForm" :entity.sync="entity"> </pro-form>
</el-col>
<el-col :span="8" class="button-container">
<template v-for="(btn, index) in btnList">
Expand Down Expand Up @@ -157,6 +157,9 @@ export default {
this.handleGenerateJson();
},
methods: {
change(data) {
console.log(data);
},
handleGenerateJson() {
this.jsonTemplate1 = JSON.stringify(this.entity, null, 2);
this.jsonTemplate2 = JSON.stringify(this.value, null, 2);
Expand Down

0 comments on commit be10ddd

Please sign in to comment.