Blame view

frontend/manage/src/components/portal/datav/DvBorderBox.vue 3.19 KB
8ea9c133   陈威   初始化提交
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>