<template>
  <div class="button-bg" :style="item.style">
    <van-button :block="block" :type="btnType" :native-type="nativeType">
      {{ label }}
    </van-button>
    <div class="button-item"></div>
  </div>
</template>
<script setup>
import { ref, defineProps } from 'vue';
const props = defineProps({
  item: Object,
});
const item = JSON.parse(JSON.stringify(props.item || '{}'));
const label = ref(item.text);
const block = ref(item.attr.block);
const nativeType = ref(item.attr.nativeType);
const btnType = ref(item.attr.type);
</script>

<style scoped>
.button-bg {
  position: relative;
}
.button-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}
.button-item:hover {
  background-color: #00000080;
}
</style>
