<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: 80px; //适配4字按钮样式
  height: 32px;
  color: #ffffff;
  margin: 0 5px;
}

.cx {
  background: url('../image/btn.png') no-repeat -4px -40px;
  cursor: pointer;
}

.cz {
  background: url('../image/btn.png') no-repeat -4px -4px;
  cursor: pointer;
}

.sb {
  background: url('../image/btn.png') no-repeat -4px -112px;
}
</style>