实现二次确认 select 框的 option 选项

本期内容朴实无华，但有很多项目会涉及到此功能，为快速开发，直接卸甲

温馨提示：本案例基于 vue2 + element-ui

0帧起手🤓☝️

一：开始卸甲，看效果

选项：

二次确认：

文章无需付费，读者卸完了看源码

<template>
  <div class="myDevice-score">
    <div>
      <div>
        <div style="position: relative">
          <!-- el-popover
            placement             气泡弹出框的位置
            close-on-click-modal  点击弹出框以外的部分执行 确认 / 取消（false为执行取消，true为执行确认）
            v-model               控制弹出层是否显示
          -->
          <el-popover
            placement="bottom"
            close-on-click-modal="false"
            width="342"
            v-model="popoverVisible"
          >
            <p>玛丽碧康酿你确定要卸 {{ this.value }} 的甲吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button @click="cancelSelection">取消</el-button>
              <el-button type="primary" @click="confirmSelection"
                >确定</el-button
              >
            </div>
            <div slot="reference">
              <el-select
                v-model="value"
                @change="handleChange"
                :disabled="this.popoverVisible"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </el-popover>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "", // select框显示的值
      oldValue: "", // 切换之前存储旧址
      popoverVisible: false, // 弹出层的状态
      selectTimeFlag: false, // 用来标记弹窗关闭时判断点击的是否是“确定”按钮
      options: [
        {
          value: "金陵副将马国成",
          label: "金陵副将马国成",
        },
        {
          value: "原顺天府尹隆科多",
          label: "原顺天府尹隆科多",
        },
        {
          value: "年秋月",
          label: "年秋月",
        },
      ],
    };
  },
  watch: {
    // 监听弹出层状态
    popoverVisible(newVal) {
      // 当弹窗关闭 并且 点击的不是“确定”按钮
      if (newVal == false && !this.selectTimeFlag) {
        // 恢复旧值
        this.value = this.oldValue;
      }
    },
  },
  methods: {
    // 确定按钮事件
    confirmSelection() {
      // selectTimeFlag 赋值为 true 标记一下点击的是 确定 按钮
      this.selectTimeFlag = true;
      // 改变旧值
      this.oldValue = this.value;
      // 关闭弹窗
      this.popoverVisible = false;
    },
    // 取消按钮事件
    cancelSelection() {
      // 恢复为旧值
      this.value = this.oldValue;
      // 关闭弹窗
      this.popoverVisible = false;
    },
    // 改变卸甲人员
    handleChange(value) {
      // 赋值
      this.value = value;
      // 打开弹窗
      this.popoverVisible = true;
    },
  },
};
</script>

<style lang="less" scoped>
.myDevice-score {
  width: 500px;
  height: 500px;
  margin: 100px;
}
</style>

注：请尊重原创，版权所有，侵权必究。