vue2 messagebox 加select

在Vue2中，如果你想在MessageBox组件中添加一个Select选择器，通常会使用自定义的组件或者结合Element UI库提供的`el-messagebox`组件和`el-select`组件。首先，你需要安装Element UI库：

npm install element-ui --save

然后，在你的组件模板中，可以这样做：

<template>
  <el-messagebox
    v-model="show"
    type="info"
    title="标题"
    :message="message"
    @on-ok="handleOk">
    <div slot="footer">
      <!-- 添加一个el-select -->
      <el-select v-model="selectedOption" placeholder="请选择">
        <el-option
          v-for="option in options"
          :key="option.value"
          :label="option.label"
          :value="option.value">
        </el-option>
      </el-select>
      <button type="primary">确定</button>
      <button type="default" @click="cancel">取消</button>
    </div>
  </el-messagebox>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      message: '这是一个带Select的选择框',
      selectedOption: '',
      options: [
        { label: '选项1', value: 'opt1' },
        { label: '选项2', value: 'opt2' },
        // 更多选项...
      ]
    };
  },
  methods: {
    handleOk() {
      console.log('选中的值:', this.selectedOption);
      // 这里处理你的确认操作
      this.show = false;
    },
    cancel() {
      this.show = false;
    }
  }
};
</script>

在这个例子中，当用户点击确定按钮时，`handleOk`方法会被触发，并打印所选的选项值。`v-model`绑定的是`selectedOption`的数据属性，它控制了Select组件的当前选中项。