请问怎么解决微信小程序vue3 AtButton点击触发两次问题？

[yuuzone]

问题描述

微信小程序vue3 AtButton点击触发两次

版本信息

v1.0.0-alpha.17

涉及的平台

weapp

[b2nil]

最好贴一下你的代码

[yuuzone]

最好贴一下你的代码

我是使用taro init指令生成的项目，在初始demo的基础代码上添加了新的按钮及点击事件，只是把button换成了AtButton

<template>
  <input v-model="number" type="number" class="input" />
  <button @tap="addNumber">
    Add new number
  </button>

  <AtButton @tap="removeNumber">
    Remove a number
  </AtButton>

</template>

<script>
import { ref } from 'vue';
import { useStore } from 'vuex';
import { AtButton } from 'taro-ui-vue3/lib';
import 'taro-ui-vue3/dist/style/components/button.scss';
export default {
  setup () {
    const store = useStore();
    const number = ref(121);
    function addNumber() {
      store.dispatch('addNumber', Number(number.value));
    };
    function removeNumber() {
      store.dispatch('removeNumber');
    };
    return {
      number,
      addNumber,
      removeNumber,
      AtButton
    }
  }
}
</script>

import { createStore } from 'vuex'

const state = {
  numbers: [1, 2, 3, 4, 5, 6]
}

const mutations = {
  ADD_NUMBER(state, payload) {
    state.numbers.push(payload);
  },
  REMOVE_NUMBER(state) {
    state.numbers.pop();
  }
}

const actions = {
  addNumber(context, number) {
    context.commit('ADD_NUMBER', number);
  },
  removeNumber(context) {
    context.commit('REMOVE_NUMBER');
  }
}

const getters = {
  getNumbers(state) {
    return state.numbers
  }
}

const store = createStore({
  state,
  mutations,
  actions,
  getters
})

export default store

[b2nil]

@YUUJY 使用 taro-ui-vue3 组件的时候，最好看一下文档或 taro-ui-vue3/types 里面对组件属性和事件的定义。 AtButton 需要传入的点击事件是 click, 不是 tap。

改一下试试看：<AtButton @click="removeNumber">

[b2nil]

添加了使用 @click 而非 @tap 的警告信息：d34d7a8