初始上传
This commit is contained in:
8
app/component/view/video/css/design.css
Executable file
8
app/component/view/video/css/design.css
Executable file
@@ -0,0 +1,8 @@
|
||||
.video-box .preview-draggable {padding: 0;}
|
||||
.video-box .video-wrap video{width: 100%;}
|
||||
.video-box .edit-attribute .attr-wrap .restore-wrap .video-add-box .img-block {width: 200px !important;height: 125px !important;margin-bottom: 30px;margin-right: 0;position: relative;}
|
||||
.video-box .edit-attribute .attr-wrap .restore-wrap .video-add-box .img-block > div {line-height: 125px;height: 125px !important;width: 100%;text-align: center;}
|
||||
.video-box .edit-attribute .attr-wrap .restore-wrap .video-add-box .img-block video {width: 100% !important;height: 125px !important;}
|
||||
.video-box .edit-attribute .attr-wrap .restore-wrap .video-add-box .img-block span{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
|
||||
.video-box .video-zhezhao {position: absolute;background: #fff;width: 61%;height: 125px;top: 1px;right: 32px;text-align: center;line-height: 105px;display: none;}
|
||||
.video-box .video-zhezhao span {position: absolute;top: 35px;left: 80px;color: #909399;}
|
||||
32
app/component/view/video/design.html
Executable file
32
app/component/view/video/design.html
Executable file
@@ -0,0 +1,32 @@
|
||||
<nc-component :data="data[index]" class="video-box">
|
||||
|
||||
<!-- 预览 -->
|
||||
<template slot="preview" >
|
||||
<div class="video-wrap">
|
||||
<video :src="changeImgUrl(nc.videoUrl)" controls :poster="changeImgUrl(nc.imageUrl)"
|
||||
:style="{
|
||||
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
|
||||
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
|
||||
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0) }"></video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<video-edit></video-edit>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style"></template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<js></js>
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
69
app/component/view/video/js/design.js
Executable file
69
app/component/view/video/js/design.js
Executable file
@@ -0,0 +1,69 @@
|
||||
var videoHtml = '<div class="video-edit">';
|
||||
|
||||
videoHtml += '<div class="template-edit-title">';
|
||||
videoHtml += '<h3>视频设置</h3>';
|
||||
|
||||
videoHtml += '<div class="layui-form-item">';
|
||||
videoHtml += '<label class="layui-form-label sm">类型</label>';
|
||||
videoHtml += '<div class="layui-input-block">';
|
||||
videoHtml += '<div @click="data.type=\'upload\'" :class="{ \'layui-unselect layui-form-radio\' : true,\'layui-form-radioed\' : (data.type==\'upload\') }">';
|
||||
videoHtml += '<i class="layui-anim layui-icon">{{ data.type==\'upload\' ? \'\' : \'\' }}</i>';
|
||||
videoHtml += '<div>手动上传</div>';
|
||||
videoHtml += '</div>';
|
||||
videoHtml += '<div @click="data.type=\'link\'" :class="{ \'layui-unselect layui-form-radio\' : true,\'layui-form-radioed\' : (data.type==\'link\') }">';
|
||||
videoHtml += '<i class="layui-anim layui-icon">{{ data.type==\'link\' ? \'\' : \'\' }}</i>';
|
||||
videoHtml += '<div>视频链接</div>';
|
||||
videoHtml += '</div>';
|
||||
videoHtml += '</div>';
|
||||
videoHtml += '</div>';
|
||||
|
||||
videoHtml += '<div class="layui-form-item" v-show="data.type == \'link\'">';
|
||||
videoHtml += '<label class="layui-form-label sm">视频链接</label>';
|
||||
videoHtml += '<div class="layui-input-block">';
|
||||
videoHtml += '<input type="text" v-model="data.videoUrl" placeholder="请输入视频链接" class="layui-input">';
|
||||
videoHtml += '</div>';
|
||||
videoHtml += '</div>';
|
||||
|
||||
videoHtml += '<div class="layui-form-item" v-show="data.type == \'upload\'">';
|
||||
videoHtml += '<label class="layui-form-label sm">选择视频</label>';
|
||||
videoHtml += '<video-upload :data="{data : data}"></video-upload>';
|
||||
videoHtml += '</div>';
|
||||
|
||||
videoHtml += '<div class="layui-form-item">';
|
||||
videoHtml += '<label class="layui-form-label sm">封面图</label>';
|
||||
videoHtml += '<img-upload :data="{data : data}"></img-upload>';
|
||||
videoHtml += '</div>';
|
||||
|
||||
videoHtml += '</div>';
|
||||
|
||||
videoHtml += '</div>';
|
||||
|
||||
Vue.component("video-edit",{
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
};
|
||||
},
|
||||
created : function(){
|
||||
if(!this.$parent.data.verify) this.$parent.data.verify = [];
|
||||
this.$parent.data.verify.push(this.verify);//加载验证方法
|
||||
|
||||
this.$parent.data.ignore = ['textColor','componentBgColor','elementBgColor','elementAngle'];//加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
},
|
||||
methods: {
|
||||
verify : function (index) {
|
||||
var res = { code : true, message : "" };
|
||||
if (vue.data[index].videoUrl === '') {
|
||||
res.code = false;
|
||||
res.message = "请上传视频";
|
||||
}
|
||||
if (vue.data[index].imageUrl === '') {
|
||||
res.code = false;
|
||||
res.message = "请上传视频封面";
|
||||
}
|
||||
return res;
|
||||
}
|
||||
},
|
||||
template: videoHtml
|
||||
});
|
||||
Reference in New Issue
Block a user