生成vue项目一个a标签点击后弹出3个btn按钮
时间: 2023-06-03 07:05:47 浏览: 312
vue从零实现一个消息通知组件的方法详解
你可以使用vue的@click事件来触发弹出按钮的动作。在a标签中添加@click事件,然后在对应的方法中使用vue的$refs来获取按钮组件,再进行展示即可。具体操作可以参考以下代码:
```html
<template>
<div>
<a href="#" @click="showBtns">点击弹出按钮</a>
<div class="btn-list" v-show="show">
<button ref="btn1">按钮1</button>
<button ref="btn2">按钮2</button>
<button ref="btn3">按钮3</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: false
};
},
methods: {
showBtns() {
this.show = true;
this.$nextTick(() => {
const btn1 = this.$refs.btn1;
const btn2 = this.$refs.btn2;
const btn3 = this.$refs.btn3;
// TODO: 弹出按钮的展示逻辑
});
}
}
};
</script>
```
阅读全文