Guava Docs

Appearance

组件使用常见问题 ​

这里汇总了Guava UI接入和使用过程中最常碰到的问题。

接入相关 ​

Q: Guava UI 怎么接入项目？推荐逐个注册还是一次性注册？ ​

推荐用插件方式一次性注册，不要逐个 GvXxx.install(app)。开放的示例项目中已经注册了所有组件。

ts
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { createI18n } from 'vue-i18n';
import ElementPlus from 'element-plus';
import { GuavaUI } from 'guava-ui';
import 'element-plus/dist/index.css'; // 或按需引入样式
import 'guava-ui/style.css';

const app = createApp(App);
const pinia = createPinia();
const i18n = createI18n({
  /* ... */
});

app.use(pinia);
app.use(i18n);
app.use(ElementPlus);
app.use(GuavaUI, { store: pinia, i18n: i18n.global });
app.mount('#app');

Q: 有哪些组件可以用？ ​

组件详情
GvInput查看GvInput
GvSelect查看GvSelect
GvRow / GvCol查看GvRow / 查看GvCol

详见 更多组件文档

命名规则

Guava UI 组件统一以 Gv<ComponentsName> 方式命名，比如 GvInput、GvSelect。

组件使用问题 ​

Q: 怎么给 GvInput 加前缀/后缀图标？ ​

prefix-icon / suffix-icon 需传入 图标名字符串，不支持 Vue 组件：

vue
<!-- 正确：传字符串 -->
<GvInput prefix-icon="gv-icon-sousuo" />
<GvInput suffix-icon="el-icon-message" />

<!-- 错误：不能传图标组件 -->
<!-- <GvInput :prefix-icon="SearchIcon" /> -->

Q: GvInput maxlength 报类型警告怎么办？ ​

请使用 数字绑定，不要写字符串：

vue
<!-- ✅ 推荐：数字绑定 -->
<GvInput :maxlength="30" show-word-limit />

<!-- ❌ 不推荐：字符串会报警告 -->
<GvInput maxlength="30" show-word-limit />

Q: GvRow 和 GvCol 怎么用？ ​

基于 24 栅格，与 Element Plus Row/Col 用法类似：

vue
<GvRow :gutter="20">
  <GvCol :span="6"><div /></GvCol>
  <GvCol :span="6"><div /></GvCol>
</GvRow>

支持的属性：

  • :offset - 偏移量
  • 响应式：:xs / :sm / :md / :lg / :xl

详见 Col 文档

Q: GvIcon 怎么用？支持哪些图标类型？ ​

图标分为 3 种类型，默认为 iconfont：

属性说明
iconType图标类型：iconfont、el、svg（默认 iconfont）
iconName图标名称，根据类型不同填入对应名称
iconClass图标类名，可选
vue
<GvIcon iconType="iconfont" iconName="shouye" />
<GvIcon iconType="el" iconName="message" />
<GvIcon iconType="svg" iconName="search" />

Q: GvTabs 设置了默认显示值，但 Tab 还是不生效？ ​

请检查 GvTabPane 是否设置了 name 属性。必须设置 name，否则 v-model 无法匹配。

vue
<template>
  <GvTabs v-model="activeName">
    <GvTabPane label="查询" name="first">查询内容</GvTabPane>
    <GvTabPane label="表单" name="second">表单内容</GvTabPane>
  </GvTabs>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const activeName = ref<string>('first');
</script>

Q: 使用 GvSelect 控制台报 "The dicType needs to be set" 怎么办？ ​

每个 GvSelect 都必须设置 dic-type 属性。详见 字典与 Select。

Q：使用 GvForm 时，表单中的元素如何添加校验规则? ​

配置 GvForm 的json数据 format 属性,属性配置详情见：校验规则配置

控制台警告排查 ​

警告信息原因解决办法
iconName.startsWith is not a function把 Element Plus 图标组件传给了 prefix-icon / suffix-icon改为字符串名，如 "search" 或 "message"
The dicType needs to be setGvSelect 没有设置 dic-type添加 dic-type 属性
maxlength 类型警告传了字符串而非数字使用 :maxlength="30" 数字绑定
Tab 默认值不生效GvTabPane 没设置 name添加 name 属性