feat: 增加 el-checkbox-button,el-radio-button 支持 (#227)

Author: chengaopan

docs/checkbox-group.md

@@ -12,6 +12,10 @@ export default {
         {
           id: 'city',
           type: 'checkbox-group',
+          /**
+           * sytle 属性是为了满足 el-checkbox-button属性而设置,如果不需要使用el-radio-button这可不设置
+           */
+          style: 'button',
           label: 'city',
           default: ['new york'],
           options: [

docs/radio-group.md

@@ -13,6 +13,10 @@ export default {
           id: 'city',
           type: 'radio-group',
           label: 'city',
+          /**
+           * sytle 属性是为了满足 el-radio-button属性而设置,如果不需要使用el-radio-button这可不设置
+           */
+          style: 'button',
           default: 'new york',
           options: [
             /**

src/components/render-form-item.vue

@@ -45,9 +45,17 @@
           :key="optionKey(opt) || index"
           v-bind="opt"
         />
-        <!-- TODO: 支持 el-checkbox-button 变体 -->
+        <el-checkbox-button
+          v-else-if="data.type === 'checkbox-group' && data.style === 'button'"
+          :key="opt.value"
+          v-bind="opt"
+          :label="'value' in opt ? opt.value : opt.label"
+        >
+          {{ opt.label }}
+        </el-checkbox-button>
+
         <el-checkbox
-          v-else-if="data.type === 'checkbox-group'"
+          v-else-if="data.type === 'checkbox-group' && data.style !== 'button'"
           :key="opt.value"
           v-bind="opt"
           :label="'value' in opt ? opt.value : opt.label"
@@ -56,8 +64,16 @@
         </el-checkbox>
         <!-- WARNING: radio 用 label 属性来表示 value 的含义 -->
         <!-- FYI: radio 的 value 属性可以在没有 radio-group 时用来关联到同一个 v-model -->
+        <el-radio-button
+          v-else-if="data.type === 'radio-group' && data.style === 'button'"
+          :key="opt.label"
+          v-bind="opt"
+          :label="'value' in opt ? opt.value : opt.label"
+          >{{ opt.label }}</el-radio-button
+        >
+
         <el-radio
-          v-else-if="data.type === 'radio-group'"
+          v-else-if="data.type === 'radio-group' && data.style !== 'button'"
           :key="opt.label"
           v-bind="opt"
           :label="'value' in opt ? opt.value : opt.label"