<template>
  <button class="button" :class="nativeType" @click.prevent="handleClick" :type="nativeType">
    <slot></slot>
  </button>
</template>
<script>
export default {
  name: 'Button',
  props: {
    nativeType: {
      type: String,
      default: 'cx'
    },
  },
  methods: {
    handleClick (evt) {
      this.$emit('click', evt);
    }
  }
};
</script>
<style scoped lang="scss">
.button {
  width: 76px;
  height: 32px;
  color: #ffffff;
  margin: 0 5px;
  cursor: pointer;
  border: 0
}

.cx {
  background: url('../image/btn.png') no-repeat 0 -34px;
  background-size: cover;
}

.cz {
  background: url('../image/btn.png') no-repeat 0 0;
  background-size: cover;
}
</style>