vue3自定义封装popover组件

最新推荐文章于 2024-05-22 17:26:17 发布
最新推荐文章于 2024-05-22 17:26:17 发布
阅读量2.5k 收藏 4
点赞数 2
分类专栏： vue3 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43656607/article/details/120268752
版权

一、前言

根本没有思路，完全是照搬其他大神的成品。十分汗颜
思路来源

二、代码

/*
*设计思路
*/
<template>
  <div class="relative" ref="popoverref" @focus="getfocus" @blur="losefocus" v-click-away="closepop">
    <!--    冒泡插槽-->
    <div v-if="visible" ref="contentref" class="absolute transform inline-block bg-white border p-2"
         :class="{'-translate-y-full':thisposition==='top','-translate-x-full':thisposition==='left'}">
      <slot name="content"></slot>
<!--      那个三角形-->
      <div ref="sanjiaoxingref" class="absolute transform block bg-white border-t border-l w-2 h-2" :class="{'-top-1 left-2 rotate-45':thisposition==='bottom','-bottom-1 left-2 -rotate-135':thisposition==='top','top-2 -right-1 rotate-135':thisposition==='left','-left-1 top-2 -rotate-45':thisposition==='right'}"></div>
    </div>
    <!--    默认插槽-->
    <span class="inline-block" ref="triggerref" @click.stop="thisonClick()">
      <slot></slot>
    </span>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, onMounted, onUnmounted, nextTick} from "vue";

export default defineComponent({
  name: "popover",
  props: {
    // 触发方式
    trigger: {
      type: String,
      default: "click",
      // hold的意思是按住鼠标左键不放
      validator(value) {
        return ["hover", "click", "focus", "hold"].indexOf(value.indexOf) > 0
      }
    },
    // 定位位置
    position: {
      type: String,
      default: "bottom",
      validator(value) {
        return ["top", "left", "bottom", "right"].indexOf(value) > 0
      },
    },
  },
  setup(prop, context) {
    // 三个ref
    const popoverref = ref(null)
    const contentref = ref(null)
    const triggerref = ref(null)
    // 增加一个三角形的ref
    const sanjiaoxingref = ref(null)
    // 是否显示冒泡卡片
    const visible = ref(false)
    // 定位
    const thisposition = ref(prop.position)

    // 最重要的函数，为pop进行定位
    const positionContent = () => {
      document.body.appendChild(contentref.value)
      const {width, height, top, left} = triggerref.value.getBoundingClientRect()
      let dingwei = {
        top: {
          top: top + window.scrollY - 5,
          left: left + window.scrollX
        },
        bottom: {
          top: top + height + window.scrollY + 5,
          left: left + window.scrollX
        },
        left: {
          top: top + window.scrollY,
          left: left + window.scrollX - 5
        },
        right: {
          top: top + window.scrollY,
          left: left + width + window.scrollX + 5
        },
      }
      // contentref.value.style.transform = `translate(${dingwei[prop.position].left}px, ${dingwei[prop.position].top}px)`
      contentref.value.style.left = `${dingwei[prop.position].left}px`
      contentref.value.style.top = `${dingwei[prop.position].top}px`
    }

    // 点击方法
    const thisonClick = () => {
      if (prop.trigger === "click") {
        if (visible.value === true) {
          closepop()
        } else {
          showpop()
        }
      }
    }
    // 获取焦点方法
    const getfocus = () => {
      if (prop.trigger === "focus") {
        showpop()
      }
    }
    // 失去焦点方法
    const losefocus = () => {
      if (prop.trigger === "focus") {
        closepop()
      }
    }
    // 显示
    const showpop = () => {
      // 必须先显示，然后才能获取ref，如果反过来，就获取不到ref
      visible.value = true
      nextTick(() => {
        positionContent()
      })
    }
    // 隐藏
    const closepop = () => {
      visible.value = false
    }
    // 生命周期
    onMounted(() => {
      // 初始化时，根据触发方式，绑定方法
      if (prop.trigger === "hold") {
        popoverref.value.addEventListener("mousedown", showpop)
        popoverref.value.addEventListener("mouseup", closepop)
      } else if (prop.trigger === "hover") {
        popoverref.value.addEventListener("mouseenter", showpop)
        popoverref.value.addEventListener("mouseleave", closepop)
      }
      // 滚动时，不显示pop
      window.addEventListener("scroll",closepop)
      // 窗口大小变化时，不显示pop
      window.addEventListener('resize', closepop)
    })
    onUnmounted(() => {
      // 销毁前，移除监听
      if (prop.trigger === "hold") {
        popoverref.value.removeEventListener("mousedown", showpop)
        popoverref.value.removeEventListener("mouseup", closepop)
      } else if (prop.trigger === "hover") {
        popoverref.value.removeEventListener("mouseenter", showpop)
        popoverref.value.removeEventListener("mouseleave", closepop)
      }
      // 所有监听移除
      window.removeEventListener("scroll", closepop)
      window.removeEventListener("resize", closepop)
    })
    return {
      getfocus, losefocus, thisonClick, visible, popoverref, contentref, triggerref, thisposition, closepop,sanjiaoxingref,
    }
  },
  components: {},
})
</script>

