用vue编写一个添加的按钮。点击添加后弹框弹出 弹框显示的可编辑的 弹框字段有电台名称 电台ip 端口号
时间: 2024-02-21 15:00:44 浏览: 73
详解用vue编写弹出框组件
好的,可以参考以下代码实现:
```vue
<template>
<div>
<button @click="addRadio">添加</button>
<div v-if="showDialog">
<input v-model="radioName" placeholder="电台名称" />
<input v-model="radioIp" placeholder="电台IP" />
<input v-model="radioPort" placeholder="端口号" />
<button @click="saveRadio">保存</button>
<button @click="closeDialog">取消</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
showDialog: false,
radioName: '',
radioIp: '',
radioPort: '',
};
},
methods: {
addRadio() {
this.showDialog = true;
},
saveRadio() {
// 保存电台信息的逻辑
console.log(this.radioName, this.radioIp, this.radioPort);
this.closeDialog();
},
closeDialog() {
this.showDialog = false;
this.radioName = '';
this.radioIp = '';
this.radioPort = '';
},
},
};
</script>
```
首先,我们定义了一个按钮,点击按钮后会触发 `addRadio` 方法,该方法会将 `showDialog` 设置为 `true`,从而显示弹框。
弹框中包含三个输入框,分别绑定了 `radioName`、`radioIp` 和 `radioPort` 这三个变量。同时,弹框中有一个保存按钮和一个取消按钮,点击保存按钮会触发 `saveRadio` 方法,该方法会保存输入框中的值,并调用 `closeDialog` 方法关闭弹框。
最后,我们使用 `v-if` 指令根据 `showDialog` 的值来控制弹框的显示与隐藏,同时在关闭弹框时将输入框的值重置为空。
阅读全文