用vue编写一个添加的按钮。点击添加后弹框弹出 弹框显示的可编辑的 弹框字段有电台名称 电台ip 端口号

好的，可以参考以下代码实现：

<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` 的值来控制弹框的显示与隐藏，同时在关闭弹框时将输入框的值重置为空。