动态界面添加几个属性

packages/components/CheckBox/index.vue

@@ -32,14 +32,11 @@ export default {
     return {}
   },
   watch: {
-    value (val) {
-      this.$emit('input', val)
-      this.value = val
-    },
   },
   methods: {
     checked () {
       if (!this.disable) {
+        this.$emit('input', !this.value)
         this.$emit('checkClick', !this.value)
       }
     },

packages/components/HLayout/README.md

@@ -19,11 +19,12 @@
     <h-layout
       v-if="layoutShow"
       :layout-data="layoutData" :show-form-title="showFormTitle" :show-btn-divider="true"
-      :show-tab-divider="true" :formData="data" v-model="data" @tabClick="tabClick"
-      @showSelect="showSelect" @showTime="showTime" @switchClick="switchClick" @filedClick="filedClick"
+      :show-tab-divider="true" :formData="data" v-model="data" :read-only="readOnly"
+      :show-btn="showBtn"
+      @tabClick="tabClick"
+      @showSelect="showSelect" @showTime="showTime" @filedClick="filedClick"
       @btnClick="btnClick"/>
   </h-view>
-
 </template>
 ```
 ```javascript
@@ -38,6 +39,8 @@ export default {
       showFormTitle: true,
       layoutData: [],
       layoutShow: false,
+      readOnly: false,
+      showBtn: true,
       data: {
         contract: {
           postion: '01',
@@ -123,15 +126,6 @@ export default {
         default:
       }
     },
-    /**
-     * switch的点开事件
-     * @param configCode
-     * @param filedCode
-     * @param value
-     */
-    switchClick (configCode, filedCode, value) {
-      debugger
-    },
     /**
      * 其他字端的点击事件
      * @param configCode
@@ -175,7 +169,7 @@ export default {
 4. 因无法在data里面直接set数据，故需在data里面新建data数据对象用于组件解析成功以及数据双向绑定使用
 5. 支持在自定义data对象设置默认值，默认值的优先级高于组件定义的默认值
 6. 组件使用v-model与formData进行传递data数据实现双向绑定，两者缺一不可
-7. 组件中会解析出全部的按钮，每个按钮对应 组件code、按钮code、以及按钮描述。已btns数组反馈给父组件，用于按钮点击事件
+7. 组件中会解析出全部的按钮，每个按钮对应 组件code、按钮code、以及按钮描述。以btns数组反馈给父组件，用于按钮点击事件
 8. 所有的下拉框、时间以及按钮的触发逻辑全部交由父组件处理，子组件通知父组件，子组件内不做任何业务处理逻辑
 
 
@@ -184,14 +178,15 @@ props
 * showFormTitle:是否展示form表单上的title，title也可以点击实现form的缩放 默认 true
 * showTabDivider:是否显示s-tab的分割线 默认true
 * showTabBorder:是否显示s-tab的下边框 默认false
+* showBtn:是否显示按钮组件(button与bottom-tab)
 * showBtnDivider:是否底部按钮的分割线 默认true
 * formData:组件数据，用于双向绑定
+* readOnly:设置组件全部只读，禁用字端及按钮的输入点击
 
 emit
 * tabClick s-tab组件切换点击事件 返回当前点击的index
 * showSelect 下拉框点开事件 返回布局组件code，字端的code，用于判断是哪个下拉框
 * showTime  事件点开事件 返回组件code，字端的code，用于判断是哪个时间选择
-* switchClick switch切换开关点击事件，返回组件code，字端的code以及value值
 * filedClick 其它字端点击事件，字端类型为其它的点击事件 返回组件code，字端的code，可用于超链接，提示等
 * btnClick 按钮点击事件，返回当前btn对象，包含组件code、按钮code、以及按钮描述，可根据此判断点击的是哪个按钮
 

packages/components/HLayout/index.vue

@@ -37,7 +37,7 @@
             <div slot="name" :class="{'required':filed.inputMode=='required'}">{{ filed.filedName }}</div>
             <input
               v-if="filed.filedType==='INPUT'" slot="content"
-              :readonly="filed.inputMode==='readOnly'"
+              :readonly="filedReadOnly(filed)"
               :placeholder="filed.placeholder" v-model="data[com.configCode][filed.filedCode]" :type="filed.inputType"
               :name="filed.filedCode">
             <input
@@ -53,28 +53,39 @@
             <h-switch
               v-else-if="filed.filedType==='SWITCH'" slot="content" v-model="data[com.configCode][filed.filedCode]"
               :name="filed.filedCode"
-              :disable="filed.inputMode==='readOnly'" @click.native="switchNativeClick(com,filed)"/>
+              :disable="filedReadOnly(filed)"/>
+            <h-check
+              v-else-if="filed.filedType==='CHECKBOX'" slot="content" v-model="data[com.configCode][filed.filedCode]"
+              :name="filed.filedCode"
+              :disable="filedReadOnly(filed)"/>
             <div v-else slot="content" @click="filedClick(com,filed)" v-html="data[com.configCode][filed.filedCode]"/>
             <img v-if="filed.rightIcon" slot="right-icon" :src="filed.rightIcon" class="right-icon">
           </item>
         </list-item>
-        <section v-else-if="com.configType==='Button' && com.layoutFiledList.length" class="layout-button">
+        <template v-if="showBtn">
+          <section v-if="com.configType==='Button' && com.layoutFiledList.length" class="layout-button">
             <h-button
-            v-for="btn in com.layoutFiledList" :key="btn.filedId" :class="btn.cssClass"
+              v-for="btn in com.layoutFiledList"
+              :key="btn.filedId" :class="btn.cssClass"
               size="normal" @click.native="btnClick(com,btn)">
               <section v-html="btn.btnContent || btn.filedName"/>
             </h-button>
           </section>
         </template>
+      </template>
     </h-content>
+    <template v-if="showBtn">
       <bottom-tab
         v-for="(com, index) in layoutConfig" v-if="com.configType==='BottomTab' && com.layoutFiledList.length"
         :key="index" :show-divider="showBtnDivider"
         :class="com.cssClass">
-      <tab-button v-for="btn in com.layoutFiledList" :key="btn.filedId" :class="btn.cssClass" @click.native="btnClick(com,btn)">
+        <tab-button
+          v-for="btn in com.layoutFiledList" :key="btn.filedId" :disabled="filedReadOnly(btn)" :class="btn.cssClass"
+          @click.native="btnClick(com,btn)">
           <section v-html="btn.btnContent || btn.filedName"/>
         </tab-button>
       </bottom-tab>
+    </template>
   </section>
 </template>
 <script>
@@ -101,10 +112,18 @@ export default {
       type: Boolean,
       default: true,
     },
+    showBtn: {
+      type: Boolean,
+      default: true,
+    },
     formData: {
       type: Object,
       default: () => {},
     },
+    readOnly: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {
@@ -150,6 +169,8 @@ export default {
                   temp[filed.filedCode + '_n'] = filed.defaultValueN
                 } else if (filed.filedType === 'SWITCH') {
                   temp[filed.filedCode] = !!filed.defaultValue
+                } else if (filed.filedType === 'CHECKBOX') {
+                  temp[filed.filedCode] = !!filed.defaultValue
                 } else {
                   temp[filed.filedCode] = filed.defaultValue
                 }
@@ -179,6 +200,10 @@ export default {
     }
   },
   methods: {
+    filedReadOnly (filed) {
+      let vm = this
+      return vm.readOnly ? true : (filed.inputMode === 'readOnly')
+    },
     /**
      * item左右距离查询出来为字符串 在此转换为数组
      * @param proportion
@@ -232,6 +257,7 @@ export default {
      * @param filed 当前字端
      */
     showSelect (com, filed) {
+      if (this.readOnly) return
       if (filed.inputMode !== 'readOnly') {
         this.$emit('showSelect', com.configCode, filed.filedCode)
       }
@@ -242,28 +268,20 @@ export default {
      * @param filed 当前字端
      */
     showTime (com, filed) {
+      if (this.readOnly) return
       if (filed.inputMode !== 'readOnly') {
         this.$emit('showTime', com.configCode, filed.filedCode)
       }
     },
-    /**
-     * switch点击函数 暴露给父组件一个点击事件传递父组件当前点击对象以及字端名以及vaule值，用于其他处理逻辑
-     * @param com 当前组件
-     * @param filed 当前字端
-     */
-    switchNativeClick (com, filed) {
-      let vm = this
-      if (filed.inputMode !== 'readOnly') {
-        this.$emit('switchClick', com.configCode, filed.filedCode, vm.data[com.configCode][filed.filedCode])
-      }
-    },
     /**
      * 其他非input的字端点击函数 用于超链接等其他字端的逻辑处理 暴露给父组件一个点击事件传递父组件当前点击对象以及字端名
      * @param com 当前组件
      * @param filed 当前字端
      */
     filedClick (com, filed) {
+      if (!this.readOnly) {
         this.$emit('filedClick', com.configCode, filed.filedCode)
+      }
     },
     /**
      * 按钮点击事件 交由父组件处理 传递当前的按钮对象
@@ -271,6 +289,7 @@ export default {
      * @param filed 当前字端
      */
     btnClick (com, filed) {
+      if (!this.readOnly) {
         let btnType = com.configType
         let btnCode = filed.filedCode
         this.data.btns.forEach((btn, index) => {
@@ -278,8 +297,8 @@ export default {
             this.$emit('btnClick', btn)
           }
         })
+      }
     },
-
   },
 }
 </script>

packages/components/ListItem/Item.vue

@@ -93,7 +93,7 @@ export default {
     },
     start (e) {
       if (e.target.readOnly) return
-      if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA' || e.target.nodeName === 'BUTTON') return
+      if (e.target.nodeName === 'INPUT' || e.target.nodeName === 'TEXTAREA' || e.target.nodeName === 'BUTTON' || e.target.nodeName === 'LABEL') return
       this.showActivated = 'activated'
     },
     end (e) {
@@ -179,6 +179,14 @@ export default {
         word-break: break-all;
         word-wrap: break-word;
         line-height: 20px;
+        .h-checkbox{
+          .checkbox {
+            input{
+              width: 24px;
+              height: 24px;
+            }
+          }
+        }
 
         //输入框
         input {

packages/components/component.js

@@ -31,8 +31,10 @@ import HLayout from './HLayout/index'
 import errLoadingPic from '../common/picture/errloading.jpg'
 
 export default (Vue) => {
-  Vue.use(VueLazyload, {error: errLoadingPic,
-    loading: errLoadingPic})
+  Vue.use(VueLazyload, {
+    error: errLoadingPic,
+    loading: errLoadingPic,
+  })
   Vue.component('h-view', HView)
   Vue.component('h-header', HHeader)
   Vue.component('h-content', HContent)

src/pages/dynamicLayout.Vue

-/**
-* @Author Sean
-* @Date 2019/7/29
-*/
-<template>
-    <h-view class="public-style" style="height: 100%">
-        <h-header>
-            <div slot="left" class="h-header-btn" @click="$routeGo(-1)">
-                <i class="ion-ios-arrow-back"/>
-            </div>
-            <div slot="center">动态页面</div>
-        </h-header>
-        <h-content>
-          <section v-for="(list,parentIndex) in layoutData" :key="parentIndex">
-            <div v-if="list.code === 'form'">
-              <list-item v-if="list.fileds">
-                <item v-for="(item,index) in list.fileds" :key="index" :proportion="item.proportion">
-                  <img slot="left-icon" :src="item.iconPath" class="left-icon" v-if="item.iconPath">
-                  <div slot="name" class="required">{{item.filedName}}</div>
-                  <div slot="content" v-if="item.filedType != 'div'">
-                    <input v-if="item.filedType === 'input'" type="item.type" :placeholder="item.placeholder" v-model="item.VModelName"
-                    :required="item.request" :readOnly="item.readOnly" @click="commonFunc(item.filedName)">
-                    <input v-else-if="item.filedType === 'select'" type="item.type" :placeholder="item.placeholder" v-model="object[list.dataName][item.VModelName + '_n']"
-                           :required="item.request" :readOnly="item.readOnly" @click="showSelect(item.selectList,item.VModelName,list.dataName,parentIndex,index)">
-                    <input v-else-if="item.filedType === 'time'" type="item.type" :placeholder="item.placeholder" v-model="object[list.dataName][item.VModelName]"
-                           :required="item.request" :readOnly="item.readOnly" @click="showTime(list.dataName,'YYYY-MM-DD',item)">
-                  </div>
-                  <div slot="content" v-if="item.filedType === 'div'" @click="commonFunc(item.filedName)">{{money | currency}}</div>
-                  <img slot="right-icon" src="../assets/image/right-arrow@2x.png" style="width: 8px" class="right-icon" v-if="item.rightArrow">
-                </item>
-              </list-item>
-            </div>
-            <div v-else-if="list.code === 'button' && !list.isisBottom">
-              <div v-for="(btn,index) in list.btns" v-if="list.btns" class="content-btn" @click="btnCommon(btn)">
-                {{btn.btnText}}
-              </div>
-            </div>
-          </section>
-        </h-content>
-      <bottom-tab v-if="bottomBtns[0].btns && bottomBtns[0].isBottom" :show-divider="true">
-        <tab-button class="button-save" v-for="(item,index) in bottomBtns[0].btns" :key="index" @click.native="footerBtnCommon(item)" >{{item.btnText}}</tab-button>
-      </bottom-tab>
-    </h-view>
-</template>
-
-<script>
-    import layoutData from '../common/layout'
-
-    export default {
-
-      data() {
-            return {
-              layoutData: [],
-              bottomBtns: [],
-              selectList: [{
-                code: 'man',
-                code_name: '男',
-              }, {
-                code: 'woman',
-                code_name: '女',
-              }],
-              object:{},
-              money: 2345483,
-            }
-        },
-        created: function () {
-          let vm = this
-          vm.layoutData = layoutData.layoutData
-          vm.bottomBtns = layoutData.bottomBtns
-          vm.layoutData.forEach((list,index) => {
-            if(list.code === 'form'){
-              let obj = {}
-              if(list.fileds.length){
-                list.fileds.forEach((item,index) => {
-                  obj[item.VModelName] = ''
-                  if(item.filedType === 'select'){
-                    obj[item.VModelName + '_n'] = ''
-                  }
-                })
-                vm.$set(vm.object,list.dataName,obj)
-              }
-            }
-          })
-        },
-        mounted: function () {
-        },
-        updated: function () {
-        },
-        destroyed: function () {
-        },
-        methods: {
-          commonFunc(name){
-            switch (name) {
-              case 'filedOne':
-                this.filedOne()
-                break;
-              case 'filedFour':
-                this.filedFour()
-                break;
-              default :
-                console.log('default')
-            }
-          },
-          filedOne(){
-            console.log('filedOne')
-          },
-          filedFour(){
-            console.log('filedFour')
-          },
-          showSelect (list, code, dataName,parentIndex,index) {
-            let vm = this
-            vm.layoutData[parentIndex].fileds[index].selectList = [...vm.selectList]
-            vm.hlsPopup.selectList({
-              list: vm.selectList,
-              code: code,
-              object: {},
-              returnItem (index, obj) {
-                var temp = {}
-                temp[code] = vm.selectList[index].code
-                temp[code + '_n'] = vm.selectList[index].code_name
-                vm.$set(vm.object,dataName,temp)
-              },
-            })
-          },
-          showTime(dataName,format,item){
-            let vm = this
-            vm.hlsPopup.showTime({
-              format: format,
-              callback (value) {
-                vm.object[dataName][item.VModelName] = value
-              },
-            })
-          },
-          // 按钮公用函数
-          btnCommon(btn){
-            switch(btn.btnCode){
-              case 'btnOne':
-                this.btnOne()
-                break
-              case 'btnTwo':
-                this.btnTwo()
-                break
-              case 'btnThree':
-                this.btnThree()
-                break
-              default:
-            }
-          },
-          btnOne(){
-            console.log('按钮1')
-          },
-          btnTwo(){
-            console.log('按钮2')
-          },
-          btnThree(){
-            console.log('按钮3')
-          },
-          // 底部按钮公用方法
-          footerBtnCommon(btn){
-            switch(btn.btnCode){
-              case 'btnFour':
-                this.btnFour()
-                break
-              case 'btnFive':
-                this.btnFive()
-                break
-              default:
-            }
-          },
-          btnFour(){
-            console.log('按钮4')
-          },
-          btnFive(){
-            console.log('按钮5')
-          },
-        }
-    }
-</script>
-
-<style scoped lang="less" rel="stylesheet">
-    .public-style {
-        .content {
-          .content-btn{
-            margin: 20px;
-            height: 40px;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            color: #FFF;
-            font-size: 14px;
-            background-color: #0c60ee;
-          }
-        }
-      .button-save{
-        background-color: #0c60ee;
-        color: #fff;
-      }
-    }
-</style>

src/pages/fileTest.vue

@@ -5,6 +5,12 @@
 
 <template>
   <h-view>
+    <h-header>
+      <div slot="left" class="h-header-btn" @click="$routeGo()">
+        <i class="ion-ios-arrow-back"/>
+      </div>
+      <div slot="center">HFile</div>
+    </h-header>
     <h-content>
       <h-file
         :fileList="fileList" v-model="fileList" :upload="upload"

src/pages/form.vue

@@ -15,11 +15,12 @@
     <h-layout
       v-if="layoutShow"
       :layout-data="layoutData" :show-form-title="showFormTitle" :show-btn-divider="true"
-      :show-tab-divider="true" :formData="data" v-model="data" @tabClick="tabClick"
-      @showSelect="showSelect" @showTime="showTime" @switchClick="switchClick" @filedClick="filedClick"
+      :show-tab-divider="true" :formData="data" v-model="data" :read-only="readOnly"
+      :show-btn="showBtn"
+      @tabClick="tabClick"
+      @showSelect="showSelect" @showTime="showTime" @filedClick="filedClick"
       @btnClick="btnClick"/>
   </h-view>
-
 </template>
 
 <script>
@@ -32,12 +33,15 @@ export default {
       showFormTitle: true,
       layoutData: [],
       layoutShow: false,
+      readOnly: false,
+      showBtn: true,
       data: {
         contract: {
           contract_id: 1,
           postion: '01',
           postion_n: '技术顾问',
           enable_flag: false,
+          checkValue: true,
         },
       },
       postionList: [
@@ -118,15 +122,6 @@ export default {
         default:
       }
     },
-    /**
-     * switch的点开事件
-     * @param configCode
-     * @param filedCode
-     * @param value
-     */
-    switchClick (configCode, filedCode, value) {
-      debugger
-    },
     /**
      * 其他字端的点击事件
      * @param configCode

src/pages/hlsPopup.vue

@@ -203,7 +203,7 @@
           <img slot="left-icon" src="../assets/image/warning@2x.png" class="left-icon">
           <div slot="name">保存照片</div>
           <label slot="right" class="toggle toggle-positive toggle-check" @click="savePhotoFun">
-            <input :checked="savePhoto" type="checkbox" >
+            <input :checked="savePhoto" type="checkbox">
             <div class="track">
               <div class="handle"/>
             </div>
@@ -282,7 +282,10 @@ export default {
       infiniteCount: 0,
       deleteText: '删除',
       editText: '编辑',
-      colors: [{name: 'Yellow', hex: '#f4d03f'}, {name: 'Green', hex: '#229954'}, {name: 'Purple', hex: '#9b59b6'}],
+      colors: [{ name: 'Yellow', hex: '#f4d03f' }, { name: 'Green', hex: '#229954' }, {
+        name: 'Purple',
+        hex: '#9b59b6',
+      }],
       svgSrc: svg,
       show1: false,
       show2: false,
@@ -409,7 +412,7 @@ export default {
     showActionSheetButton () {
       this.hlsPopup.showActionSheet({
         titleText: '照片',
-        buttonArray: [{text: '拍照', type: 'warn'}, {text: '从相册取', type: 'primary'}],
+        buttonArray: [{ text: '拍照', type: 'warn' }, { text: '从相册取', type: 'primary' }],
         callback: (index) => {
           alert(index)
         },
@@ -616,8 +619,9 @@ export default {
   .hls-popup {
     height: 100%;
     width: 100%;
+
     .hls-switch-tab {
-      .tab-content .h-tab-item .h-item{
+      .tab-content .h-tab-item .h-item {
         width: 80px;
       }
 
@@ -626,9 +630,11 @@ export default {
     .vue-better-scroll__wrapper {
       width: 100%;
     }
+
     .list {
       width: 100%;
     }
+
     .content {
       .scrollContent {
         display: flex;
@@ -638,6 +644,7 @@ export default {
         flex-direction: column;
         -webkit-flex-direction: column;
       }
+
       .button-class {
         width: 90%;
         margin: 10px 5%;
@@ -677,6 +684,7 @@ export default {
         background-color: #7e57c2;
         border: 1px solid #7e57c2;
       }
+
       .button {
         background-color: @theme-color;
         color: #ffffff;
@@ -686,6 +694,7 @@ export default {
         margin-top: 20px;
       }
     }
+
     .item-bg {
       height: 200px;
       line-height: 200px;
@@ -693,6 +702,7 @@ export default {
       font-size: 20px;
       font-weight: 500;
     }
+
     .indicators {
       height: 14px;
       width: 14px;
@@ -716,6 +726,7 @@ export default {
 
     .sign-modal {
       top: 50%;
+
       .content {
         background-color: #fff;
       }

src/pages/layout.json

@@ -245,15 +245,15 @@
               "cssClass": null
             },
             {
-              "_token": "0ee346cf559acb4917da57bfdbaf334c",
+              "_token": "b993cccaf742d01d77d672f182047a36",
               "objectVersionNumber": 1,
-              "filedId": "199658a5b961490a90238a9e9f95fe8d",
+              "filedId": "d4664c3a8ef34e1fb47acb325bb9bfb4",
               "layoutId": "1",
               "configId": "124",
-              "filedCode": "note",
-              "filedName": "备注",
-              "defaultValue": "请在经销商指导下操作",
-              "filedType": "OTHES",
+              "filedCode": "enable_flag",
+              "filedName": "启用标志",
+              "defaultValue": "true",
+              "filedType": "SWITCH",
               "inputType": "text",
               "placeholder": null,
               "filedOrder": "5",
@@ -262,29 +262,29 @@
               "rightIcon": null,
               "format": "N",
               "proportion": "1,2",
-              "showName": false,
+              "showName": true,
               "showContent": true,
-              "showArrow": false,
-              "hasBorder": false,
-              "filedHeight": 30,
+              "showArrow": true,
+              "hasBorder": true,
+              "filedHeight": 45,
               "enableFlag": "Y",
               "tabContent": null,
               "btnContent": null,
-              "cssClass": "tip-note"
+              "cssClass": null
             },
             {
               "_token": "b993cccaf742d01d77d672f182047a36",
               "objectVersionNumber": 1,
-              "filedId": "d4664c3a8ef34e1fb47acb325bb9bfb4",
+              "filedId": "d4664c3a8ef34e1bg7y1cb325bb9bfb4",
               "layoutId": "1",
               "configId": "124",
-              "filedCode": "enable_flag",
-              "filedName": "启用标志",
+              "filedCode": "checkValue",
+              "filedName": "单选框",
               "defaultValue": "true",
-              "filedType": "SWITCH",
+              "filedType": "CHECKBOX",
               "inputType": "text",
               "placeholder": null,
-              "filedOrder": "5",
+              "filedOrder": "15",
               "inputMode": "other",
               "leftIcon": null,
               "rightIcon": null,
@@ -299,6 +299,34 @@
               "tabContent": null,
               "btnContent": null,
               "cssClass": null
+            },
+            {
+              "_token": "0ee346cf559acb4917da57bfdbaf334c",
+              "objectVersionNumber": 1,
+              "filedId": "199658a5b961490a90238a9e9f95fe8d",
+              "layoutId": "1",
+              "configId": "124",
+              "filedCode": "note",
+              "filedName": "备注",
+              "defaultValue": "请在经销商指导下操作",
+              "filedType": "OTHES",
+              "inputType": "text",
+              "placeholder": null,
+              "filedOrder": "5",
+              "inputMode": "other",
+              "leftIcon": null,
+              "rightIcon": null,
+              "format": "N",
+              "proportion": "1,2",
+              "showName": false,
+              "showContent": true,
+              "showArrow": false,
+              "hasBorder": false,
+              "filedHeight": 30,
+              "enableFlag": "Y",
+              "tabContent": null,
+              "btnContent": null,
+              "cssClass": "tip-note"
             }
           ]
         },

src/pages/radioTest.vue

@@ -21,6 +21,16 @@
         <h-radio :checked="true" :disable="true" name="Japan" title="日本"/>
         <h-radio name="Other" title="其他"/>
       </radio-group>
+      <list-item>
+        <item>
+          <h-check slot="left-icon" v-model="checkValue"/>
+          <section slot="content">CheckBox</section>
+        </item>
+        <item>
+          <div slot="name">switch滑块切换框</div>
+          <div slot="content"><h-switch v-model="switchValue"/></div>
+        </item>
+      </list-item>
     </h-content>
   </h-view>
 </template>
@@ -31,6 +41,8 @@ export default {
   data () {
     return {
       radioValue: 'Japan',
+      checkValue: false,
+      switchValue: false,
     }
   },
   watch: {
@@ -40,14 +52,16 @@ export default {
   },
   methods: {},
 }
+
 </script>
 
 <style scoped lang="less">
-  .hls-list-item{
-    .hls-item{
-      .radio-group{
+  .hls-list-item {
+    .hls-item {
+      .radio-group {
         display: flex;
-        .h-radio{
+
+        .h-radio {
           margin-right: 5px;
         }
       }

src/router/index.js

@@ -8,7 +8,6 @@ import HlsPopup from '@/pages/hlsPopup'
 import Radio from '@/pages/radioTest'
 import HFile from '@/pages/fileTest'
 import Form from '@/pages/form'
-import DynamicLayout from '@/pages/dynamicLayout'
 
 Vue.use(Router)
 
@@ -23,8 +22,7 @@ export default new Router({
     {path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}},
     {path: '/Radio', component: Radio, name: 'Radio', meta: {keepAlive: true}},
     {path: '/HFile', component: HFile, name: 'HFile', meta: {keepAlive: true}},
-    {path: '/Form', component: Form, name: 'Form', meta: {keepAlive: true}},
-    {path: '/dynamic-layout', component: DynamicLayout, name: 'DynamicLayout', meta: {keepAlive: true}},
+    {path: '/Form', component: Form, name: 'Form', meta: {keepAlive: true}}
   ],
   scrollBehavior (to, from, savedPosition) {
     if (to.hash) {