<style scoped>
</style>

三、使用

<div class="w-full h-20 flex justify-evenly items-center">
      <popover position="bottom">
        <template v-slot:content>
          <span slot="content">
            999
            <br>
            999
            <br>
            999
          </span>
        </template>
        <mybutton>按钮</mybutton>
      </popover>
      <popover position="top">
        <template v-slot:content>
          <span slot="content">
            999
            <br>
            999
            <br>
            999
          </span>
        </template>
        <mybutton>按钮</mybutton>
      </popover>
      <popover position="left">
        <template v-slot:content>
          <span slot="content">
            999
            <br>
            999
            <br>
            999
          </span>
        </template>
        <mybutton>按钮</mybutton>
      </popover>
      <popover position="right">
        <template v-slot:content>
          <span slot="content">
            999
            <br>
            999
            <br>
            999
          </span>
        </template>
        <mybutton>按钮</mybutton>
      </popover>
    </div>

目前看，没什么缺点。

四、效果

在这里插入图片描述

五、更新

2021年9月14日 11:57:00，使冒泡和按钮对齐

/*
*设计思路
*/
<template>
  <div class="relative" ref="popoverref" @focus="getfocus" @blur="losefocus" v-click-away="closepop">
    <!--    冒泡插槽-->
    <div v-if="visible" ref="contentref" class="absolute transform inline-block bg-white border p-2"
         :class="{'-translate-y-full':thisposition==='top','-translate-x-full':thisposition==='left'}">
      <slot name="content"></slot>
      <!--      那个三角形-->
      <div ref="sanjiaoxingref" class="absolute transform block bg-white border-t border-l w-2 h-2"
           :class="{'-top-1 left-1/2 -translate-x-1/2 rotate-45':thisposition==='bottom','-bottom-1 left-1/2 -translate-x-1/2 -rotate-135':thisposition==='top','top-1/2 -translate-y-1/2 -right-1 rotate-135':thisposition==='left','-left-1 top-1/2 -translate-y-1/2 -rotate-45':thisposition==='right'}"></div>
    </div>
    <!--    默认插槽-->
    <span class="inline-block" ref="triggerref" @click.stop="thisonClick()">
      <slot></slot>
    </span>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, onMounted, onUnmounted, nextTick} from "vue";

