JavaScriptExample
diff --git a/‎src/assets/css/widget.styl‎
Lines changed: 0 additions & 2 deletions b/‎src/assets/css/widget.styl‎
Lines changed: 0 additions & 2 deletions
diff --git a/‎src/assets/json/widget.json‎
Lines changed: 3 additions & 1 deletion b/‎src/assets/json/widget.json‎
Lines changed: 3 additions & 1 deletion
diff --git a/‎src/components/widget-config.vue‎
Lines changed: 6 additions & 0 deletions b/‎src/components/widget-config.vue‎
Lines changed: 6 additions & 0 deletions
diff --git a/‎src/components/widget-form-list.vue‎
Lines changed: 2 additions & 2 deletions b/‎src/components/widget-form-list.vue‎
Lines changed: 2 additions & 2 deletions
@@ -239,7 +239,6 @@ $primary-background-color = #d8e8fa;
     }
 
     .wg-horizontal-picker {
-      width: 400px;
       border: 1px solid #999;
       border-radius: 20px;
       overflow: hidden;
@@ -253,7 +252,6 @@ $primary-background-color = #d8e8fa;
         height: 100%;
         text-align: center;
         display: inline-block;
-        padding: 0 20px;
         white-space: nowrap;
         position: relative;
         overflow: hidden;
 
@@ -120,7 +120,9 @@
 				"labelWidth": "50px"
 			},
 			"fieldTypes": "hPickerTypes",
-			"apiKey": "age",
+      "apiKey": "age",
+      "itemWidth":50,
+      "showNumber":5,
 			"pickerStyle": {
 				"color": "#409eff",
 				"fontsize": 18,
 
@@ -108,6 +108,12 @@
           <el-form-item label="按钮背景色" v-if="selectWg.style.hasOwnProperty('btnStyle')">
             <el-color-picker v-model="selectWg.style.btnStyle.background"/>
           </el-form-item>
+          <el-form-item label="每项宽度" v-if="selectWg.hasOwnProperty('itemWidth')">
+            <el-input-number v-model="selectWg.itemWidth" :min="10" size="small"/>
+          </el-form-item>
+          <el-form-item label="显示个数" v-if="selectWg.hasOwnProperty('showNumber')">
+            <el-input-number v-model="selectWg.showNumber" :min="1" size="small"/>
+          </el-form-item>
           <template v-if="selectWg.hasOwnProperty('pickerStyle')">
             <el-form-item label="选中后文字颜色">
               <el-color-picker v-model="selectWg.pickerStyle.color"/>
 
@@ -126,12 +126,12 @@
           :style="item.style"
         >
           <div class="wg-title" :style="{width:item.label.labelWidth}">{{item.label.labelTitle}}</div>
-          <div class="wg-horizontal-picker">
+          <div class="wg-horizontal-picker" :style="{width:item.itemWidth*item.showNumber+'px'}">
             <div
               class="picker-item"
               v-for="(optionsItem,key) in item.options"
               :key="optionsItem + key"
-              :style="key===0?{ ...item.pickerStyle }:{}"
+              :style="key===0?{ ...item.pickerStyle, width:item.itemWidth+'px' }:{width:item.itemWidth+'px'}"
             >{{optionsItem}}</div>
           </div>
         </div>