如何在Vuetify组件中将光标默认更改为指针

Question

当Vuetify中的活动自动完成时，我想将光标默认值更改为指针。我试图制作css代码来更改光标。但是鼠标拖动自动完成底部；文本"；风格类似"；我是"；。我想展示"；指针"；风格我找不到任何想法Vuetify网站。有人知道吗？

<template>
  <v-card>
    <v-container fluid>
      <v-row
        align="center"
      >
        <v-col cols="12">
          <v-autocomplete
            v-model="value"
            :items="items"
            dense
            filled
            label="Filled"
            class="test_cursor"
          ></v-autocomplete>
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</template>
<script>
  export default {
    data: () => ({
      items: ['foo', 'bar', 'fizz', 'buzz'],
      values: ['foo', 'bar'],
      value: null,
    }),
  }
</script>
<style lang="scss" scoped>
.test_cursor{
    cursor: pointer;
}
</style>

Answer 1

默认情况下，cursor设置为text(显示为您提到的"I-beam"(，但您可以通过在CSS:中瞄准input来更改v-autocomplete的光标

.test_cursor input {
  cursor: pointer;
}

new Vue({
  vuetify: new Vuetify(),
  el: '#app',
  data () {
    return {
      states: [
        { name: 'Florida', abbr: 'FL', id: 1 },
        { name: 'Georgia', abbr: 'GA', id: 2 },
        { name: 'Nebraska', abbr: 'NE', id: 3 },
        { name: 'California', abbr: 'CA', id: 4 },
        { name: 'New York', abbr: 'NY', id: 5 },
      ],
    }
  },
})

.test_cursor input {
  cursor: pointer;
}

<script src="https://unpkg.com/vue@2.6.11"></script>
<script src="https://unpkg.com/vuetify@2.3.5"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.3.5/dist/vuetify.css">
<v-app id="app">
  <v-autocomplete
                  class="test_cursor"
                  :items="states"
                  item-text="name"
                  label="State"
                  ></v-autocomplete>
</v-app>