Vue v-slot(插槽)实现简单的弹窗

最新推荐文章于 2024-05-15 16:34:47 发布

小黑哎呀

最新推荐文章于 2024-05-15 16:34:47 发布

阅读量660

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Thy__father/article/details/127775068

版权

菜鸟生成记(92)

为毕设，学习一下Vue。

v-slot实现弹窗

弹窗效果

（1）MyPopoverEdit.vue

<template>
  <div id="div-max" style="height: 50px;width: 80px;float: left;">
    <!--  名（name）为popover1的插槽  -->
    <slot name="popover1"></slot>
    <!-- 参数控制浮窗是否显示   -->
    <template  v-if="isShowPopover">
      <div id="div-slot">
        <!--  名（name）为popover2的插槽  -->
        <slot name="popover2"></slot>
      </div>
    </template>
  </div>
</template>

<script>

export default {
  name: "MyPopoverEdit",
  //接收MyMainPage组件（父组件）传递的参数
  props:['isShowPopover'],
};
</script>

<style scoped>
#div-max{
  /*background-color: #FF5000;*/
  height: 50px;
  width: 50px;
  margin-left: 2px;
}
#div-slot{
  background-color: #FFFFFF;
  text-align: center;
  line-height: 50px;
  height: 50px;
  width: 130px;
  margin-top: -90px;
  border-radius: 10px;
  border: 1px solid #EBEEF5;
}
</style>

（2）MyMainPage.vue

<template>
  <div id="div-max">
    <!--  isShowPopover的值通过prop传给MyPopoverEdit组件  -->
    <MyPopoverEdit :isShowPopover="isShowPopover">
    <!--
      popover1:MyPopoverEdit组件中一个插槽（slot）的名字（name），下同
      <template v-slot:popover1></template>包裹的内容用来放入插槽popover1中，下同
    -->
      <template v-slot:popover1>
        <el-button size="mini"
                   type="primary"
                   icon="el-icon-edit"
                   @click="showPopper"
        >
        </el-button>
      </template>
      <template v-slot:popover2>
        <el-button size="mini" type="primary" @click="closePopover">取消</el-button>
        <el-button size="mini" type="danger">保存</el-button>
      </template>
    </MyPopoverEdit>
  </div>
</template>

<script>

import MyPopoverEdit from "@/MyPopoverEdit.vue";

export default {
  name: "MyMainPage",
  components: {MyPopoverEdit},
  data(){
    return{
      isShowPopover:false,//浮窗是否显示
    }
  },
  methods:{
    //显示浮窗
    showPopper(){
      //取反，改变浮窗状态
      this.isShowPopover=!this.isShowPopover
    },
    //关闭浮窗
    closePopover(){
      this.isShowPopover=false
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
#div-max{
  background-color: #1b6d85;
  height: 400px;
  width: 400px;
  margin-top: 100px;
  margin-left: 100px;
}
</style>