DvBorderBox.vue
3.19 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
<template>
<div :style="{width:width+'px',height:height+'px'}">
<dv-border-box-1 v-if="element.alias=='dv-border-box-1'" :color="getColor(element)" :backgroundColor="getBackgroundColor(element)" ></dv-border-box-1>
<dv-border-box-2 v-if="element.alias=='dv-border-box-2'" :color="getColor(element)" :backgroundColor="getBackgroundColor(element)"></dv-border-box-2>
<dv-border-box-3 v-if="element.alias=='dv-border-box-3'" :color="getColor(element)" :backgroundColor="getBackgroundColor(element)"></dv-border-box-3>
<dv-border-box-4 v-if="element.alias=='dv-border-box-4'" :color="getColor(element)" :backgroundColor="getBackgroundColor(element)" :reverse="element.options.config.reverse"></dv-border-box-4>
<dv-border-box-5 v-if="element.alias=='dv-border-box-5'" :color="getColor(element)" :backgroundColor="getBackgroundColor(element)" :reverse="element.options.config.reverse"></dv-border-box-5>
<dv-border-box-6 v-if="element.alias=='dv-border-box-6'" :color="getColor(element)" :backgroundColor="getBackgroundColor(element)"></dv-border-box-6>
<dv-border-box-7 v-if="element.alias=='dv-border-box-7'" :color="getColor(element)" :backgroundColor="getBackgroundColor(element)"></dv-border-box-7>
<dv-border-box-8 v-if="element.alias=='dv-border-box-8'" :color="getColor(element)" :backgroundColor="getBackgroundColor(element)" :reverse="element.options.config.reverse" :dur="element.options.config.dur"></dv-border-box-8>
<dv-border-box-9 v-if="element.alias=='dv-border-box-9'" :color="getColor(element)" :backgroundColor="getBackgroundColor(element)"></dv-border-box-9>
<dv-border-box-10 v-if="element.alias=='dv-border-box-10'" :color="getColor(element)" :backgroundColor="getBackgroundColor(element)"></dv-border-box-10>
<dv-border-box-11 v-if="element.alias=='dv-border-box-11'" :color="getColor(element)" :backgroundColor="getBackgroundColor(element)" :title="element.options.config.title" :titleWidth="element.options.config.titleWidth"></dv-border-box-11>
<dv-border-box-12 v-if="element.alias=='dv-border-box-12'" :color="getColor(element)" :backgroundColor="getBackgroundColor(element)"></dv-border-box-12>
<dv-border-box-13 v-if="element.alias=='dv-border-box-13'" :color="getColor(element)" :backgroundColor="getBackgroundColor(element)"></dv-border-box-13>
</div>
</template>
<script>
import VueDraggableResizable from 'vue-draggable-resizable';
import 'vue-draggable-resizable/dist/VueDraggableResizable.css';
export default {
name: "dv-border-box",
components: {
VueDraggableResizable,
},
data() {
return {
}
},
props: {
width: {
type: Number,
default: 0
},
height: {
type: Number,
default: 0
},
element: {
type: Object,
default: {}
}
},
mounted () {
},
methods: {
getColor(ele){
if(ele.options.config.color.apply){
return [ele.options.config.color.first ,ele.options.config.color.second];
}else{
return null;
}
},
getBackgroundColor(ele){
if(ele.options.config.color.background){
return ele.options.config.color.background;
}else{
return 'none';
}
},
}
};
</script>
<style>
</style>