时间戳

首页 > 解决方案 > 如何在Vuetify组件中将光标默认更改为指针

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

问题描述

我想在 Vuetify 中主动自动完成时将光标默认更改为指针。我试图制作 css 代码来更改光标。但鼠标拖动自动完成底部，光标改变“文本”样式，如“我 beem”。我想展示“指针”风格。我找不到任何关于 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>

标签： vue.jsvuetify.jsnuxt.js

解决方案

默认cursor设置为text（显示为您提到的“I-beam”），但您可以通过在 CSS 中v-autocomplete定位 来更改 's 光标：input

.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>

推荐阅读