记一个有关 Vuetify 组件遇到的一些问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了记一个有关 Vuetify 组件遇到的一些问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Vuetify 官网地址

所有Vuetify 组件 — Vuetify

1、Combobox使用对象数组

Combobox 组合框 — Vuetify

items数据使用对象数组时，默认选中的是整个对象，要对数据进行处理

<v-combobox
  v-model="defaultInfo.variableKey"
  :rules="rules.variableKey"
  :placeholder="t('taskbot.flowBuilder.selectOrCreateVariable')"
  :items="variableList"
  item-title="fieldName"
  item-value="fieldName"
  variant="outlined"
  @update:focused="handleVariableList"
/>

variableList是一个对象数组，设置了item-value无效,需要在数据变化时实时取需要的字段值

// v-combobox组件选择选项时会选择一个对象，对variableKey数据进行处理
watch(
  () => defaultInfo.value.variableKey,
  () => {
    if (Object.prototype.toString.call(defaultInfo.value.variableKey) === '[object Object]') {
      defaultInfo.value.variableKey = defaultInfo.value.variableKey['fieldName']
    }
  },
  {
    immediate: true
  }
)

2、Text fields的label带有提示文本

Text field 输入框 — Vuetify

要实现下方文本框标题带有文字提示，鼠标浮动上时出现文本

添加一个" form-message-label "样式，主要是pointer-events:auto

<div class="form-message-label">
  <v-text-field v-model="form.displayName" clearable>
    <template #label>
      <span>{{ t('taskbot.flowBuilder.displayName') }}</span>
      <Tooltip :title="t('tip.helpCenter.shortcuts')" />
    </template>
  </v-text-field>
</div>

.form-message-label {
  .v-field__field {
    align-items: flex-start !important;
  }

  .v-field-label {
    width: auto !important;
    pointer-events: auto !important;
  }

  v-field__input {
    width: auto !important;
  }

  .v-field--active .v-label.v-field-label {
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .v-label.v-field-label {
    position: relative !important;
    pointer-events: auto !important;
  }

  .v-field--active .v-label.v-field-label.v-field-label--floating {
    position: static !important;
    width: auto !important;
    padding: 5px !important;
    pointer-events: auto !important;
    transform: translateY(-50%);
    transform-origin: center;
  }
}