| | |
| | | </template> |
| | | |
| | | <script> |
| | | import baseVuex from './baseVuex'; |
| | | import baseVuex from "./baseVuex"; |
| | | export default { |
| | | name: 'Popup', |
| | | name: "Popup", |
| | | components: {}, |
| | | mixins: [baseVuex], |
| | | props: [ |
| | | 'title', |
| | | 'left', |
| | | 'top', |
| | | 'maxHeight', |
| | | 'width', |
| | | 'shadow', |
| | | 'closeHidePage', |
| | | 'showBtn', |
| | | 'btnArr', |
| | | "title", |
| | | "left", |
| | | "top", |
| | | "maxHeight", |
| | | "width", |
| | | "shadow", |
| | | "closeHidePage", |
| | | "showBtn", |
| | | "btnArr", |
| | | ], |
| | | data() { |
| | | return { |
| | |
| | | showBox: false, |
| | | // 是否显示内容 |
| | | showContainer: true, |
| | | defaultMaxHeight: '400px', |
| | | defaultMaxHeight: "400px", |
| | | }; |
| | | }, |
| | | directives: { |
| | | // 拖拽 |
| | | drag(el) { |
| | | // 获取弹窗头部 |
| | | let popupTitle = el.querySelector('.popupTitle'); |
| | | let popupTitle = el.querySelector(".popupTitle"); |
| | | // 添加鼠标按下事件 |
| | | popupTitle.onmousedown = function (e) { |
| | | let disx = e.clientX - el.offsetLeft; |
| | |
| | | left > maxleft && (left = maxleft); |
| | | top < 0 && (top = 0); |
| | | top > maxTop && (top = maxTop); |
| | | el.style.left = left + 'px'; |
| | | el.style.top = top + 'px'; |
| | | el.style.left = left + "px"; |
| | | el.style.top = top + "px"; |
| | | }; |
| | | document.onmouseup = function () { |
| | | document.onmousemove = document.onmouseup = null; |
| | |
| | | }, |
| | | }, |
| | | mounted() { |
| | | if (this.maxHeight === 'max') { |
| | | if (this.maxHeight === "max") { |
| | | this.$parent.maxHeight = undefined; |
| | | this.$nextTick(() => { |
| | | this.defaultMaxHeight = this.$el.offsetHeight * 0.92 - 40 + 'px'; |
| | | this.defaultMaxHeight = this.$el.offsetHeight * 0.92 - 40 + "px"; |
| | | }); |
| | | } |
| | | }, |
| | |
| | | // 关闭弹窗 |
| | | close() { |
| | | this.showBox = false; |
| | | this.$emit('close'); |
| | | this.$emit("close"); |
| | | }, |
| | | yes() { |
| | | this.$emit('yes'); |
| | | this.$emit("yes"); |
| | | }, |
| | | cancel() { |
| | | this.$emit('cancel'); |
| | | this.$emit("cancel"); |
| | | }, |
| | | // 打开弹窗 |
| | | open() { |
| | | this.showBox = true; |
| | | this.$emit('open'); |
| | | this.$emit("open"); |
| | | }, |
| | | }, |
| | | }; |
| | |
| | | border: 1px solid rgba(32, 160, 255, 0.6); |
| | | border-radius: 5px; |
| | | pointer-events: all; |
| | | min-width: 323px; |
| | | min-width: 280px; |
| | | color: #fff; |
| | | font-size: 18px; |
| | | font-family: 微软雅黑; |