add checkbox plugin

ly525
1 parent e264e432
Showing 2 changed files with 189 additions and 3 deletions
front-end/h5/src/components/plugins/lbp-form-checkbox-group.js
front-end/h5/src/mixins/load-plugins.js
+import LbpFormRadio from './lbp-form-radio.js'
+
+const defaultItems = [
+  {
+    value: '选项A-value'
+  },
+  {
+    value: '选项B-value'
+  },
+  {
+    value: '选项C-value'
+  }
+]
+
+export default {
+  name: 'lbp-form-checkbox-group',
+  components: {
+    LbpFormRadio
+  },
+  props: {
+    aliasName: {
+      type: String,
+      default: '标题演示'
+    },
+    items: {
+      type: Array,
+      default: () => defaultItems
+    },
+    type: {
+      type: String,
+      default: 'checkbox'
+    }
+  },
+  data () {
+    return {
+      value: this.type === 'radio' ? '' : [],
+      uuid: undefined
+    }
+  },
+  computed: {
+    value_ () {
+      if (this.type === 'radio') {
+        return this.value
+      } else {
+        const value = (Array.isArray(this.value) && this.value) || []
+        return value.join(',')
+      }
+    }
+  },
+  watch: {
+    type (type) {
+      this.value = type === 'radio' ? '' : []
+    }
+  },
+  editorConfig: {
+    propsConfig: {
+      items: {
+        type: 'lbs-form-radio-items-editor',
+        label: '选项列表',
+        require: true,
+        defaultPropValue: defaultItems
+      },
+      aliasName: {
+        type: 'a-input',
+        label: '填写标题',
+        require: true,
+        defaultPropValue: '标题演示'
+      },
+      type: {
+        type: 'a-radio-group',
+        label: '选择模式',
+        require: true,
+        prop: {
+          options: [
+            { label: '单选', value: 'radio' },
+            { label: '多选', value: 'checkbox' }
+          ],
+          name: 'mode'
+        },
+        defaultPropValue: 'checkbox'
+      }
+    },
+    components: {
+      'lbs-form-radio-items-editor': {
+        render () {
+          return <div>
+            {
+              this.value_.map((item, index) => (
+                <div>
+                  <a-input value={item.value} onChange={e => { item.value = e.target.value }}></a-input>
+                  <a-button type="dashed" shape="circle" icon="plus" onClick={this.add} />
+                  <a-button type="dashed" shape="circle" icon="minus" onClick={(item, index) => this.minus(item, index)} />
+                </div>
+              ))
+            }
+          </div>
+        },
+        props: {
+          value: {
+            type: Array,
+            default: () => defaultItems
+          }
+        },
+        computed: {
+          value_: {
+            get () {
+              return this.value
+            },
+            set (val) {
+              this.$emit('input', val)
+            }
+          }
+        },
+        methods: {
+          add () {
+            console.log(this.value_.length)
+            this.$emit('change', [
+              ...this.value_,
+              {
+                value: `选项${this.value_.length + 1}-value`,
+                label: `选项${this.value_.length + 1}-label`
+              }
+            ])
+          },
+          minus (item, index) {
+            const items = this.value_.slice(0)
+            items.splice(index, 1)
+            this.$emit('change', items)
+          }
+        }
+      }
+    }
+  },
+  mounted () {
+    this.uuid = this.$el.dataset.uuid
+  },
+  methods: {
+    /**
+     * @param {String, Number} val radioValue or checkboxValue
+     */
+    onChange (val) {
+      switch (this.type) {
+        case 'radio':
+          this.toggleRadio(val)
+          break
+        case 'checkbox':
+          this.toggleCheckbox(val)
+          break
+        default:
+          break
+      }
+    },
+    toggleCheckbox (val) {
+      const index = this.value.indexOf(val)
+      if (index === -1) {
+        this.value.push(val)
+      } else {
+        this.value.splice(index, 1)
+      }
+    },
+    toggleRadio (val) {
+      this.value = val
+    }
+  },
+  render () {
+    return (
+      <div>
+        <h3>{this.aliasName}{this.type}</h3>
+        <input type="text" hidden value={this.value_} data-type="lbp-form-input" data-uuid={this.uuid} />
+        {
+          this.items.map(item => (
+            <lbp-form-radio
+              vertical
+              value={item.value}
+              checked={this.value === item.value}
+              aliasName={this.aliasName}
+              type={this.type}
+              onChange={this.onChange}
+            >{item.value}</lbp-form-radio>
+          ))
+        }
+      </div>
+    )
+  }
+}
@@ -6,6 +6,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 LbpFormCheckboxGroup from '../components/plugins/lbp-form-checkbox-group'
 import LbpBackground from '../components/plugins/lbp-background'
 import LbpSlide from '../components/plugins/lbp-slide'
@@ -119,11 +120,11 @@ export const pluginsList = [
       'en-US': 'Form Checkbox',
       'zh-CN': '表单多选'
     },
-    title: '表单单选',
+    title: '表单多选',
     icon: 'check-square-o',
-    component: LbpFormRadioGroup,
+    component: LbpFormCheckboxGroup,
     visible: true,
-    name: LbpFormRadioGroup.name
+    name: LbpFormCheckboxGroup.name
   },
   {
     i18nTitle: {