Vue -- Popover 简单实践 & 如何通过点击按钮关闭 Popover 弹出框

<template>
  <div class="first-app">
    <el-popover
      ref="mergePopover"
      placement="bottom-start"
      width="300"
      trigger="click">
      <div style="text-align:center;margin-top:15px;height:10px;">
        <el-radio v-model="isMerge" label="0">逐条派单</el-radio>
        <el-radio v-model="isMerge" label="1">合并派单</el-radio>
      </div>
      <div style="text-align:center;margin-top:25px;margin-bottom:10px;height:20px;" >
        <el-button type="primary" size="mini">确认</el-button>
        <el-button @click="closePopover" type="primary" size="mini">取消</el-button>
      </div>
      <el-button slot="reference" style="float:right;" type="primary" size="mini">处理</el-button>
    </el-popover>
  </div>
</template>

<script>
  export default {
    name: "First",
    data(){
      return {
        // 默认逐条派单
        isMerge: "0"
      }
    },
    methods:{
      closePopover: function () {
        this.$refs.mergePopover.doClose();
      },
    },
    mounted() {
    },
  }
</script>

<style scoped>

</style>

注1：placement=“bottom-start” 表示弹出框从按钮的下左弹出

注2： trigger=“click” 表示点击触发弹出框

标签：Vue,--,弹出,派单,点击,逐条,按钮,Popover
来源： https://blog.csdn.net/weixin_38645718/article/details/121717425