mirror of
https://gitee.com/dromara/go-view.git
synced 2024-12-05 05:09:22 +08:00
fix: 去掉示例资源,默认使用本地资源,增加属性
This commit is contained in:
parent
58033530c1
commit
9bdf42a057
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user