export default defineComponent({
  name: "popover",
  props: {
    // 触发方式
    trigger: {
      type: String,
      default: "click",
      // hold的意思是按住鼠标左键不放
      validator(value) {
        return ["hover", "click", "focus", "hold"].indexOf(value.indexOf) > 0
      }
    },
    // 定位位置
    position: {
      type: String,
      default: "bottom",
      validator(value) {
        return ["top", "left", "bottom", "right"].indexOf(value) > 0
      },
    },
  },
  setup(prop, context) {
    // 三个ref
    const popoverref = ref(null)
    const contentref = ref(null)
    const triggerref = ref(null)
    // 增加一个三角形的ref
    const sanjiaoxingref = ref(null)
    // 是否显示冒泡卡片
    const visible = ref(false)
    // 定位
    const thisposition = ref(prop.position)

    // 最重要的函数，为pop进行定位
    const positionContent = () => {
      document.body.appendChild(contentref.value)
      const {width, height, top, left} = triggerref.value.getBoundingClientRect()
      const width2 = contentref.value.offsetWidth
      const height2 = contentref.value.offsetHeight
      let dingwei = {
        top: {
          top: top + window.scrollY - 5,
          left: left + window.scrollX + width / 2 - width2 / 2
        },
        bottom: {
          top: top + height + window.scrollY + 5,
          left: left + window.scrollX + width / 2 - width2 / 2
        },
        left: {
          top: top + window.scrollY + height/2 - height2/2,
          left: left + window.scrollX - 5
        },
        right: {
          top: top + window.scrollY + height/2 - height2/2,
          left: left + width + window.scrollX + 5
        },
      }
      // contentref.value.style.transform = `translate(${dingwei[prop.position].left}px, ${dingwei[prop.position].top}px)`
      contentref.value.style.left = `${dingwei[prop.position].left}px`
      contentref.value.style.top = `${dingwei[prop.position].top}px`
    }

    // 点击方法
    const thisonClick = () => {
      if (prop.trigger === "click") {
        if (visible.value === true) {
          closepop()
        } else {
          showpop()
        }
      }
    }
    // 获取焦点方法
    const getfocus = () => {
      if (prop.trigger === "focus") {
        showpop()
      }
    }
    // 失去焦点方法
    const losefocus = () => {
      if (prop.trigger === "focus") {
        closepop()
      }
    }
    // 显示
    const showpop = () => {
      // 必须先显示，然后才能获取ref，如果反过来，就获取不到ref
      visible.value = true
      nextTick(() => {
        positionContent()
      })
    }
    // 隐藏
    const closepop = () => {
      visible.value = false
    }
    // 生命周期
    onMounted(() => {
      // 初始化时，根据触发方式，绑定方法
      if (prop.trigger === "hold") {
        popoverref.value.addEventListener("mousedown", showpop)
        popoverref.value.addEventListener("mouseup", closepop)
      } else if (prop.trigger === "hover") {
        popoverref.value.addEventListener("mouseenter", showpop)
        popoverref.value.addEventListener("mouseleave", closepop)
      }
      // 滚动时，不显示pop
      window.addEventListener("scroll", closepop)
      // 窗口大小变化时，不显示pop
      window.addEventListener('resize', closepop)
    })
    onUnmounted(() => {
      // 销毁前，移除监听
      if (prop.trigger === "hold") {
        popoverref.value.removeEventListener("mousedown", showpop)
        popoverref.value.removeEventListener("mouseup", closepop)
      } else if (prop.trigger === "hover") {
        popoverref.value.removeEventListener("mouseenter", showpop)
        popoverref.value.removeEventListener("mouseleave", closepop)
      }
      // 所有监听移除
      window.removeEventListener("scroll", closepop)
      window.removeEventListener("resize", closepop)
    })
    return {
      getfocus,
      losefocus,
      thisonClick,
      visible,
      popoverref,
      contentref,
      triggerref,
      thisposition,
      closepop,
      sanjiaoxingref,
    }
  },
  components: {},
})
</script>

<style scoped>
</style>

效果图
在这里插入图片描述

更新2021年9月17日 17:43:38

/*
*设计思路
*/
<template>
  <div class="relative" ref="popoverref" @focus="getfocus" @blur="losefocus" v-click-away="closepop">
    <!--    冒泡插槽-->
    <div v-if="visible" ref="contentref" class="absolute transform inline-block bg-white border p-2"
         :class="{'-translate-y-full':thisposition==='top','-translate-x-full':thisposition==='left'}">
      <slot name="content"></slot>
      <!--      那个三角形-->
      <div ref="sanjiaoxingref" class="absolute transform block bg-white border-t border-l w-2 h-2"
           :class="{'-top-1 left-1/2 -translate-x-1/2 rotate-45':thisposition==='bottom','-bottom-1 left-1/2 -translate-x-1/2 -rotate-135':thisposition==='top','top-1/2 -translate-y-1/2 -right-1 rotate-135':thisposition==='left','-left-1 top-1/2 -translate-y-1/2 -rotate-45':thisposition==='right'}"></div>
    </div>
    <!--    默认插槽-->
    <span class="inline-block" ref="triggerref" @click.stop="thisonClick()">
      <slot></slot>
    </span>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, onMounted, onBeforeUnmount, nextTick} from "vue";

