时间戳

首页 > 解决方案 > `如何在单个按钮上应用多个事件？`

javascript - `如何在单个按钮上应用多个事件？`

问题描述

如何在 Vue.js 中的单个按钮上应用多个事件？

我有一个按钮组件

在父级中单击按钮时，必须应用几个事件

  1. tytle 应从“购买”更改为“在篮子中”
  2. 图标 应用完成
  3. 样式应更改为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>

如何在单个按钮上应用多个事件？

标签： javascriptvue.jssassvuejs2vue-component

解决方案

您几乎完成了，当您发送emit到父组件时，您可以使用它来更改。

因此，首先您需要将所需的道具传递给子组件，如下所示：

<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>

现在，当您单击按钮时，它将更改title,icon和button_1。

推荐阅读