demo文档

README.md

@@ -544,7 +544,8 @@ showActionSheetButton() {
 
 ### Note 
  hls-easy-ui#0.0.6
- 
+   [时间组件 Field](/packages/components/Field/README.md)
+    
    [时间组件 DateField](/packages/components/DataField/README.md)
  
    [下拉框组建 SelectField](/packages/components/Select/README.md)

build/webpack.base.conf.js

@@ -38,7 +38,7 @@ let webpackConfig = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: [resolve('src'), resolve('test'),resolve('packages')]
+        include: [resolve('src'), resolve('test'), resolve('packages')]
       },
       {
         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
@@ -68,7 +68,6 @@ let webpackConfig = {
   }
 }
 
-
 module.exports = vuxLoader.merge(webpackConfig, {
   plugins: [
     'vux-ui',
@@ -76,7 +75,7 @@ module.exports = vuxLoader.merge(webpackConfig, {
     {
       name: 'duplicate-style',
       options: {
-        cssProcessorOptions : {
+        cssProcessorOptions: {
           safe: true,
           zindex: false,
           autoprefixer: {
@@ -89,6 +88,6 @@ module.exports = vuxLoader.merge(webpackConfig, {
         }
       }
     },
-    {name: 'less-theme', path: 'src/styles/variables.less'}
+    { name: 'less-theme', path: 'src/styles/variables.less' }
   ]
 })

packages/components/Field/README.md

+Field 输入框
+
+```html
+      <h-field v-model="number" label="金额"/>
+      <h-field
+        v-model="number" format type="number"
+        clearable error
+        required label="金额"/>
+      <h-field
+        v-model="name"
+        clearable
+        required label="姓名"/>
+      <h-field
+        v-model="age"
+        :decimal="false"
+        type="number"
+        clearable error
+        required label="年龄"/>
+      <h-field
+        v-model="phone" :left-icon="leftIcon"
+        type="tel"
+        required label="手机号"/>
+      <h-field
+        v-model="password"
+        type="password"
+        required label="密码">
+        <i slot="left-icon" class="field-icon field-right-icon icon ion-close-circled"/>
+      </h-field>
+      <h-field
+        v-model="address" :autosize="true"
+        type="textarea"
+        inputAlign="left"
+        rows="1"
+        error
+        required label="通讯地址"/>
+      <h-field
+        v-model="homeAddress"
+        :autosize="true"
+        :word-limit="true" type="textarea" maxlength="50"
+        inputAlign="left"
+        clearable error
+        required label="家庭地址"/>
+```
+|字段名称 |字段说明 |类型 |必填 |默认 |
+| ----|------|-------|------|------|
+|value|当前值|String|Y|-|
+|type|输入类型|String|N|text|
+|decimal|是否支持小数（type=number有效）|Boolean|N|false|
+|proportion|label与value比例|Array|N|[1,2]|
+|required|是否必填|Boolean|N|false|
+|readonly|只读属性|Boolean|N|false|
+|disabled|禁用属性|Boolean|N|false|
+|itemHeight|字端默认高度|Number|N|45|
+|label|输入框左侧文本|String|Y|-|
+|leftIcon|左侧图标名称或图片链接|String|N|-|
+|rightIcon|右侧图标名称或图片链接|String|N|-|
+|clearable|是否启用清除图标，点击清除图标后会清空输入框|Boolean|false|-|
+|clearTrigger|显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示|String|N|focus|
+|format|是否启用金额千分位化（type=number有效）|Boolean|false|-|
+|maxlength|输入的最大字符数|Number,String|false|-|
+|inputAlign|输入框对齐方式，可选值为 center left|String|false|right|
+|placeholder|输入框默认提示|String|N|请输入+label|
+|showPlaceholder|是否显示placeholder|Boolean|N|true|
+|error|必输校验后输入框标红|Boolean|N|false|
+|autosize|是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px|Boolean,Object|N|-|
+|wordLimit|是否显示字数统计，需要设置maxlength属性|Boolean|N|false|
+

packages/components/Field/index.vue

@@ -19,7 +19,8 @@
           ref="fieldInput"
           v-bind="$attrs"
           :readonly="readonly" :disabled="disabled" :placeholder="placehold" :value="value"
-          :type="type" :class="('field-control-'+inputAlign)" class="field-control" @input="onInput($event.target.value)"
+          :type="type" :class="('field-control-'+inputAlign)" class="field-control"
+          @input="onInput($event.target.value)"
           @focus="onFocus"
           @blur="onBlur">
         <input
@@ -34,7 +35,8 @@
           v-if="type==='textarea'"
           ref="fieldInput" v-bind="$attrs"
           :readonly="readonly" :disabled="disabled" :placeholder="placehold" :value="value"
-          :type="type" :class="('field-control-'+inputAlign)" class="field-control" @input="onInput($event.target.value)"
+          :type="type" :class="('field-control-'+inputAlign)" class="field-control"
+          @input="onInput($event.target.value)"
           @focus="onFocus"
           @blur="onBlur"/>
         <i v-if="showCancel" class="field-icon field-right-icon icon ion-close-circled" @touchstart="cleanValue"/>
@@ -43,13 +45,16 @@
           <slot name="right-icon"/>
         </div>
       </div>
-      <div v-if="wordLimit && maxlength" class="field-word-limit"><span class="field-word-num">{{ count }}</span>/{{ maxlength }}</div>
+      <div v-if="wordLimit && maxlength" class="field-word-limit"><span class="field-word-num">{{ count }}</span>/{{
+      maxlength }}
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-import {formatNumber, isDef, isObject} from '../../../packages/common/utils'
+import { formatNumber, isDef, isObject } from '../../../packages/common/utils'
+
 export default {
   name: 'Field',
   inheritAttrs: false,
@@ -64,7 +69,7 @@ export default {
     },
     decimal: {
       type: Boolean,
-      default: true,
+      default: false,
     },
     proportion: {
       // name/content 横向面积比例
@@ -102,7 +107,11 @@ export default {
     },
     clearable: {
       type: Boolean,
-      default: true,
+      default: false,
+    },
+    clearTrigger: {
+      type: String,
+      default: 'focus',
     },
     format: {
       type: Boolean,
@@ -116,6 +125,10 @@ export default {
       type: String,
       default: 'right',
     },
+    showPlaceholder: {
+      type: Boolean,
+      default: true,
+    },
     placeholder: {
       type: String,
       default: null,
@@ -162,7 +175,9 @@ export default {
       return !!(this.rightIcon || this.$slots['right-icon'])
     },
     placehold () {
-      return this.placeholder ? this.placeholder : '请输入' + this.label
+      if (this.showPlaceholder) {
+        return this.placeholder ? this.placeholder : '请输入' + this.label
+      }
     },
     inputType () {
       if (this.type === 'number' && this.decimal) {
@@ -181,8 +196,12 @@ export default {
 
     showCancel () {
       if (this.clearable && !this.readonly && !this.disabled) {
-        const hasValue = isDef(this.value)
-        return hasValue && this.focused
+        if (this.clearTrigger === 'focus') {
+          const hasValue = isDef(this.value)
+          return hasValue && this.focused
+        } else {
+          return isDef(this.value)
+        }
       }
     },
 
@@ -251,7 +270,7 @@ export default {
     // 检验输入的合法性
     validate () {
       const { fieldInput } = this.$refs
-      const {required, error} = this
+      const { required, error } = this
       if (required && error) {
         this.hasError = !isDef(fieldInput.value)
       }
@@ -304,6 +323,7 @@ export default {
 
 <style lang="less">
   @import "../../../packages/common/styles/vue-1px";
+
   .h-field {
     width: 100%;
     display: flex;
@@ -311,27 +331,33 @@ export default {
     background-color: #fff;
     position: relative;
     line-height: 24px;
+
     &:after {
       .setBottomLine();
       left: 15px;
     }
-    .field-icon{
-     // width: 16px;
+
+    .field-icon {
+      // width: 16px;
       font-size: 16px;
-      img{
+
+      img {
         width: 16px;
         position: relative;
-        top:2px;
+        top: 2px;
       }
     }
-    .field-left-icon{
+
+    .field-left-icon {
       //line-height: 25px;
       margin-right: 4px;
     }
-    .field-right-icon{
+
+    .field-right-icon {
       //line-height: 25px;
       margin-left: 4px;
     }
+
     .field-title {
       line-height: 0.5rem;
       font-size: 14px;
@@ -339,6 +365,7 @@ export default {
       letter-spacing: 0;
       margin-right: 12px;
     }
+
     .required {
       &:before {
         position: absolute;
@@ -348,16 +375,19 @@ export default {
         content: '*';
       }
     }
-    .field-value{
+
+    .field-value {
       position: relative;
       overflow: hidden;
       color: #666;
       text-align: right;
       vertical-align: middle;
-      .field-body{
+
+      .field-body {
         display: flex;
         align-items: center;
-        .field-control{
+
+        .field-control {
           display: block;
           box-sizing: border-box;
           font-size: 14px;
@@ -370,17 +400,21 @@ export default {
           background-color: transparent;
           border: 0;
           resize: none;
-          &-left{
+
+          &-left {
             text-align: left;
           }
-          &-right{
+
+          &-right {
             text-align: right;
           }
-          &-center{
+
+          &-center {
             text-align: center;
           }
         }
       }
+
       .field-control-error {
         .field-control {
           &,
@@ -390,6 +424,7 @@ export default {
           }
         }
       }
+
       .field-word-limit {
         margin-top: 4px;
         color: #646566;
@@ -399,13 +434,14 @@ export default {
       }
     }
 
-    &-disabled{
-      .field-label{
+    &-disabled {
+      .field-label {
         color: #999;
       }
+
       .field-value {
         .field-body {
-          .field-control{
+          .field-control {
             color: #999;
           }
         }

packages/components/HFile/index.vue

@@ -124,13 +124,11 @@ export default {
             .catch(vm.resetInput)
         }
       }
-      vm.fileRead(files)
+      vm.fileRead(toArray(files))
     },
     fileRead (files) {
-      const oversize = isOversize(files, this.maxSize)
-      if (oversize) {
-        files = files.filter(file => file.size <= this.maxSize)
-      }
+      const oversizeFiles = isOversize(files, this.maxSize)
+
       if (Array.isArray(files)) {
         const maxCount = this.maxCount - this.fileList.length
 
@@ -144,17 +142,18 @@ export default {
             content: contents[index],
           }))
 
-          this.onAfterRead(fileList, oversize)
+          this.onAfterRead(fileList, oversizeFiles)
         })
       } else {
         readFile(files, this.resultType).then(content => {
-          this.onAfterRead({ file: files, content: content }, oversize)
+          this.onAfterRead({ file: files, content: content }, oversizeFiles)
         })
       }
     },
-    onAfterRead (files, oversize) {
-      if (oversize) {
-        this.$emit('oversize', toArray(files))
+    onAfterRead (files, oversizeFiles) {
+      if (oversizeFiles.length) {
+        this.$emit('oversize', toArray(oversizeFiles))
+        files = files.filter(file => file.size <= this.maxSize)
         // return
       }
       this.resetInput()

packages/components/HFile/utils.js

@@ -23,7 +23,7 @@ export function readFile (file, resultType) {
 }
 
 export function isOversize (files, maxSize) {
-  return toArray(files).some(file => file.size > maxSize)
+  return toArray(files).filter(file => file.size > maxSize)
 }
 
 export function isImageDataUrl (dataUrl) {

packages/components/ItemOption/OptionButton.vue

 <template>
-  <div :class="type" class="function">{{ text }}</div>
+  <div :class="type" class="function" @touchstart="itemClick">{{ text }}</div>
 </template>
 
 <script>
@@ -22,8 +22,9 @@ export default {
     this.$parent && this.$parent.optionItem.splice(this.$parent.optionItem.indexOf(this), 1)
   },
   methods: {
-    buttonClick (e) {
-      this.$emit('press', this.type)
+    itemClick (e) {
+      e.preventDefault()
+      this.$parent && this.$parent.reset()
     },
   },
 }

packages/components/ItemOption/index.vue

 <template>
   <div :class="cusClass" class="swipeout-list">
-    <div ref="item" :class="bottomBorder" class="item" data-type="0">
+    <div ref="optionItem" :class="bottomBorder" class="option-item" data-type="0">
       <div
         class="list-box"
         @touchstart.capture="touchStart"
@@ -62,7 +62,7 @@ export default {
   },
   methods: {
     touchStart (ev) {
-      this.$refs.item.style.transform = 'translate3d(0px,0px,0px)'
+      this.$refs.optionItem.style.transform = 'translate3d(0px,0px,0px)'
       this.reset()
       ev = ev || event
       // tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
@@ -88,7 +88,7 @@ export default {
     },
     // 判断当前是否有滑块处于滑动状态
     checkSlide () {
-      let listItems = this.$refs.item
+      let listItems = this.$refs.optionItem
       for (let i = 0; i < listItems.length; i++) {
         if (listItems[i].dataset.type === '1') {
           return true
@@ -106,10 +106,10 @@ export default {
       })
     },
     reset () {
-      let l = document.getElementsByClassName('item').length
+      let l = document.getElementsByClassName('option-item').length
       for (let i = 0; i < l; i++) {
-        document.getElementsByClassName('item')[i].style.transform = 'translate3d(0px,0px,0px)'
-        document.getElementsByClassName('item')[i].dataset.type = '0'
+        document.getElementsByClassName('option-item')[i].style.transform = 'translate3d(0px,0px,0px)'
+        document.getElementsByClassName('option-item')[i].dataset.type = '0'
       }
     },
   },
@@ -124,14 +124,14 @@ export default {
     overflow: visible;
     padding: 0 0 0 15px;
     width: 100%;
-    .item[data-type="0"] {
+    .option-item[data-type="0"] {
       transform: translate3d(0px, 0px, 0px);
       transition: all 0.4s;
     }
-    .item[data-type="1"] {
+    .option-item[data-type="1"] {
       transition: all 1s;
     }
-    .item {
+    .option-item {
       overflow: visible;
       position: relative;
       height: 100%;

packages/components/STab/index.vue

@@ -83,7 +83,7 @@ export default {
         throw 'tab index out of bound exception'
       } else {
         this.defaultActive === value
-        this.setTabActive(value)
+        // this.setTabActive(value)
       }
     },
   },

packages/components/Scroll/Bubble/index.vue

@@ -13,7 +13,7 @@ export default {
   data () {
     return {
       width: 50,
-      height: 80,
+      height: 60,
     }
   },
   computed: {
@@ -33,10 +33,10 @@ export default {
     this.ratio = 1
     this.width *= this.ratio
     this.height *= this.ratio
-    this.initRadius = 18 * this.ratio
+    this.initRadius = 11 * this.ratio // 外面阴影
     this.minHeadRadius = 12 * this.ratio
     this.minTailRadius = 5 * this.ratio
-    this.initArrowRadius = 10 * this.ratio
+    this.initArrowRadius = 6 * this.ratio // 里面的刷新
     this.minArrowRadius = 6 * this.ratio
     this.arrowWidth = 3 * this.ratio
     this.maxDistance = 40 * this.ratio

packages/components/Scroll/index.vue

@@ -36,7 +36,8 @@
       :bubbleY="bubbleY"
       name="pulldown"
     >
-      <div v-if="pullDown" ref="pulldown" :style="pullDownStyle" :class="c('__pulldown')">
+      <div
+        v-if="pullDown" ref="pulldown" :style="pullDownStyle" :class="c('__pulldown')">
         <div v-if="pullDownBefore" :class="c('__pulldown__before')">
           <Bubble :y="bubbleY"/>
         </div>
@@ -113,8 +114,8 @@ export default {
       // 下拉刷新配置
       type: Object,
       default: () => ({
-        threshold: 90, // 触发 pullingDown 的距离
-        stop: 40, // pullingDown 正在刷新 hold 时的距离
+        threshold: 40, // 触发 pullingDown 的距离
+        stop: 20, // pullingDown 正在刷新 hold 时的距离
         txt: '刷新成功',
       }),
     },
@@ -223,7 +224,7 @@ export default {
     this.fullScreen && detectOS() === 'ios' && (this.isIos = true)
   },
   async mounted () {
-    this.pullDownInitTop = parseInt(this.$refs.pulldown && getComputedStyle(this.$refs.pulldown).top) || -100
+    this.pullDownInitTop = parseInt(this.$refs.pulldown && getComputedStyle(this.$refs.pulldown).top) || -60
     await this.$nextTick()
     this.initScroll()
 
@@ -499,7 +500,7 @@ export default {
     &__pulldown {
       position absolute
       left 0
-      top -50px; /*no*/
+      top 0; /*no*/
       width 100%
       display flex
       justify-content center

packages/components/ShowPicture/showpicture.vue

@@ -192,7 +192,6 @@ export default {
       if (!this.width) {
         this.width = 100
       }
-      debugger
       vm.$refs.pad.style.width = this.width + '%'
     },
 

src/App.vue

@@ -36,7 +36,7 @@ export default {
         this.$router.isBack = true
         this.pathList = []
       }
-      this.$el.className = 'home-skeleton'
+      //this.$el.className = 'home-skeleton'
       let isBack = this.$router.isBack
       if (isBack) {
         this.transitionName = 'router-slide-right'
@@ -80,4 +80,11 @@ export default {
     background: url("assets/skeleton.svg") no-repeat fixed;
     background-size: contain;
   }
+  h4{
+    font-size: 16px;
+    margin-left: 15px;
+  }
+  p{
+    padding: 15px;
+  }
 </style>

src/components/index.js

+import Return from './return'
+export default {
+  install: Vue => {
+    Vue.component('h-return', Return)
+  },
+}

src/components/return.vue

+/**
+* @Author think
+* @Date 2020-08-26 09:39
+*/
+
+<template>
+  <div class="h-header-btn">
+    <i class="ion-ios-arrow-back"/>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+
+  },
+}
+</script>

src/main.js

@@ -11,6 +11,9 @@ import flexible from './common/ydui.flexible'
 
 import {componentInstall, appStyle} from '../packages/index'
 
+import component from './components/index'
+Vue.use(component)
+
 /**
  * 指令
  */

src/pages/BottomTab/demo.vue

+/**
+* @Author think
+* @Date 2020-08-25 17:34
+*/
+
+<template>
+  <h-view>
+    <h-header class="bar-custom">
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">BottomTab</div>
+    </h-header>
+    <bottom-tab :showDivider="true">
+      <tab-button>返回</tab-button>
+      <tab-button>退出<img src="@/assets/image/warning@2x.png"></tab-button>
+    </bottom-tab>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'BottomTabdemo',
+  data () {
+    return {}
+  },
+  methods: {},
+}
+</script>
+
+<style scoped lang="less">
+ .h-bottom-tab{
+   .bottom-tab-button{
+     img{
+       height: 20px;
+     }
+   }
+ }
+</style>

src/pages/Button/demo.vue

+/**
+* @Author think
+* @Date 2020-08-25 16:43
+*/
+
+<template>
+  <h-view>
+    <h-header class="bar-custom">
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">button</div>
+    </h-header>
+    <h-content>
+      <h4 class="item-title">按钮类型</h4>
+      <h-button class="button-class" type="rimless">rimless 按钮</h-button>
+      <h-button class="button-class" type="default">default 按钮</h-button>
+      <h-button class="button-class" type="primary">primary 按钮</h-button>
+      <h-button class="button-class" type="safety">safety 按钮</h-button>
+      <h-button class="button-class" type="warning">warning 按钮</h-button>
+      <h-button class="button-class" type="danger">danger 按钮</h-button>
+
+      <h4 class="item-title">按钮尺寸</h4>
+      <h-button class="button-class" size="mini">mini 按钮</h-button>
+      <h-button class="button-class" size="small">small 按钮</h-button>
+      <h-button class="button-class" size="normal">normal 按钮</h-button>
+      <h-button class="button-class" size="large">large 按钮</h-button>
+      <h-button class="button-class" size="huge">huge 按钮</h-button>
+
+      <h4 class="item-title">自定义圆角 (直接通过class设置)</h4>
+      <h-button class="button-class radius-small">rimless 按钮</h-button>
+      <h-button class="button-class radius-normal">default 按钮</h-button>
+      <h-button class="button-class radius-large">primary 按钮</h-button>
+
+      <h2 class="item-title">默认点击效果</h2>
+      <h-button class="button-class radius-small" type="rimless">基础按钮(无边框)</h-button>
+      <h-button class="button-class radius-small" type="rimless" shadow>基础按钮(无边框、有阴影效果)</h-button>
+      <h-button class="button-class radius-small purple">基础按钮(有背景色)</h-button>
+
+      <h4 class="item-title">禁用效果</h4>
+      <h-button class="button-class radius-small" disabled>基础按钮(禁用)</h-button>
+    </h-content>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'ButtonDemo',
+  data () {
+    return {}
+  },
+  methods: {},
+}
+</script>
+
+<style scoped lang="less">
+  .button-class {
+    width: 90%;
+    margin: 10px 5%;
+    display: block;
+
+    &.image {
+      width: auto;
+      margin-right: 0;
+      display: inline-block;
+    }
+
+    &.radius-small {
+      border-radius: 6px;
+    }
+
+    &.radius-normal {
+      border-radius: 16px;
+    }
+
+    &.radius-large {
+      border-radius: 40px;
+    }
+
+    .spin {
+      vertical-align: middle;
+    }
+
+    .text {
+      font-size: 28px;
+      margin-left: 16px;
+      vertical-align: middle;
+    }
+  }
+
+  .purple {
+    color: #fff;
+    background-color: #7e57c2;
+    border: 1px solid #7e57c2;
+  }
+
+  .button {
+    background-color: @theme-color;
+    color: #ffffff;
+    height: 100px;
+    width: 600px;
+    border: 20px;
+    margin-top: 20px;
+  }
+</style>

src/pages/Content/demo.vue

+/**
+* @Author think
+* @Date 2020-08-25 16:53
+*/
+
+<template>
+  <h-view>
+    <h-header class="bar-custom">
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">content</div>
+    </h-header>
+    <h-content>
+      <h4>文字内容</h4>
+    </h-content>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'ContentDemo',
+  data () {
+    return {}
+  },
+  methods: {},
+}
+</script>
+
+<style scoped lang="less">
+ .content{
+   //background-color: #cfcfcf;
+ }
+</style>

src/pages/Field/demo.vue

+/**
+* @Author think
+* @Date 2020-08-26 15:36
+*/
+
+<template>
+  <h-view class="form" title="Field">
+    <h-header>
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">Field</div>
+
+    </h-header>
+    <h-content>
+      <h4>不同格式</h4>
+      <h-field
+        v-model="area"
+        label="地区"/>
+      <h-field
+        v-model="number" type="number" placeholder="请输入金额"
+        label="金额"/>
+      <h-field
+        v-model="phone"
+        type="tel"
+        label="手机号"/>
+      <h-field
+        v-model="password"
+        type="password"
+        label="密码"/>
+      <h4>文字左对其</h4>
+      <h-field
+        v-model="area" inputAlign="left"
+        label="地区"/>
+      <h4>只读</h4>
+      <h-field
+        v-model="readonly"
+        readonly label="只读效果"/>
+      <h4>禁用</h4>
+      <h-field
+        v-model="disabled"
+        disabled label="禁用效果"/>
+      <h4>聚焦时显示删除按钮</h4>
+      <h-field
+        v-model="clearable" clearable
+        label="删除按钮"/>
+      <h4>永远显示删除按钮</h4>
+      <h-field
+        v-model="clearable" clearable clearTrigger="always"
+        label="删除按钮"/>
+      <h4>必填</h4>
+      <h-field
+        v-model="required" :show-placeholder="false" required
+        label="必填"/>
+      <h4>必填校验</h4>
+      <h-field
+        v-model="required" placeholder="请输入内容" error required
+        label="必填"/>
+      <h4>只能输入整数</h4>
+      <h-field
+        v-model="number" type="number"
+        clearable error placeholder="请输入整数金额"
+        required label="金额"/>
+      <h4>可以输入小数</h4>
+      <h-field
+        v-model="number" :decimal="true" type="number"
+        clearable error placeholder="请输入金额"
+        required label="金额"/>
+      <h4>格式化金额</h4>
+      <h-field
+        v-model="number" :decimal="true" type="number" format
+        clearable error placeholder="请输入金额"
+        required label="金额"/>
+      <h4>行高自适应</h4>
+      <h-field
+        v-model="address" :autosize="true"
+        type="textarea"
+        inputAlign="left"
+        rows="1"
+        error
+        required label="通讯地址"/>
+      <h4>显示字数统计</h4>
+      <h-field
+        v-model="homeAddress"
+        :autosize="true"
+        :word-limit="true" type="textarea" maxlength="50"
+        inputAlign="left"
+        clearable error
+        required label="家庭地址"/>
+      <h4>左右侧图标</h4>
+      <h-field
+        v-model="area"
+        label="地区">
+        <i slot="left-icon" class="field-icon field-left-icon icon ion-android-favorite"/>
+        <i slot="right-icon" class="field-icon field-right-icon icon ion-android-arrow-forward"/>
+      </h-field>
+    </h-content>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'FieldDemo',
+  data () {
+    return {
+      area: '',
+      number: null,
+      readonly: '只读效果',
+      disabled: '禁用效果',
+      clearable: '',
+      required: '',
+      leftIcon: require('@/assets/image/warning@2x.png'),
+      name: '',
+      age: null,
+      phone: null,
+      password: 123456,
+      address: '安徽省芜湖市',
+      homeAddress: '上海市青浦区',
+    }
+  },
+  methods: {},
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/pages/HFile/demo.vue

+/**
+* @Author think
+* @Date 2020-08-26 14:40
+*/
+
+<template>
+  <h-view title="HFile">
+    <h-header>
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">HFile</div>
+    </h-header>
+    <h-content>
+      <h4>文件选择</h4>
+      <h-file
+        :fileList="fileList" v-model="fileList" :upload="upload"
+        :uploadConfig="uploadConfig" :disabled="disable" :accept="accept" :beforeRead="beforeRead"
+        :afterRead="afterRead" :maxCount="maxCount" :max-size="maxSize" :previewImage="previewImage"
+        :deleteImage="deleteImage"
+        :result-type="resultType"
+        @upload="uploaded"
+        @delete="deletePic"
+        @oversize="oversize"/>
+      <h4>自定义上传</h4>
+      <h-file
+        :fileList="fileList" v-model="fileList" :upload="upload"
+        :uploadConfig="uploadConfig" :disabled="disable" :accept="accept" :beforeRead="beforeRead"
+        :afterRead="afterRead" :maxCount="maxCount" :max-size="maxSize" :previewImage="previewImage"
+        :deleteImage="deleteImage"
+        :result-type="resultType"
+        @upload="uploaded"
+        @delete="deletePic"
+        @oversize="oversize">
+        <div class="file-chose">
+          文件上传 <i class="icon ion-ios-cloud-upload"/>
+        </div>
+      </h-file>
+    </h-content>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'FileDemo',
+  data () {
+    return {
+      fileList: [], // 文件数组 必填
+      disable: false, // 是否禁用文件上传 默认false 可选
+      accept: 'image/png,image/jpeg', // 接受的文件类型 可选
+      upload: false, // 选取完成是否自动上传 默认 false 可选
+      maxSize: 5000000, // 文件大小限制，单位为byte 可选 超过大小的文件会自动取消
+      maxCount: 5, // 文件上传数量限制 可选超过数量自动隐藏选择按钮
+      deleteImage: true, // 是否删除文件 默认true 可选
+      previewImage: true, // 是否在选取完成后展示预览图 默认true 可选
+      resultType: 'dataUrl', // 文件读取结果类型 dataUrl 可选值为text
+      uploadConfig: { // 文件上传配置
+        uploadUrl: $config.rootPath + '/app/fileUploadSvc?sysName=HLS_APP&apiName=attachment_upload', // 上传的URL
+        params: { // 上传的额外参数
+          user_id: 1,
+          source_type: 'HLS_DOC_FILE_TEMPLET',
+          pkvalue: 42,
+        },
+        uploadSuccess: this.fileSuccess, // 上传成功后的回调函数 用于给文件添加服务端唯一标示或其他
+      },
+      money: null,
+    }
+  },
+  methods: {
+    /**
+       * email事件 可选
+       * 删除文件后触发 返回当前文件以及 对应的index
+       * @param file
+       * @param index
+       */
+    deletePic (file, index) {
+      //   debugger
+    },
+    /**
+       * 可选
+       * 文件选择完成后读取前触发 返回当前选择的文件数组
+       * 返回 ture 或者promise对象 标示继续读取，否则终止 操作
+       * @param files 选择的文件数组
+       * @returns {boolean}
+       */
+    beforeRead (files) {
+      files.forEach((file, index) => {
+        console.log(file.size)
+      })
+      return true
+    },
+    /**
+       * 可选
+       * 文件读取成功后触发添加了文件的content内容
+       * @param files 选择的文件数组
+       * @returns {boolean}
+       */
+    afterRead (files) {
+      files.forEach((item, index) => {
+        console.log(item.file.name)
+      })
+      return true
+    },
+    /**
+       * email事件 可选
+       * 全部文件上传成功后触发
+       * @param fileList 全部文件数组
+       */
+    uploaded (fileList) {
+      debugger
+    },
+    /**
+       * email事件 可选
+       * 文件大小超过配置的大小
+       * @param files
+       */
+    oversize (files) {
+      debugger
+    },
+    /**
+       * 每个文件上传成功后的回调 可选配置
+       * @param fileList 文件数组
+       * @param result 上传返回结果
+       */
+
+    fileSuccess (fileList, result) {
+      this.fileList = fileList
+      debugger
+      this.fileList.forEach((itemFile, index) => {
+        if (result.response && itemFile.file && !itemFile.attachment_id && result.response.fileName === itemFile.file.name) {
+          itemFile.attachment_id = result.response.attachment_id
+        }
+      })
+    },
+  },
+}
+</script>
+
+<style scoped lang="less">
+  .content{
+    .h-file{
+      .file-chose{
+        width: 110px;
+        height: 44px;
+        background-color: #07c160;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #fff;
+        border-radius: 4px;
+        .icon{
+          margin-left: 10px;
+          font-size: 20px;
+          //color: #fff;
+        }
+      }
+    }
+  }
+</style>

src/pages/Header/demo.vue

+/**
+* @Author think
+* @Date 2020-08-25 15:31
+*/
+
+<template>
+  <h-view>
+    <h-header class="bar-custom">
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">header</div>
+    </h-header>
+    <h4>基本用法</h4>
+    <h-header>
+      <div slot="center">header</div>
+    </h-header>
+    <h4>左侧按钮、右侧按钮</h4>
+    <h-header>
+      <div slot="left" class="h-header-btn">左侧</div>
+      <div slot="center">中间title</div>
+      <div slot="right" class="h-header-btn">右侧</div>
+    </h-header>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'HeaderDemo',
+  data () {
+    return {}
+  },
+  methods: {
+    click(e){
+      debugger
+    }
+  },
+}
+</script>
+
+<style  lang="less">
+
+</style>

src/pages/ItemOption/demo.vue

+/**
+* @Author think
+* @Date 2020-08-26 14:09
+*/
+
+<template>
+  <h-view title="ItemOption" class="option-demo">
+    <h-header class="bar-custom">
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">ItemOption</div>
+    </h-header>
+    <h-content>
+      <h4>左滑删除</h4>
+      <list-item>
+        <item v-for="(color,index) in colors" :showName="false" :key="index">
+          <item-option
+            ref="option"
+            class="mySlider">
+            <div>{{ color.name }}</div>
+            <div>{{ color.hex }}</div>
+            <div slot="buttons">
+              <option-button type="default" text="默认"/>
+              <option-button type="primary" text="编辑"/>
+              <option-button type="warn" text="删除" @click.native="deleteFun(index)"/>
+            </div>
+          </item-option>
+        </item>
+
+      </list-item>
+    </h-content>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'ItemOptiondemo',
+  data () {
+    return {
+      colors: [{ name: 'Yellow', hex: '#f4d03f' }, { name: 'Green', hex: '#229954' }, {
+        name: 'Purple',
+        hex: '#9b59b6',
+      }],
+    }
+  },
+  methods: {
+    deleteFun (index) {
+      this.colors.remove(index)
+     // this.$refs.option[index].reset()
+      this.colors.sort()
+    },
+  },
+}
+</script>
+
+<style lang="less">
+.option-demo{
+  .hls-item{
+    padding: 0;
+    .contents{
+      padding: 0;
+    }
+    &.activated{
+      opacity: 1;
+    }
+  }
+}
+</style>

src/pages/List/demo.vue

+/**
+* @Author think
+* @Date 2020-08-26 09:38
+*/
+
+<template>
+  <h-view title="List" class="list-demo">
+    <h-header class="bar-custom">
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">List</div>
+    </h-header>
+    <h-content>
+      <h4>基础用法</h4>
+      <list-item :item-height="55" class="wx-list">
+        <item>
+          <img slot="left-icon" src="@/assets/image/friend@2x.png" class="left-icon">
+          <div slot="name">朋友圈</div>
+          <img slot="right-icon" src="@/assets/image/right-arrow@2x.png" style="width: 8px" class="right-icon">
+        </item>
+      </list-item>
+      <list-item :item-height="55" class="wx-list">
+        <item>
+          <img slot="left-icon" src="@/assets/image/shak@2x.png" class="left-icon">
+          <div slot="name">扫一扫</div>
+          <img slot="right-icon" src="@/assets/image/right-arrow@2x.png" style="width: 8px" class="right-icon">
+        </item>
+      </list-item>
+      <h4>input用法</h4>
+      <list-item>
+        <item>
+          <img slot="left-icon" src="@/assets/image/warning@2x.png" class="left-icon">
+          <div slot="name" class="required">检查更新</div>
+          <div slot="content">检查更新</div>
+          <img slot="right-icon" src="@/assets/image/arrow-down@2x.png" style="width: 8px" class="right-icon">
+        </item>
+        <item>
+          <img slot="left" src="@/assets/image/warning@2x.png" class="left-icon">
+          <div slot="name" class="required">字数测试</div>
+          <div slot="content">我是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文字</div>
+        </item>
+        <item :showArrow="true">
+          <div slot="name" class="required">客户名称</div>
+          <input slot="content" v-model="bp_name" type="text" placeholder="请输入">
+        </item>
+      </list-item>
+      <h4>列表用法</h4>
+      <list-item :item-height="80">
+        <item
+          v-for="(list,index) in [1,2,3,4]" :key="index" :proportion="[5,1]">
+          <img slot="left-icon" src="@/assets/image/item@2x.png" class="left-icon">
+          <div slot="name" class="text">
+            <div class="cont-name" style="font-size: 16px;color: #5D98F6">合同编号</div>
+            <div class="cont-type" style="color: #8C8C8C;">承租人名称</div>
+          </div>
+        </item>
+      </list-item>
+
+    </h-content>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'ListDemo',
+  data () {
+    return {
+      bp_name: '张三',
+    }
+  },
+  methods: {},
+}
+</script>
+
+<style lang="less">
+  .list-demo {
+
+    .hls-item {
+      .contents {
+        .add-name {
+          .left-icon {
+            width: 28px;
+          }
+          .text {
+            margin-left: 15px;
+            .cont {
+              margin-top: 5px;
+              font-size: 13px;
+              line-height: 18px;
+              &:first-child {
+                margin-top: 0;
+              }
+            }
+            .cont-num {
+              margin-top: 8px;
+              font-size: 15px;
+              line-height: 21px;
+              color: #5D98F6;
+            }
+          }
+        }
+      }
+    }
+    .wx-list{
+      .contents{
+        .add-name{
+          font-size: 16px;
+          .left-icon {
+            width: 24px;
+          }
+        }
+      }
+    }
+  }
+</style>

src/pages/Model/demo.vue

+/**
+* @Author think
+* @Date 2020-08-25 17:47
+*/
+
+<template>
+  <h-view class="modal-demo">
+    <h-header class="bar-custom">
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">Model</div>
+    </h-header>
+    <h-content>
+      <p>position默认top 可选 bottom left right。需结合class model属性从写样式</p>
+      <h-button class="button-class" size="normal" @click.native="showModel">model</h-button>
+    </h-content>
+    <h-modal ref="model" v-model="show" :positon="position">
+      <h-content>
+        <h4>model内容</h4>
+        <h-button class="button-class" size="normal" @click.native="hideModel">hideModel</h-button>
+      </h-content>
+    </h-modal>
+  </h-view>
+
+</template>
+
+<script>
+export default {
+  name: 'ModelDemo',
+  data () {
+    return {
+      show: false,
+      position: 'top',
+    }
+  },
+  methods: {
+    showModel () {
+      this.show = true
+    },
+    hideModel () {
+      this.$refs.model.hideModal()
+    },
+  },
+}
+</script>
+
+<style lang="less">
+  .modal-demo {
+    .button-class {
+      width: 90%;
+      margin: 10px 5%;
+      display: block;
+    }
+    .modal {
+      top: 50%;
+    }
+  }
+</style>

src/pages/STab/index.vue

+/**
+* @Author think
+* @Date 2020-08-25 15:46
+*/
+
+<template>
+  <h-view title="tab">
+    <h-header class="bar-custom">
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">tab</div>
+    </h-header>
+    <h4>基础用法</h4>
+    <s-tab>
+      <tab-item>app</tab-item>
+      <tab-item>vue</tab-item>
+    </s-tab>
+    <h4>自定义图标</h4>
+    <s-tab>
+      <tab-item><img src="@/assets/image/warning@2x.png"></tab-item>
+      <tab-item><img src="@/assets/image/logo.png"></tab-item>
+      <tab-item>angular</tab-item>
+      <tab-item>react</tab-item>
+    </s-tab>
+    <h4>下边框和分割线</h4>
+    <s-tab :has-border="true" :show-divider="true">
+      <tab-item><img src="@/assets/image/warning@2x.png"></tab-item>
+      <tab-item><img src="@/assets/image/logo.png"></tab-item>
+      <tab-item>angular</tab-item>
+      <tab-item>react</tab-item>
+    </s-tab>
+    <h4>默认显示及点击事件</h4>
+    <s-tab :has-border="true" :show-divider="true" v-model="index" @tabClick="tabClick">
+      <tab-item><img src="@/assets/image/warning@2x.png"></tab-item>
+      <tab-item><img src="@/assets/image/logo.png"></tab-item>
+      <tab-item>angular</tab-item>
+      <tab-item>react</tab-item>
+      <tab-item>ionic</tab-item>
+      <tab-item>jquery</tab-item>
+      <tab-item>react</tab-item>
+    </s-tab>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'Tab',
+  data () {
+    return {
+      hasBorder: true,
+      showDivider: true,
+      index: 2,
+    }
+  },
+  methods: {
+    tabClick (index) {
+      console.log(index)
+    },
+  },
+}
+</script>
+
+<style scoped lang="less">
+  img {
+    height: 16px;
+  }
+</style>

src/pages/Scroll/demo.vue

+/**
+* @Author think
+* @Date 2020-08-25 17:03
+*/
+
+<template>
+  <h-view title="scroll">
+    <h-header class="bar-custom">
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">scroll</div>
+    </h-header>
+    <scroll
+      ref="scroll" :pullUp="true" :pull-down="true" @pullingUp="loadMore"
+      @pullingDown="loadMore">
+      <list-item>
+        <item v-for="item in list" :key="item">
+          <i slot="left-icon" class="icon  ion-ios-arrow-back"/>
+          <p slot="name">{{ item }}</p>
+        </item>
+      </list-item>
+    </scroll>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'ScrollDemo',
+  data () {
+    return {
+      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+      page: 1,
+    }
+  },
+  methods: {
+    loadMore () {
+      let vm = this
+      if (vm.page <= 5) {
+        setTimeout(() => {
+          for (let i = 1; i <= 10; i++) {
+            vm.list.push(vm.page * 10 + i)
+          }
+          vm.page += 1
+          vm.$refs.scroll.update(false)
+        }, 500)
+      } else {
+        vm.$refs.scroll.update(true)
+      }
+    },
+
+  },
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

src/pages/ScrollTest.vue

@@ -11,7 +11,7 @@
     <scroll ref="scroll" :pullUp="true" @pullingUp="loadMore">
       <list-item>
         <item v-for="item in list" :key="item">
-          <i slot="left-icon" class="icon  ion-ios-arrow-back"></i>
+          <i slot="left-icon" class="icon  ion-ios-arrow-back"/>
           <p slot="name">{{ item }}</p>
         </item>
       </list-item>

src/pages/Swipe/demo.vue

+/**
+* @Author think
+* @Date 2020-08-26 09:23
+*/
+
+<template>
+  <h-view>
+    <h-header class="bar-custom">
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">Swipe</div>
+    </h-header>
+    <h-content>
+      <h4 class="item-title">Swipe基础使用</h4>
+      <swipe
+        :interval="5000" @start="start" @move="move"
+        @change="change">
+        <swipe-item>
+          <div :style="{'background': bgColor[0]}" class="item-bg">0</div>
+        </swipe-item>
+        <swipe-item>
+          <div :style="{'background': bgColor[1]}" class="item-bg">1</div>
+        </swipe-item>
+        <swipe-item>
+          <div :style="{'background': bgColor[2]}" class="item-bg">2</div>
+        </swipe-item>
+      </swipe>
+
+      <h4 class="item-title">纵向滚动</h4>
+      <swipe :vertical="true" style="height: 200px">
+        <swipe-item v-for="key in count" :key="key" :style="{'background': bgColor[key-1]}">
+          <div class="item-bg">{{ key-1 }}</div>
+        </swipe-item>
+      </swipe>
+
+      <h4 class="item-title">定制indicators</h4>
+      <swipe :index.sync="index">
+        <swipe-item v-for="key in count" :key="key" :style="{'background': bgColor[key-1]}">
+          <div class="item-bg">{{ key-1 }}</div>
+        </swipe-item>
+        <div v-for="key in count" slot="indicators" :key="key" :class="['indicators', {'active': key-1 === index}]"/>
+      </swipe>
+    </h-content>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'SwipeDemo',
+  data () {
+    return {
+      count: 3,
+      index: 1,
+      colors: [{ name: 'Yellow', hex: '#f4d03f' }, { name: 'Green', hex: '#229954' }, {
+        name: 'Purple',
+        hex: '#9b59b6',
+      }],
+      bgColor: ['#5D98F6', '#1aad19', '#eebe41'],
+    }
+  },
+  methods: {
+    start (i) {
+      console.log(`start: ${i}`)
+    },
+    move (i) {
+      console.log(`move: ${i}`)
+    },
+    change (i) {
+      // console.log(`change: ${i}`)
+    },
+  },
+}
+</script>
+
+<style scoped lang="less">
+  .item-bg {
+    height: 200px;
+    line-height: 200px;
+    text-align: center;
+    font-size: 20px;
+    font-weight: 500;
+  }
+  .indicators {
+    height: 14px;
+    width: 14px;
+    background-image: url('../../assets/image/logo.png');
+    background-position: center;
+    background-size: cover;
+    opacity: 0.5;
+
+    &.active {
+      opacity: 1;
+    }
+  }
+</style>

src/pages/demo.vue

+/**
+* @Author think
+* @Date 2020-08-25 15:04
+*/
+
+<template>
+  <h-view title="demo">
+    <h-header>
+      <div slot="center">demo</div>
+    </h-header>
+    <h-content>
+      <list-item>
+        <item>
+          <router-link slot="name" to="/header">header</router-link>
+        </item>
+        <item>
+          <router-link slot="name" to="/tab">STab</router-link>
+        </item>
+        <item>
+          <router-link slot="name" to="/button">HButton</router-link>
+        </item>
+        <item>
+          <router-link slot="name" to="/content">HContent</router-link>
+        </item>
+        <item>
+          <router-link slot="name" to="/scroll">Scroll</router-link>
+        </item>
+        <item>
+          <router-link slot="name" to="/bottomTab">底部按钮BottomTab</router-link>
+        </item>
+        <item>
+          <router-link slot="name" to="/model">Modal</router-link>
+        </item>
+        <item>
+          <router-link slot="name" to="/swipe">Swipe</router-link>
+        </item>
+        <item>
+          <router-link slot="name" to="/list">List</router-link>
+        </item>
+        <item>
+          <router-link slot="name" to="/option">itemOption</router-link>
+        </item>
+        <item>
+          <router-link slot="name" to="/file">HFile</router-link>
+        </item>
+        <item>
+          <router-link slot="name" to="/field">Field</router-link>
+        </item>
+        <item>
+          <section slot="name">CurrencyInput</section>
+        </item>
+        <item>
+          <section slot="name">CheckBox</section>
+        </item>
+        <item>
+          <section slot="name">DateField</section>
+        </item>
+        <item>
+          <section slot="name">selectField</section>
+        </item>
+        <item>
+          <section slot="name">CheckBox</section>
+        </item>
+        <item>
+          <section slot="name">Radio</section>
+        </item>
+        <item>
+          <section slot="name">Switch</section>
+        </item>
+        <item>
+          <section slot="name">CheckBox</section>
+        </item>
+        <item>
+          <section slot="name">Range</section>
+        </item>
+        <item>
+          <section slot="name">Progress</section>
+        </item>
+        <item>
+          <section slot="name">Spin</section>
+        </item>
+        <item>
+          <section slot="name">TopTips</section>
+        </item>
+        <item>
+          <section slot="name">Dialog</section>
+        </item>
+        <item>
+          <section slot="name">ActionSheet</section>
+        </item>
+        <item>
+          <section slot="name">NumberKeyboard</section>
+        </item>
+        <item>
+          <section slot="name">Select</section>
+        </item>
+        <item>
+          <section slot="name">ShowPicture</section>
+        </item>
+        <item>
+          <section slot="name">Toast</section>
+        </item>
+        <item>
+          <section slot="name">Alert</section>
+        </item>
+        <item>
+          <section slot="name">Confirm</section>
+        </item>
+        <item>
+          <section slot="name">Loading</section>
+        </item>
+        <item>
+          <section slot="name">Datetime</section>
+        </item>
+      </list-item>
+    </h-content>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'Demo',
+  data () {
+    return {}
+  },
+  methods: {},
+}
+</script>
+
+<style lang="less">
+h4{
+  font-size: 20px;
+  margin-left: 15px;
+}
+  a{
+    width: 100%;
+  }
+</style>

src/pages/fileTest.vue

@@ -6,9 +6,7 @@
 <template>
   <h-view title="HFile">
     <h-header>
-      <div slot="left" class="h-header-btn" @click="$routeGo()">
-        <i class="ion-ios-arrow-back"/>
-      </div>
+      <h-return slot="left" @click.native="$routeGo()"/>
       <div slot="center">HFile</div>
     </h-header>
     <h-content>

src/pages/form.vue

@@ -6,9 +6,7 @@
 <template>
   <h-view class="form" title="From">
     <h-header>
-      <div slot="left" class="h-header-btn" @click="$hlsExit()">
-        <i class="ion-ios-arrow-back"/>
-      </div>
+      <h-return slot="left" @click.native="$routeGo()"/>
       <div slot="center">From</div>
       <div slot="right" class="h-header-btn">右边</div>
     </h-header>

src/pages/hlsPopup.vue

 <template>
   <h-view class="public-style hls-popup" style="height: 100%" title="封装测试">
     <h-header class="bar-custom">
-      <div slot="left" class="h-header-btn" @click="$routeGo()">
-        <i class="ion-ios-arrow-back"/>
-      </div>
+      <h-return slot="left" @click.native="$routeGo()"/>
       <div slot="center">封装测试</div>
       <div slot="right" class="h-header-btn">
         操作

src/pages/home.vue

 <template>
   <h-view id="home" class="public-style" title="小易">
     <h-header :has-border="false" class="bar-custom">
-      <div slot="left" class="h-header-btn" @click="$hlsExit()">
-        <i class="ion-ios-arrow-back"/>
-      </div>
+      <h-return slot="left" @click.native="$routeGo()"/>
       <div slot="center">小易</div>
     </h-header>
     <s-tab>

src/router/index.js

@@ -5,19 +5,34 @@ import Router from 'vue-router'
 import Radio from '@/pages/radioTest'
 import Form from '@/pages/form'
 
+const Demo = resolve => require.ensure([], () => { resolve(require('@/pages/demo')) }, 'demo')
 const Home = resolve => require.ensure([], () => { resolve(require('@/pages/home')) }, 'home')
 const HlsPopup = resolve => require.ensure([], () => { resolve(require('@/pages/hlsPopup')) }, 'hlsPopup')
 const HFile = () => import(/* webpackChunkName:'HFile' */ '@/pages/fileTest')
 const scrollTest = resolve => require.ensure([], () => { resolve(require('@/pages/scrollTest')) }, 'scroll')
 
+const Header = resolve => require.ensure([], () => { resolve(require('@/pages/Header/demo')) }, 'header')
+const Tab = resolve => require.ensure([], () => { resolve(require('@/pages/STab/index')) }, 'stab')
+const Button = resolve => require.ensure([], () => { resolve(require('@/pages/Button/demo')) }, 'button')
+const Content = resolve => require.ensure([], () => { resolve(require('@/pages/Content/demo')) }, 'content')
+const Scroll = resolve => require.ensure([], () => { resolve(require('@/pages/Scroll/demo')) }, 'scroll')
+const BottomTab = resolve => require.ensure([], () => { resolve(require('@/pages/BottomTab/demo')) }, 'BottomTab')
+const Model = resolve => require.ensure([], () => { resolve(require('@/pages/Model/demo')) }, 'model')
+const Swipe = resolve => require.ensure([], () => { resolve(require('@/pages/Swipe/demo')) }, 'swipe')
+const List = resolve => require.ensure([], () => { resolve(require('@/pages/List/demo')) }, 'list')
+const ItemOption = resolve => require.ensure([], () => { resolve(require('@/pages/ItemOption/demo')) }, 'option')
+const File = resolve => require.ensure([], () => { resolve(require('@/pages/HFile/demo')) }, 'file')
+const Field = resolve => require.ensure([], () => { resolve(require('@/pages/Field/demo')) }, 'field')
+
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
       path: '/',
-      redirect: '/home',
+      redirect: '/demo',
     },
+    {path: '/demo', component: Demo, name: 'Demo', meta: {keepAlive: true}},
     {path: '/home', component: Home, name: 'Home', meta: {keepAlive: false}},
     // test工具类
     {path: '/hls-popup', component: HlsPopup, name: 'HlsPopup', meta: {keepAlive: false}},
@@ -25,6 +40,20 @@ export default new Router({
     {path: '/HFile', component: HFile, name: 'HFile', meta: {keepAlive: true}},
     {path: '/Form', component: Form, name: 'Form', meta: {keepAlive: true}},
     {path: '/scrollTest', component: scrollTest, name: 'scrollTest', meta: {keepAlive: true}},
+
+    {path: '/header', component: Header, name: 'Header', meta: {keepAlive: false}},
+    {path: '/tab', component: Tab, name: 'Tab', meta: {keepAlive: false}},
+    {path: '/button', component: Button, name: 'Button', meta: {keepAlive: false}},
+    {path: '/content', component: Content, name: 'Content', meta: {keepAlive: false}},
+    {path: '/scroll', component: Scroll, name: 'Scroll', meta: {keepAlive: false}},
+    {path: '/bottomTab', component: BottomTab, name: 'BottomTab', meta: {keepAlive: false}},
+    {path: '/model', component: Model, name: 'Model', meta: {keepAlive: false}},
+    {path: '/swipe', component: Swipe, name: 'Swipe', meta: {keepAlive: false}},
+    {path: '/list', component: List, name: 'List', meta: {keepAlive: false}},
+    {path: '/option', component: ItemOption, name: 'ItemOption', meta: {keepAlive: false}},
+    {path: '/file', component: File, name: 'File', meta: {keepAlive: false}},
+    {path: '/field', component: Field, name: 'Field', meta: {keepAlive: false}},
+
   ],
   scrollBehavior (to, from, savedPosition) {
     if (to.hash) {