NumberKeyboard 数字键盘

使用指南

自定义数字键盘

代码演示

查看代码

<template>
  <div class="list">
    <p class="sub-title">
      数字键盘
    </p>
    <span ref="elem" @click="keyboardVisible = true" class="view">{{ value || '点击输入数字' }}</span>
    <br />
    <h3-button ref="button" @click="keyboardVisible1 = true">
      {{ value1 || '点击输入数字' }}
    </h3-button>
    <h3-number-keyboard
      v-model="keyboardVisible"
      :reference="elem"
      :value="value"
      @change="handleChange"
    />
    <h3-number-keyboard
      v-model="keyboardVisible1"
      :reference="elem1"
      :value="value1"
      @change="handleChange1"
    />
  </div>
</template>

<script>
import H3NumberKeyboard from '@/components/h3-number-keyboard/';
import H3Button from '@/components/h3-button/';

export default {
  name: 'NumberKeyboard',
  components: {
    H3NumberKeyboard,
    H3Button,
  },
  props: {},
  data () {
    return {
      elem: null,
      keyboardVisible: false,
      value: '',
      elem1: null,
      keyboardVisible1: false,
      value1: '',
    };
  },
  computed: {},
  mounted () {
    this.elem = this.$refs.elem;
    this.elem1 = this.$refs.button;
  },
  methods: {
    handleChange (value) {
      this.value = value;
    },
    handleChange1 (value) {
      this.value1 = value;
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 0 15px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
  .view {
    display: block;
    width: 100%;
    height: 36px;
    padding: 10px;
    font-size: 14px;
    border: 1px skyblue solid;
  }
}
</style>

与h3-mobile-vue组件的区别以及迁移

新组件

API

Prop

属性	说明	类型	默认值
visible	是否显示，v-model绑定值	Boolean	false
reference	要触发的元素，可以为VNode，或者DOM元素	VNode，DOM	-
value	初始值	string	''
confirmText	确定文本	string	'确定'

Event

事件名	说明	参数
toggle	切换显示时触发，v-model绑定事件	value
show	显示时回调	value：true
hide	关闭时回调	value：false
change	输出变化触发	value