背景描述
表單在日常使用中，面對很多特殊的業(yè)務(wù)場景，需要為表單中某些控件單獨設(shè)置一些事件來做自定義操作。為此，我們?yōu)?FormMaking表單設(shè)計器 添加了新的功能，可以快速的對表單中的元素綁定各種事件，使得表單能夠有更好的擴展性。
查看 官方文檔，可以了解到新版本添加了獲取表單項組件的方法 getComponent，接下來我們用簡單的例子來說明下如何為表單動態(tài)添加事件。
表單輸入框加入點擊事件
我們在表單開發(fā)的時候，常會有這樣一種需求，就是點擊文本框后會彈出一個模態(tài)框進行一些操作后將結(jié)果返回到文本框中；這里就需要給文本框添加點擊事件來處理后面的操作。
下面我們實現(xiàn)一個簡單的例子，點擊文本框后，彈出提示框，點擊確定后為文本框賦值。
- 在設(shè)計器中添加一個文本框并修改字段標(biāo)識為
name。
- 點擊生成代碼，復(fù)制到我們的代碼編輯器中并綁定點擊事件。
<template>
<div>
<fm-generate-form
:data="jsonData"
:remote="remoteFuncs"
:value="editData"
:remote-option="dynamicData"
ref="generateForm"
>
</fm-generate-form>
<el-button type="primary" @click="handleSubmit">Submit</el-button>
</div>
</template>
<script>
export default {
data () {
return {
jsonData: {"list":[{"type":"input","icon":"icon-input","options":{"width":"100%","defaultValue":"","required":false,"requiredMessage":"","dataType":"","dataTypeCheck":false,"dataTypeMessage":"","pattern":"","patternCheck":false,"patternMessage":"","placeholder":"","customClass":"","disabled":false,"labelWidth":100,"isLabelWidth":false,"hidden":false,"dataBind":true,"showPassword":false,"remoteFunc":"func_1608119316839","remoteOption":"option_1608119316839"},"name":"單行文本","key":"1608119316839","model":"name","rules":[]}],"config":{"labelWidth":100,"labelPosition":"right","size":"small","customClass":"","ui":"element","layout":"horizontal","labelCol":3,"width":"100%","hideLabel":false,"hideErrorMessage":false}},
editData: {},
remoteFuncs: {
},
dynamicData: {
}
}
},
mounted () {
this.$refs.generateForm.getComponent('fm-name').$el.onclick = () => {
this.$alert('您點擊了我', '提示').then(() => {
this.$refs.generateForm.setData({
name: '123'
})
})
}
},
methods: {
handleSubmit () {
this.$refs.generateForm.getData().then(data => {
// Data verification succeeded
alert(JSON.stringify(data))
}).catch(e => {
// Data verification failed
})
}
}
}
</script>
在表單渲染完成 mounted 方法中，為表單綁定事件，getComponent('fm-name') 方法可以找到表單設(shè)計器中為每個表單項綁定的字段標(biāo)識的組件，以 fm-字段標(biāo)識 的形式，返回值為 VueComponent 對象，我們可以通過其 $el 獲取到原生DOM，就可以為其綁定原生的事件。
效果如下：
表單快速定位到輸入框
有時候我們需要打開表單的時候，默認(rèn)光標(biāo)就在輸入框中，這個時候我們也可以通過 getComponent 方法找到組件并且調(diào)用 focus 方法來實現(xiàn)。
同樣是使用上面設(shè)計的表單，來看下代碼：
this.$refs.generateForm.getComponent('fm-name').focus()
