在点击VuetifyJS组合框后，防止调用软键盘

Question

我需要在手机上使用VuetifyJS combobox。组合框字段一旦点击它就会调用软键盘。如何防止触发软键盘？ CodePen示例：https://codepen.io/anon/pen/KxVEea

HTML：

  <v-combobox
  v-model="select
  :items="items"
  label="Select an item"
  ></v-combobox>

JS：

new Vue({
  el: '#app',
  data () {
    return {
      select: 'Programming',
      items: [
        'Programming',
        'Design',
        'Vue',
        'Vuetify'
      ]
    }
  }
})

Answer 1

检查Vuetify Guide: Combobox API，有一个prop = type，它设置输入类型（如果你打开浏览器检查器，你会看到Vuetify如何构造组合框），它的默认值是'text'。这就是为什么软键板在点击时自动弹出的原因。

一个快速解决方案，将其设置为按钮。 （但潜在的风险是用户不能再手动更改值。特别是你想要实现一个可搜索的组合框）

检查下面的演示（或open the codepen in your mobile）：

编辑：通过CSS特性将左侧输入文本对齐（请查看下面演示中的CSS部分）。

new Vue({
  el: '#app',
  data() {
    return {
      select: 'Programming',
      items: [
        'Programming',
        'Design',
        'Vue',
        'Vuetify'
      ]
    }
  }
})

.v-menu input[type=button][role=combobox] {
  text-align: left;
}

.v-select__slot > input[type=button][role=combobox] { 
  /*text-align: left;   this one works also, you can open browser inspector, then build your own */
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>


<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-layout wrap>
        <v-flex xs12>
          <v-combobox v-model="select" :items="items" label="Select a favorite activity or create a new one" type="button"></v-combobox>
        </v-flex>
        <v-flex xs12>
          <v-combobox v-model="select" :items="items" chips label="I use chips" type="button"></v-combobox>
        </v-flex>
        <v-flex xs12>
          <v-combobox v-model="select" :items="items" chips label="I use a scoped slot" type="button">
            <template slot="selection" slot-scope="data">
              <v-chip
                :selected="data.selected"
                :disabled="data.disabled"
                :key="JSON.stringify(data.item)"
                class="v-chip--select-multi "
                @input="data.parent.selectItem(data.item)"
                type="button"
              >
                <v-avatar class="accent white--text">
                  {{ data.item.slice(0, 1).toUpperCase() }}
                </v-avatar>
                {{ data.item }}
              </v-chip>
            </template>
          </v-combobox>
        </v-flex>
        <v-flex xs12>
          <v-combobox v-model="select" chips label="I'm readonly" readonly></v-combobox>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

Answer 2

根据this answer使用readonly="true"解决问题，我发现a codePen具有更高级的功能来尝试和测试这个概念。 Combobox有一个readOnly参数，可能会被一些JS打开......但是！

如果你需要一个组合框而不需要用户输入，为什么不使用the selects by the same library？使用适当的参数，它就像一个组合框一样呈现。