zq
3 weeks ago
5 changed files with 360 additions and 60 deletions
@ -0,0 +1,222 @@ |
|||
<template> |
|||
<transition name="fade"> |
|||
<div v-if="visible" :class="['position-message', type, position]" id="qq" :style="positionStyle"> |
|||
<i :class="iconClass"></i> |
|||
<span>{{ message }}</span> |
|||
</div> |
|||
</transition> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: 'info', |
|||
validator: val => ['info', 'success', 'error'].includes(val) |
|||
}, |
|||
position: { |
|||
type: String, |
|||
default: 'top', |
|||
validator: val => ['top', 'bottom'].includes(val) |
|||
}, |
|||
message: String, |
|||
target: null, // 目标元素/DOM选择器 |
|||
offset: { |
|||
type: Number, |
|||
default: 10 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
positionStyle: {} |
|||
} |
|||
}, |
|||
computed: { |
|||
iconClass() { |
|||
return { |
|||
info: 'el-icon-info', |
|||
success: 'el-icon-success', |
|||
error: 'el-icon-error' |
|||
}[this.type] |
|||
} |
|||
}, |
|||
methods: { |
|||
show() { |
|||
this.visible = true |
|||
this.$nextTick(() => { |
|||
this.calculatePosition(); // 确保 DOM 更新后计算 |
|||
}); |
|||
console.log('zoulma???????', this.visible); |
|||
return this // 支持链式调用 |
|||
}, |
|||
hide() { |
|||
this.visible = false |
|||
}, |
|||
calculatePosition() { |
|||
const targetEl = typeof this.target === 'string' |
|||
? document.querySelector(this.target) |
|||
: this.target?.$el || this.target; |
|||
|
|||
if (!targetEl?.getBoundingClientRect) { |
|||
console.error('Invalid target:', this.target); |
|||
return; |
|||
} |
|||
|
|||
const targetRect = targetEl.getBoundingClientRect(); |
|||
const messageWidth = this.$el.offsetWidth; |
|||
const viewportWidth = window.innerWidth; |
|||
|
|||
// 默认居中位置 |
|||
let left = targetRect.left + targetRect.width / 2 - messageWidth / 2; |
|||
// 边界检测 |
|||
if (left < 0) { |
|||
left = targetRect.left; // 左侧贴边 |
|||
} else if (left + messageWidth > viewportWidth) { |
|||
left = viewportWidth - messageWidth - (viewportWidth -targetRect.right); // 右侧贴边 |
|||
} |
|||
|
|||
this.positionStyle = { |
|||
top: `${targetRect.bottom + window.scrollY + this.offset}px`, |
|||
left: `${left}px`, |
|||
right: 'auto', // 清除 right 定位 |
|||
}; |
|||
}, |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style scoped> |
|||
.position-message { |
|||
position: absolute; |
|||
min-width: 100px; |
|||
padding: 8px 12px; |
|||
border-radius: 4px; |
|||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); |
|||
z-index: 9999; |
|||
display: flex; |
|||
align-items: center; |
|||
background: red; |
|||
} |
|||
|
|||
.position-message i { |
|||
margin-right: 6px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.position-message.info { |
|||
background-color: #f4f4f5; |
|||
color: #909399; |
|||
border: 1px solid #e9e9eb; |
|||
} |
|||
|
|||
.position-message.success { |
|||
background-color: #f0f9eb; |
|||
color: #67c23a; |
|||
border: 1px solid #e1f3d8; |
|||
} |
|||
|
|||
.position-message.error { |
|||
background-color: #fef0f0; |
|||
color: #f56c6c; |
|||
border: 1px solid #fde2e2; |
|||
} |
|||
|
|||
.fade-enter-active, |
|||
.fade-leave-active { |
|||
transition: opacity 0.3s; |
|||
} |
|||
|
|||
.fade-enter, |
|||
.fade-leave-to { |
|||
opacity: 0; |
|||
} |
|||
</style> |
|||
|
|||
<!-- <template> |
|||
<transition name="fade"> |
|||
<div |
|||
v-if="visible" |
|||
:class="['position-message', type]" |
|||
:style="positionStyle" |
|||
> |
|||
<i :class="iconClass"></i> |
|||
<span>{{ message }}</span> |
|||
</div> |
|||
</transition> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
computed: { |
|||
iconClass() { |
|||
return { |
|||
info: 'el-icon-info', |
|||
success: 'el-icon-success', |
|||
error: 'el-icon-error' |
|||
}[this.type] |
|||
} |
|||
}, |
|||
props: { |
|||
type: { |
|||
type: String, |
|||
default: 'info', |
|||
validator: val => ['info', 'success', 'error'].includes(val) |
|||
}, |
|||
position: { |
|||
type: String, |
|||
default: 'top', |
|||
validator: val => ['top', 'bottom'].includes(val) |
|||
}, |
|||
message: String, |
|||
target: null, // 目标元素/DOM选择器 |
|||
offset: { |
|||
type: Number, |
|||
default: 5 |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
visible: false, |
|||
positionStyle: {} |
|||
} |
|||
}, |
|||
methods: { |
|||
hide() { |
|||
this.visible = false |
|||
}, |
|||
calculatePosition() { |
|||
const targetEl = typeof this.target === 'string' |
|||
? document.querySelector(this.target) |
|||
: this.target?.$el || this.target; |
|||
|
|||
if (!targetEl?.getBoundingClientRect) { |
|||
console.error('Invalid target:', this.target); |
|||
return; |
|||
} |
|||
|
|||
const targetRect = targetEl.getBoundingClientRect(); |
|||
const messageWidth = this.$el.offsetWidth; |
|||
|
|||
if (this.position === 'bottom') { |
|||
this.positionStyle = { |
|||
top: `${targetRect.bottom + window.scrollY + this.offset}px`, |
|||
left: `${targetRect.left + targetRect.width / 2 - messageWidth / 2}px`, |
|||
}; |
|||
} else { |
|||
// 默认显示在上方（原逻辑） |
|||
this.positionStyle = { |
|||
top: `${targetRect.top + window.scrollY - this.offset - this.$el.offsetHeight}px`, |
|||
left: `${targetRect.left + targetRect.width / 2 - messageWidth / 2}px`, |
|||
}; |
|||
} |
|||
}, |
|||
show() { |
|||
this.visible = true; |
|||
this.$nextTick(this.calculatePosition); |
|||
return this; |
|||
}, |
|||
}, |
|||
}; |
|||
</script> --> |
|||
@ -0,0 +1,33 @@ |
|||
import Vue from 'vue' |
|||
import Tooltip from '@/components/Tooltip.vue' |
|||
|
|||
const PositionMessageConstructor = Vue.extend(Tooltip) |
|||
|
|||
// 自动隐藏功能扩展
|
|||
function showMessage(options) { |
|||
const instance = new PositionMessageConstructor({ |
|||
propsData: options |
|||
}).$mount() |
|||
|
|||
document.body.appendChild(instance.$el) |
|||
|
|||
const showInstance = instance.show() |
|||
|
|||
// 添加自动隐藏
|
|||
if (options.duration !== 0) { |
|||
setTimeout(() => { |
|||
showInstance.hide() |
|||
setTimeout(() => { |
|||
document.body.removeChild(instance.$el) |
|||
}, 300) // 等待动画结束
|
|||
}, options.duration || 2000) |
|||
} |
|||
|
|||
return showInstance |
|||
} |
|||
|
|||
export default { |
|||
install(Vue) { |
|||
Vue.prototype.$positionMessage = showMessage |
|||
} |
|||
} |
|||
Loading…
Reference in new issue