102 lines
2.8 KiB
Vue
102 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<n-modal
|
||
|
|
ref="modalRef"
|
||
|
|
v-bind="getModalOptions"
|
||
|
|
:style="`width:${getModalOptions.width}px`"
|
||
|
|
:title="options.title"
|
||
|
|
>
|
||
|
|
<n-card :bordered="false">
|
||
|
|
<slot name="Context" />
|
||
|
|
</n-card>
|
||
|
|
</n-modal>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import { defineComponent, computed, ref } from 'vue'
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'CardDialogModal',
|
||
|
|
props: {
|
||
|
|
options: {
|
||
|
|
type: Object,
|
||
|
|
default: () => {}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
emits: {
|
||
|
|
onConfirm: null,
|
||
|
|
onClose: (value) => {
|
||
|
|
return value
|
||
|
|
}
|
||
|
|
},
|
||
|
|
setup(props, { emit }) {
|
||
|
|
const modalRef = ref(null)
|
||
|
|
const getModalOptions = computed(() => {
|
||
|
|
return {
|
||
|
|
...props.options,
|
||
|
|
width: props.options.width || 600,
|
||
|
|
preset: props.options.preset || 'dialog',
|
||
|
|
showIcon: !!props.options.showIcon
|
||
|
|
}
|
||
|
|
})
|
||
|
|
const handleConfirm = function() {
|
||
|
|
emit('onConfirm')
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
const handleClose = function() {
|
||
|
|
emit('onClose', true)
|
||
|
|
}
|
||
|
|
|
||
|
|
// setTimeout(() => {
|
||
|
|
// const dialogHeaderEl = document.querySelector('.n-card-header')
|
||
|
|
// const dragDom = document.querySelector('.n-modal')
|
||
|
|
// dragDom.style.overflow = 'auto'
|
||
|
|
// dialogHeaderEl.style.cursor = 'move'
|
||
|
|
// const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
|
||
|
|
// const moveDown = (e) => {
|
||
|
|
// // 鼠标按下，计算当前元素距离可视区的距离
|
||
|
|
// const disX = e.clientX - dialogHeaderEl.offsetLeft
|
||
|
|
// const disY = e.clientY - dialogHeaderEl.offsetTop
|
||
|
|
// // 获取到的值带px 正则匹配替换
|
||
|
|
// let styL, styT
|
||
|
|
// // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
|
||
|
|
// if (sty.left.includes('%')) {
|
||
|
|
// styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
|
||
|
|
// styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
|
||
|
|
// } else {
|
||
|
|
// styL = +sty.left.replace(/\px/g, '')
|
||
|
|
// styT = +sty.top.replace(/\px/g, '')
|
||
|
|
// }
|
||
|
|
// document.onmousemove = function(e) {
|
||
|
|
// // 计算移动的距离
|
||
|
|
// const l = e.clientX - disX
|
||
|
|
// const t = e.clientY - disY
|
||
|
|
// // 移动当前元素
|
||
|
|
// dragDom.style.left = `${l + styL}px`
|
||
|
|
// dragDom.style.top = `${t + styT}px`
|
||
|
|
// }
|
||
|
|
// document.onmouseup = function(e) {
|
||
|
|
// document.onmousemove = null
|
||
|
|
// document.onmouseup = null
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// dialogHeaderEl.onmousedown = moveDown
|
||
|
|
// })
|
||
|
|
|
||
|
|
return {
|
||
|
|
modalRef,
|
||
|
|
getModalOptions,
|
||
|
|
handleConfirm,
|
||
|
|
handleClose
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang='scss'>
|
||
|
|
::v-deep(.n-scrollbar-content){
|
||
|
|
&:first-child{
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|