export default defineComponent({
  name: "popover",
  props: {
    // 触发方式
    trigger: {
      type: String,
      default: "hover",
      // hold的意思是按住鼠标左键不放
      validator(value) {
        return ["hover", "click", "focus", "hold"].indexOf(value.indexOf) > 0
      }
    },
    // 定位位置
    position: {
      type: String,
      default: "bottom",
      validator(value) {
        return ["top", "left", "bottom", "right"].indexOf(value) > 0
      },
    },
  },
  setup(prop, context) {
    // 三个ref
    const popoverref = ref(null)
    const contentref = ref(null)
    const triggerref = ref(null)
    // 增加一个三角形的ref
    const sanjiaoxingref = ref(null)
    // 是否显示冒泡卡片
    const visible = ref(false)
    // 定位
    const thisposition = ref(prop.position)

    // 最重要的函数，为pop进行定位
    const positionContent = () => {
      document.body.appendChild(contentref.value)
      const {width, height, top, left} = triggerref.value.getBoundingClientRect()
      const width2 = contentref.value.offsetWidth
      const height2 = contentref.value.offsetHeight
      let dingwei = {
        top: {
          top: top + window.scrollY - 5,
          left: left + window.scrollX + width / 2 - width2 / 2
        },
        bottom: {
          top: top + height + window.scrollY + 5,
          left: left + window.scrollX + width / 2 - width2 / 2
        },
        left: {
          top: top + window.scrollY + height/2 - height2/2,
          left: left + window.scrollX - 5
        },
        right: {
          top: top + window.scrollY + height/2 - height2/2,
          left: left + width + window.scrollX + 5
        },
      }
      // contentref.value.style.transform = `translate(${dingwei[prop.position].left}px, ${dingwei[prop.position].top}px)`
      contentref.value.style.left = `${dingwei[prop.position].left}px`
      contentref.value.style.top = `${dingwei[prop.position].top}px`
    }

    // 点击方法
    const thisonClick = () => {
      if (prop.trigger === "click") {
        if (visible.value === true) {
          closepop()
        } else {
          showpop()
        }
      }
    }
    // 获取焦点方法
    const getfocus = () => {
      if (prop.trigger === "focus") {
        showpop()
      }
    }
    // 失去焦点方法
    const losefocus = () => {
      if (prop.trigger === "focus") {
        closepop()
      }
    }
    // 显示
    const showpop = () => {
      // 必须先显示，然后才能获取ref，如果反过来，就获取不到ref
      visible.value = true
      nextTick(() => {
        positionContent()
      })
    }
    // 隐藏
    const closepop = () => {
      visible.value = false
    }
    // 生命周期
    onMounted(() => {
      // 初始化时，根据触发方式，绑定方法
      if (prop.trigger === "hold") {
        popoverref.value.addEventListener("mousedown", showpop)
        popoverref.value.addEventListener("mouseup", closepop)
      } else if (prop.trigger === "hover") {
        popoverref.value.addEventListener("mouseenter", showpop)
        popoverref.value.addEventListener("mouseleave", closepop)
      }
      // 滚动时，不显示pop
      window.addEventListener("scroll", closepop)
      // 窗口大小变化时，不显示pop
      window.addEventListener('resize', closepop)
    })
    onBeforeUnmount(() => {
      // 销毁前，移除监听
      if (prop.trigger === "hold") {
        popoverref.value.removeEventListener("mousedown", showpop)
        popoverref.value.removeEventListener("mouseup", closepop)
      } else if (prop.trigger === "hover") {
        popoverref.value.removeEventListener("mouseenter", showpop)
        popoverref.value.removeEventListener("mouseleave", closepop)
      }
      // 所有监听移除
      window.removeEventListener("scroll", closepop)
      window.removeEventListener("resize", closepop)
    })
    return {
      getfocus,
      losefocus,
      thisonClick,
      visible,
      popoverref,
      contentref,
      triggerref,
      thisposition,
      closepop,
      sanjiaoxingref,
    }
  },
  components: {},
})
</script>

<style scoped>
</style>

2021年9月17日 22:31:47，又改一遍

/*
*设计思路
*  元素必须挂载到body上，这样才不会被其他元素的overflw：hidden给遮挡住
*/
<template>
  <div class="relative" ref="popoverref" @focus="getfocus" @blur="losefocus" v-click-away="closepop">
    <!--    冒泡插槽-->
    <div v-if="visible" ref="contentref" class="absolute transform inline-block bg-white border p-2"
         :class="{'-translate-y-full':thisposition==='top','-translate-x-full':thisposition==='left'}">
      <slot name="content"></slot>
      <!--      那个三角形-->
      <div ref="sanjiaoxingref" class="absolute transform block bg-white border-t border-l w-2 h-2"
           :class="{'-top-1 left-1/2 -translate-x-1/2 rotate-45':thisposition==='bottom','-bottom-1 left-1/2 -translate-x-1/2 -rotate-135':thisposition==='top','top-1/2 -translate-y-1/2 -right-1 rotate-135':thisposition==='left','-left-1 top-1/2 -translate-y-1/2 -rotate-45':thisposition==='right'}"></div>
    </div>
    <!--    默认插槽-->
    <span class="inline-block" ref="triggerref" @click.stop="thisonClick()">
      <slot></slot>
    </span>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, onMounted, onBeforeUnmount, nextTick} from "vue";

