Browse Source

add: 添加刮刮卡

guoxiaoxiao8 5 years ago
parent
commit
ea3aaffcc2

File diff suppressed because it is too large
+ 694 - 684
src/config.json


+ 125 - 121
src/nutui.js

@@ -136,74 +136,78 @@ import Collapse from './packages/collapse/index.js';
 import './packages/collapse/collapse.scss';
 import Luckycard from "./packages/luckycard/index.js";
 import "./packages/luckycard/luckycard.scss";
+import NumberKeyboard from './packages/numberkeyboard/index.js';
+import './packages/numberkeyboard/numberkeyboard.scss';
 
 const packages = {
-  Cell,
-  Dialog,
-  Icon,
-  Toast,
-  ActionSheet,
-  Tab,
-  TabPanel,
-  TabBar,
-  Calendar,
-  DatePicker,
-  NavBar,
-  NoticeBar,
-  Switch,
-  Slider,
-  Range,
-  Picker,
-  Progress,
-  Price,
-  Flex,
-  Col,
-  Row,
-  Steps,
-  Button,
-  Badge,
-  Rate,
-  Swiper,
-  Menu,
-  Stepper,
-  ButtonGroup,
-  SearchBar,
-  ImagePicker,
-  Radio,
-  RadioGroup,
-  CheckBox,
-  CheckBoxGroup,
-  ShortPassword,
-  Skeleton,
-  Scroller,
-  BackTop,
-  CountDown,
-  InfiniteLoading,
-  Uploader,
-  TextInput,
-  TextBox,
-  Avatar,
-  Elevator,
-  Popup,
-  LeftSlip,
-  TabSelect,
-  LuckDraw,
-  Video,
-  Signature,
-  CircleProgress,
-  TimeLine,
-  TimeLineItem,
-  SideNavBar,
-  SubSideNavBar,
-  SideNavBarItem,
-  Drag,
-  Address,
-  Notify,
-  CountUp,
-  FixedNav,
-  // Gesture: Gesture
-  Collapse: Collapse,
-  Luckycard: Luckycard
+    Cell,
+    Dialog,
+    Icon,
+    Toast,
+    ActionSheet,
+    Tab,
+    TabPanel,
+    TabBar,
+    Calendar,
+    DatePicker,
+    NavBar,
+    NoticeBar,
+    Switch,
+    Slider,
+    Range,
+    Picker,
+    Progress,
+    Price,
+    Flex,
+    Col,
+    Row,
+    Steps,
+    Button,
+    Badge,
+    Rate,
+    Swiper,
+    Menu,
+    Stepper,
+    ButtonGroup,
+    SearchBar,
+    ImagePicker,
+    Radio,
+    RadioGroup,
+    CheckBox,
+    CheckBoxGroup,
+    ShortPassword,
+    Skeleton,
+    Scroller,
+    BackTop,
+    CountDown,
+    InfiniteLoading,
+    Uploader,
+    TextInput,
+    TextBox,
+    Avatar,
+    Elevator,
+    Popup,
+    LeftSlip,
+    TabSelect,
+    LuckDraw,
+    Video,
+    Signature,
+    CircleProgress,
+    TimeLine,
+    TimeLineItem,
+    SideNavBar,
+    SubSideNavBar,
+    SideNavBarItem,
+    Drag,
+    Address,
+    Notify,
+    CountUp,
+    FixedNav,
+    // Gesture: Gesture
+    Collapse: Collapse,
+
+    Luckycard: Luckycard,
+    NumberKeyboard: NumberKeyboard
 };
 
 const components = {};
