You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
3.5 KiB
115 lines
3.5 KiB
<template>
|
|
<div class="videoTool">
|
|
<h3 class="toolTit">视频</h3>
|
|
<div class="toolBox">
|
|
<div class="itemBox">
|
|
<label>视频地址</label>
|
|
<Upload :default-file-list="defaultVideoList" :limit-size="20" :multiple="false" :types="['mp4']" :limit="1" @change="(fileList)=>handleUploadChange(fileList,'videoUrl')" />
|
|
<!-- <el-input v-model="activeComponent.componentContent.videoUrl" :placeholder="$t('common.defaulthint')"></el-input>-->
|
|
</div>
|
|
<div class="itemBox">
|
|
<label>覆盖页地址（APP）</label>
|
|
<Upload :default-file-list="defaultImgList" :limit-size="20" :multiple="false" :types="['jpg','jpeg','png','gif']" :limit="1" @change="(fileList)=>handleUploadChange(fileList,'coverImg')" />
|
|
<!-- <el-input v-model="activeComponent.componentContent.videoUrl" :placeholder="$t('common.defaulthint')"></el-input>-->
|
|
</div>
|
|
|
|
<!-- <div class="itemBox">-->
|
|
<!-- <label>文本</label>-->
|
|
<!-- <el-input-->
|
|
<!-- type="textarea"-->
|
|
<!-- :rows="2"-->
|
|
<!-- :placeholder="$t('common.defaulthint')"-->
|
|
<!-- resize="none"-->
|
|
<!-- v-model="textInfo">-->
|
|
<!-- </el-input>-->
|
|
<!-- </div>-->
|
|
<div class="itemBox">
|
|
<label>标题</label>
|
|
<el-input v-model="activeComponent.componentContent.title" maxlength="20" :placeholder="$t('common.defaulthint')"></el-input>
|
|
</div>
|
|
<div class="itemBox">
|
|
<label>正文</label>
|
|
<quill-editor
|
|
v-model="activeComponent.componentContent.mainBody"
|
|
ref="myQuillEditor"
|
|
:options="editorOption"
|
|
@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
|
|
@change="onEditorChange($event)">
|
|
</quill-editor>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { quillEditor } from 'vue-quill-editor'
|
|
import Upload from '@@/components/Upload'
|
|
import {toolMixin} from '@@/config/mixin'
|
|
export default {
|
|
mixins: [toolMixin],
|
|
name: 'videoTool',
|
|
components: {
|
|
quillEditor,
|
|
Upload
|
|
},
|
|
mounted() {
|
|
this.activeComponent.componentContent.videoUrl && this.defaultVideoList.push(this.activeComponent.componentContent.videoUrl)
|
|
this.activeComponent.componentContent.coverImg && this.defaultImgList.push(this.activeComponent.componentContent.coverImg)
|
|
},
|
|
data () {
|
|
return {
|
|
defaultVideoList:[],
|
|
defaultImgList:[],
|
|
editorOption: {
|
|
placeholder: '请输入',
|
|
modules: {
|
|
toolbar: [
|
|
['bold', 'italic', 'link'] // toggled buttons
|
|
]
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onEditorBlur () { // 失去焦点事件
|
|
},
|
|
onEditorFocus () { // 获得焦点事件
|
|
},
|
|
onEditorChange () { // 内容改变事件
|
|
console.log(this.mainBody)
|
|
},
|
|
handleUploadChange(fileList,field){
|
|
this.activeComponent.componentContent[field] = fileList.length>0 ? fileList[0].url :''
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.videoTool {
|
|
padding: 20px 20px 0 20px;
|
|
h3 {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
height: 35px;
|
|
line-height: 35px;
|
|
color: #333333;
|
|
margin-bottom: 20px;
|
|
}
|
|
.toolBox {
|
|
padding-bottom: 10px;
|
|
.itemBox {
|
|
label {
|
|
font-size: 14px;
|
|
color: #666666;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
margin-bottom: 15px;
|
|
}
|
|
}
|
|
::v-deep .ql-container {
|
|
height: 200px;
|
|
}
|
|
}
|
|
</style>
|