面包屑 q-breadcrumb
基本使用
Code
vue
<script setup lang="ts">
+ Skip to content On this page面包屑 q-breadcrumb
基本使用
Code
vue<script setup lang="ts">
const routes = [
{
path: "/first", // 路由地址
@@ -34,7 +34,7 @@
</script>
<template>
<q-breadcrumb :routes="routes" />
-</template>
自定义分隔符
Code
vue<script setup lang="ts">
+</template>
自定义分隔符
Code
vue<script setup lang="ts">
const routes = [
{
path: "/first", // 路由地址
@@ -53,7 +53,7 @@
</script>
<template>
<q-breadcrumb :routes="routes" separator="/" />
-</template>
自定义样式
Code
vue<script setup lang="ts">
+</template>
自定义样式
Code
vue<script setup lang="ts">
const routes = [
{
path: "/first", // 路由地址
@@ -72,7 +72,7 @@
</script>
<template>
<q-breadcrumb :routes="routes" :font-size="16" />
-</template>
新页面打开目标链接
Code
vue<script setup lang="ts">
+</template>
新页面打开目标链接
Code
vue<script setup lang="ts">
const routes = [
{
path: "/first", // 路由地址
@@ -92,7 +92,7 @@
<template>
<q-breadcrumb :routes="routes" target="_blank" />
</template>
APIs
参数 说明 类型 默认值 必传 routes 路由数组 Route[] [] true fontSize 字体大小,单位 px number 14 false height 面包屑高度 number 36 false maxWidth 文本最大显示宽度,超出后显示省略号,单位 px 150 false separator 分隔符,默认''时为箭头 string '' false target 在何处打开目标 URL '_self' | '_blank' '_self' false
Route Type
名称 说明 类型 必传 path 路由地址 string true query 路由查询参数 [propName: string]: any false name 路由名称 string true
-
diff --git a/docs/.vitepress/dist/guide/components/button.html b/docs/.vitepress/dist/guide/components/button.html
index e03d799..93b6170 100644
--- a/docs/.vitepress/dist/guide/components/button.html
+++ b/docs/.vitepress/dist/guide/components/button.html
@@ -5,17 +5,17 @@
按钮 | QUI
-
-
+
+
-
+
- Skip to content On this page按钮
基本使用
code
vue<script setup lang="ts">
+ Skip to content On this page按钮
基本使用
code
vue<script setup lang="ts">
function onClick(e: Event) {
console.log("click")
}
@@ -42,7 +42,7 @@
<q-button>Default</q-button>
<q-button size="large" @click="onClick">Large</q-button>
</template>
APIs
参数 说明 类型 默认值 必传 name 默认文本 string default false type 类型 'default' | 'primary' | primary false size 尺寸 'small' | 'large' - false disabled 禁用状态 boolean false false loading 加载状态 boolean false false
Events
事件名称 说明 参数 click 点击按钮时的回调 (e: Event) => void
-
diff --git a/docs/.vitepress/dist/guide/components/icon.html b/docs/.vitepress/dist/guide/components/icon.html
index ca21ab7..fc6eee1 100644
--- a/docs/.vitepress/dist/guide/components/icon.html
+++ b/docs/.vitepress/dist/guide/components/icon.html
@@ -5,26 +5,26 @@
图标 q-icon | QUI
-
-
+
+
-
+
- Skip to content On this page图标 q-icon
可自定义颜色、大小,并嵌套在其他组件内。icon 图表基于阿里图标库,逐步完善中
基本使用
Code
vue<template>
+ Skip to content On this page图标 q-icon
可自定义颜色、大小,并嵌套在其他组件内。icon 图表基于阿里图标库,逐步完善中
基本使用
Code
vue<template>
<q-icon name="q-icon-refresh-left" color="green" size="30" />
<q-icon name="q-icon-delete" color="red" size="26" />
<q-icon name="q-icon-edit" />
<q-icon name="q-icon-add" />
<q-icon name="q-icon-arrow-right" />
<q-icon name="q-icon-loading" />
-</template>
APIs
参数 说明 类型 默认值 必传 name icon 名称 string '' true color icon 颜色 string '#333333' false size icon 大小 string '14' false
图标集合
复制 复制 复制 复制 复制 复制 复制 复制 复制 复制 复制 复制 复制 复制
-
diff --git a/docs/.vitepress/dist/guide/components/select.html b/docs/.vitepress/dist/guide/components/select.html
index e8a94df..91fce04 100644
--- a/docs/.vitepress/dist/guide/components/select.html
+++ b/docs/.vitepress/dist/guide/components/select.html
@@ -5,17 +5,17 @@
选择器 QSelect | QUI
-
-
+
+
-
-
+
+
- Skip to content On this page选择器 QSelect
基本使用
北京市北京市
上海市
Show Code
vue<script setup lang="ts">
+ Skip to content On this page选择器 QSelect
基本使用
北京市北京市
上海市
Code
vue<script setup lang="ts">
import { ref, watchEffect } from "vue"
const options = ref([
{
@@ -34,7 +34,7 @@
</script>
<template>
<QSelect :options="options" v-model="selVal" />
-</template>
禁用
北京市北京市
上海市
Show Code
vue<script setup lang="ts">
+</template>
禁用
北京市北京市
上海市
Code
vue<script setup lang="ts">
import { ref } from "vue"
const options = ref([
{
@@ -46,7 +46,7 @@
</script>
<template>
<QSelect :options="options" v-model="selVal" disabled />
-</template>
禁用选项
北京市北京市
上海市
Show Code
vue<script setup lang="ts">
+</template>
禁用选项
北京市北京市
上海市
Code
vue<script setup lang="ts">
import { ref } from "vue"
const optionsDisabled = ref([
{
@@ -63,7 +63,7 @@
</script>
<template>
<QSelect :options="optionsDisabled" v-model="selVal" />
-</template>
自定义样式
北京市北京市
上海市
Show Code
vue<script setup lang="ts">
+</template>
自定义样式
北京市北京市
上海市
Code
vue<script setup lang="ts">
import { ref } from "vue"
const options = ref([
{
@@ -79,7 +79,7 @@
</script>
<template>
<QSelect :width="180" :height="42" :options="options" v-model="selVal" />
-</template>
自定义字段名
北京市北京市
上海市
Show Code
vue<script setup lang="ts">
+</template>
自定义字段名
北京市北京市
上海市
Code
vue<script setup lang="ts">
import { ref } from "vue"
const optionsCustom = ref([
{
@@ -95,7 +95,7 @@
</script>
<template>
<QSelect :options="optionsCustom" label="name" value="id" v-model="selVal" />
-</template>
自定义下拉面板展示数
北京市北京市
上海市
Show Code
vue<script setup lang="ts">
+</template>
自定义下拉面板展示数
北京市北京市
上海市
Code
vue<script setup lang="ts">
import { ref } from "vue"
const options = ref([
{
@@ -112,7 +112,7 @@
<template>
<QSelect :options="options" :max-display="1" v-model="selVal" />
</template>
APIs
参数 说明 类型 默认值 必传 modelValue(v-model) 当前选中的 option 条目 number | string | null null false options 选项数据 Option[] [] false label 字典项的文本字段名 string 'label' false value 字典项的值字段名 string 'value' false placeholder 默认文字 string '请选择' false disabled 是否禁用 boolean false false clearable 是否支持清除 boolean false false width 宽度 number 120 false height 高度 number 32 false maxDisplay 下拉菜单最多展示的下拉项数,超出滚动显示 number 7 false
Option Type
名称 说明 类型 必传 label 选项名 string false value 选项值 string | number false disabled 是否禁用选项 boolean false [propName: string] 添加一个字符串索引签名,用于包含带有任意数量的其他属性 any -
Events
事件名称 说明 参数 change 选项值改变后的回调 (value: string | number, label: string, index: number) => void
-
diff --git a/docs/.vitepress/dist/guide/features.html b/docs/.vitepress/dist/guide/features.html
index 23fcbdb..bb31475 100644
--- a/docs/.vitepress/dist/guide/features.html
+++ b/docs/.vitepress/dist/guide/features.html
@@ -5,18 +5,18 @@
特性 | QUI
-
-
+
+
-
+
-
diff --git a/docs/.vitepress/dist/guide/started.html b/docs/.vitepress/dist/guide/started.html
index bed536d..1baa206 100644
--- a/docs/.vitepress/dist/guide/started.html
+++ b/docs/.vitepress/dist/guide/started.html
@@ -5,11 +5,11 @@
快速上手 | QUI
-
-
+
+
-
+
@@ -26,7 +26,7 @@
app.mount("#app")
单文件
tsimport { QButton } from "@jqw755/q-ui"
// import "@jqw755/q-ui/css"
-