封装头部可拖拽的弹出框

封装组件：

<template><div class="base-popup" v-if="isVisible" v-draggable :style="styleConfig"><div class="popup-header"><i></i><span class="popup-title">{{ popupTitle }}</span><span @click="closePopup" class="close-btn"></span></div><div class="popup-content"><slot name="popup_body"></slot></div></div>
</template><script>
export default {props: {//标题popupTitle: "",//样式设置styleConfig: {default: function () {return {width: "717px",top: "12vh",};},},isVisible: {default: false,},closePopup: {type: Function,},},data() {return {curData: {},};},methods: {},
};
</script><style lang="less" scoped>
.base-popup {position: absolute;z-index: 1;left: 30%;//文字不可被选中-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;.popup-header {width: 100%;height: 33px;display: flex;box-sizing: border-box;margin-bottom: 3px;background: url("../../assets/img/home/popup-header.png") no-repeatcenter/100% 100%;cursor: move;i {display: inline-block;width: 32px;height: 33px;margin-right: 10px;background: url("../../assets/img/home/popup-header-icon.png")no-repeat center/100%;margin-top: 1px;}.popup-title {font-size: 18px;line-height: 33px;color: #fff;font-family: 时尚中黑简体;}.close-btn {position: absolute;right: 15px;top: 7px;cursor: pointer;width: 20px;height: 20px;background: url("../../assets/img/home/popup-close.png") no-repeatcenter/100%;}}.popup-content {padding: 12px;height: calc(100% - 36px);min-height: 300px;background-image: linear-gradient(to right, #004554, #001d2d);border: 1px solid #176573;}
}
</style>

定义v-draggable指令：

import Vue from "vue";Vue.directive("draggable", {inserted: function(el) {// el.style.cursor = "move";el.onmousedown = function(e) {if(e.path[0].className ==='popup-header' || e.path[0].className ==='popup-title'){let disx = e.pageX - el.offsetLeft;let disy = e.pageY - el.offsetTop;document.onmousemove = function(e) {let x = e.pageX - disx;let y = e.pageY - disy;let maxX =document.body.clientWidth -parseInt(window.getComputedStyle(el).width);let maxY =document.body.clientHeight -parseInt(window.getComputedStyle(el).height);if (x < 0) {x = 0;} else if (maxX > 0 && x > maxX) {x = maxX;}if (y < 0) {y = 0;} else if (maxY > 0 && y > maxY) {y = maxY;}el.style.left = x + "px";el.style.top = y + "px";};document.onmouseup = function() {document.onmousemove = document.onmouseup = null;};}};}
});

封装头部可拖拽的弹出框相关推荐

可拖拽的弹出窗口Js插件
下载地址 jsWindow是一个功能丰富的弹出窗口js插件,创建可拖放,可调整大小的弹出窗口.提醒.确认对话框和消息框在屏幕上. dd:
2022-05-10 实现一个可拖拽的弹出登录框
文章目录要求思路完整代码坐标说明(复习) 效果: 重点代码要求点击文字弹出一个带有样式的登录框按下登录框的标题区域,可以实现拖动思路先计算鼠标的移动距离=移动的坐标-按下的坐标再计算 ...
使用Fancybox实现iframe弹出框
前景公司要求封装一个js来实现一个弹出框的广告,以便外部的平台来调用.正好js~fancybox为我们提供了iframe功能.我们可以直接使用,不用自己去实现. fancybox介绍官网地址: ...
弹出框的鼠标拖拽事件
几个与定位有关的概念: js: clientX/clientY属性:获得事件发生时鼠标指针在视口中的水平和垂直坐标. screenX/screenY属性:获取鼠标事件发生时鼠标光标相对于整个电脑屏幕的 ...
Vue 实现弹框自由拖拽（不出可视范围、解决快速拖动问题）
Vue 实现弹框自由拖拽(不出可视范围.解决快速拖动问题) 由于页面中弹框很多,往往会挡住想要查看的内容.从而,有了自由移动拖拽弹框的需求:但在使用的过程中发现,一开始编写的drag.js文件会移出可 ...
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 P ...
React封装一个组件弹出框
目录前言代码简要引用效果前言我是歌谣放弃很容易但是坚持一定很酷为了保证react代码的一个简洁性最近开始封装组件, 直接上代码因为都很简单的模式这边直接进行讲解代码 //取 ...
纯js封装一个多功能弹出框
不借助其它的css代码和图片资源,可直接调用. 原创内容,请勿转载. 注意,不要直接复制文章里的封装代码,因为编辑器的原因,无论怎么编辑,它还是给修改了代码.文末提供了封装代码的下载地址(无需积分) ...
html alter自动弹出,javascript封装alert()弹出框
由于各个浏览器之间的差异,弹出框不一样,这有影响页面的布局,所以自己就用原声js封装了一个alert弹出框,希望对有需求的有所帮助... ` alert function ok() { alert(' ...

封装头部可拖拽的弹出框

封装头部可拖拽的弹出框相关推荐

最新文章

热门文章