vue3.0点击按钮弹出表单
时间: 2023-08-01 10:07:24 浏览: 1046
好的,下面是一个示例代码来实现vue3.0点击按钮弹出表单:
首先,你需要在你的Vue3.0项目中引入一个模态框组件,比如说Element UI的Dialog组件,然后在你的组件中添加一个按钮和一个模态框,如下所示:
```html
<template>
<div>
<button @click="showForm">点击我弹出表单</button>
<el-dialog :visible.sync="dialogVisible">
<!-- 这里是你的表单内容 -->
</el-dialog>
</div>
</template>
```
然后,在你的组件的`<script>`标签中,你需要创建一个data属性`dialogVisible`来控制模态框的显示和隐藏,以及一个方法`showForm`来控制`dialogVisible`的值:
```javascript
<script>
import { ref } from 'vue'
export default {
setup() {
const dialogVisible = ref(false) // 控制模态框的显示和隐藏
const showForm = () => {
dialogVisible.value = true
}
return {
dialogVisible,
showForm
}
}
}
</script>
```
现在,当你点击按钮时,`showForm`方法会被调用,将`dialogVisible`的值设置为`true`,这会使得模态框显示出来。你可以在模态框中添加你的表单内容。
希望这个示例代码能帮到你!
阅读全文