如何在 Vue.js 中的单个按钮上应用多个事件?
我有一个按钮组件
当在父级中单击按钮时,会发生几个事件 必须申请
- 标题应从“购买”更改为“在购物篮中”
- 图标应应用完成
- 样式应更改为button_1
我的按钮组件
<template>
<div class="btn"
@click="click"
:class="className">
<i class="material-icons"> {{ icon }} </i>
<span> {{ title }} </span>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: 'Buy'
},
disabled: {
type: Boolean,
default: false
},
button_1: {
type: Boolean,
default: false
},
icon: {
type: String,
default: ''
},
},
data() {
return {}
},
computed: {
className() {
return {
'btn__disabled': this.disabled,
'btn__button_1': this.button_1,
}
}
},
methods: {
click() {
this.$emit('click')
}
},
name: "BaseButton"
}
</script>
<style lang="scss" scoped>
.material-icons {
font-size: 16px;
}
.btn {
position: relative;
font-family: 'Merriweather', sans-serif;
color: var(--color-primary-light);
left: 45%;
bottom: 18%;
height: 48px;
width: 122px;
cursor: pointer;
background-color: var(--color-grey-light-4);
display: flex;
justify-content: space-evenly;
align-items: center;
&:hover,
&:active {
background-color: var(--color-grey-light-2);
border: none;
}
&__button_1 {
color: var(--color-primary-light);
background-color: var(--color-grey-light-3);
border: none;
}
&__disabled {
background-color: var(--color-grey-light-1);
border: none;
pointer-events: none;
}
}
</style>
我的父组件
<template>
<base-button @click="clickBtn"></base-button>
</template>
<script>
import BaseButton from '../components/ui/BaseButton'
export default {
name: "GalleryOverview",
components: {BaseButton},
methods: {
clickBtn() {
console.log('BTN clicked')
}
}
}
}
</script>
如何在单个按钮上应用多个事件?
最佳答案
您即将完成,因为您正在向父组件发送 emit
,您可以使用它来更改。
因此,首先您需要将所需的 Prop 传递给子组件,如下所示:
<template>
<base-button @click="clickBtn" :title="title" :icon="icon" :button_1="button_1"></base-button>
</template>
<script>
import BaseButton from '../components/ui/BaseButton'
export default {
name: "GalleryOverview",
data() {
return {
title: 'My Title',
icon: '',
button_1: false
}
}
methods: {
// This is where you can change.
clickBtn() {
this.icon = 'change icon';
this.title = 'change title';
this.button_1 = true;
}
}
}
</script>
现在,当您单击按钮时,它会更改标题
、图标
和button_1
。
关于javascript - `How apply multiple event on single button?`,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68526994/