初始化

frontend/packages/BorderComponents/GcBorder7/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <dv-border-box-7
+      :id="'dataV' + config.code"
+      :key="updateKey"
+      :background-color="(config.border.gradientColor&&(config.border.gradientColor[0]||config.border.gradientColor[1]))?`url(#${borderBgId})`:'transparent'"
+      :color="borderColor"
+    >
+      <div
+        v-if="config.border.isTitle"
+        class="element"
+        :style="`
+    color:${color};
+    font-size:${config.border.fontSize}px;
+    line-height:${config.border.titleHeight}px;
+    height:${config.border.titleHeight};
+    padding:0 0 0 20px`"
+      >
+        {{ config.title }}
+      </div>
+    </dv-border-box-7>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+import DvBorderBox7 from '@jiaminghi/data-view/lib/components/borderBox7/src/main.vue'
+import '@jiaminghi/data-view/lib/components/borderBox7/src/main.css'
+export default {
+  name: 'Border7',
+  components: {
+    DvBorderBox7
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      borderBgId: `borderBg${this.config.code}`
+    }
+  },
+  computed: {
+    borderColor () {
+      return this.config.border.borderMainColor ||
+        this.config.border.borderSecondaryColor
+        ? [
+            this.config.border.borderMainColor,
+            this.config.border.borderSecondaryColor
+          ]
+        : null
+    },
+    color () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    }
+  },
+  watch: {
+    updateKey: {
+      handler (val) {
+        this.$nextTick(() => {
+          this.changeColor()
+        })
+      },
+      deep: true
+    },
+    'config.border.gradientColor': {
+      handler (val) {
+        this.changeColor()
+      },
+      immediate: true
+    },
+    'config.border.gradientDirection': {
+      handler (val) {
+        this.changeColor()
+      },
+      immediate: true
+    },
+    'config.border.opacity': {
+      handler (val) {
+        this.changeColor()
+      },
+      immediate: true
+    }
+  },
+  mounted () {
+    this.changeColor()
+  },
+  methods: {
+    changeColor () {
+      if (!this.config.border.opacity) {
+        this.config.border.opacity = 100
+      }
+      if (!this.config.border.gradientColor) return
+      if (document.querySelector(`#dataV${this.config.code}`)) {
+        const borderElement = document.querySelector(`#dataV${this.config.code}`).querySelector('.border') || document.querySelector(`#dataV${this.config.code}`)?.querySelector('.dv-border-svg-container')
+        if (borderElement) {
+          borderElement.style.opacity = (this.config.border.opacity / 100)
+          borderElement.style.background = `linear-gradient(${this.config.border.gradientDirection},${this.config.border.gradientColor[0] ? this.config.border.gradientColor[0] : this.config.border.gradientColor[1]}, ${this.config.border.gradientColor[1] ? this.config.border.gradientColor[1] : this.config.border.gradientColor[0]})`
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bs-design-wrap {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  // padding: 0 16px;
+  background-color: transparent;
+  border-radius: 4px;
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
+  box-sizing: border-box;
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

frontend/packages/BorderComponents/GcBorder7/setting.js

@@ -0,0 +1,107 @@
+
+const type = 'GcBorder7'
+
+const name = '边框7'
+
+const padding =[16,16,16,16]
+
+const isTitle=false
+// 右侧配置项
+const setting = [
+  // 背景色
+
+  {
+    label:'边框主颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderMainColor',
+    optionField: 'borderMainColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '#83bff6',
+  },
+  {
+    label:'边框副颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderSecondaryColor',
+    optionField: 'borderSecondaryColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '#00CED1',
+  },
+  {
+    label:'背景色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'gradual',
+    // 字段
+    field: 'gradientColor',
+    optionField: 'gradientColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: [],
+  },
+  {
+    label: '渐变色方向',
+    // 设置组件类型
+    type: 'select',
+    // 字段
+    field: 'gradientDirection',
+    // 对应options中的字段
+    optionField: 'gradientDirection',
+    // 是否多选
+    multiple: false,
+    value: 'to right',
+    options: [
+      {
+        label: '从左到右',
+        value: 'to right'
+      },
+      {
+        label: '从右到左',
+        value: 'to left'
+      },
+      {
+        label: '从上到下',
+        value: 'to bottom'
+      },
+      {
+        label: '从下到上',
+        value: 'to top'
+      },
+      {
+        label: '从左上到右下',
+        value: 'to bottom right'
+      },
+      {
+        label: '从右上到左下',
+        value: 'to bottom left'
+      },
+      {
+        label: '从左下到右上',
+        value: 'to top right'
+      },
+      {
+        label: '从右下到左上',
+        value: 'to top left'
+      }
+    ]
+  },
+
+
+]
+
+
+
+export default {
+  setting,
+  type,
+  name,
+  isTitle,
+  padding
+}