添加配置项

This commit is contained in:
wsgh0202 2025-06-25 23:55:19 +08:00
parent 7450e19854
commit baaf21a93e
No known key found for this signature in database
GPG Key ID: F9658C3FEDCF6979
2 changed files with 31 additions and 4 deletions

View File

@ -86,9 +86,9 @@ export default defineComponent({
<style lang="scss">
.bigger-preview-video-container {
position: fixed;
width: 80%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99999;
}
</style>

View File

@ -8,7 +8,7 @@ import PreviewButton from './PreviewButton.vue'
const logger = useScopedConsole('biggerPreview')
const entry: ComponentEntry = async () => {
const entry: ComponentEntry = async ({ settings }) => {
// 预览容器
let videoContainer = null
@ -56,10 +56,11 @@ const entry: ComponentEntry = async () => {
* @param {Element} movingDom - DOM
*/
const toggleMouseExitHandler = (show: boolean, movingDom: Element) => {
if (show) {
if (settings.options.blockMouseExitHandler && show) {
movingDom.addEventListener('mouseleave', onMouseExitHandler, true)
} else {
movingDom.removeEventListener('mouseleave', onMouseExitHandler, true)
// TODO: 首页无法停止
// 触发mouseleave事件停止预览
const mouseLeaveEvent = new MouseEvent('mouseleave')
movingDom.dispatchEvent(mouseLeaveEvent)
@ -72,9 +73,14 @@ const entry: ComponentEntry = async () => {
* @param {boolean} show -
*/
const toggleVideoControls = (movingDom: Element, show: boolean) => {
// TODO: 控件无法点击
const video = movingDom.querySelector('video')
if (video) {
video.controls = show
if (settings.options.showVideoControls && show) {
video.controls = true
} else {
video.controls = false
}
}
}
@ -118,6 +124,8 @@ const entry: ComponentEntry = async () => {
if (instance.enlarged) {
videoContainer.closePopup()
} else {
videoContainer.$el.style.width = `${settings.options.popupWidth}%`
videoContainer.$off('popup-change', popupChangeHandler)
videoContainer.$on('popup-change', popupChangeHandler)
videoContainer.openPopup(movingDom)
@ -226,4 +234,23 @@ export const component = defineComponentMetadata({
displayName: '预览放大',
entry,
tags: [componentsTags.utils],
options: {
popupWidth: {
displayName: '弹窗宽度(%',
defaultValue: 90,
slider: {
min: 10,
max: 100,
step: 1,
},
},
blockMouseExitHandler: {
displayName: '鼠标移出弹窗不停止预览',
defaultValue: true,
},
showVideoControls: {
displayName: '显示视频控件TODO',
defaultValue: false,
},
},
})