export default defineComponent({
  name: "popover",
  props: {
    // 触发方式
    trigger: {
      type: String,
      default: "hover",
      // hold的意思是按住鼠标左键不放
      validator(value) {
        return ["hover", "click", "focus", "hold"].indexOf(value) > -1
      }
    },
    // 定位位置
    position: {
      type: String,
      default: "bottom",
      validator(value) {
        return ["top", "left", "bottom", "right"].indexOf(value) > -1
      },
    },
  },
  setup(prop, context) {
    // 三个ref
    const popoverref = ref(null)
    const contentref = ref(null)
    const triggerref = ref(null)
    // 增加一个三角形的ref
    const sanjiaoxingref = ref(null)
    // 是否显示冒泡卡片
    const visible = ref(false)
    // 定位
    const thisposition = ref(prop.position)

    // 最重要的函数，为pop进行定位
    const positionContent = () => {
      document.body.appendChild(contentref.value)
      const {width, height, top, left} = triggerref.value.getBoundingClientRect()
      const width2 = contentref.value.offsetWidth
      const height2 = contentref.value.offsetHeight
      let dingwei = {
        top: {
          top: top + window.scrollY - 5,
          left: left + window.scrollX + width / 2 - width2 / 2
        },
        bottom: {
          top: top + height + window.scrollY + 5,
          left: left + window.scrollX + width / 2 - width2 / 2
        },
        left: {
          top: top + window.scrollY + height/2 - height2/2,
          left: left + window.scrollX - 5
        },
        right: {
          top: top + window.scrollY + height/2 - height2/2,
          left: left + width + window.scrollX + 5
        },
      }
      // contentref.value.style.transform = `translate(${dingwei[prop.position].left}px, ${dingwei[prop.position].top}px)`
      contentref.value.style.left = `${dingwei[prop.position].left}px`
      contentref.value.style.top = `${dingwei[prop.position].top}px`
    }

    // 点击方法
    const thisonClick = () => {
      if (prop.trigger === "click") {
        if (visible.value === true) {
          closepop()
        } else {
          showpop()
        }
      }
    }
    // 获取焦点方法
    const getfocus = () => {
      if (prop.trigger === "focus") {
        showpop()
      }
    }
    // 失去焦点方法
    const losefocus = () => {
      if (prop.trigger === "focus") {
        closepop()
      }
    }
    // 显示
    const showpop = () => {
      // 必须先显示，然后才能获取ref，如果反过来，就获取不到ref
      visible.value = true
      nextTick(() => {
        positionContent()
      })
    }
    // 隐藏
    const closepop = () => {
      let status = false
      contentref.value.addEventListener("mouseenter", ()=>{
        status = true
      })
      contentref.value.addEventListener("mouseleave", ()=>{
        visible.value = false
      })
      setTimeout(()=>{
        if(!status){
          visible.value = false
        }
      },100)
    }
    // 生命周期
    onMounted(() => {
      // 初始化时，根据触发方式，绑定方法
      if (prop.trigger === "hold") {
        popoverref.value.addEventListener("mousedown", showpop)
        popoverref.value.addEventListener("mouseup", closepop)
      } else if (prop.trigger === "hover") {
        popoverref.value.addEventListener("mouseenter", showpop)
        popoverref.value.addEventListener("mouseleave", closepop)
      }
      // 滚动时，不显示pop
      window.addEventListener("scroll", closepop)
      // 窗口大小变化时，不显示pop
      window.addEventListener('resize', closepop)
    })
    onBeforeUnmount(() => {
      // 销毁前，移除监听
      if (prop.trigger === "hold") {
        popoverref.value.removeEventListener("mousedown", showpop)
        popoverref.value.removeEventListener("mouseup", closepop)
      } else if (prop.trigger === "hover") {
        popoverref.value.removeEventListener("mouseenter", showpop)
        popoverref.value.removeEventListener("mouseleave", closepop)
      }
      // 所有监听移除
      window.removeEventListener("scroll", closepop)
      window.removeEventListener("resize", closepop)
    })
    return {
      getfocus,
      losefocus,
      thisonClick,
      visible,
      popoverref,
      contentref,
      triggerref,
      thisposition,
      closepop,
      sanjiaoxingref,
    }
  },
  components: {},
})
</script>

<style scoped>
</style>

2021年10月20日 09:05:49，再次修改
原来获取的triggerref的位置，但这个元素是正常文档流，如果插槽内元素是绝对定位之类的，它就不能准确的套在插槽元素上，我使用slot获取插槽元素，结果四维都是0，所以最后改成获取triggerref的第一个子元素的四维，这下可以准确的定位在插槽元素上了。

