sgVideoDialog源码

<template><div :class="$options.name" v-if="visible"><!-- 如果不加v-if="visible"弹窗中使用el-tabs组件就会死循环卡死，这个是elementUI的bug --><el-dialog:append-to-body="true":close-on-click-modal="true":close-on-press-escape="true":custom-class="`${$options.name}-el-dialog`":destroy-on-close="true":fullscreen="false":show-close="true":title="`${form.name || `视频`}`":width="`1000px`":visible.sync="visible"@keyup.ctrl.enter.native="save"style="animation: none"v-loading="loading":element-loading-text="elementLoadingText"><div class="video-container"><!-- 弹窗内容 --><video:autoplay="typeof form.autoplay === 'undefined' ? true : form.autoplay"class="video"controls:loop="form.loop":muted="form.muted"playsinline="true"preloadref="video":src="form.src"webkit-playsinline="true"/></div></el-dialog></div>
</template>
<script>
export default {name: "sgVideoDialog",components: {},data() {return {loading: false, //加载状态elementLoadingText: ``, //加载提示文字visible: false,form: {}, //表单信息disabled: false, //是否只读labelWidth: `120px`,};},props: ["value", "data"],computed: {},watch: {loading(newValue, oldValue) {newValue || (this.elementLoadingText = ``);},value: {handler(d) {this.visible = d;},deep: true,immediate: true,},visible(d) {this.$emit("input", d);// 每次显示的时候，重置一些参数值if (d) {}},data: {handler(newValue, oldValue) {//console.log(`深度监听${this.$options.name}：`, newValue, oldValue);if (Object.keys(newValue || {}).length) {this.form = JSON.parse(JSON.stringify(newValue));this.disabled = this.form.disabled;} else {this.disabled = false; //添加的时候，编辑态this.form = {// 默认字段名: 缺省值,};}},deep: true, //深度监听immediate: true, //立即执行},},created() {},mounted() {},destroyed() {},methods: {valid(d) {if (!this.form.NAME) return this.$message.error(this.$refs.NAME.$attrs.placeholder);},save() {if (this.valid()) return;if (this.form.ID) {// 修改} else {// 添加}let data = {...this.form,sgLog: `前端请求来源：${this.$options.name}添加或修改`,};this.$f.保存数据接口调用方法({...data,cb: (d) => {this.$emit(`save`, this.form);this.cancel();},},this);},cancel() {this.visible = false;},},
};
</script>
<style lang="scss" scoped>
.sgVideoDialog {
}.el-dialog__wrapper {/*遮罩模糊*/backdrop-filter: blur(5px);
}
>>> .sgVideoDialog-el-dialog {border-radius: 30px;box-shadow: 0 10px 50px 0 #00000033;//关闭按钮.el-dialog__headerbtn {.el-dialog__close {background-color: #409eff;border-radius: 88px;box-sizing: border-box;padding: 5px;color: white;}&:hover {.el-dialog__close {background-color: #1f75d5;color: white;}}}.video-container {margin: -20px 0px -10px;border-radius: 20px;overflow: hidden;height: calc(100vh - 180px);display: flex;flex-direction: column;width: 100%;height: 560px;overflow: hidden;/*背景图片*/background-image: url("~@/../static/components/sgVideoPlayer/poster.png");background-repeat: repeat;background-position: center;.video {transition: 0.382s;width: 100%;height: 100%;object-fit: contain;object-position: center;background: transparent;}}
}
</style>

应用

<sgVideoDialog :data="data_sgVideoDialog" v-model="show_sgVideoDialog" />data_sgVideoDialog: {src:`视频路径`, name:`视频标题`,},
show_sgVideoDialog: false,