oxy-uni-ui 2.1.1 → 2.1.3

package/components/oxy-video-preview/oxy-video-preview.vue

@@ -1,20 +1,31 @@
 <template>
-  <view :class="`oxy-video-preview ${customClass}`" :style="customStyle" v-if="showPopup" @click="close">
+  <oxy-overlay
+    :show="state.show"
+    :z-index="options.zIndex"
+    :lock-scroll="true"
+    :custom-class="`oxy-video-preview ${props.customClass}`"
+    :custom-style="props.customStyle"
+    @click="close"
+    @enter="handleEnter"
+    @after-leave="handleAfterLeave"
+  >
     <view class="oxy-video-preview__video" @click.stop="">
       <video
         class="oxy-video-preview__video"
-        v-if="previdewVideo.url"
+        v-if="state.visible && previewVideo.url"
         :controls="true"
-        :poster="previdewVideo.poster"
-        :title="previdewVideo.title"
+        :poster="previewVideo.poster"
+        :title="previewVideo.title"
         play-btn-position="center"
         :enableNative="true"
-        :src="previdewVideo.url"
+        :src="previewVideo.url"
         :enable-progress-gesture="false"
       ></video>
     </view>
-    <oxy-icon name="close" :custom-class="`oxy-video-preview__close`" @click="close" />
-  </view>
+    <view class="oxy-video-preview__close" @click.stop="close">
+      <oxy-icon name="close" custom-class="oxy-video-preview__close-icon" />
+    </view>
+  </oxy-overlay>
 </template>
 
 <script lang="ts">
@@ -22,7 +33,9 @@ export default {
   name: 'oxy-video-preview',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }
