表单组件事件
约 121 字小于 1 分钟
2025-02-06
change事件click事件focus事件blur事件enter事件
组件事件
vue2
vue3
目前组件有 5 个事件`change`,`click`,`focus`,`blur`,`enter`
<template>
<tvue-form :option="option"
v-model="form"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
const form = ref({
name: '11'
});
const option = ref({
column: [{
label: '姓名',
prop: 'name',
change: ({ value, column }) => {
ElMessage.success('change事件查看控制台');
console.log('值改变', value, column);
},
click: ({ value, column }) => {
ElMessage.success('click事件查看控制台');
console.log('点击事件', value, column);
},
focus: ({ value, column }) => {
ElMessage.success('focus事件查看控制台');
console.log('获取焦点', value, column);
},
blur: ({ value, column }) => {
ElMessage.success('blur事件查看控制台');
console.log('失去焦点', value, column);
},
enter: ({ value, column }) => {
ElMessage.success('enter事件查看控制台');
console.log('回车事件', value, column);
}
}]
});
</script>组件对象
vue2
vue3
<template>
<tvue-form ref="formRef"
v-model="form"
:option="option"></tvue-form>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
const form = ref({});
const formRef = ref(null)
const option = {
labelWidth: 120,
column: [{
label: '测试框',
prop: 'text',
}]
};
onMounted(() => {
setTimeout(() => {
ElMessage.success('查看控制台');
console.log('text的ref对象')
console.log(formRef.value.getPropRef('text').$refs.temp)
});
});
</script>组件交互
vue2
vue3
可以写判断逻辑,返回对应改变的对象属性
<template>
<tvue-form :option="option"
v-model="form"></tvue-form>
</template>
<script setup>
import { ref } from 'vue';
const form = ref({
text1: 0,
});
const option = ref({
column: [
{
label: "内容1",
prop: "text1",
type: "radio",
control: (val, form) => {
if (val === 0) {
return {
text2: {
display: true,
},
text3: {
label: "内容3",
},
};
} else {
return {
text2: {
display: false,
},
text3: {
label: "有没有发现我变了",
},
};
}
},
dicData: [
{
label: "显示",
value: 0,
},
{
label: "隐藏",
value: 1,
},
],
},
{
label: "内容2",
prop: "text2",
display: true,
control: (val, form) => {
return new Promise((resolve) => {
if (val) {
resolve({
text1: {
label: "改变内容1",
},
});
} else {
resolve({
text1: {
label: "内容1",
},
});
}
});
},
},
{
label: "内容3",
prop: "text3",
},
],
});
</script>