demo

build/webpack.base.conf.js

@@ -57,7 +57,7 @@ let webpackConfig = {
         }
       },
       {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        test: /\.(woff2?|eot|ttf|otf|ttc)(\?.*)?$/,
         loader: 'url-loader',
         options: {
           limit: 1000,

packages/common/styles/app.core.less

@@ -6,3 +6,4 @@
 @import "ionic-public-style";
 @import "platform-ios";
 @import "platform-iosx";
+@import "fonts";

packages/common/styles/fonts.less

+@font-face {
+  font-family: "PingFang SC";
+  src: url("../fonts/PingFang.ttc")format("truetype");
+  font-style: normal;
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: "Times";
+  src: url("../fonts/Times.ttc")format("truetype");
+  font-style: normal;
+  font-weight: normal;
+}

packages/common/styles/ionic.less

@@ -3792,7 +3792,7 @@ html {
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  font-family: sans-serif;
+  font-family: sans-serif,"PingFang SC";
   /* 1 */
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
@@ -3953,7 +3953,7 @@ textarea {
   /* 3 */
   font-size: 100%;
   /* 2 */
-  font-family: inherit;
+  font-family: inherit,"PingFang SC";
   /* 1 */
   outline-offset: 0;
   /* 4 */
@@ -4094,7 +4094,7 @@ body{
   width: 100%;
   overflow: hidden;
   font-size: .32rem;
-  font-family: -apple-system-font,sans-serif;
+  font-family: -apple-system-font,"PingFang SC",sans-serif;
   -webkit-tap-highlight-color: transparent;
   -webkit-font-smoothing: antialiased;
 }
@@ -4167,7 +4167,7 @@ h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   color: #000;
   font-weight: 500;
-  font-family: "-apple-system", "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
+  font-family: "-apple-system-font", "PingFang SC", sans-serif;
   line-height: 1.2;
 }
 

packages/components/NumberKeyboard/README.md

@@ -9,7 +9,7 @@
       </list-item>
       
      <number-keyboard
-       :show="true"
+       v-model="true"
        title="数字键盘"
        extra-key="."
        @input="onInput"

packages/components/NumberKeyboard/demo.vue

+/**
+* @Author think
+* @Date 2020-09-03 09:54
+*/
+
+<template>
+  <h-view title="NumberKeyboard">
+    <h-header>
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">NumberKeyboard</div>
+    </h-header>
+    <h-content>
+      <list-item>
+        <h-field v-model="number" readonly label="数字" @click.native="keyboradShow"/>
+        <h-field v-model="number" readonly label="数字" @click.native="show"/>
+      </list-item>
+      <number-keyboard
+        v-model="keyboardShow"
+        title="数字键盘"
+        extra-key="."
+        @keyDown="onInput"
+        @delete="onDelete"
+        @show="show"/>
+
+    </h-content>
+
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'Demo',
+  data () {
+    return {
+      number: 0,
+      keyboardShow: false,
+    }
+  },
+  methods: {
+    show (e) {
+      debugger
+    },
+    keyboradShow () {
+      let vm = this
+      vm.hlsPopup.showNumberKeyborad({
+        title: '数字键盘',
+        keyDown: (text) => {
+          vm.onInput(text)
+        },
+        keyDelete: () => {
+          vm.onDelete()
+        },
+      })
+    },
+    onInput (value) {
+      this.number += ('' + value)
+      console.log(value)
+    },
+    onDelete () {
+      this.number = ''
+      console.log('delete')
+    },
+  },
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

packages/components/NumberKeyboard/index.js

@@ -9,9 +9,9 @@ class VueKeyboard {
     this._vm = undefined
   }
   show (option) {
-    elementUtil.createElement('vum-show-keyborad')
+    elementUtil.createElement('vum-show-keyboard')
     this._vm = new Vue(numberKeyboard)
-    this._vm.$mount('[vum-show-keyborad]')
+    this._vm.$mount('[vum-show-keyboard]')
     setTimeout(() => {
       this._vm.showNumberKeyboard(option)
     })

packages/components/NumberKeyboard/index.vue

 <template>
   <transition :name="transition ? 'van-slide-bottom' : ''">
-    <div v-show="show" :class="cusClass" class="keyboard-backdrop" @click="closeKeyboard">
+    <div v-show="value" :class="cusClass" class="keyboard-backdrop" @click="closeKeyboard">
       <div
-        v-show="show"
+        v-show="value"
         :style="style"
         class="number-keyboard"
         @touchstart.stop
@@ -229,9 +229,18 @@ export default {
   name: 'NumberKeyboard',
   components: {Key},
   props: {
-      show: Boolean, // eslint-disable-line
-      title: String, // eslint-disable-line
-      closeButtonText: String, // eslint-disable-line
+    value: {
+      type: Boolean,
+      default: false,
+    },
+    title: {
+      type: String,
+      default: '',
+    },
+    closeButtonText: {
+      type: String,
+      default: '',
+    },
     theme: {
       type: String,
       default: 'default',
@@ -298,7 +307,7 @@ export default {
   },
   mounted () {
     this.handler(true)
-    this.$el.setAttribute('vum-show-keyborad', '')
+    this.$el.setAttribute('vum-show-keyboard', '')
   },
   destroyed () {
     this.handler(false)
@@ -315,9 +324,9 @@ export default {
   methods: {
     closeKeyboard () {
       let vm = this
-      let wrapper = document.querySelector('[vum-show-keyborad]')
+      let wrapper = document.querySelector('[vum-show-keyboard]')
       if (wrapper && vm.keyBoardPlugin) {
-        this.show = false
+        this.value = false
         try {
           document.body.removeChild(wrapper)
         } catch (e) {
@@ -333,7 +342,7 @@ export default {
       this.extraKey = options.extraKey
       this.keyDown = options.keyDown
       this.keyDelete = options.keyDelete
-      this.show = true
+      this.value = true
     },
     handler (action) {
       if (action !== this.handlerStatus && this.hideOnClickOutside) {
@@ -346,11 +355,12 @@ export default {
     },
     onClose () {
       this.$emit('close')
-      this.show = false
+      this.$emit('input', false)
+      // this.show = false
       this.onBlur()
     },
     onAnimationEnd () {
-      this.$emit(this.show ? 'show' : 'hide')
+      this.$emit(this.value ? 'show' : 'hide')
     },
     onPressKey (text) {
       let vm = this
@@ -365,7 +375,7 @@ export default {
       } else if (text === this.closeButtonText) {
         this.onClose()
       } else {
-        this.$emit('input', text)
+        this.$emit('keyDown', text)
         if (vm.keyDown) {
           vm.keyDown(text)
         }

packages/components/Progress/demo.vue

+/**
+* @Author think
+* @Date 2020-09-07 10:51
+*/
+
+<template>
+  <h-view title="Progress">
+    <h-header>
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">Progress</div>
+    </h-header>
+    <h-content>
+      <h4>当前进度</h4>
+      <h-progress :percent="percent" :progress-bg="progressBg" :progress-act-bg="progressActBg"/>
+    </h-content>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'ProGressDemo',
+  data () {
+    return {
+      percent: 40,
+      progressBg: 'rgba(0,0,0,.3)',
+      progressActBg: '#0041c4',
+    }
+  },
+  methods: {},
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

packages/components/Range/demo.vue

+/**
+* @Author think
+* @Date 2020-09-07 11:01
+*/
+
+<template>
+  <h-view title="Range">
+    <h-header>
+      <h-return slot="left" @click.native="$routeGo()"/>
+      <div slot="center">Range</div>
+    </h-header>
+    <h-content>
+      <list-item>
+        <h4>基础用法</h4>
+        <item>
+          <section slot="name">完成度</section>
+          <h-range
+            slot="content" v-model="process" @change="change"/>
+        </item>
+        <h4>最大值最小值</h4>
+        <item>
+          <section slot="name">首付比例</section>
+          <h-range
+            slot="content"
+            :decimal="decimal" v-model="rangeValue" :min="min" :max="max"
+            :step="step" :disabled="disabled" :disabled-opacity="disabledOpacity" :range-bar-height="rangeBarHeight"
+            :range-handle-height="rangeHandleHeight" @change="change" @touchstart="touchStart" @touchend="touchEnd"/>
+        </item>
+      </list-item>
+    </h-content>
+  </h-view>
+</template>
+
+<script>
+export default {
+  name: 'RangeDemo',
+  data () {
+    return {
+      process: 0,
+      decimal: false,
+      rangeValue: 40,
+      min: 20,
+      max: 80,
+      step: 10,
+      disabled: false,
+      disabledOpacity: 0.5,
+      rangeBarHeight: 1,
+      rangeHandleHeight: 20,
+    }
+  },
+  methods: {
+
+    change (val) {
+      // this.rangeValue = val
+      console.log(val)
+    },
+    touchStart (e) {
+      console.log(e)
+    },
+    touchEnd (e) {
+      console.log(e)
+    },
+  },
+}
+</script>
+
+<style scoped lang="less">
+
+</style>

packages/components/Switch/index.vue

 <template>
   <label
-    :class="cusClass" class="toggle toggle-positive toggle-check"
+    class="toggle toggle-positive toggle-check"
     @click.prevent="checked">
-    <input :checked="value" :disabled="disable" type="checkbox">
+    <input v-bind="$attrs" :checked="value" :disabled="disable" type="checkbox">
     <div class="track">
       <div class="handle"/>
     </div>
@@ -12,6 +12,7 @@
 <script>
 export default {
   name: 'HSwitch',
+  inheritAttrs: true,
   props: {
     value: {
       type: Boolean,
@@ -21,10 +22,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    cusClass: {
-      type: String,
-      default: '',
-    },
   },
   data () {
     return {

packages/components/demoRoute.js

@@ -17,6 +17,9 @@ const SelectField = resolve => require.ensure([], () => { resolve(require('./Sel
 const Radio = resolve => require.ensure([], () => { resolve(require('./Radio/demo')) }, 'radio')
 const ActionSheet = resolve => require.ensure([], () => { resolve(require('./ActionSheet/demo')) }, 'actionSheet')
 const Dialog = resolve => require.ensure([], () => { resolve(require('./Dialog/demo')) }, 'dialog')
+const Keyboard = resolve => require.ensure([], () => { resolve(require('./NumberKeyboard/demo')) }, 'keyboard')
+const Progress = resolve => require.ensure([], () => { resolve(require('./Progress/demo')) }, 'progress')
+const Range = resolve => require.ensure([], () => { resolve(require('./Range/demo')) }, 'range')
 
 export default [
   {path: '/header', component: Header, name: 'Header', meta: {keepAlive: false}},
@@ -38,4 +41,7 @@ export default [
   {path: '/radio', component: Radio, name: 'Radio', meta: {keepAlive: false}},
   {path: '/actionSheet', component: ActionSheet, name: 'ActionSheet', meta: {keepAlive: false}},
   {path: '/dialog', component: Dialog, name: 'Dialog', meta: {keepAlive: false}},
+  {path: '/keyboard', component: Keyboard, name: 'Keyboard', meta: {keepAlive: false}},
+  {path: '/progress', component: Progress, name: 'Progress', meta: {keepAlive: false}},
+  {path: '/range', component: Range, name: 'Range', meta: {keepAlive: false}},
 ]

src/pages/demo.vue

@@ -65,10 +65,10 @@
           <section slot="name">Switch</section>
         </item>
         <item>
-          <section slot="name">Range</section>
+          <router-link slot="name" to="/range">Range</router-link>
         </item>
         <item>
-          <section slot="name">Progress</section>
+          <router-link slot="name" to="/progress">Progress</router-link>
         </item>
         <item>
           <section slot="name">Spin</section>
@@ -83,7 +83,7 @@
           <router-link slot="name" to="/actionSheet">ActionSheet</router-link>
         </item>
         <item>
-          <section slot="name">NumberKeyboard</section>
+          <router-link slot="name" to="/keyboard">NumberKeyboard</router-link>
         </item>
         <item>
           <section slot="name">Select</section>