uniapp vue 键盘组件

<template name="keyboards">
  <view class="keyboards">
    <view class="key" data-number="7" @tap="input(7)"></view>
    <view class="key" data-number="8" @tap="input(8)"></view>
    <view class="key" data-number="9" @tap="input(9)"></view>
    <view class="key ac" data-number="AC" @click.stop="clearInput"></view>
    <view class="key" data-number="4" @tap="input(4)"></view>
    <view class="key" data-number="5" @tap="input(5)"></view>
    <view class="key" data-number="6" @tap="input(6)"></view>
    <view
      class="key next"
      :data-number="nextTitle"
	  :data-disabled="nextDisabled"
	  @tap="next"

    ><slot name="next" /></view>
    <view class="key" data-number="1" @tap="input(1)"></view>
    <view class="key" data-number="2" @tap="input(2)"></view>
    <view class="key" data-number="3" @tap="input(3)"></view>
    <view
      class="key enter"
      :data-number="enterTitle"
      :data-disabled="enterDisabled"
	  @tap="handleEnter"
    ></view>
    <view class="key" data-number="0" @tap="input(0)"></view>
    <view class="key" data-number="." @tap="inputDecimal('.')"></view>
    <view class="key delete" @tap="deleteInput"><img :src="IMAGE_HOST + '/keydelete.svg'" /></view>
  </view>
</template>

<script>
export default {
  name: "keyboards",
  props: {
    nextTitle: {
      type: String,
      default: "",
    },
    enterTitle: {
      type: String,
      default: "",
    },
    nextDisabled: {
      // 下一项
      type: Boolean,
      default: false,
    },
    enterDisabled: {
      // 确认
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      IMAGE_HOST: this.$IMAGE_HOST
    }
  },
  onLoad() {
    this.openVoice();
  },
  methods: {
    vibrateShort() {
      // uni.vibrateLong(); //震动大
      uni.vibrateShort({
        success: function () {
          console.log("success");
        },
      });
    },
	clearInput() {
		this.$emit('clearInput')
	},
	input(val) {
		this.$emit('inputNumber', val)
	},
	deleteInput() {
		this.$emit('deleteInput')
	},
	inputDecimal(val) {
		this.$emit('inputDecimal',val)
	},
  next() {
    if (!this.nextDisabled) {
      this.$emit('next')
    } else {
      this.$emit('nextDisabledCall')
    }
  },
	/**
	 * 收银或者确认
	 */
	handleEnter() {
			this.$emit('comfirm')
		// if (this.enterDisabled) {
		// 	// 收银
		// 	this.$emit('submit')
		// } else {
		// 	// 确认

		// }
	}
  },
};
</script>

<style lang="scss">
@import "./index.scss";
</style>

.keyboards {
  background: #e6ecf3;
  padding   : 20rpx;
  overflow  : hidden;

  .key {
    position        : relative;
    display         : flex;
    align-items     : center;
    justify-content : center;
    height          : 110rpx;
    width           : calc(25% - 20rpx);
    float           : left;
    background-image: linear-gradient(180deg, #4e799e 0%, #355272 100%);
    box-shadow      : 0 2px 3px 0 rgba(0, 0, 0, 0.3);
    border-radius   : 16rpx;
    margin          : 10rpx;
    text-align      : center;
    font-size       : 60rpx;
    font-weight     : 500;
    color           : white;

    &::before {
      content: attr(data-number);
      z-index: 2;
    }

    &::after {
      content         : '';
      position        : absolute;
      top             : 2rpx;
      left            : 2rpx;
      right           : 2rpx;
      bottom          : 8rpx;
      background-image: linear-gradient(0deg, #4E799E 0%, #355272 100%);
      border-radius   : 15rpx;
      z-index         : 1;
    }

    //AC
    &.ac {
      background-image: linear-gradient(180deg, #9FC4E4 0%, #4E6E92 100%);

      &::after {
        background-image: linear-gradient(0deg, #9FC4E4 0%, #5D7896 100%);
      }
    }

    //Next
    &.next {
      font-size       : 32rpx;
      background-image: linear-gradient(180deg, #8EC0F8 0%, #3769C6 100%);

      &::after {
        background-image: linear-gradient(0deg, #5099EC 0%, #1E74D4 100%);
      }
    }

    // Enter
    &.enter {
      height          : 240rpx;
      float           : right;
      font-size       : 44rpx;
      background-image: linear-gradient(180deg, #0DB622 0%, #187A24 100%);

      &::after {
        background-image: linear-gradient(0deg, #0DB622 0%, #187c24 100%);
      }
    }

    // Delete
    &.delete {
      img {
        width  : 52rpx;
        height : 40rpx;
        z-index: 2;
      }
    }

    &:active {
      &::after {
        bottom          : 2rpx;
        background-image: linear-gradient(0deg, #4E799E 0%, #16304e 100%);
      }

      &.ac {
        &::after {
          background-image: linear-gradient(0deg, #9FC4E4 0%, #1C3B5F 100%);
        }
      }

      &.next {
        &::after {
          background-image: linear-gradient(0deg, #5099EC 0%, #063C79 100%);
        }
      }

      &.enter {
        &::after {
          background-image: linear-gradient(0deg, #0DB622 0%, #095712 100%);
        }
      }
    }

    &[data-disabled="true"] {
      opacity         : .4;
      background-image: initial;
      background-color: #888;
      //pointer-events  : none;

      &::after {
        display: none;
      }
    }
  }
}

<keyboards
				next-title="下一项"
				:next-disabled="false"
				enter-title="确定"
				:enter-disabled="false"
				@next="nextClick"
				@deleteInput="deleteInput"
				@inputDecimal="inputDecimal"
				@inputNumber="inputNumber"
				@clearInput="clearInput"
				@comfirm="saveToCart"
			/>