Блог

Vuetify предоставляет реквизиты activator во многих компонентах, таких как v-menu или v-dialo& , но больше нет подробностей о том, как создать узел для правильной работы. Документ описывается следующим образом

Назначьте пользовательский активатор, когда слот activator не используется. Строкой может быть любой допустимый querySelector, а объектом может быть любой допустимый узел.

Но я использую querySelector для выбора простого элемента, и это не сработало, мне следует добавить какое-либо дополнительное свойство?

Насколько я знаю, дополнительных реквизитов нет. activator Prop принимает 3 разных типа.

С помощью селектора:

 <v-app&&t;
  <v-btn class="my-btn"&&t;Dropdown</v-btn&&t;
  <v-menu activator=".my-btn"&&t;
    <v-list&&t;
      ...
    </v-list&&t;
  </v-menu&&t;
</v-app&&t;
  

Пример

С помощью компонента:

 <v-app&&t;
  <v-btn ref="myBtn"&&t;Dropdown</v-btn&&t;
  <v-menu :activator="myBtnRef"&&t;
    <v-list&&t;
      ...
    </v-list&&t;
  </v-menu&&t;
</v-app&&t;
  

 new Vue({
  data: () =&&t; ({
    myBtnRef: null,
    ...
  }),
  mounted() {
    this.myBtnRef = this.$refs.myBtn
  }
}).$mount('#app')

  

Пример

С помощью HTMLElement:

 <v-app&&t;
  <v-btn&&t;Dropdown</v-btn&&t;
  <v-menu :activator="myBtn"&&t;
    <v-list&&t;
      ...
    </v-list&&t;
  </v-menu&&t;
</v-app&&t;
  

 new Vue({
  data: () =&&t; ({
    myBtn: null,
    ...
  }),
  mounted() {
    let button = document.createElement('button')
    button.textContent = 'Dropdown'
    document.body.insertBefore(button, document.body.firstChild)
    this.myBtn = button
  }
}).$mount('#app')
  

Пример