vue实现点击出现操作弹出框的示例实现点击出现操作弹出框的示例
如上图所示，这次要实现一个点击出现操作弹框的效果；并将这个功能封装成一个函数，便于在项目的多个地方使用。
具体思路是：具体思路是：
封装一个组件，组件保护一个插槽，我们可以根据不同的场景，利用插槽随意在这个弹框里插入任何元素，这个弹框显示
时根据我鼠标的点击位置，定位弹窗的位置，并在组件里面监听鼠标抬起事件，触发事件时将弹窗隐藏；
接着在函数中利用createElement和appendChild方法将弹出框创建并插入到页面中；
本次实现基于vuecli3
接下来，具体实现：接下来，具体实现：
首先，我们先写一个demo组件
在点击出现弹出框的元素上把事件对象数据传递一下，以便获取点击时鼠标的数据，以此确定弹出框的位置
// 文件路径参考： src > views > demo> index.vue
<template>
<div class="demo-wrapper">
<div class="demo-div">
<span>更多功能</span>
<i class="xk-icon xk-ellipsis" @click.stop='showMenu($event)'></i> // 为了获取鼠标位置，这里把事件对象数据传递一下
</div>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop, Watch} from "vue-property-decorator";
@Component({
})
export default class articleView extends Vue {
showMenu($event:any){
// 点击时出现弹出框
}
};
</script>
接着，我们把弹出框里面的组件也写一下接着，我们把弹出框里面的组件也写一下
组件随便命名为ActionList，组件里面把把列表数据及点击事件都基于父组件传递的值而定，由于只是小demo，所以我们
传递的menu数据数组只是简单的字符串数组
// 文件路径参考： src > components > ActionList > index.vue<template>
评论0