feat:边框组件开发

data-room-ui/packages/BigScreenDesign/RightSetting/BorderSetting.vue

@@ -72,7 +72,6 @@
       />
     </el-form-item>
     <div v-if="config.type">
-      <div v-if="bigTitle&&config.type!='GcBorder11'">
          <el-form-item
           :label-width="labelWidth"
           label="是否显示标题"
@@ -85,7 +84,7 @@
             />
         </el-form-item>
         <el-form-item
-          v-if="config.isTitle"
+          v-if="config.isTitle&&config.type!='GcBorder11'"
           :label-width="labelWidth"
           label="标题高度"
         >
@@ -97,7 +96,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-if="config.isTitle"
+          v-if="config.isTitle&&config.type!='GcBorder11'"
           :label-width="labelWidth"
           label="标题字体大小"
         >
@@ -109,7 +108,7 @@
           />
         </el-form-item>
         <el-form-item
-          v-if="config.isTitle"
+          v-if="config.isTitle&&config.type!='GcBorder11'"
           :label-width="labelWidth"
           label="标题颜色"
         >
@@ -120,9 +119,8 @@
               show-alpha
             />
         </el-form-item>
-      </div>
     <div
-      v-for="(setting, settingIndex) in list"
+      v-for="(setting, settingIndex) in list.setting"
       :key="settingIndex+1"
     >
       <el-form-item
@@ -270,6 +268,28 @@ export default {
       default: '100px'
     }
   },