@@ -211,80 +215,80 @@ const methods = {};
 const filters = {};
 const directives = {};
 pkgList.map(item => {
-  const pkg = packages[item.name];
-  if (!pkg) return;
+    const pkg = packages[item.name];
+    if (!pkg) return;
 
-  if (item.type == 'component') {
-    if (pkg.name) {
-      components[pkg.name] = pkg;
-    } else {
-      for (let n in pkg) {
-        components[n] = pkg[n];
-      }
+    if (item.type == 'component') {
+        if (pkg.name) {
+            components[pkg.name] = pkg;
+        } else {
+            for (let n in pkg) {
+                components[n] = pkg[n];
+            }
+        }
+    } else if (item.type == 'method') {
+        methods[item.name] = pkg;
+    } else if (item.type == 'filter') {
+        filters[item.name] = pkg;
+    } else if (item.type == 'directive') {
+        directives[item.name] = pkg;
     }
-  } else if (item.type == 'method') {
-    methods[item.name] = pkg;
-  } else if (item.type == 'filter') {
-    filters[item.name] = pkg;
-  } else if (item.type == 'directive') {
-    directives[item.name] = pkg;
-  }
 });
 
-const install = function (Vue, opts = {}) {
-  if (install.installed) return;
+const install = function(Vue, opts = {}) {
+    if (install.installed) return;
 
-  if (opts.locale) {
-    Vue.config.lang = opts.locale;
-  }
+    if (opts.locale) {
+        Vue.config.lang = opts.locale;
+    }
 
-  if (opts.lang) locale(Vue.config.lang, opts.lang);
+    if (opts.lang) locale(Vue.config.lang, opts.lang);
 
-  for (let cptName in methods) {
-    if (Array.isArray(methods[cptName])) {
-      Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName][0];
-      Vue.component(methods[cptName][1].name, methods[cptName][1]);
-    } else {
-      Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName];
+    for (let cptName in methods) {
+        if (Array.isArray(methods[cptName])) {
+            Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName][0];
+            Vue.component(methods[cptName][1].name, methods[cptName][1]);
+        } else {
+            Vue.prototype['$' + cptName.toLowerCase()] = methods[cptName];
+        }
     }
-  }
 
-  for (let cptName in components) {
-    if (components[cptName] && components[cptName].name) {
-      Vue.component(components[cptName].name, components[cptName]);
+    for (let cptName in components) {
+        if (components[cptName] && components[cptName].name) {
+            Vue.component(components[cptName].name, components[cptName]);
+        }
     }
-  }
 
-  for (let cptName in filters) {
-    if (filters[cptName] && filters[cptName].name) {
-      Vue.filter(cptName, filters[cptName]);
+    for (let cptName in filters) {
+        if (filters[cptName] && filters[cptName].name) {
+            Vue.filter(cptName, filters[cptName]);
+        }
     }
-  }
 
-  for (let cptName in directives) {
-    if (directives[cptName] && directives[cptName].name) {
-      Vue.directive(directives[cptName].name, directives[cptName]);
+    for (let cptName in directives) {
+        if (directives[cptName] && directives[cptName].name) {
+            Vue.directive(directives[cptName].name, directives[cptName]);
+        }
     }
-  }
 
-  Vue.use(Lazyload, {
-    lazyComponent: true,
-    loading: '//img12.360buyimg.com/imagetools/jfs/t1/73967/28/14561/916/5dc142e4E0666555b/bf33454553c6035e.png'
-  });
+    Vue.use(Lazyload, {
+        lazyComponent: true,
+        loading: '//img12.360buyimg.com/imagetools/jfs/t1/73967/28/14561/916/5dc142e4E0666555b/bf33454553c6035e.png'
+    });
 };
 
 if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue);
+    install(window.Vue);
 }
 
 export default {
-  version,
-  locale,
-  install,
-  Lazyload,
-  // VueQr,
-  ...components,
-  ...filters,
-  ...directives,
-  ...methods
+    version,
+    locale,
+    install,
+    Lazyload,
+    // VueQr,
+    ...components,
+    ...filters,
+    ...directives,
+    ...methods
 };

+ 5 - 0
src/packages/numberkeyboard/__test__/numberkeyboard.spec.js

@@ -0,0 +1,5 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import NumberKeyboard from '../numberkeyboard.vue';
+import Vue from 'vue';
+
+describe('NumberKeyboard.vue', () => {});

+ 85 - 0
src/packages/numberkeyboard/demo.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="demo-list">
+    <h4>基本用法</h4>
+    <div class="show-demo">
+      <nut-cell :isLink="true" @click.native="showKeyBoard(1)" :showIcon="true" title="默认键盘"></nut-cell>
+      <nut-numberkeyboard :visible="visible1" @input="input" @delete="onDelete" @close="close(1)" @enter="enter" @leave="leave"> </nut-numberkeyboard>
+    </div>
+    <h4>带右侧栏键盘</h4>
+    <div class="show-demo">
+      <nut-cell :isLink="true" @click.native="showKeyBoard(2)" :showIcon="true" title="带右侧栏键盘"></nut-cell>
+      <nut-numberkeyboard type="rightColumn" :visible="visible2" :custom-key="customKey1" @input="input" @close="close(2)"> </nut-numberkeyboard>
+    </div>
+    <h4>带标题栏键盘</h4>
+    <div class="show-demo">
+      <nut-cell :isLink="true" @click.native="showKeyBoard(3)" :showIcon="true" title="带标题栏键盘">22</nut-cell>
+      <nut-numberkeyboard title="默认键盘" :visible="visible3" :custom-key="customKey2" @input="input" @close="close(3)"> </nut-numberkeyboard>
+    </div>
+    <h4>双向绑定的键盘</h4>
+    <div class="show-demo">
+      <div class="boardValue" @click="showKeyBoard(4)">
+        <div class="value">
+          <nut-textinput placeholder="请输入内容" :has-border="false" v-model="value" readonly label="双向绑定:" />
+        </div>
+      </div>
+      <nut-numberkeyboard :visible="visible4" v-model="value" maxlength="8" @close="close(4)"> </nut-numberkeyboard>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      title: '默认键盘',
+      visible1: false,
+      visible2: false,
+      visible3: false,
+      visible4: false,
+      value: '',
+      customKey1: ['.'],
+      customKey2: ['.']
+    };
+  },
+  methods: {
+    showKeyBoard(index) {
+      this[`visible${index}`] = true;
+    },
+    input(number) {
+      this.$toast.text(`输入:${number}`);
+    },
+    onDelete() {
+      this.val = this.val.slice(0, this.val.length - 1);
+    },
+    close(index) {
+      this[`visible${index}`] = false;
+    },
+    enter() {
+      console.log('键盘抬起');
+    },
+    leave() {
+      console.log('键盘收起');
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.boardValue {
+  padding: 2px 10px;
+  font-size: 14px;
+  background: #ffffff;
+  input {
+    border: none;
+  }
+  // .label,.value {
+  //   width: 20%;
+  //   display: inline-block;
+  //   line-height: 1.5;
+  //   font-size: 14px;
+  //   color: #2d2d2d;
+  // }
+  // .value {
+  //   width: 75%;
+  // }
+}
+</style>

+ 186 - 0
src/packages/numberkeyboard/doc.md

@@ -0,0 +1,186 @@
+# NumberKeyboard 数字键盘
+
+### 默认样式
+
+数字键盘提供了 `input`、`delete`、`close`、`enter`、`leave` 事件,分别对应输入内容、删除内容、键盘抬起和键盘关闭的动作
+
+
+```javascript
+    <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="默认键盘"></nut-cell>
+    <nut-numberkeyboard
+        :visible="visible"
+        @input="input"
+        @close="close"
+        @enter="enter"
+        @leave="leave"
+    ></nut-numberkeyboard>
+```
+
+```javascript
+export default {
+    data() {
+        return {
+            visible: false,
+            val: ''
+        };
+    },
+    methods: {
+        showKeyBoard() {
+            this.visible = true;
+        },
+        input(number) {
+            this.$toast.text(`输入:${number}`);
+        },
+        close() {
+            this.visible = false;
+        },
+        enter() {
+            console.log('键盘抬起');
+        },
+        leave() {
+            console.log('键盘收起');
+        },
+    }
+}
+```
+> 点击键盘以外的区域时,键盘会默认自动收起。
+
+
+### 右侧栏键盘
+
+将 type 属性设置为 rightColumn 来展示键盘的右侧栏,常用于金钱支付的场景
+
+```javascript
+    <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="带右侧栏键盘"></nut-cell>
+    <nut-numberkeyboard
+        :visible="visible"
+        :custom-key="customKey"
+        @input="input"
+        @close="close"
+    ></nut-numberkeyboard>
+```
+
+```javascript
+export default {
+    data() {
+        return {
+            visible: false,
+            customKey: ['.']
+        };
+    },
+    methods: {
+        showKeyBoard() {
+            this.visible = true;
+        },
+        input(number) {
+            this.$toast.text(`输入:${number}`);
+        },
+        close() {
+            this.visible = false;
+        }
+    }
+}
+```
+
+
+### 带标题栏键盘
+
+通过 title 属性可以设置键盘标题
+
+```javascript
+    <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="带标题栏键盘"></nut-cell>
+    <nut-numberkeyboard 
+        title="默认键盘" 
+        :visible="visible"
+        :custom-key="customKey"
+        @input="input"
+        @close="close"
+    ></nut-numberkeyboard>
+```
+
+```javascript
+export default {
+    data() {
+        return {
+            visible: false,
+            customKey: ['.']
+        };
+    },
+    methods: {
+        showKeyBoard() {
+            this.visible = true;
+        },
+        input(number) {
+            this.$toast.text(`输入:${number}`);
+        },
+        close() {
+            this.visible = false;
+        }
+    }
+}
+```
+
+
+### 双向绑定键盘
+
+可以通过 `v-model` 绑定键盘当前输入值
+
+```javascript
+    <nut-textinput 
+        placeholder="请输入内容"
+        :has-border="false"
+        v-model="value" 
+        readonly 
+        label="双向绑定:" 
+    />
+    <nut-numberkeyboard
+        :visible="visible"
+        v-model="value"
+        maxlength="8"
+        @close="close"
+    ></nut-numberkeyboard>
+```
+
+```javascript
+export default {
+    data() {
+        return {
+            visible: false,
+            value: ''
+        };
+    },
+    methods: {
+        showKeyBoard() {
+            this.visible = true;
+        },
+        close() {
+            this.visible = false;
+        }
+    }
+}
+```
+
+
+## Prop
+
+| 字段 | 说明 | 类型 | 默认值
+|----- | ----- | ----- | ----- 
+| visible | 是否显示键盘 | boolean | false
+| title | 键盘标题 | string | - |
+| type | 键盘模式  | string | `default`:默认样式<br>`rightColumn`:带右侧栏 |
+| custom-key | 自定义键盘额外的键  | array<br>string | 数组形式最多支持添加2个,超出默认取前2项 |
+| v-model | 当前输入值 | string | - |
+| maxlength  | 输入值最大长度,结合 v-model 使用 | number <br> string| 6 |
+
+
+
+
+## Event
+
+| 字段 | 说明 | 回调参数
+|----- | ----- | -----
+| input  | 点击按键时触发                 | 按键内容 |
+| delete | 点击删除键时触发               | -             |
+| close  | 点击关闭按钮或非键盘区域时触发  | -             |
+| enter  | 键盘弹出时触发             | -             |
+| leave  | 键盘收起时触发             | -             |

+ 8 - 0
src/packages/numberkeyboard/index.js

@@ -0,0 +1,8 @@
+import NumberKeyboard from './numberkeyboard.vue';
+import './numberkeyboard.scss';
+
+NumberKeyboard.install = function(Vue) {
+  Vue.component(NumberKeyboard.name, NumberKeyboard);
+};
+
+export default NumberKeyboard;

+ 113 - 0
src/packages/numberkeyboard/numberkeyboard.scss

@@ -0,0 +1,113 @@
+.nut-numberkeyboard {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 10000;
+  width: 100%;
+  padding-bottom: 22px;
+  background-color: #f2f3f5;
+  user-select: none;
+  .number-board-header {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    height: 34px;
+    padding-top: 6px;
+    color: #646566;
+    font-size: 16px;
+    .tit {
+      display: inline-block;
+    }
+    .keyboard-close {
+      position: absolute;
+      display: block;
+      right: 0;
+      padding: 0 16px;
+      color: #576b95;
+      font-size: 14px;
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+    }
+  }
+  .number-board-body {
+    display: flex;
+    padding: 6px 0 0 6px;
+    .number-board {
+      display: flex;
+      flex: 3;
+      flex-wrap: wrap;
+    }
+    .key-board-wrapper {
+      position: relative;
+      flex: 1;
+      flex-basis: 33%;
+      box-sizing: border-box;
+      padding: 0 6px 6px 0;
+      .key {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 48px;
+        font-size: 28px;
+        line-height: 1.5;
+        background-color: #fff;
+        border-radius: 8px;
+        cursor: pointer;
+      }
+      .active {
+        background-color: #ebedf0;
+      }
+      img {
+        width: 30px;
+        height: 24px;
+      }
+    }
+    .key-board-wrapper-large {
+      flex-basis: 66%;
+    }
+    .number-board-sidebar {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      .key-board-wrapper {
+        .key {
+          position: absolute;
+          top: 0;
+          right: 6px;
+          bottom: 6px;
+          left: 0;
+          height: auto;
+        }
+        .finish {
+          font-size: 16px;
+          color: #fff;
+          background-color: #1989fa;
+        }
+        .activeFinsh {
+          background-color: #0570db;
+        }
+      }
+    }
+  }
+}
+.nut-board-slide-up {
+  &-enter-active {
+    animation: nut-board-slide-up-enter 0.3s both ease-out;
+  }
+  &-leave-active {
+    animation: nut-board-slide-up-leave 0.3s both ease-in;
+  }
+}
+@keyframes nut-board-slide-up-enter {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+@keyframes nut-board-slide-up-leave {
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}

+ 198 - 0
src/packages/numberkeyboard/numberkeyboard.vue

@@ -0,0 +1,198 @@
+<template>
+  <transition name="nut-board-slide-up" @after-enter="afterEnter" @after-leave="afterLeave">
+    <div class="nut-numberkeyboard" v-show="visible">
+      <div class="number-board-header" v-if="title">
+        <h3 class="tit">{{ title }}</h3>
+        <span class="keyboard-close" @click="() => closeBoard()">完成</span>
+      </div>
+      <div class="number-board-body">
+        <div class="number-board">
+          <div
+            :class="[
+              'key-board-wrapper',
+              { 'key-board-wrapper-large': item.id == 0 && type == 'rightColumn' && Array.isArray(customKey) && customKey.length == 1 }
+            ]"
+            v-for="item of keysList"
+            :key="'key' + item.id"
+          >
+            <div
+              :class="['key', { active: item.id == clickKeyIndex }, { lock: item.type == 'lock' }, { delete: item.type == 'delete' }]"
+              @touchstart="event => onTouchstart(item, event)"
+              @touchmove="event => onTouchMove(item, event)"
+              @touchend="onTouchEnd"
+            >
+              <template v-if="item.type == 'number' || item.type == 'custom'">{{ item.id }}</template>
+              <img
+                v-if="item.type == 'lock'"
+                src="https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png"
+              />
+              <img
+                v-if="item.type == 'delete'"
+                src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png"
+              />
+            </div>
+          </div>
+        </div>
+        <div class="number-board-sidebar" v-if="type == 'rightColumn'">
+          <div class="key-board-wrapper">
+            <div
+              :class="['key', { active: clickKeyIndex == 'delete' }]"
+              @touchstart="event => onTouchstart({ id: 'delete', type: 'delete' }, event)"
+              @touchmove="event => onTouchMove({ id: 'delete', type: 'delete' }, event)"
+              @touchend="onTouchEnd"
+            >
+              <img src="https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png" />
+            </div>
+          </div>
+          <div class="key-board-wrapper" @click="() => closeBoard()">
+            <div :class="['key', 'finish', { activeFinsh: clickKeyIndex == 'finish' }]">
+              完成
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+<script>
+export default {
+  name: 'nut-numberkeyboard',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    customKey: {
+      type: Array,
+      default: () => []
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    maxlength: {
+      type: [Number, String],
+      default: 6
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'update:value'
+  },
+  computed: {
+    keysList() {
+      if (this.type == 'rightColumn' || this.title != '') {
+        return this.genCustomKeys();
+      }
+      return this.defaultKey();
+    }
+  },
+  data() {
+    return {
+      once: 0,
+      keys: [],
+      clickKeyIndex: undefined
+    };
+  },
+  beforeDestroy() {
+    document.getElementsByTagName('body')[0].removeEventListener('click', () => {});
+  },
+  mounted() {
+    let that = this;
+    this.$nextTick(() => {
+      let targetArea = that.$el;
+      document.getElementsByTagName('body')[0].addEventListener('click', function(event) {
+        let e = event || window.event;
+        let elem = e.target;
+        if (targetArea.contains(elem)) {
+          // console.log("在区域内");
+        } else {
+          // console.log("在区域外");
+          if (that.once == 0 && that.visible) {
+            that.once += 1;
+            return false;
+          }
+          that.closeBoard();
+        }
+      });
+    });
+  },
+  methods: {
+    getBasicKeys() {
+      const keys = [];
+      for (let i = 1; i <= 9; i++) {
+        keys.push({ id: i, type: 'number' });
+      }
+      return keys;
+    },
+    defaultKey() {
+      return [...this.getBasicKeys(), { id: 'lock', type: 'lock' }, { id: 0, type: 'number' }, { id: 'delete', type: 'delete' }];
+    },
+    genCustomKeys() {
+      const keys = this.getBasicKeys();
+      const { customKey } = this;
+      let customKeys = Array.isArray(customKey) ? customKey : [customKey];
+      if (customKeys.length > 2) {
+        customKeys = [customKeys[0], customKeys[1]];
+      }
+      if (customKeys.length === 1) {
+        if (this.title) {
+          keys.push({ id: customKeys[0], type: 'custom' }, { id: 0, type: 'number' }, { id: 'delete', type: 'delete' });
+        } else {
+          keys.push({ id: 0, type: 'number' }, { id: customKeys[0], type: 'custom' });
+        }
+      } else if (customKeys.length === 2) {
+        keys.push({ id: customKeys[0], type: 'custom' }, { id: 0, type: 'number' }, { id: customKeys[1], type: 'custom' });
+        if (this.title) {
+          keys.push({ id: 'delete', type: 'delete' });
+        }
+      }
+      return keys;
+    },
+    afterEnter() {
+      this.$emit('enter');
+    },
+    afterLeave() {
+      this.$emit('leave');
+    },
+    onTouchstart(item, event) {
+      event.stopPropagation();
+      this.clickKeyIndex = item.id;
+      if (item.type == 'number' || item.type == 'custom') {
+        this.$emit('input', item.id);
+        if (this.value.length < this.maxlength) {
+          this.$emit('update:value', this.value + item.id);
+        }
+      }
+      if (item.type == 'lock') {
+        this.closeBoard();
+      }
+      if (item.type == 'delete') {
+        this.$emit('delete');
+        this.$emit('update:value', this.value.slice(0, this.value.length - 1));
+      }
+    },
+    onTouchMove(id, event) {
+      event.stopPropagation();
+      // this.clickKeyIndex = id;
+    },
+    onTouchEnd() {
+      this.clickKeyIndex = undefined;
+    },
+    closeBoard() {
+      if (this.once > 0) {
+        this.once = 0;
+        this.$emit('close');
+      }
+    }
+  }
+};
+</script>

+ 4 - 4
src/utils/date.js

@@ -104,11 +104,11 @@ let Utils = {
    */
   compareDateArr: function(date1, date2) {
     let startTime = new Date();
-    startTime.setFullYear(date1[0], date1[1], date1[2]);
-    startTime.setHours(date1[3], date1[4]);
+    startTime.setFullYear(parseInt(date1[0]), parseInt(date1[1]) - 1, parseInt(date1[2]));
+    startTime.setHours(parseInt(date1[3]), parseInt(date1[4]));
     let endTime = new Date();
-    endTime.setFullYear(date2[0], date2[1], date2[2]);
-    endTime.setHours(date2[3], date2[4]);
+    endTime.setFullYear(parseInt(date2[0]), parseInt(date2[1]) - 1, parseInt(date2[2]));
+    endTime.setHours(parseInt(date2[3]), parseInt(date2[4]));
     if (startTime >= endTime) {
       return false;
     }

+ 1 - 0
types/nutui.d.ts

@@ -86,3 +86,4 @@ export declare class FixedNav extends UIComponent {}
 export declare class Gesture extends UIComponent {}
 export declare class Collapse extends UIComponent {}
 export declare class Luckycard extends UIComponent {}
+export declare class NumberKeyboard extends UIComponent {}