admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-07 01:28:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: ♻️ 重构VideoPreview视频预览组件

Browse Source
This commit is contained in:
xuqingkai 2024-07-16 13:18:17 +08:00
parent 0dbad81748
commit ae91c2877d
4 changed files with 45 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
View File

@ -886,3 +886,8 @@ $-text-primary-color: var(--wot-text-primary-color, $-color-theme) !default;
$-text-error-color: var(--wot-text-error-color, $-color-danger) !default;
$-text-warning-color: var(--wot-text-warning-color, $-color-warning) !default;
$-text-success-color: var(--wot-text-success-color, $-color-success) !default;
/* video-preview */
$-video-preview-bg: var(--wot-video-preview-bg, rgba(0, 0, 0, 0.8)) !default; // 背景色
$-video-preview-close-color: var(--wot-video-preview-close-color, #fff) !default; // 图标颜色
$-video-preview-close-font-size: var(--wot-video-preview-close-font-size, 20px) !default; // 图标大小

9
src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts
View File

@ -929,6 +929,12 @@ export type textThemeVars = {
textSuccessColor?: string
}
export type videoPreviewThemeVars = {
videoPreviewBg?: string
videoPreviewCloseColor?: string
videoPreviewCloseFontSize?: string
}
export type ConfigProviderThemeVars = baseThemeVars &
actionSheetThemeVars &
badgeThemeVars &
@ -987,4 +993,5 @@ export type ConfigProviderThemeVars = baseThemeVars &
formItemThemeVars &
backtopThemeVars &
indexBarThemeVars &
textThemeVars
textThemeVars &
videoPreviewThemeVars

16
src/uni_modules/wot-design-uni/components/wd-video-preview/index.scss
View File

@ -5,14 +5,14 @@
position: fixed;
top: 0;
left: 0;
z-index: 101;
z-index: 999;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #000;
background: $-video-preview-bg;
@include e(video) {
width: 100%;
@ -21,8 +21,14 @@
}
@include edeep(close) {
margin-top: 64px;
padding: 6px;
color: $-curtain-content-close-color;
position: absolute;
box-sizing: border-box;
top: 0px;
right: 0px;
padding: 12px;
text-align: center;
cursor: pointer;
font-size: $-video-preview-close-font-size;
color: $-video-preview-close-color;
}
}

12
src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue
View File

@ -1,5 +1,6 @@
<template>
<view :class="`wd-video-preview ${customClass}`" :style="customStyle" v-if="showPopup">
<view :class="`wd-video-preview ${customClass}`" :style="customStyle" v-if="showPopup" @click="close">
<view class="wd-video-preview__video" @click.stop="">
<video
class="wd-video-preview__video"
v-if="previdewVideo.url"
@ -11,8 +12,8 @@
:src="previdewVideo.url"
:enable-progress-gesture="false"
></video>
<wd-icon name="close-circle" size="48px" :custom-class="`wd-video-preview__close`" @click="close" />
</view>
<wd-icon name="close" :custom-class="`wd-video-preview__close`" @click="close" />
</view>
</template>
@ -28,7 +29,7 @@ export default {
</script>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { nextTick, reactive, ref } from 'vue'
import { videoPreviewProps, type PreviewVideo, type VideoPreviewExpose } from './types'
defineProps(videoPreviewProps)
@ -44,6 +45,9 @@ function open(video: PreviewVideo) {
function close() {
showPopup.value = false
nextTick(() => {
handleClosed()
})
}
function handleClosed() {