videoTool.vue
3.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<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="请输入内容"></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="请输入内容"></el-input>-->
</div>
<!-- <div class="itemBox">-->
<!-- <label>文本</label>-->
<!-- <el-input-->
<!-- type="textarea"-->
<!-- :rows="2"-->
<!-- placeholder="请输入内容"-->
<!-- resize="none"-->
<!-- v-model="textInfo">-->
<!-- </el-input>-->
<!-- </div>-->
<div class="itemBox">
<label>标题</label>
<el-input v-model="activeComponent.componentContent.title" placeholder="请输入内容"></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>