+  watch:{
+    'config.type':{
+      handler () {
+         this.config.isTitle=this.list.isTitle
+        plotList[Symbol.iterator]=function*(){
+        let keys=Object.keys(plotList)
+        for(let k of keys){
+          yield [k,plotList[k]]
+        }
+      }
+      for(let [key,value] of plotList){
+        if(value.type==this.config.type){
+          value.setting.forEach((item)=>{
+            if(item.value){
+              this.config[item.field]=item.value? item.value:this.config[item.field]
+            }
+          })
+        }
+      }
+      },immediate: true
+    },
+  },
   computed:{
     title:{
       set(){
@@ -298,23 +318,17 @@ export default {
           yield [k,plotList[k]]
         }
       }
-      let arr=[]
+      let obj={}
       for(let [key,value] of plotList){
         if(value.type==this.config.type){
-          arr=value.setting
+          obj={setting:value.setting,isTitle:value.isTitle}
-          value.setting.forEach((item)=>{
-            if(item.value){
-              this.config[item.field]=this.config[item.field]||item.value
         }
-          })
       }
-      }
+      return obj
-      return arr
     }
   },
   data () {
     return {
-
     }
   },
   mounted () {

data-room-ui/packages/BorderComponents/GcBorder1/setting.js

@@ -3,6 +3,8 @@ const type = 'GcBorder1'
 
 const name = '边框一'
 
+const isTitle=false
+
 // 右侧配置项
 const setting = [
   // 背景色
@@ -123,5 +125,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/GcBorder10/setting.js

@@ -2,6 +2,8 @@
 const type = 'GcBorder10'
 
 const name = '边框十'
+
+const isTitle=false
 // 右侧配置项
 const setting = [
   // 背景色
@@ -122,5 +124,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/GcBorder11/index.vue

@@ -8,7 +8,7 @@
       :background-color="(config.border.gradientColor0||config.border.gradientColor1)?`url(#${borderBgId})`:'transparent'"
       :color='borderColor'
       :key="updateKey"
-      :title="config.border.title"
+      :title="config.border.isTitle?config.title:''"
       :title-width="config.border.titleWidth"
     >
     <!-- <div class="element"

data-room-ui/packages/BorderComponents/GcBorder11/setting.js

@@ -2,21 +2,11 @@
 const type = 'GcBorder11'
 
 const name = '边框十一'
+
+const isTitle=true
 // 右侧配置项
 const setting = [
   // 背景色
-  {
-    label:'边框标题',
-    // 设置组件类型， select / input / colorPicker
-    type: 'input',
-    // 字段
-    field: 'title',
-    optionField: 'title', // 对应options中的字段
-    // 是否多选
-    multiple: false,
-    // 绑定的值
-    value: '',
-  },
   {
     label:'标题区域宽度',
     // 设置组件类型， select / input / colorPicker
@@ -144,5 +134,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/GcBorder12/setting.js

@@ -3,6 +3,8 @@ const type = 'GcBorder12'
 
 const name = '边框十二'
 
+const isTitle=false
+
 // 右侧配置项
 const setting = [
   // 背景色
@@ -123,5 +125,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/GcBorder13/setting.js

@@ -2,6 +2,8 @@
 const type = 'GcBorder13'
 
 const name = '边框十三'
+
+const isTitle=false
 // 右侧配置项
 const setting = [
   // 背景色
@@ -122,5 +124,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/GcBorder14/index.vue

@@ -55,16 +55,16 @@ export default {
         : '#fff'
     },
      color () {
-      return this.config.border.borderColor || 'rgba(135, 136, 142, 1)'
+      return this.config.border.borderColor || ''
     },
     width () {
       return this.config.border.borderWidth || 2
     },
     gradientColor0 () {
-      return this.config.border.gradientColor0 || 'rgba(131, 191, 246, 1)'
+      return this.config.border.gradientColor0 ||this.config.border.gradientColor1|| 'transparent'
     },
     gradientColor1 () {
-      return this.config.border.gradientColor1 || 'rgba(24, 141, 240, 1)'
+      return this.config.border.gradientColor1 ||this.config.border.gradientColor0|| 'transparent'
     },
     radiusLeftTop () {
       return this.config.border.radiusLeftTop || 2
@@ -88,7 +88,6 @@ export default {
   watch: {
   },
   mounted () {
-    console.log( this.config.border)
   },
   methods: {
   }

data-room-ui/packages/BorderComponents/GcBorder14/setting.js

@@ -2,6 +2,8 @@
 const type = 'GcBorder14'
 
 const name = '边框十四'
+
+const isTitle=false
 // 右侧配置项
 const setting = [
   // 背景色
@@ -16,7 +18,7 @@ const setting = [
     // 是否多选
     multiple: false,
     // 绑定的值
-    value: 'rgba(135, 136, 142, 1)',
+    value: '',
   },
   {
     label:'边框线宽度',
@@ -40,7 +42,7 @@ const setting = [
     // 是否多选
     multiple: false,
     // 绑定的值
-    value: 'rgba(131, 191, 246, 1)',
+    value: '#83bff6',
   },
   {
     label:'背景色二',
@@ -52,7 +54,7 @@ const setting = [
     // 是否多选
     multiple: false,
     // 绑定的值
-    value: 'rgba(24, 141, 240, 1)',
+    value: '#188df0',
   },
   {
     label: '渐变色方向',
@@ -173,5 +175,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/GcBorder15/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    style="width: 100%;height: 100%"
+    class="bs-design-wrap"
+  >
+    <div
+      :key="updateKey"
+      class="custom-border-box"
+      :style="`
+        border-top-left-radius: ${radiusLeftTop}px;
+        border-top-right-radius: ${radiusRightTop}px;
+        border-bottom-left-radius: ${radiusLeftBottom}px;
+        border-bottom-right-radius: ${radiusRightBottom}px;
+        border: ${width}px solid ${color};
+        background-image: linear-gradient(${gradientDirection}, ${
+          gradientColor0 ? gradientColor0 : gradientColor1
+        } , ${gradientColor1 ? gradientColor1 : gradientColor0})
+      `"
+    >
+    <div class="element"
+      v-if="config.border.isTitle"
+      :style="`
+      line-height:${config.border.titleHeight}px;
+      height:${config.border.titleHeight};
+      border-bottom:3px solid ${fontBottomColor};
+      background-image: linear-gradient(${gradientDirection}, ${
+          fontGradientColor0 ? fontGradientColor0 : fontGradientColor1
+        } , ${fontGradientColor1 ? fontGradientColor1 : fontGradientColor0})
+      `"
+      >
+      <span
+      :style="`
+      width:100%;
+      padding:0 0 0 20px;
+      color:${fontColor};
+      font-size:${config.border.fontSize}px;
+      border-left:${fontLeftWidth}px solid ${fontLeftColor};
+      `"
+      >
+        {{config.title}}
+      </span>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { refreshComponentMixin } from 'data-room-ui/js/mixins/refreshComponent'
+export default {
+  name: 'Border14',
+  components: {
+  },
+  mixins: [refreshComponentMixin],
+  props: {
+    // 卡片的属性
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+    }
+  },
+  computed: {
+     fontColor () {
+      return this.config.border.fontColor ? this.config.border.fontColor
+        : '#fff'
+    },
+     color () {
+      return this.config.border.borderColor || ''
+    },
+    width () {
+      return this.config.border.borderWidth!=null?this.config.border.borderWidth : 2
+    },
+    gradientColor0 () {
+      return this.config.border.gradientColor0 ||this.config.border.gradientColor1|| 'transparent'
+    },
+    gradientColor1 () {
+      return this.config.border.gradientColor1 ||this.config.border.gradientColor0|| 'transparent'
+    },
+    fontGradientColor0 () {
+      return this.config.border.fontGradientColor0 ||this.config.border.fontGradientColor1|| 'transparent'
+    },
+    fontGradientColor1 () {
+      return this.config.border.fontGradientColor1 ||this.config.border.fontGradientColor0|| 'transparent'
+    },
+    fontLeftColor(){
+      return this.config.border.fontLeftColor || ''
+    },
+    fontBottomColor(){
+      return this.config.border.fontBottomColor || ''
+    },
+    fontLeftWidth(){
+      return this.config.border.fontLeftWidth!=null?this.config.border.fontLeftWidth : 6
+    },
+    radiusLeftTop () {
+      return this.config.border.radiusLeftTop || 2
+    },
+    radiusRightTop () {
+      return this.config.border.radiusRightTop || 2
+    },
+    radiusLeftBottom () {
+      return this.config.border.radiusLeftBottom || 2
+    },
+    radiusRightBottom () {
+      return this.config.border.radiusRightBottom || 2
+    },
+    gradientDirection () {
+      return this.config.border.gradientDirection || 'to right'
+    },
+  },
+  watch: {
+  },
+  mounted () {
+    console.log( this.config.border)
+  },
+  methods: {
+  }
+}
+</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 0px 0px !important;
+  box-sizing: border-box;
+  .custom-border-box {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+/*滚动条样式*/
+::v-deep ::-webkit-scrollbar {
+  width: 4px;
+  border-radius: 4px;
+  height: 4px;
+}
+
+::v-deep ::-webkit-scrollbar-thumb {
+  background: #dddddd !important;
+  border-radius: 10px;
+}
+</style>

data-room-ui/packages/BorderComponents/GcBorder15/setting.js

@@ -0,0 +1,227 @@
+
+const type = 'GcBorder15'
+
+const name = '边框十五'
+
+const isTitle=true
+// 右侧配置项
+const setting = [
+  // 背景色
+  {
+    label:'标题区域背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontGradientColor0',
+    optionField: 'fontGradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'标题区域背景色二',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontGradientColor1',
+    optionField: 'fontGradientColor1', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'标题左侧颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontLeftColor',
+    optionField: 'fontLeftColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '#007aff',
+  },
+  {
+    label:'标题左侧宽度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'fontLeftWidth',
+    optionField: 'fontLeftWidth', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 6,
+  },
+  {
+    label:'标题底部分割线颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'fontBottomColor',
+    optionField: 'fontBottomColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '#007aff',
+  },
+  {
+    label:'外边框线颜色',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'borderColor',
+    optionField: 'borderColor', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'外边框线宽度',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'borderWidth',
+    optionField: 'borderWidth', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 1,
+  },
+  {
+    label:'背景色一',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor0',
+    optionField: 'gradientColor0', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: '',
+  },
+  {
+    label:'背景色二',
+    // 设置组件类型， select / input / colorPicker
+    type: 'colorPicker',
+    // 字段
+    field: 'gradientColor1',
+    optionField: 'gradientColor1', // 对应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'
+      }
+    ]
+  },
+  {
+    label:'左上圆角值',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'radiusLeftTop',
+    optionField: 'radiusLeftTop', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 2,
+  },
+  {
+    label:'左下圆角值',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'radiusLeftBottom',
+    optionField: 'radiusLeftBottom', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 2,
+  },
+  {
+    label:'右上圆角值',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'radiusRightTop',
+    optionField: 'radiusRightTop', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 2,
+  },
+  {
+    label:'右下圆角值',
+    // 设置组件类型， select / input / colorPicker
+    type: 'inputNumber',
+    // 字段
+    field: 'radiusRightBottom',
+    optionField: 'radiusRightBottom', // 对应options中的字段
+    // 是否多选
+    multiple: false,
+    // 绑定的值
+    value: 2,
+  },
+
+
+
+
+
+]
+
+
+
+
+export default {
+  setting,
+  type,
+  name,
+  isTitle
+}

data-room-ui/packages/BorderComponents/GcBorder2/setting.js

@@ -2,6 +2,8 @@
 const type = 'GcBorder2'
 
 const name = '边框二'
+
+const isTitle=false
 // 右侧配置项
 const setting = [
 
@@ -121,5 +123,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/GcBorder3/setting.js

@@ -2,6 +2,8 @@
 const type = 'GcBorder3'
 
 const name = '边框三'
+
+const isTitle=false
 // 右侧配置项
 const setting = [
   // 背景色
@@ -122,5 +124,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/GcBorder4/setting.js

@@ -1,6 +1,8 @@
 
 const type = 'GcBorder4'
 
+const isTitle=false
+
 const name='边框四'
 // 右侧配置项
 const setting = [
@@ -134,5 +136,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/GcBorder5/setting.js

@@ -2,6 +2,8 @@
 const type = 'GcBorder5'
 
 const name = '边框五'
+
+const isTitle=false
 // 右侧配置项
 const setting = [
   // 背景色
@@ -133,5 +135,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/GcBorder6/setting.js

@@ -2,6 +2,8 @@
 const type = 'GcBorder6'
 
 const name = '边框六'
+
+const isTitle=false
 // 右侧配置项
 const setting = [
   // 背景色
@@ -121,5 +123,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/GcBorder7/setting.js

@@ -2,6 +2,8 @@
 const type = 'GcBorder7'
 
 const name = '边框七'
+
+const isTitle=false
 // 右侧配置项
 const setting = [
   // 背景色
@@ -121,5 +123,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/GcBorder8/setting.js

@@ -2,6 +2,8 @@
 const type = 'GcBorder8'
 
 const name = '边框八'
+
+const isTitle=false
 // 右侧配置项
 const setting = [
   // 背景色
@@ -147,5 +149,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/GcBorder9/setting.js

@@ -2,6 +2,8 @@
 const type = 'GcBorder9'
 
 const name = '边框九'
+
+const isTitle=false
 // 右侧配置项
 const setting = [
   // 背景色
@@ -121,5 +123,6 @@ const setting = [
 export default {
   setting,
   type,
-  name
+  name,
+  isTitle
 }

data-room-ui/packages/BorderComponents/settingList.js

@@ -8,7 +8,8 @@ const plotList = []
     plotList.push({
       type: config.type,
       setting: config.setting,
-      name:config.name
+      name: config.name,
+      isTitle:config.isTitle
     })
   })
 export default plotList