编辑表单自定义按钮、按钮倒计时、按钮事件

[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
vue3 代码
const conInit=($vm)=> {
gridRef=$vm
//自定义表单按钮
let countdown = 10;
const btnValue = ref("发送短信");
const option = gridRef.getFormOption("字段");
option.extra = {
render: (h, {}) => {
return (
<div>
<el-button type="primary" link onClick={() =>{gridRef.$message.success('选择数据')}}>
<i class="el-icon-search">选择数据</i>
</el-button>
<el-button type="primary" style="margin-left:0" link
onClick={() => {
//设置倒计时
var timer = setInterval(function () {
if (countdown > 0) {
btnValue.value = countdown + "(秒)";
countdown--;
} else {
btnValue.value = "发送短信";
countdown = 10;
clearInterval(timer);
}
}, 1000);
}}>
<i class="el-icon-message">{btnValue.value}</i>
</el-button>
<el-popover placement="top-start" title="提示" width="200" trigger="hover">
{{
reference: () => {
return (
<i style="color:rgb(6 118 169);font-size:12px;margin-left:5px"
onClick={() => {this.$message.success("提示信息"); }}
class="el-icon-warning-outline"
></i>);
},
default: () => {
return (
<div style="width:300px"> <div style="font-size:12px">触 Popover显示HTML元素</div> </div>
);
}
}}
</el-popover>
</div>
);
},
};
}
vue2 代码
onInit() {
let countdown = 10;
const btnValue = ref("发送短信");
const option = this.getFormOption("字段");
option.extra = {
render: (h, {}) => {
return (
<div>
<el-button type="primary" link onClick={() => { this.$message.success('选择数据')}}>
<i class="el-icon-search">选择数据</i>
</el-button>
<el-button type="primary" style="margin-left:0" link
onClick={() => {
//设置倒计时
var timer = setInterval(function () {
if (countdown > 0) {
btnValue.value = countdown + "(秒)";
countdown--;
} else {
btnValue.value = "发送短信";
countdown = 10;
clearInterval(timer);
}
}, 1000);
}}>
<i class="el-icon-message">{btnValue.value}</i>
</el-button>
<el-popover placement="top-start" title="提示" width="200" trigger="hover">
{{
reference: () => {
return (
<i style="color:rgb(6 118 169);font-size:12px;margin-left:5px"
onClick={() => {this.$message.success("提示信息"); }}
class="el-icon-warning-outline"
></i>
);
},
default: () => {
return (
<div style="width:300px"> <div style="font-size:12px">触发 Popover 显示的 HTML 元素</div> </div>
);
}
}}
</el-popover>
</div>
);
},
};
}