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

Posted 2023-02-23

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

【英文标题】：How to change the cursor default to pointer in Vuetify component

【发布时间】：2020-11-11 12:19:46

【问题描述】：

我想在 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>

【问题讨论】：

我真的不确定你在问什么。我对 Vuetify 并不太熟悉，但即使只是查看 examples in the documentation，列表中的项目和选定的项目都具有指针（手）光标样式

Phil 先生）是的，我尝试如下。它可以工作，但我想在自动完成和光标更改指针上拖动光标。

抱歉，我编辑了我的问题和错误的解释。我将 on autocomplete ，光标更改指针拖到 I beem 样式。但是当我在自动完成上拖动鼠标时，我不想更改光标样式。

【参考方案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>

【讨论】：

Mr.tony19) 非常感谢！！惊人的！！我真的很感激！