vue 点击弹出文字_vue实现点击出现操作弹出框的示例
如上图所示,这次要实现一个点击出现操作弹框的效果;并将这个功能封装成一个函数,便于在项目的多个地方使用。
具体思路是:
封装一个组件,组件保护一个插槽,我们可以根据不同的场景,利用插槽随意在这个弹框里插入任何元素,这个弹框显示时根据我鼠标的点击位置,定位弹窗的位置,并在组件里面监听鼠标抬起事件,触发事件时将弹窗隐藏;
接着在函数中利用createElement和appendChild方法将弹出框创建并插入到页面中;
本次实现基于vuecli3
接下来,具体实现:
首先,我们先写一个demo组件
在点击出现弹出框的元素上把事件对象数据传递一下,以便获取点击时鼠标的数据,以此确定弹出框的位置
// 文件路径参考: src > views > demo> index.vue
更多功能
// 为了获取鼠标位置,这里把事件对象数据传递一下
import { Vue, Component, Prop, Watch} from "vue-property-decorator";
@Component({
})
export default class articleView extends Vue {
showMenu($event:any){
// 点击时出现弹出框
}
};
接着,我们把弹出框里面的组件也写一下
组件随便命名为ActionList,组件里面把把列表数据及点击事件都基于父组件传递的值而定,由于只是小demo,所以我们传递的menu数据数组只是简单的字符串数组
// 文件路径参考: src > components > ActionList > index.vue
class="menu-item"
v-for="item in menu"
:key="item"
@click="handleClick(item)"
>
{{ item }}
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);
}
}
接着,开始着手写弹框组件
1、弹框组件的显示隐藏用v-show控制,为什么不用v-if ?因为这里我监听了mouseup事件来让弹框隐藏,如果在插槽里的元素绑定事件,比如点击事件,用v-if 的话,点击插槽里的元素时,弹框先消失,插槽里的点击事件就不会生效了。
2、handleOpen事件里我们根据鼠标点击位置定位弹框位置。
// 文件路径参考: src > components > PublicModel > index.vue
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);
}
}
接着,重点来了,书写公用封装函数
我们要在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
更多功能
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
)
}
};
至此,效果如下
最后,我们利用element ui 的 tree 组件结合我们封装的弹框看一下效果
代码:
:data="data"
node-key="id"
:default-expand-all="true"
:expand-on-click-node="false"
show-checkbox
>
{{ node.label }}
class="action"
@click.stop="showMenu($event)"
>
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
)
}
};
效果:
以上就是vue实现点击出现操作弹出框的示例的详细内容,更多关于vue 弹出框的资料请关注脚本之家其它相关文章!
vue 点击弹出文字_vue实现点击出现操作弹出框的示例相关推荐
- 点击按钮显示文字,再次点击隐藏文字
点击按钮显示文字,再次点击隐藏文字 点击按钮显示文字,再次点击按钮隐藏文字 通过if条件判断css样式来做 <!DOCTYPE html> <html lang="en&q ...
- vue 点击弹出文字_vue事件点击穿透解决大法,看这篇文章就够了
作者/sherry 最近在做项目的过程中遇到一个非常奇葩的bug,在h5页面点击一个按钮弹出弹窗,但是这个弹窗刚出现就会自动消失,导致屏幕出现闪动现象,关键这个bug还是偶现的. 经过一番研究才发现是 ...
- vue中怎么点击修改文字_Vue.js点击切换按钮改变内容
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...
- vue可视化拖拽生成工具_vue实现可视化可拖放的自定义表单的示例代码
实现如例子所示的可视化可拖放表单功能.整个页面,分为左中右三栏布局,左栏的部件库的部件(组件)作为key,拖放到中间区域时,往vuex存放数组数据,拖一个就push一个.点击某个组件时,在右栏显示其属 ...
- 录音转文字助手怎么转换出文字,在线录音转文字教程
录音怎么转换成文字,其实非常的简单.在需要将录音转换成文字的时候,不知道如何高效的完成需要的转换,节省下工作时间.那么这里就来和大家一起分享下如何才能够将录音转换成文字,来帮助完成需要的转换. 首先, ...
- php点击弹出文字代码,js实现鼠标点击页面弹出自定义文字效果
本文实例为大家分享了js鼠标点击页面弹出文字的具体代码,供大家参考,具体内容如下 效果: 实现代码: (function(e){ // 点击事件触发生生元素等一系列动作的初始状态 var bombFl ...
- html点击按钮弹出悬浮窗_点击文字或按钮弹出一个DIV窗口(DIV悬浮窗口)
以下是弹出窗口代码: 点击文字弹出一个DIV层窗口代码 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; wi ...
- 点击页面弹出文字动画效果
点击页面弹出文字动画效果 introduce 在博客园查询资料的时候,经常会有一些小的惊喜,比如点击页面,会弹出一些文字,向上浮动,然后消失,显得无聊,我就做了一个demo tool 首推vscode ...
- vue弹出alert_Vue实现移动端 message-box 与 alert 弹框@郝晨光
GIF.gif 前言 最近在做移动端的项目,需要制作移动端的alert弹框和message-box提示信息:之前使用Vue框架的element-ui时,就记得element-ui的弹框,今天深入的研究 ...
最新文章
- TVM Reduction降低算力
- XSL 扩展样式表语言(EXtensible Stylesheet Language)
- C++动态数组再总结
- 五千万美元注资孵化器,ETC能实现绝地反击吗?
- eclipse安装Freemaker IDE插件
- Java删除指定值结点[递归]图解
- sqoop1.99.6 mysql_Alex的Hadoop菜鸟教程:第6课Sqoop2安装教程
- JAVA数组内存分析 面向对象 类和对象 创建对象的内存分析 成员变量 局部变量
- java教程 doc,java 基础教程.doc
- 一年月份大小月口诀_农历大小月卦口诀详解(最新版)
- 蛋白质ph稳定性计算机模拟,蛋白质分子设计.ppt
- # Markdown 学习笔记 ## 标题的使用 1. 一级标题 # 2. 二级标题 ## 3. 三级标题 ### 4. 四级列表#### 5. 五级列表##### 6. 六级列表####
- 现代公司制度的法理学基础 (贾登勋 王勇)
- 工厂不存在导致的采购订单无法修改报错处理
- 基于JAVA汽车租赁系统计算机毕业设计源码+系统+lw文档+部署
- linux 命令last -x,查询linux系统重启记录的last命令
- Kubernetes(k8s)快速入门和环境部署
- pip 查看可安装版本
- 切断电源之后计算机丢失的,电脑断电重启找不到硬盘该咋办?
- cv2.VideoCapture(0)获取USB摄像头失败解决方案