feat:增加slider类型

src/pages/FormVolume/Layout1/index.vue

@@ -16,15 +16,38 @@
           <span v-if="item.type_name">【{{ item.type_name }}】</span>
         </p>
         <div :class="{'align-right': item.layout_align === 'right'}">
+
+          <div class="slider-layout" v-if="item.type === 'slider'">
+            <div class="val" v-if="item.val">{{ item.val }}</div>
+            <div class="warn" v-else>拨动滑块选择</div>
+            <van-slider
+              v-model="item.sliderVal"
+              :min="-1" 
+              :max="item.content.length - 1"
+              @input="item.val = (item.content[item.sliderVal] || {}).title || ''" />
+            <div class="ruler-layout">
+              <div class="ruler-item">
+                <span>-</span>
+              </div>
+              <div class="ruler-item"
+                v-for="(it, itIndex) in item.content"
+                :key="itIndex">
+                <span v-if="!it.sliderHide">{{ it.title }}</span>
+              </div>
+            </div>
+          </div>
+
           <van-radio-group 
             v-model="item.val" 
             :direction="item.layout_inline === 2 ? 'vertical' : 'horizontal'"
             v-if="item.type === 'radio'">
             <van-radio
               :class="{ vertical: item.layout_inline === 2, horizontal: item.layout_inline === 1 }"
-              :name="it.title" v-for="(it, itIndex) in item.content" 
+              :name="it.title" 
+              v-for="(it, itIndex) in item.content" 
               :key="itIndex">{{ it.title }}</van-radio>
           </van-radio-group>
+
           <van-checkbox-group 
             v-model="item.val" 
             :direction="item.layout_inline === 2 ? 'vertical' : 'horizontal'"
@@ -37,10 +60,12 @@
               :key="itIndex" 
               shape="square">{{ it.title }}</van-checkbox>
           </van-checkbox-group>
+
           <textarea 
             v-model="item.val" 
             :maxlength="item.max || 200" placeholder="请填写" 
             v-if="item.type === 'textarea'" />
+
           <input v-model="item.val" 
             :maxlength="item.max || 200" 
             placeholder="请填写" 

src/pages/FormVolume/Layout1/style.scss

@@ -67,4 +67,50 @@
     padding: $sp-md $sp-lg;
     background: $color-f;
   }
+  .slider-layout {
+    flex: 1;
+    padding: 0 $sp-md;
+    padding-bottom: $sp-md;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .val,
+    .warn {
+      padding-bottom: $sp-lg;
+      font-size: $size-lg;
+      color: $color-success;
+    }
+
+    .warn {
+      color: $color-3;
+    }
+
+    .ruler-layout {
+      font-size: $size-xs;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid $color-4;
+      margin-top: $sp-lg;
+      margin-bottom: $sp-sm;
+
+      .ruler-item {
+        position: relative;
+        height: $size-xs;
+        background: $color-4;
+        width: 1px;
+
+        span {
+          position: absolute;
+          left: 0;
+          bottom: -($size-xs + $sp-sm);
+          white-space: nowrap;
+          color: $color-3;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
 }

src/pages/FormVolume/Layout2/index.vue

@@ -23,15 +23,38 @@
           <span v-if="item.type_name">【{{ item.type_name }}】</span>
         </p>
         <div :class="{'align-right': item.layout_align === 'right'}">
+
+          <div class="slider-layout" v-if="item.type === 'slider'">
+            <div class="val" v-if="item.val">{{ item.val }}</div>
+            <div class="warn" v-else>拨动滑块选择</div>
+            <van-slider
+              v-model="item.sliderVal"
+              :min="-1" 
+              :max="item.content.length - 1"
+              @input="item.val = (item.content[item.sliderVal] || {}).title || ''" />
+            <div class="ruler-layout">
+              <div class="ruler-item">
+                <span>-</span>
+              </div>
+              <div class="ruler-item"
+                v-for="(it, itIndex) in item.content"
+                :key="itIndex">
+                <span v-if="!it.sliderHide">{{ it.title }}</span>
+              </div>
+            </div>
+          </div>
+
           <van-radio-group 
             v-model="item.val" 
             :direction="item.layout_inline === 2 ? 'vertical' : 'horizontal'"
             v-if="item.type === 'radio'">
             <van-radio
               :class="{ vertical: item.layout_inline === 2, horizontal: item.layout_inline === 1 }"
-              :name="it.title" v-for="(it, itIndex) in item.content" 
+              :name="it.title" 
+              v-for="(it, itIndex) in item.content" 
               :key="itIndex">{{ it.title }}</van-radio>
           </van-radio-group>
+
           <van-checkbox-group 
             v-model="item.val" 
             :direction="item.layout_inline === 2 ? 'vertical' : 'horizontal'"
@@ -44,10 +67,12 @@
               :key="itIndex" 
               shape="square">{{ it.title }}</van-checkbox>
           </van-checkbox-group>
+
           <textarea 
             v-model="item.val" 
             :maxlength="item.max || 200" placeholder="请填写" 
             v-if="item.type === 'textarea'" />
+
           <input v-model="item.val" 
             :maxlength="item.max || 200" 
             placeholder="请填写" 

src/pages/FormVolume/Layout2/style.scss

@@ -115,4 +115,44 @@
     background: $color-f;
     box-shadow: 0 -2px 4px 1px $color-5;
   }
+  .slider-layout {
+    flex: 1;
+    padding: 0 $sp-md;
+    padding-bottom: $sp-md;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .val,.warn {
+      padding-bottom: $sp-lg;
+      font-size: $size-lg;
+      color: $color-success;
+    }
+    .warn {
+      color: $color-3;
+    }
+    .ruler-layout {
+      font-size: $size-xs;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid $color-4;
+      margin-top: $sp-lg;
+      margin-bottom: $sp-sm;
+      .ruler-item {
+        position: relative;
+        height: $size-xs;
+        background: $color-4;
+        width: 1px;
+        span {
+          position: absolute;
+          left: 0;
+          bottom: -($size-xs + $sp-sm);
+          white-space: nowrap;
+          color: $color-3;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
 }

src/pages/FormVolume/mixins/custom.js

@@ -0,0 +1,19 @@
+const config = {
+  slider (item) {
+    item.sliderVal = -1
+    // 大于 5 个选项， 取3个值
+    if (item.content.length > 5) {
+      let a = 0
+      let b = (item.content.length / 2 >> 0) - 1
+      let c = item.content.length - 1
+      let r = [a, b, c]
+      item.content.forEach((it, i) => it.sliderHide = r.indexOf(i) === -1)
+    }
+    return item
+  }
+}
+
+export default function (item) {
+  let fn = config[item.type]
+  return fn && fn(item)
+}

src/pages/FormVolume/mixins/index.js

@@ -1,4 +1,5 @@
 import * as api from '@/api'
+import Custom from './custom'
 export default {
   data() {
     return {
@@ -97,6 +98,9 @@ export default {
           item.layout_align = item.layout_align || data.topic.layout_align || 'left'
           item.layout_inline = item.layout_inline || data.topic.layout_inline || 1
           item.type_name = configType[item.type] || ''
+
+          // 自定义组件处理
+          Custom(item)
         })
         if (data.topic.memo) {
           data.topic.memo = data.topic.memo.replace(/\n/g, '<br />')