/*
*设计思路
*  元素必须挂载到body上，这样才不会被其他元素的overflw：hidden给遮挡住
*/
<template>
  <div class="relative" ref="popoverref" @focus="getfocus" @blur="losefocus" v-click-away="closepop">
    <!--    冒泡插槽-->
    <div v-if="visible" ref="contentref" class="absolute transform inline-block bg-white border p-2"
         :class="{'-translate-y-full':thisposition==='top','-translate-x-full':thisposition==='left'}">
      <slot name="content"></slot>
      <!--      那个三角形-->
      <div ref="sanjiaoxingref" class="absolute transform block bg-white border-t border-l w-2 h-2"
           :class="{'-top-1 left-1/2 -translate-x-1/2 rotate-45':thisposition==='bottom','-bottom-1 left-1/2 -translate-x-1/2 -rotate-135':thisposition==='top','top-1/2 -translate-y-1/2 -right-1 rotate-135':thisposition==='left','-left-1 top-1/2 -translate-y-1/2 -rotate-45':thisposition==='right'}"></div>
    </div>
    <!--    默认插槽-->
    <span class="inline-block" ref="triggerref" @click.stop="thisonClick()">
      <slot></slot>
    </span>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, onMounted, onBeforeUnmount, nextTick} from "vue";

export default defineComponent({
  name: "popover",
  props: {
    // 触发方式
    trigger: {
      type: String,
      default: "hover",
      // hold的意思是按住鼠标左键不放
      validator(value) {
        return ["hover", "click", "focus", "hold"].indexOf(value) > -1
      }
    },
    // 定位位置
    position: {
      type: String,
      default: "bottom",
      validator(value) {
        return ["top", "left", "bottom", "right"].indexOf(value) > -1
      },
    },
  },
  setup(prop, context) {
    // 三个ref
    const popoverref = ref(null)
    const contentref = ref(null)
    const triggerref = ref(null)
    // 增加一个三角形的ref
    const sanjiaoxingref = ref(null)
    // 是否显示冒泡卡片
    const visible = ref(false)
    // 定位
    const thisposition = ref(prop.position)

    // 最重要的函数，为pop进行定位
    const positionContent = () => {
      document.body.appendChild(contentref.value)
      const {width, height, top, left} = triggerref.value.children[0].getBoundingClientRect()
      const width2 = contentref.value.offsetWidth
      const height2 = contentref.value.offsetHeight
      let dingwei = {
        top: {
          top: top + window.scrollY - 5,
          left: left + window.scrollX + width / 2 - width2 / 2
        },
        bottom: {
          top: top + height + window.scrollY + 5,
          left: left + window.scrollX + width / 2 - width2 / 2
        },
        left: {
          top: top + window.scrollY + height/2 - height2/2,
          left: left + window.scrollX - 5
        },
        right: {
          top: top + window.scrollY + height/2 - height2/2,
          left: left + width + window.scrollX + 5
        },
      }
      // contentref.value.style.transform = `translate(${dingwei[prop.position].left}px, ${dingwei[prop.position].top}px)`
      contentref.value.style.left = `${dingwei[prop.position].left}px`
      contentref.value.style.top = `${dingwei[prop.position].top}px`
    }

    // 点击方法
    const thisonClick = () => {
      if (prop.trigger === "click") {
        if (visible.value === true) {
          closepop()
        } else {
          showpop()
        }
      }
    }
    // 获取焦点方法
    const getfocus = () => {
      if (prop.trigger === "focus") {
        showpop()
      }
    }
    // 失去焦点方法
    const losefocus = () => {
      if (prop.trigger === "focus") {
        closepop()
      }
    }
    // 显示
    const showpop = () => {
      // 必须先显示，然后才能获取ref，如果反过来，就获取不到ref
      visible.value = true
      nextTick(() => {
        positionContent()
      })
    }
    // 隐藏
    const closepop = () => {
      let status = false
      contentref.value.addEventListener("mouseenter", ()=>{
        status = true
      })
      contentref.value.addEventListener("mouseleave", ()=>{
        visible.value = false
      })
      setTimeout(()=>{
        if(!status){
          visible.value = false
        }
      },100)
    }
    // 生命周期
    onMounted(() => {
      // 初始化时，根据触发方式，绑定方法
      if (prop.trigger === "hold") {
        popoverref.value.addEventListener("mousedown", showpop)
        popoverref.value.addEventListener("mouseup", closepop)
      } else if (prop.trigger === "hover") {
        popoverref.value.addEventListener("mouseenter", showpop)
        popoverref.value.addEventListener("mouseleave", closepop)
      }
      // 滚动时，不显示pop
      window.addEventListener("scroll", closepop)
      // 窗口大小变化时，不显示pop
      window.addEventListener('resize', closepop)
    })
    onBeforeUnmount(() => {
      // 销毁前，移除监听
      if (prop.trigger === "hold") {
        popoverref.value.removeEventListener("mousedown", showpop)
        popoverref.value.removeEventListener("mouseup", closepop)
      } else if (prop.trigger === "hover") {
        popoverref.value.removeEventListener("mouseenter", showpop)
        popoverref.value.removeEventListener("mouseleave", closepop)
      }
      // 所有监听移除
      window.removeEventListener("scroll", closepop)
      window.removeEventListener("resize", closepop)
    })
    return {
      getfocus,
      losefocus,
      thisonClick,
      visible,
      popoverref,
      contentref,
      triggerref,
      thisposition,
      closepop,
      sanjiaoxingref,
    }
  },
  components: {},
})
</script>

