0

我想找到一个更漂亮的解决方案来解决这个问题：

单击设置为 trueshowUserAddModal存储中的 var 的主要组件按钮

// App.vue
// ...
computed: {
  ...mapGetters('admin', [  'showUserAddModal'  ])
}
// ... 
methods: {
  ...mapMutations('admin', [ 'setShowUserAddModal' ])
}
// ...

显示模态组件：

<div class="modal" :class="{ 'is-active': showUserAddModal }">

我想将焦点放在子子组件中本地化的输入文本 CalendarAdminUserAdd.vue>AutoCompletion.vue

// App.vue
// ...
<div class="modal" :class="{ 'is-active': showUserAddModal }">
  <div class="modal-background"></div>
  <calendar-admin-user-add team-id="9" ref="calendaradminuseradd" />
</div>
// ...

// CalendarAdminUserAdd.vue
<template>
 <div class="modal-card">
   // ...
   <auto-completion width="400px"
                    max-height="400px"
                    @input="selectUser($event)"
                    ref="adsearchcomponent" />
   // ...
</template>

// AutoCompletion.vue
<template>
  <div class="dropdown is-active">
  <div class="dropdown-trigger">
      <input type="text" class="input" ref="searchinput"
             placeholder="Nom Prénom" v-model="searchFilter"
             @keyup="searchUser" />
  </div>
  // ...
</template>
// ...

问题是，使用商店时，setShowUserAddModal 方法来自商店（mapMutations），并且本质上具有异步行为。而且我不知道如何捕捉模态的有效显示事件，在其上执行我的 focus() 。目前，由于 setTimeout 不佳，它可以工作：

// App.vue
// ...
watch: {
  showUserAddModal : function () {
    setTimeout( () => {
      this.$refs.calendaradminuseradd.$refs.adsearchcomponent.$refs.searchinput.focus()
    }, 500)
  }
}
// ...

即使有nextTick()它也不起作用。我将框架 CSS Bulma 用于模态，没有 Javascript，所以我认为 Bulma 不会干扰。

商店：

// store/admin.js 
export default {
  namespaced: true,
  state: {
    showUserAddModal: false
  },
  getters: {
    showUserAddModal: state => state.showUserAddModal
  },
  mutations: {
    setShowUserAddModal(state, showUserAddModal) {
      state.showUserAddModal = showUserAddModal
    }
  }
}

我在这里，感谢您阅读直到这里 ;) 并感谢您的帮助！

4

0 回答 0