如何禁用在中关于 VueJS 材料

Question

当我单击 组件时，会显示 。

当我单击 的外部区域时， 组件将关闭。

我想在单击某个按钮时关闭 组件。

如何添加自定义事件来关闭 组件？

这是select组件的文档链接。
Vue Material - Select

这是一个模板。

<md-field>
  <label for="movie">Movie</label>
  <md-select v-model="movie" name="movie" id="movie">
    <md-option value="fight-club">Fight Club</md-option>
    <md-option value="godfather">Godfather</md-option>
    <md-option value="godfather-ii">Godfather II</md-option>
  </md-select>
</md-field>

Answer 1

您可以添加一个按钮并添加单击事件

<button @click="disableButtonClicked">Click to disable</button>

然后您可以更改组件的变量让我们将其称为 isDisabled

<md-field>
  <label for="movie">Movie</label>
  <md-select v-model="movie" name="movie" id="movie"  :disabled="isDisabled" ref="mdSelect">
    <md-option value="fight-club">Fight Club</md-option>
    <md-option value="godfather">Godfather</md-option>
    <md-option value="godfather-ii">Godfather II</md-option>
  </md-select>
</md-field>

或者您可以使用它的 ref 像

this.$refs.mdSelect 

然后执行您想要的操作。