<style scoped>
</style>
放风喽
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
Vue3 - Element Plus 气泡卡片 Popover 手动关闭，支持 v-for 循环出来的多个弹框（el-popover 点击其他区域关闭弹出框，通过点击按钮手动触发关闭隐藏气泡弹框）
王佳斌
09-12 5790
vue3 element plus 气泡卡片el-popover组件，vue3 Popover 气泡卡片怎么手动关闭，element plus el-popover手动关闭，Element plus 饿了么组件库中el-popover气泡框弹出框手动关闭详细教程， element plus气泡弹框el-popover如何点击按钮手动进行隐藏关闭，element plus 解决循环出多个el-popover点击其中一个则其它都关闭，v-for循环多个气泡弹框如何实现关闭各自的弹框，页面v-for循环出来的气泡
【Vue3】如何手写一个Popover气泡卡片组件
MangoSwordsman的博客
01-13 767
如何仿照element-plus写一个Popover气泡卡片
vue3 el-popover怎么挂载在父元素，而不是body上
最新发布
m0_52773173的博客
05-22 307
teleported查看效果。
Vue3 实现一个函数式 popups 弹出层
fang_my的博客
05-20 879
最近接手了一个。
关于在vue3 ＜script setup＞＜/script＞中使用＜el-popover＞＜/el-popover＞调用不显示或显示位置不对的问题
de_yi_xaio的博客
09-11 1340
第二种方式我用的v-show，想的是既然不能直接使用这个组件那就直接自己写一个，但是这边又出现了新问题，当我使用的v-show的时候，element中的Popover弹出框这个组件直接在页面上不显示了，这就把人搞得很郁闷无语。到最后也是成功解决这个在vue3 中使用调用不显示或显示位置不对的问题。
el-popover使用自定义图标
weixin_42342065的博客
08-03 2181
el-popover使用自定义图标
Vue3 样式穿透 Element Plus el-popover样式修改 动态控制el-popover显示
weixin_55039681的博客
02-12 1万+
前言 这个问题从2020年小年夜一直卡到2021年大年初一才解决，虽然查了很多资料，但是没有一个能解决的。主要原因有2个： 1.本人是新手，Vue学习使用时间不长，而且用的是最新的Vue3 2.用了Element plus，而不是Element UI 问题描述 我想实现如下一个功能，在input上方弹出一个popover窗口提示，并且将input和popover边框全变成红色，如下图： 第一个小坑：弹出popover窗口提示 首先根据element plus指南，做出如下效果： 本以为很简单，结果手动激
vue中el-popover的使用
热门推荐
青春不打烊的博客
05-25 2万+
1.trigger属性用于设置何时触发 Popover，支持四种触发方式：hover，click，focus和manual。对于触发 Popover 的元素，有两种写法：使用slot="reference"的具名插槽，或使用自定义指令v-popover指向 Popover 的索引ref。 <template> <div class="listcontent"> <el-row v-for="(item,index) in datalist" :k...
Vue3自定义组件库，Vue3项目
08-17
Vue3自定义组件库，Vue3项目
使用VUE自定义组件封装数据字典实战
03-07
答案也简单，就是自定义封装一个组件来实现。我们的目标是传入一个数据字典的类型编码，组件内部调用后端API，完成数据的加载与存储，在选择项变化时，自动更新绑定的对应的业务实体的属性值。同时，在业务实体的...
vue2.0 自定义组件的方法（vue组件的封装）
08-27
Vue 2.0 自定义组件的方法（Vue 组件的封装） 在 Vue 2.0 中，自定义组件是非常强大的功能之一，它允许开发者根据自己的需求封装自己的组件，从而提高开发效率和代码重用性。在本文中，我们将详细介绍 Vue 2.0 ...
VueLinkPopover：用于Vue.js的可自定义Twitter样式的Popover组件
02-06
VueLinkPopover 可自定义，灵活，易于使用的Vue.js弹出内容，类似于Facebook和Twitter所使用的内容 [不推荐使用]此模块不推荐使用 灵感来自 安装 在Vue.js项目中，使用npm install --save vue-link-popover popover进行npm install --save vue-link-popover 。 对于基于浏览器的环境，请下载popover.js或从CDN使用它： [removed][removed] （可选
vue3 表格组件封装复用
02-27
在Vue3中，组件封装是提高代码复用性和效率的关键技术。本项目专注于实现一个可编辑的表格组件，旨在帮助开发者更好地理解和应用Vue3的组件化思想，提升面试竞争力，并优化开发流程。以下是对这个表格组件封装过程的...
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
10-15
本篇文章将详细介绍如何在 Vue CLI 3 环境下正确封装 Svgicon 组件。 首先，我们需要在 `src` 目录下创建一个新的文件夹，用于存储 SVG 图标。例如，我们可以命名为 `Icons/svg`。这个文件夹将存放所有的 SVG 图标...
Proprver组件封装（文字提示带图标）
m0_58235310的博客
11-30 35
【代码】Proprver组件封装。
popover组件
07-28 582
el-popover树形列表
Vue操作：Element弹出框（Popover）
weixin_44221475的博客
04-04 9265
Element 弹出框官方文档： https://element.eleme.cn/2.0/#/zh-CN/component/popover 问题：使用v-for遍历button时弹出框，弹出框只会显示最后一个 <div v-for="(label,l) in labelInfo" :key="l"> <el-popover :ref="popover2" p...
vue3实现局部组件重新渲染
qq_43393995的博客
10-14 1万+
在Vue2中我们除了使用v-if 指令让局部dom的重新渲染，也可以新建一个空白组件，需要刷新局部页面时跳转至这个空白组件页面，然后在空白组件内的beforeRouteEnter 守卫中又跳转回原来的页面。在全局状态中定义一个isRouterAlive 标识刷新状态，根据isRouterAlive 变化来重新渲染。想要实现页面的局部刷新，我们只需要实现局部组件（dom）的重新渲染。如下图所示，如何在Vue3.X中实现点击刷新按钮实现红框范围内的dom重新加载，并展示对应的加载状态。第一步：定义状态标识。
vue实现一个简易Popover组件
weixin_30580341的博客
11-26 848
概述 之前写vue的时候，对于下拉框，我是通过在组件内设置标记来控制是否弹出的，但是这样有一个问题，就是点击组件外部的时候，怎么也控制不了下拉框的关闭，用户体验非常差。 当时想到的解决方法是：给根实例创建一个标记来控制，然后一级一级的把这个标记传进来。但是这样每次配置都要改根组件，非常不灵活。 最近看museUI库，发现它的下拉框Select实现的非常灵活，点击组件外也能控制下拉框关闭，于是想探究...
vue3+ts popover 组件怎么写
05-19
以下是一个简单的 Vue 3 + TypeScript 实现的 Popover 组件： ```html <template> <div class="popover-container" @click="togglePopover"> <slot name="trigger"></slot> <div class="popover" v-if="visible"> <div class="popover-arrow"></div> <div class="popover-content"> <slot name="content"></slot> </div> </div> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue' export default defineComponent({ name: 'Popover', setup() { const visible = ref(false) const togglePopover = () => { visible.value = !visible.value } return { visible, togglePopover, } }, }) </script> <style scoped> .popover-container { position: relative; } .popover { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; min-width: 10rem; padding: 0.5rem; background-color: #fff; border: 1px solid #ccc; border-radius: 0.25rem; } .popover-arrow { position: absolute; top: -0.5rem; left: 50%; width: 0; height: 0; border-top: 0.5rem solid transparent; border-bottom: 0.5rem solid #fff; border-left: 0.5rem solid transparent; border-right: 0.5rem solid transparent; transform: translateX(-50%); } .popover-content { margin: 0; } </style> ``` 使用示例： ```html <Popover> <template v-slot:trigger> <button>Toggle Popover</button> </template> <template v-slot:content> <p>This is the popover content.</p> </template> </Popover> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值