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-error-color: var(--wot-text-error-color, $-color-danger) !default;
$-text-warning-color: var(--wot-text-warning-color, $-color-warning) !default; $-text-warning-color: var(--wot-text-warning-color, $-color-warning) !default;
$-text-success-color: var(--wot-text-success-color, $-color-success) !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 textSuccessColor?: string
} }
export type videoPreviewThemeVars = {
videoPreviewBg?: string
videoPreviewCloseColor?: string
videoPreviewCloseFontSize?: string
}
export type ConfigProviderThemeVars = baseThemeVars & export type ConfigProviderThemeVars = baseThemeVars &
actionSheetThemeVars & actionSheetThemeVars &
badgeThemeVars & badgeThemeVars &
@ -987,4 +993,5 @@ export type ConfigProviderThemeVars = baseThemeVars &
formItemThemeVars & formItemThemeVars &
backtopThemeVars & backtopThemeVars &
indexBarThemeVars & indexBarThemeVars &
textThemeVars textThemeVars &
videoPreviewThemeVars

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

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

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

@ -1,18 +1,19 @@
<template> <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">
<video <view class="wd-video-preview__video" @click.stop="">
class="wd-video-preview__video" <video
v-if="previdewVideo.url" class="wd-video-preview__video"
:controls="true" v-if="previdewVideo.url"
:poster="previdewVideo.poster" :controls="true"
:title="previdewVideo.title" :poster="previdewVideo.poster"
play-btn-position="center" :title="previdewVideo.title"
:enableNative="true" play-btn-position="center"
:src="previdewVideo.url" :enableNative="true"
:enable-progress-gesture="false" :src="previdewVideo.url"
></video> :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> </view>
</template> </template>
@ -28,7 +29,7 @@ export default {
</script> </script>
<script lang="ts" setup> <script lang="ts" setup>
import { reactive, ref } from 'vue' import { nextTick, reactive, ref } from 'vue'
import { videoPreviewProps, type PreviewVideo, type VideoPreviewExpose } from './types' import { videoPreviewProps, type PreviewVideo, type VideoPreviewExpose } from './types'
defineProps(videoPreviewProps) defineProps(videoPreviewProps)
@ -44,6 +45,9 @@ function open(video: PreviewVideo) {
function close() { function close() {
showPopup.value = false showPopup.value = false
nextTick(() => {
handleClosed()
})
} }
function handleClosed() { function handleClosed() {