fix: 去掉示例资源,默认使用本地资源,增加属性

This commit is contained in:
tnt group 2022-09-19 17:43:15 +08:00
parent 58033530c1
commit 9bdf42a057
3 changed files with 50 additions and 37 deletions

View File

@ -2,23 +2,21 @@ import { PublicConfigClass } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d' import { CreateComponentType } from '@/packages/index.d'
import { VideoConfig } from './index' import { VideoConfig } from './index'
import cloneDeep from 'lodash/cloneDeep' import cloneDeep from 'lodash/cloneDeep'
import video from '@/assets/videos/earth.mp4'
export const VideoList = [
{ label: '数字楼宇', value: 'https://video.699pic.com/videos/76/09/36/b_D4DKnb48qdCI1631760936.mp4' },
{ label: '旋转魔方', value: 'https://video.699pic.com/videos/90/02/69/b_YjJAJZMT6vRK1554900269.mp4' },
{ label: '旋转地球', value: 'https://video.699pic.com/videos/32/13/12/b_7dng21IHECP51553321312.mp4' },
{ label: '声音示例', value: 'https://video.699pic.com/videos/80/62/39/a_qmbxMqNvK9jr1583806239.mp4' }
]
export const option = { export const option = {
// 视频路径 // 视频路径
dataset: '', dataset: video,
// 循环播放 // 循环播放
loop: true, loop: true,
// 自动播放 // 自动播放
autoplay: true, autoplay: true,
// 静音 // 静音
muted: true muted: true,
// 适应方式
fit: 'contain',
// 圆角
borderRadius: 10
} }
export default class Config extends PublicConfigClass implements CreateComponentType { export default class Config extends PublicConfigClass implements CreateComponentType {

View File

@ -3,27 +3,9 @@
<template> <template>
<collapse-item name="视频" expanded> <collapse-item name="视频" expanded>
<setting-item-box name="源" alone> <setting-item-box name="源" alone>
<setting-item name="自定义视频源"> <setting-item name="自定义源">
<n-input v-model:value="optionData.dataset" size="small"></n-input> <n-input v-model:value="optionData.dataset" size="small"></n-input>
</setting-item> </setting-item>
<setting-item name="使用内置视频">
<n-select
v-model:value="optionData.dataset"
size="small"
placeholder="自定义或选择内置视频"
clearable
:options="VideoList"
></n-select>
</setting-item>
<!-- <setting-item>
<n-upload
action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
accept="video/*"
@finish="finishHandleFinish"
>
<n-button size="small">本地上传</n-button>
</n-upload>
</setting-item> -->
</setting-item-box> </setting-item-box>
<setting-item-box name="控制"> <setting-item-box name="控制">
@ -37,24 +19,56 @@
<n-checkbox v-model:checked="optionData.muted" size="small">静音</n-checkbox> <n-checkbox v-model:checked="optionData.muted" size="small">静音</n-checkbox>
</setting-item> </setting-item>
</setting-item-box> </setting-item-box>
<setting-item-box name="样式">
<setting-item name="类型">
<n-select v-model:value="optionData.fit" size="small" :options="fitList"></n-select>
</setting-item>
<setting-item name="圆角">
<n-input-number
v-model:value="optionData.borderRadius"
size="small"
:min="0"
placeholder="圆角"
></n-input-number>
</setting-item>
</setting-item-box>
</collapse-item> </collapse-item>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { PropType } from 'vue' import { PropType } from 'vue'
import { option, VideoList } from './config' import { option } from './config'
import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting' import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
// eslint-disable-next-line no-unused-vars //
const props = defineProps({ const fitList = [
{
value: 'fill',
label: 'fill'
},
{
value: 'contain',
label: 'contain'
},
{
value: 'cover',
label: 'cover'
},
{
value: 'scale-down',
label: 'scale-down'
},
{
value: 'none',
label: 'none'
}
]
defineProps({
optionData: { optionData: {
type: Object as PropType<typeof option>, type: Object as PropType<typeof option>,
required: true required: true
} }
}) })
// eslint-disable-next-line no-unused-vars
const finishHandleFinish = () => {
// console.log()
}
</script> </script>

View File

@ -64,7 +64,8 @@ watch(
<style lang="scss" scoped> <style lang="scss" scoped>
@include go('video') { @include go('video') {
display: block; display: block;
object-fit: cover;
mix-blend-mode: screen; mix-blend-mode: screen;
object-fit: v-bind('option.fit');
border-radius: v-bind('option.borderRadius');
} }
</style> </style>