最近开发的时候发现用div来做按钮比直接使用el-button方便很多,调整样式也方便,但是如果直接使用div做按钮,鼠标放上面时只显示一个竖着的光标,很不美观,并且不会让用户知道可以点击
<template>
<div class="detail" @click="handleClick">详情</div>
</template>
<script>
export default {
methods: {
handleClick() {
// 处理点击事件的逻辑
}
}
}
</script>
<style>
.detail{
cursor: pointer;
}
</style>
可以通过为div
元素添加cursor
属性来改变鼠标样式,使其在被点击时显示小手样式
结果展示