Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
7aa51b03 1 parent b607177a

新增视频控件

Expand all
Inline Side-by-side
Showing 8 changed files with 182 additions and 22 deletions
......@@ -21,7 +21,7 @@
"js-cookie": "^3.0.1",
"lodash": "^4.17.21",
"moment": "^2.29.3",
"mui-player": "^1.6.0",
"mui-player": "^1.7.0",
"typescript": "^4.7.3",
"uuid": "^8.3.2",
"vant": "^4.0.0-rc.8",
......@@ -4189,9 +4189,10 @@
"license": "MIT"
},
"node_modules/mui-player": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mui-player/-/mui-player-1.6.0.tgz",
"integrity": "sha512-FAVzmNayqLl8LUNigBPWiNUOaLOIzPw0Z8JzjXkGyHK31IKJLxn3AQl5TYdTP0GjBcFfg7O8LFET1AjmRFXpuA=="
"version": "1.7.0",
"resolved": "https://mirrors.cloud.tencent.com/npm/mui-player/-/mui-player-1.7.0.tgz",
"integrity": "sha512-BBS+H5N9l+q/Cv+zQFShv328hKc8/qYi2F0QVuDQ9/dUx42t1+KnzB6gb1PnZyXeoWp/KhehYe9axZE+L/2cPQ==",
"license": "GPL-3.0"
},
"node_modules/mutation-observer": {
"version": "1.0.3",
......@@ -9101,9 +9102,9 @@
"dev": true
},
"mui-player": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mui-player/-/mui-player-1.6.0.tgz",
"integrity": "sha512-FAVzmNayqLl8LUNigBPWiNUOaLOIzPw0Z8JzjXkGyHK31IKJLxn3AQl5TYdTP0GjBcFfg7O8LFET1AjmRFXpuA=="
"version": "1.7.0",
"resolved": "https://mirrors.cloud.tencent.com/npm/mui-player/-/mui-player-1.7.0.tgz",
"integrity": "sha512-BBS+H5N9l+q/Cv+zQFShv328hKc8/qYi2F0QVuDQ9/dUx42t1+KnzB6gb1PnZyXeoWp/KhehYe9axZE+L/2cPQ=="
},
"mutation-observer": {
"version": "1.0.3",
......
......@@ -25,7 +25,7 @@
"js-cookie": "^3.0.1",
"lodash": "^4.17.21",
"moment": "^2.29.3",
"mui-player": "^1.6.0",
"mui-player": "^1.7.0",
"typescript": "^4.7.3",
"uuid": "^8.3.2",
"vant": "^4.0.0-rc.8",
......
<!--
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-23 13:42:35
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-22 17:12:52
* @FilePath: /data-table/src/components/VideoField/index.vue
* @Description:
-->
<template>
<div class="video-wrapper">
<div class="label">
{{ item.component_props.label }}
</div>
<div id="mui-player" class="video-div" />
</div>
</template>
<script setup>
/**
* 视频组件通用模块
*/
import "mui-player/dist/mui-player.min.css";
import MuiPlayer from "mui-player";
import { onMounted } from "vue";
import { useEventListener } from "@/composables";
// 视频基础属性
const props = defineProps({
item: Object,
});
// 视频播放事件回调
const emit = defineEmits(["active"]);
let video = null;
onMounted(() => {
const mp = new MuiPlayer({
container: "#mui-player",
// title: props.item.component_props.title,
src: props.item.component_props.src,
poster: props.item.component_props.cover,
autoFit: false,
videoAttribute: [
// 声明启用同层播放, 不让会自动全屏播放
{ attrKey: "webkit-playsinline", attrValue: "webkit-playsinline" },
{ attrKey: "playsinline", attrValue: "playsinline" },
{ attrKey: "x5-video-player-type", attrValue: "h5-page" },
],
});
video = mp.video();
//视频播放事件监听
video.addEventListener("play", function () {
props.item.value = { key: "video", value: "play" };
emit("active", props.item.value);
});
// 配置16:9高度比
const width = document.getElementById("mui-player").clientWidth;
const height = (width * 9) / 16;
document.getElementById("mui-player").height = height;
});
onUnmounted(() => {
video.removeEventListener("play", function () {});
});
</script>
<style lang="less" scoped>
.video-wrapper {
position: relative;
margin: 1rem 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.13);
.video-div {
// border-top-left-radius: 5px;
// border-top-right-radius: 5px;
border-radius: 5px;
}
.video-bar {
color: #713610;
padding: 1rem;
padding-bottom: 0.5rem;
}
}
/deep/.back-button {
display: none !important;
}
</style>
This diff is collapsed. Click to expand it.
<!--
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-05-23 18:00:39
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-02 17:41:38
* @FilePath: /tswj/src/components/MuiVideo/test.vue
* @Description: 视频播放通用组件演示组件
* @Description: type: video 为纯视频播放框，bookDetail为定制模式
-->
<template>
<mui-video
v-for="(item, index) in mock"
:key="index"
:item="item"
type="video"
@on-play="onPlay"
/>
</template>
<script setup>
import mock from '@/components/MuiVideo/mock';
import MuiVideo from '@/components/MuiVideo/index';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import {
Cookies,
$,
_,
axios,
storeToRefs,
mainStore,
Toast,
useTitle,
} from '@/utils/generatePackage.js';
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const onPlay = ({ event, props }) => {
console.warn(event);
console.warn(props);
};
</script>
<style
lang="less"
scoped></style>
......@@ -19,6 +19,7 @@ import IdentityField from '@/components/IdentityField/index.vue'
import NumberField from '@/components/NumberField/index.vue'
import DesField from '@/components/DesField/index.vue'
import DividerField from '@/components/DividerField/index.vue'
import VideoField from '@/components/VideoField/index.vue'
/**
* 生成自定义组件类型
......@@ -39,6 +40,9 @@ import DividerField from '@/components/DividerField/index.vue'
* @type rate_picker 评分选择器 RatePickerField
* @type calendar 日历选择器 CalendarField
* @type id_code 日历选择器 IdentityField
* @type desc 文字描述 DesField
* @type divider 分割线 DividerField
* @type video 视频控件 VideoField
*/
export function createComponentType(data) {
// 判断类型和使用组件
......@@ -119,5 +123,9 @@ export function createComponentType(data) {
item.name = item.key;
item.component = DividerField;
}
if (item.component_props.name === 'video') {
item.name = item.key;
item.component = VideoField;
}
})
}
......
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-21 15:38:24
* @LastEditTime: 2022-11-22 17:40:19
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
......@@ -61,12 +61,14 @@ const formatData = (data) => {
};
Object.assign(component_props, obj);
});
arr.push({
// 绑定组件名称标识
const temp = {
key: field.field_name,
value: "",
component: "",
component: field.component_code,
component_props,
});
};
arr.push(temp);
});
return arr;
};
......@@ -79,14 +81,16 @@ onMounted(async () => {
formData.value = formatData(form_data.field_list);
// mockData.value = [
// {
// key: "phone",
// value: "",
// key: "video",
// value: "false",
// component: "",
// component_props: {
// name: "phone",
// label: "手机号",
// placeholder: "请输入手机号",
// required: true,
// name: "video",
// label: "视频标题",
// src:
// "https://gd-pri.jinshujufiles.com/en/NAGn1D/FjyggcxvTB9HJ6yFBv4i7-HDuW8F_field_20_1653095134.mp4?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:1fnWx_k8UBYJJ_XjunwCp93N7GI=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GanlnZ2N4dlRCOUhKNnlGQnY0aTctSER1VzhGX2ZpZWxkXzIwXzE2NTMwOTUxMzQubXA0KiIsIkUiOjE5Njg2NjQ2Njh9",
// cover:
// "https://gd-pri.jinshujufiles.com/en/NAGn1D/FgYwXBnKzvOcLNoojqrpwYGsppQI_field_74_1653095136.png?token=7NK_Z1IEoKaIY6I9RXzO4b9uQPwuwdvnlGbzHZmF:PLQaeVUgpZ-rgvD37DE0Yq9W5-o=:eyJTIjoiZ2QtcHJpLmppbnNodWp1ZmlsZXMuY29tL2VuL05BR24xRC9GZ1l3WEJuS3p2T2NMTm9vanFycHdZR3NwcFFJX2ZpZWxkXzc0XzE2NTMwOTUxMzYucG5nKiIsIkUiOjE5Njg2NjQ2Njh9",
// },
// },
// ];
......@@ -97,8 +101,15 @@ onMounted(async () => {
const sign = ref(null);
const rate_picker = ref(null);
const video = ref(null);
const onSubmit = async (values) => {
// 不是默认输入值类型的控件，需要重构结构，把相应key/value绑定进去
formData.value.forEach((item) => {
if (item.component_props.name === "video") {
postData.value = _.assign(postData.value, { [item.key]: item.value });
}
});
// 合并自定义字段到提交表单字段
postData.value = _.assign(postData.value, values);
// 检查非表单输入项
......
......@@ -2202,10 +2202,10 @@
"resolved" "https://mirrors.cloud.tencent.com/npm/ms/-/ms-2.1.3.tgz"
"version" "2.1.3"
"mui-player@^1.6.0":
"integrity" "sha512-FAVzmNayqLl8LUNigBPWiNUOaLOIzPw0Z8JzjXkGyHK31IKJLxn3AQl5TYdTP0GjBcFfg7O8LFET1AjmRFXpuA=="
"resolved" "https://registry.npmjs.org/mui-player/-/mui-player-1.6.0.tgz"
"version" "1.6.0"
"mui-player@^1.7.0":
"integrity" "sha512-BBS+H5N9l+q/Cv+zQFShv328hKc8/qYi2F0QVuDQ9/dUx42t1+KnzB6gb1PnZyXeoWp/KhehYe9axZE+L/2cPQ=="
"resolved" "https://mirrors.cloud.tencent.com/npm/mui-player/-/mui-player-1.7.0.tgz"
"version" "1.7.0"
"mutation-observer@^1.0.3":
"integrity" "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA=="
......