vue实现点击出现操作弹出框的示例


Posted in Javascript onNovember 05, 2020

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>
 <ul class="menu-wrapper">
  <li
   class="menu-item"
   v-for="item in menu"
   :key="item"
   @click="handleClick(item)"
  >
   {{ item }}
  </li>
 </ul>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class ActionList extends Vue {
 @Prop() menu: string[];
 handleClick(str: string) {
  this.$emit('click', str);
 }
}
</script>

    接着,开始着手写弹框组件

  1、弹框组件的显示隐藏用v-show控制,为什么不用v-if ?因为这里我监听了mouseup事件来让弹框隐藏,如果在插槽里的元素绑定事件,比如点击事件,用v-if 的话,点击插槽里的元素时,弹框先消失,插槽里的点击事件就不会生效了。

     2、handleOpen事件里我们根据鼠标点击位置定位弹框位置。

// 文件路径参考: src > components > PublicModel > index.vue<template>
 <div class="dropdown-menu" :style="style" v-show='showModel'>
  <slot></slot>
 </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
interface IStyle {
 left?: string;
 right?: string;
 top?: string;
 bottom?: string;
}
@Component
export default class PublicModel extends Vue {
 showModel:boolean = false;
 style:IStyle = {};

 // 组件显示时
 handleOpen($event:any){
  const { clientWidth, clientHeight, scrollWidth, scrollHeight } = document.body || document.documentElement;
  const { pageX, pageY, clientX, clientY } = $event;
  let style:IStyle = {} 
  if(clientX > (clientWidth * 2)/3 ){
   style.right = scrollWidth - pageX + 10 + 'px';
  }else{
   style.left = pageX+10+'px'
  }
  if(clientY > (clientHeight * 2) / 3 ){
   style.bottom = scrollHeight - pageY + 10 + 'px';
  }else{
   style.top = pageY + 10 + "px"
  }
  this.style = style;
  this.showModel = true;
  document.addEventListener('mouseup',this.closeModel)
 }

 // 隐藏关闭此组件
 closeModel(){
  this.showModel = false;
  document.removeEventListener('mouseup', this.closeModel);
 }

 // 组件销毁生命周期
 destroyed(){
  document.removeEventListener('mouseup', this.closeModel);
 }
}
</script>

    接着,重点来了,书写公用封装函数

  我们要在demo组件点击时触发这个函数,即在demo组件里的showMenu事件触发函数,这个函数要利用createElement和appendChild方法将弹出框创建并插入到页面中。

  因为是点击时创建并插入元素,所以为了性能优化,避免有恶意疯狂点击,不断创建和插入元素,我们利用throttle-debounce插件做一个节流。

  先直接看代码,其他注释写在了代码里,函数名随意取:ModelFun

// 文件路径参考: src > components > PublicModel > index.ts
import Vue from 'vue';
import PublicModel from './index.vue'; // 导入上面所写的弹框组件
const throttleDebounce = require('throttle-debounce'); // throttle-debounce插件
const debounce = throttleDebounce.debounce;
const PublicModelConstructor = Vue.extend(PublicModel);
let instance:any;
const initInstance = () => {
 instance = new PublicModelConstructor({
  el: document.createElement('div'),
 });
 document.body.appendChild(instance.$el);
}
const insertInstanceSlot = (slotVNode:any, $event:any) => { // 这里两个参数一个是弹框里插槽的组件,还有就是点击的事件对象(方便定位弹框位置)
 if(!instance){
  initInstance()
 }
 instance.$slots.default = [slotVNode]; // 将传递过来的插槽组件插入弹框组件中
 instance.handleOpen($event) // 触发弹框组件(见上一段代码)的弹框获取定位信息并显示的事件
}
const ModelFun = debounce(200, false, insertInstanceSlot) // 使用throttle-debounce里的debounce保证在一系列调用时间中回调函数只执行一次,这里是200毫秒               // 第二个参数为false时,在点击时会在200毫秒后再执行callback(即insertInstanceSlot),但为true时,会立即先执行一次;
export default ModelFun

    接着,重点来了,书写公用封装函数

  我们要在demo组件点击时触发这个函数,即在demo组件里的showMenu事件触发函数,这个函数要利用createElement和appendChild方法将弹出框创建并插入到页面中。

  因为是点击时创建并插入元素,所以为了性能优化,避免有恶意疯狂点击,不断创建和插入元素,我们利用throttle-debounce插件做一个节流。

  先直接看代码,其他注释写在了代码里,函数名随意取:ModelFun

