feat(plugin) support background image or color(#37)

ly525
1 parent 9b2eec4b
Showing 6 changed files with 104 additions and 14 deletions
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/models/element.js
front-end/h5/src/components/plugins/lbp-background.js
front-end/h5/src/locales/lang/en-US.js
front-end/h5/src/locales/lang/zh-CN.js
front-end/h5/src/mixins/load-plugins.js
@@ -165,6 +165,11 @@ export default {
         >
           {
             elements.map((element, index) => {
+              if (element.name === 'lbp-background') {
+                return h('lbp-background', {
+                  props: element.getProps()
+                })
+              }
               const data = {
                 style: {
                   width: '100%',
@@ -53,6 +53,12 @@ class Element {
   }
   getStyle ({ position = 'static', isRem = false } = {}) {
+    if (this.name === 'lbp-background') {
+      return {
+        width: '100%',
+        height: '100%'
+      }
+    }
     const pluginProps = this.pluginProps
     const commonStyle = this.commonStyle
     let style = {
+export default {
+  name: 'lbp-background',
+  render () {
+    let style = {
+      width: '100%',
+      height: '100%'
+    }
+
+    if (this.imgSrc) {
+      style = {
+        ...style,
+        'background-size': 'cover',
+        'background-position': '50% 50%',
+        'background-origin': 'content-box',
+        'background-image': `url(${this.imgSrc})`
+      }
+    } else {
+      style = {
+        ...style,
+        backgroundColor: this.backgroundColor
+      }
+    }
+
+    return (
+      <div style="width: 100%; height: 100%; overflow: hidden; position: absolute; z-index: -1; opacity: 1;">
+        <div style={style}></div>
+      </div>
+    )
+  },
+  props: {
+    imgSrc: {
+      type: String,
+      default: ''
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  editorConfig: {
+    propsConfig: {
+      imgSrc: {
+        // type: 'picture-picker',
+        type: 'a-input',
+        label: '图片url',
+        prop: {
+          type: 'textarea'
+        },
+        defaultPropValue: ''
+      },
+      backgroundColor: {
+        type: 'a-input', // lbs-color-picker
+        label: '背景颜色',
+        prop: {
+          type: 'color'
+        },
+        require: true,
+        defaultPropValue: '#ffffff' // TODO why logogram for color does't work?
+      }
+    },
+    components: {
+    //   'picture-picker': PicturePicker,
+    }
+  }
+}
@@ -76,7 +76,8 @@ export default {
         prop: 'Prop',
         animation: 'Animation',
         action: 'Action',
-        script: 'Script'
+        script: 'Script',
+        background: 'Background'
       },
       animation: {
         add: 'Add',
@@ -75,7 +75,8 @@ export default {
         prop: '属性',
         animation: '动画',
         action: '动作',
-        script: '脚本'
+        script: '脚本',
+        background: '背景'
       },
       animation: {
         add: '添加动画',
@@ -5,6 +5,7 @@ import LbpText from &#39;../components/plugins/lbp-text&#39;
 import LbpFormInput from '../components/plugins/lbp-form-input'
 import LbpFormButton from '../components/plugins/lbp-form-button'
 import LbpFormRadioGroup from '../components/plugins/lbp-form-radio-group'
+import LbpBackground from '../components/plugins/lbp-background'
 export const pluginsList = [
   {
@@ -40,18 +41,18 @@ export const pluginsList = [
     visible: true,
     name: LbpButton.name
   },
-  {
-    i18nTitle: {
-      'en-US': 'Carousel',
-      'zh-CN': '轮播图'
-    },
-    title: '轮播图',
-    icon: 'photo',
-    component: LbpFormRadioGroup,
-    visible: true,
-    name: LbpFormRadioGroup.name,
-    disabled: true
-  },
+  // {
+  //   i18nTitle: {
+  //     'en-US': 'Carousel',
+  //     'zh-CN': '轮播图'
+  //   },
+  //   title: '轮播图',
+  //   icon: 'photo',
+  //   component: LbpFormRadioGroup,
+  //   visible: true,
+  //   name: LbpFormRadioGroup.name,
+  //   disabled: true
+  // },
   {
     i18nTitle: {
       'en-US': 'Map',
@@ -133,6 +134,17 @@ export const pluginsList = [
     component: LbpFormRadioGroup,
     visible: true,
     name: LbpFormRadioGroup.name
+  },
+  {
+    i18nTitle: {
+      'en-US': 'Background',
+      'zh-CN': '背景'
+    },
+    title: '背景',
+    icon: 'dot-circle-o',
+    component: LbpBackground,
+    visible: false,
+    name: LbpBackground.name
   }
 ]