@@ -30,43 +43,101 @@ export default {
 
 <script lang="ts" setup>
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
-import { nextTick, reactive, ref } from 'vue'
-import { videoPreviewProps, type PreviewVideo, type VideoPreviewExpose } from './types'
-import { useLockScroll } from '../composables/useLockScroll'
-defineProps(videoPreviewProps)
+import OxyOverlay from '../oxy-overlay/oxy-overlay.vue'
+import { computed, inject, reactive, ref, watch } from 'vue'
+import { defaultOptions, getVideoPreviewOptionKey } from './index'
+import { videoPreviewProps, type PreviewVideo, type VideoPreviewExpose, type VideoPreviewOptions } from './types'
+import { isDef, isFunction } from '../common/util'
 
-const showPopup = ref<boolean>(false)
-const previdewVideo = reactive<PreviewVideo>({ url: '', poster: '', title: '' })
+const props = defineProps(videoPreviewProps)
 
-function open(video: PreviewVideo) {
-  showPopup.value = true
-  previdewVideo.url = video.url
-  previdewVideo.poster = video.poster
-  previdewVideo.title = video.title
+const emit = defineEmits<{
+  open: []
+  close: []
+}>()
+
+const state = reactive({
+  show: false,
+  visible: false
+})
+
+const previewVideo = reactive<PreviewVideo>({
+  url: '',
+  poster: '',
+  title: ''
+})
+
+// 获取函数式调用注入的选项
+const videoPreviewOptionKey = getVideoPreviewOptionKey(props.selector)
+const videoPreviewOption = inject(videoPreviewOptionKey, ref<VideoPreviewOptions>(defaultOptions))
+
+const options = computed(() => ({
+  zIndex: isDef(videoPreviewOption.value.zIndex) ? videoPreviewOption.value.zIndex! : props.zIndex,
+  onOpen: videoPreviewOption.value.onOpen || props.onOpen || null,
+  onClose: videoPreviewOption.value.onClose || props.onClose || null
+}))
+
+watch(
+  () => videoPreviewOption.value,
+  (newVal: VideoPreviewOptions) => {
+    reset(newVal)
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => state.show,
+  (newVal, oldVal) => {
+    if (newVal && !oldVal) {
+      emit('open')
+      if (isFunction(options.value.onOpen)) {
+        options.value.onOpen()
+      }
+    } else if (!newVal && oldVal) {
+      emit('close')
+      if (isFunction(options.value.onClose)) {
+        options.value.onClose()
+      }
+    }
+  }
+)
+
+function reset(option: VideoPreviewOptions) {
+  state.show = isDef(option.show) ? option.show! : false
+  if (state.show) {
+    previewVideo.url = option.url
+    previewVideo.poster = option.poster
+    previewVideo.title = option.title
+  }
 }
 
-function close() {
-  showPopup.value = false
-  nextTick(() => {
-    handleClosed()
-  })
+function handleEnter() {
+  state.visible = true
 }
 
-function handleClosed() {
-  previdewVideo.url = ''
-  previdewVideo.poster = ''
-  previdewVideo.title = ''
+function handleAfterLeave() {
+  state.visible = false
+  previewVideo.url = ''
+  previewVideo.poster = ''
+  previewVideo.title = ''
 }
 
-// #ifdef H5
-useLockScroll(() => showPopup.value)
-// #endif
+function open(video: PreviewVideo) {
+  previewVideo.url = video.url
+  previewVideo.poster = video.poster
+  previewVideo.title = video.title
+  state.show = true
+}
+
+function close() {
+  state.show = false
+}
 
 defineExpose<VideoPreviewExpose>({
   open,
   close
 })
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
 @import './index.scss';
 </style>

package/components/oxy-video-preview/types.ts

@@ -1,23 +1,69 @@
 import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
-import { baseProps } from '../common/props'
+import { baseProps, makeNumberProp, makeStringProp } from '../common/props'
 
 export const videoPreviewProps = {
-  ...baseProps
+  ...baseProps,
+
+  /**
+   * 区分视频预览实例标识
+   * 类型：string
+   * 默认值：''
+   */
+  selector: makeStringProp(''),
+  /**
+   * 预览层级
+   * 类型：number
+   * 默认值：1000
+   */
+  zIndex: makeNumberProp(1000),
+  /**
+   * 打开回调（优先级低于 useVideoPreview 传入的 onOpen）
+   * 类型：function
+   * 默认值：-
+   */
+  onOpen: Function as PropType<() => void>,
+  /**
+   * 关闭回调（优先级低于 useVideoPreview 传入的 onClose）
+   * 类型：function
+   * 默认值：-
+   */
+  onClose: Function as PropType<() => void>
 }
 
 export type PreviewVideo = {
-  url: string // 视频资源地址
-  poster?: string // 视频封面
-  title?: string // 视频标题
+  /** 视频资源地址 */
+  url: string
+  /** 视频封面地址，默认不展示封面 */
+  poster?: string
+  /** 视频标题，默认空字符串 */
+  title?: string
+}
+
+export interface VideoPreviewOptions extends PreviewVideo {
+  /** 是否显示预览层，默认 false */
+  show?: boolean
+  /** 预览层级，默认 1000 */
+  zIndex?: number
+  /** 打开时回调 */
+  onOpen?: () => void
+  /** 关闭时回调 */
+  onClose?: () => void
+}
+
+export type VideoPreview = {
+  /** 打开视频预览 */
+  previewVideo: (options: VideoPreviewOptions | PreviewVideo) => void
+  /** 关闭视频预览 */
+  closeVideoPreview: () => void
 }
 
 export type VideoPreviewProps = ExtractPropTypes<typeof videoPreviewProps>
 
 export type VideoPreviewExpose = {
-  // 打开弹框
+  /** 打开预览 */
   open: (video: PreviewVideo) => void
-  // 关闭弹框
+  /** 关闭预览 */
   close: () => void
 }
 
-export type VideoPreviewInstance = ComponentPublicInstance<VideoPreviewExpose, VideoPreviewProps>
+export type VideoPreviewInstance = ComponentPublicInstance<VideoPreviewProps, VideoPreviewExpose>

package/components/oxy-virtual-scroll/index.scss

@@ -30,6 +30,6 @@
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    z-index: 100;
+    z-index: $-virtual-scroll-back-top-z-index;
   }
 }

package/components/oxy-virtual-scroll/oxy-virtual-scroll.vue

@@ -51,7 +51,9 @@ export default {
   name: 'oxy-virtual-scroll',
   options: {
     addGlobalClass: true,
+    // #ifndef MP-TOUTIAO
     virtualHost: true,
+    // #endif
     styleIsolation: 'shared'
   }
 }