// 文件路径参考: src > components > PublicModel > index.tsimport Vue from 'vue';
import PublicModel from './index.vue'; // 导入上面所写的弹框组件
const throttleDebounce = require('throttle-debounce'); // throttle-debounce插件
const debounce = throttleDebounce.debounce;
const PublicModelConstructor = Vue.extend(PublicModel);
let instance:any;
const initInstance = () => {
 instance = new PublicModelConstructor({
  el: document.createElement('div'),
 });
 document.body.appendChild(instance.$el);
}
const insertInstanceSlot = (slotVNode:any, $event:any) => { // 这里两个参数一个是弹框里插槽的组件,还有就是点击的事件对象(方便定位弹框位置)
 if(!instance){
  initInstance()
 }
 instance.$slots.default = [slotVNode]; // 将传递过来的插槽组件插入弹框组件中
 instance.handleOpen($event) // 触发弹框组件(见上一段代码)的弹框获取定位信息并显示的事件
}
const ModelFun = debounce(200, false, insertInstanceSlot) // 使用throttle-debounce里的debounce保证在一系列调用时间中回调函数只执行一次,这里是200毫秒               // 第二个参数为false时,在点击时会在200毫秒后再执行callback(即insertInstanceSlot),但为true时,会立即先执行一次;export default ModelFun

    最后,我们回过头来完善一下demo组件

     利用vue的 $createElement 将ActionList组件插入弹框中,并将数据和事件传递给ActionList组件,这里我们传递的事件是简单的弹出我们点击的数据

// 文件路径参考: 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";
 import ActionList from "@/components/ActionList/index.vue";
 import modelFun from "@/components/PublicModel/index";
 @Component({

 })
 export default class articleView extends Vue {
  menuList: string[] = ['菜单1','菜单2','菜单3'];
  menuClick(name:string){ // 弹框里插槽的点击事件
   this.$message({message:name,type:'success'})
  }
  showMenu($event:any){
   modelFun(
    this.$createElement(
     ActionList,
     {
      props: { menu:this.menuList },
      on:{
       click: this.menuClick,
      }
     }
    ),
    $event
   )
  }
 };
</script>

  至此,效果如下

vue实现点击出现操作弹出框的示例

最后,我们利用element ui 的 tree 组件结合我们封装的弹框看一下效果
代码:

<template>
 <div class="demo-wrapper">
  <el-tree
    :data="data"
   node-key="id"
    :default-expand-all="true"
   :expand-on-click-node="false"
   show-checkbox
   >
    <div class="custom-tree-node tree-item" iv slot-scope="{ node }">
     <span>{{ node.label }}</span>
     <span
      class="action"
      @click.stop="showMenu($event)"
     >
      <i class="el-icon-more"></i>
     </span>
    </div>
   </el-tree>
 </div>
</template>

<script lang="ts">
 import { Vue, Component, Prop, Watch} from "vue-property-decorator";
 import ActionList from "@/components/ActionList/index.vue";
 import modelFun from "@/components/PublicModel/index";
 @Component({

 })
 export default class articleView extends Vue {
  menuList: string[] = ['菜单1','菜单2','菜单3'];
  data:any[] = [{
  id: 1,
  label: '一级 1',
  children: [{
   id: 4,
   label: '二级 1-1',
   children: [{
   id: 9,
   label: '三级 1-1-1'
   }, {
   id: 10,
   label: '三级 1-1-2'
   }]
  }]
  }, {
  id: 2,
  label: '一级 2',
  children: [{
   id: 5,
   label: '二级 2-1'
  }, {
   id: 6,
   label: '二级 2-2'
  }]
  }, {
  id: 3,
  label: '一级 3',
  children: [{
   id: 7,
   label: '二级 3-1'
  }, {
   id: 8,
   label: '二级 3-2'
  }]
  }];
  menuClick(name:string){
   console.log(name)
   this.$message({message:name,type:'success'})
  }
  showMenu($event:any){
   modelFun(
    this.$createElement(
     ActionList,
     {
      props: { menu:this.menuList },
      on:{
       click: this.menuClick,
      }
     }
    ),
    $event
   )
  }
 };
</script>

效果:

vue实现点击出现操作弹出框的示例

以上就是vue实现点击出现操作弹出框的示例的详细内容,更多关于vue 弹出框的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
漂亮的提示信息(带箭头)
Mar 21 Javascript
js 图片轮播(5张图片)
Dec 30 Javascript
JS 文件本身编码转换 图文教程
Oct 12 Javascript
js拦截alert对话框另类应用
Jan 16 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
JavaScript列表框listbox全选和反选的实现方法
Mar 18 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
Nov 05 #Javascript
Vant 在vue-cli 4.x中按需加载操作
Nov 05 #Javascript
前端vue如何使用高德地图
Nov 05 #Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 #Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 #Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 #Javascript
Array.filter中如何正确使用Async
Nov 04 #Javascript
You might like
php无序树实现方法
2015/07/28 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
angular实现图片懒加载实例代码
2017/06/08 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
2018/07/28 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[01:03]PWL开团时刻DAY6——别打我
2020/11/05 DOTA
[01:20:05]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第二场 2月5日
2021/03/11 DOTA
Django配置celery(非djcelery)执行异步任务和定时任务
2018/07/16 Python
python读写csv文件实例代码
2019/07/05 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
python 进程池pool使用详解
2020/10/15 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
环境科学专业个人求职信
2013/09/26 职场文书
群众路线教育实践活动思想汇报(2014特荐篇)
2014/09/16 职场文书
营销计划书
2015/01/17 职场文书
老公婚前保证书
2015/02/28 职场文书
工作迟到检讨书范文
2015/05/06 职场文书
学困生帮扶工作总结
2015/08/13 职场文书