Avue中对<avue-crud>新增弹出表单后表单内选择指定输入框点击后触发点击事件 请给个示例
时间: 2024-03-03 17:47:59 浏览: 85
Vue触发input选取文件点击事件操作
好的,以下是一个使用 Avue 实现的示例:
```html
<template>
<avue-crud ref="crud" :columns="columns" :options="options" @add="handleAdd"></avue-crud>
</template>
<script>
export default {
data() {
return {
columns: [
{ label: '姓名', prop: 'name', type: 'input' },
{ label: '年龄', prop: 'age', type: 'input' }
],
options: {
formOptions: {
labelWidth: '80px'
}
}
}
},
methods: {
handleAdd() {
this.$nextTick(() => {
const form = this.$refs.crud.$refs.form
const nameInput = form.$el.querySelector('[name=name]')
const ageInput = form.$el.querySelector('[name=age]')
nameInput.addEventListener('click', () => {
console.log('点击了姓名输入框')
})
ageInput.addEventListener('click', () => {
console.log('点击了年龄输入框')
})
})
}
}
}
</script>
```
在上面的示例中,当用户在弹出的表单中点击姓名或年龄输入框时,都会触发相应的点击事件,该事件会在控制台中打印一条消息。你可以根据实际需求修改点击事件的代码,来实现你自己的功能。
阅读全文