diff --git a/404.html b/404.html index 47e60e821..84f283bbb 100644 --- a/404.html +++ b/404.html @@ -17,7 +17,7 @@
- + \ No newline at end of file diff --git a/assets/guide_components_swiper.md.7K6bdnKK.js b/assets/guide_components_swiper.md.BMmcK8Oh.js similarity index 99% rename from assets/guide_components_swiper.md.7K6bdnKK.js rename to assets/guide_components_swiper.md.BMmcK8Oh.js index 39eb17578..c81e8147c 100644 --- a/assets/guide_components_swiper.md.7K6bdnKK.js +++ b/assets/guide_components_swiper.md.BMmcK8Oh.js @@ -1,4 +1,4 @@ -import{p as S}from"./chunks/package.Cf0huBbw.js";import{d as I,r as j,ao as P,ap as _,q as g,J as c,Q as e,c as i,x as n,ak as k,a7 as t,p as y,N as M,B as $,K as C,v as B}from"./chunks/framework.BOCSoIBq.js";const N={id:"触摸滑动插件-swiper-pkg-dependencies-swiper",tabindex:"-1"},R=JSON.parse('{"title":"触摸滑动插件 Swiper{{ pkg.dependencies.swiper }}","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/swiper.md","filePath":"guide/components/swiper.md","lastUpdated":1735180868000}'),O={name:"guide/components/swiper.md"},G=I({...O,setup(T){const h=j([]);function u(){for(let a=1;a<=6;a++)h.value.push({name:`image-${a}`,link:`https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.6/${a}.jpg`,src:`https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.6/${a}.jpg`})}P(()=>{u()});function m(a){console.log("slider change",a)}const f=["slide","fade","cube","flip","coverflow","cards"],D=[{prev:{shadow:!0,translate:[0,0,-400]},next:{translate:["100%",0,0]}},{prev:{shadow:!0,translate:["-120%",0,-500]},next:{shadow:!0,translate:["120%",0,-500]}},{prev:{shadow:!0,translate:["-20%",0,-1]},next:{translate:["100%",0,0]}},{prev:{shadow:!0,translate:[0,0,-800],rotate:[180,0,0]},next:{shadow:!0,translate:[0,0,-800],rotate:[-180,0,0]}},{prev:{shadow:!0,translate:["-125%",0,-800],rotate:[0,0,-90]},next:{shadow:!0,translate:["125%",0,-800],rotate:[0,0,90]}},{prev:{shadow:!0,origin:"left center",translate:["-5%",0,-200],rotate:[0,100,0]},next:{origin:"right center",translate:["5%",0,-200],rotate:[0,-100,0]}}],l=_({});function A(a){console.log("carousel",a),l.prevEl=a.navigation.prevEl,l.prevEl.style.display="none",l.nextEl=a.navigation.nextEl,l.nextEl.style.display="none"}function v(){l.prevEl.click()}function x(){l.nextEl.click()}return(a,s)=>{const q=t("Tag"),b=t("GlobalElement"),p=t("Swiper",!0),F=t("Badge"),r=t("Flex"),o=t("Button"),w=t("Space");return y(),g("div",null,[c("h1",N,[s[0]||(s[0]=e("触摸滑动插件 Swiper")),i(q,{color:"volcano",style:{"vertical-align":"top","margin-left":"6px"}},{default:n(()=>[e(M($(S).dependencies.swiper),1)]),_:1}),s[1]||(s[1]=e()),s[2]||(s[2]=c("a",{class:"header-anchor",href:"#触摸滑动插件-swiper-pkg-dependencies-swiper","aria-label":'Permalink to "触摸滑动插件 Swiper{{ pkg.dependencies.swiper }}"'},"​",-1))]),i(b),s[5]||(s[5]=k('

触摸滑动组件

何时使用 ​

参考文档 ​

基本使用 ​

',6)),i(p,{images:h.value,height:480,pagination:{dynamicBullets:!0,clickable:!0},onChange:m},null,8,["images"]),s[6]||(s[6]=k(`
Show Code
vue
<script setup lang="ts">
+import{p as S}from"./chunks/package.Cf0huBbw.js";import{d as I,r as j,ao as P,ap as _,q as g,J as c,Q as e,c as i,x as n,ak as k,a7 as t,p as y,N as M,B as $,K as C,v as B}from"./chunks/framework.BOCSoIBq.js";const N={id:"触摸滑动插件-swiper-pkg-dependencies-swiper",tabindex:"-1"},R=JSON.parse('{"title":"触摸滑动插件 Swiper{{ pkg.dependencies.swiper }}","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/swiper.md","filePath":"guide/components/swiper.md","lastUpdated":1736154751000}'),O={name:"guide/components/swiper.md"},G=I({...O,setup(T){const h=j([]);function u(){for(let a=1;a<=6;a++)h.value.push({name:`image-${a}`,link:`https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.6/${a}.jpg`,src:`https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.6/${a}.jpg`})}P(()=>{u()});function m(a){console.log("slider change",a)}const f=["slide","fade","cube","flip","coverflow","cards"],D=[{prev:{shadow:!0,translate:[0,0,-400]},next:{translate:["100%",0,0]}},{prev:{shadow:!0,translate:["-120%",0,-500]},next:{shadow:!0,translate:["120%",0,-500]}},{prev:{shadow:!0,translate:["-20%",0,-1]},next:{translate:["100%",0,0]}},{prev:{shadow:!0,translate:[0,0,-800],rotate:[180,0,0]},next:{shadow:!0,translate:[0,0,-800],rotate:[-180,0,0]}},{prev:{shadow:!0,translate:["-125%",0,-800],rotate:[0,0,-90]},next:{shadow:!0,translate:["125%",0,-800],rotate:[0,0,90]}},{prev:{shadow:!0,origin:"left center",translate:["-5%",0,-200],rotate:[0,100,0]},next:{origin:"right center",translate:["5%",0,-200],rotate:[0,-100,0]}}],l=_({});function A(a){console.log("carousel",a),l.prevEl=a.navigation.prevEl,l.prevEl.style.display="none",l.nextEl=a.navigation.nextEl,l.nextEl.style.display="none"}function v(){l.prevEl.click()}function x(){l.nextEl.click()}return(a,s)=>{const q=t("Tag"),b=t("GlobalElement"),p=t("Swiper",!0),F=t("Badge"),r=t("Flex"),o=t("Button"),w=t("Space");return y(),g("div",null,[c("h1",N,[s[0]||(s[0]=e("触摸滑动插件 Swiper")),i(q,{color:"volcano",style:{"vertical-align":"top","margin-left":"6px"}},{default:n(()=>[e(M($(S).dependencies.swiper),1)]),_:1}),s[1]||(s[1]=e()),s[2]||(s[2]=c("a",{class:"header-anchor",href:"#触摸滑动插件-swiper-pkg-dependencies-swiper","aria-label":'Permalink to "触摸滑动插件 Swiper{{ pkg.dependencies.swiper }}"'},"​",-1))]),i(b),s[5]||(s[5]=k('
触摸滑动组件
何时使用 ​
  • 创建触摸滑块和可滑动内容的区域
参考文档 ​
基本使用 ​
',6)),i(p,{images:h.value,height:480,pagination:{dynamicBullets:!0,clickable:!0},onChange:m},null,8,["images"]),s[6]||(s[6]=k(`
Show Code
vue
<script setup lang="ts">
 import { ref, onBeforeMount } from 'vue'
 import type { SwiperImage } from 'vue-amazing-ui'
 const images = ref<SwiperImage[]>([])
diff --git a/assets/guide_components_swiper.md.7K6bdnKK.lean.js b/assets/guide_components_swiper.md.BMmcK8Oh.lean.js
similarity index 99%
rename from assets/guide_components_swiper.md.7K6bdnKK.lean.js
rename to assets/guide_components_swiper.md.BMmcK8Oh.lean.js
index 39eb17578..c81e8147c 100644
--- a/assets/guide_components_swiper.md.7K6bdnKK.lean.js
+++ b/assets/guide_components_swiper.md.BMmcK8Oh.lean.js
@@ -1,4 +1,4 @@
-import{p as S}from"./chunks/package.Cf0huBbw.js";import{d as I,r as j,ao as P,ap as _,q as g,J as c,Q as e,c as i,x as n,ak as k,a7 as t,p as y,N as M,B as $,K as C,v as B}from"./chunks/framework.BOCSoIBq.js";const N={id:"触摸滑动插件-swiper-pkg-dependencies-swiper",tabindex:"-1"},R=JSON.parse('{"title":"触摸滑动插件 Swiper{{ pkg.dependencies.swiper }}","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/swiper.md","filePath":"guide/components/swiper.md","lastUpdated":1735180868000}'),O={name:"guide/components/swiper.md"},G=I({...O,setup(T){const h=j([]);function u(){for(let a=1;a<=6;a++)h.value.push({name:`image-${a}`,link:`https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.6/${a}.jpg`,src:`https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.6/${a}.jpg`})}P(()=>{u()});function m(a){console.log("slider change",a)}const f=["slide","fade","cube","flip","coverflow","cards"],D=[{prev:{shadow:!0,translate:[0,0,-400]},next:{translate:["100%",0,0]}},{prev:{shadow:!0,translate:["-120%",0,-500]},next:{shadow:!0,translate:["120%",0,-500]}},{prev:{shadow:!0,translate:["-20%",0,-1]},next:{translate:["100%",0,0]}},{prev:{shadow:!0,translate:[0,0,-800],rotate:[180,0,0]},next:{shadow:!0,translate:[0,0,-800],rotate:[-180,0,0]}},{prev:{shadow:!0,translate:["-125%",0,-800],rotate:[0,0,-90]},next:{shadow:!0,translate:["125%",0,-800],rotate:[0,0,90]}},{prev:{shadow:!0,origin:"left center",translate:["-5%",0,-200],rotate:[0,100,0]},next:{origin:"right center",translate:["5%",0,-200],rotate:[0,-100,0]}}],l=_({});function A(a){console.log("carousel",a),l.prevEl=a.navigation.prevEl,l.prevEl.style.display="none",l.nextEl=a.navigation.nextEl,l.nextEl.style.display="none"}function v(){l.prevEl.click()}function x(){l.nextEl.click()}return(a,s)=>{const q=t("Tag"),b=t("GlobalElement"),p=t("Swiper",!0),F=t("Badge"),r=t("Flex"),o=t("Button"),w=t("Space");return y(),g("div",null,[c("h1",N,[s[0]||(s[0]=e("触摸滑动插件 Swiper")),i(q,{color:"volcano",style:{"vertical-align":"top","margin-left":"6px"}},{default:n(()=>[e(M($(S).dependencies.swiper),1)]),_:1}),s[1]||(s[1]=e()),s[2]||(s[2]=c("a",{class:"header-anchor",href:"#触摸滑动插件-swiper-pkg-dependencies-swiper","aria-label":'Permalink to "触摸滑动插件 Swiper{{ pkg.dependencies.swiper }}"'},"​",-1))]),i(b),s[5]||(s[5]=k('
触摸滑动组件
何时使用 ​
  • 创建触摸滑块和可滑动内容的区域
参考文档 ​
基本使用 ​
',6)),i(p,{images:h.value,height:480,pagination:{dynamicBullets:!0,clickable:!0},onChange:m},null,8,["images"]),s[6]||(s[6]=k(`
Show Code
vue
<script setup lang="ts">
+import{p as S}from"./chunks/package.Cf0huBbw.js";import{d as I,r as j,ao as P,ap as _,q as g,J as c,Q as e,c as i,x as n,ak as k,a7 as t,p as y,N as M,B as $,K as C,v as B}from"./chunks/framework.BOCSoIBq.js";const N={id:"触摸滑动插件-swiper-pkg-dependencies-swiper",tabindex:"-1"},R=JSON.parse('{"title":"触摸滑动插件 Swiper{{ pkg.dependencies.swiper }}","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/swiper.md","filePath":"guide/components/swiper.md","lastUpdated":1736154751000}'),O={name:"guide/components/swiper.md"},G=I({...O,setup(T){const h=j([]);function u(){for(let a=1;a<=6;a++)h.value.push({name:`image-${a}`,link:`https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.6/${a}.jpg`,src:`https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.6/${a}.jpg`})}P(()=>{u()});function m(a){console.log("slider change",a)}const f=["slide","fade","cube","flip","coverflow","cards"],D=[{prev:{shadow:!0,translate:[0,0,-400]},next:{translate:["100%",0,0]}},{prev:{shadow:!0,translate:["-120%",0,-500]},next:{shadow:!0,translate:["120%",0,-500]}},{prev:{shadow:!0,translate:["-20%",0,-1]},next:{translate:["100%",0,0]}},{prev:{shadow:!0,translate:[0,0,-800],rotate:[180,0,0]},next:{shadow:!0,translate:[0,0,-800],rotate:[-180,0,0]}},{prev:{shadow:!0,translate:["-125%",0,-800],rotate:[0,0,-90]},next:{shadow:!0,translate:["125%",0,-800],rotate:[0,0,90]}},{prev:{shadow:!0,origin:"left center",translate:["-5%",0,-200],rotate:[0,100,0]},next:{origin:"right center",translate:["5%",0,-200],rotate:[0,-100,0]}}],l=_({});function A(a){console.log("carousel",a),l.prevEl=a.navigation.prevEl,l.prevEl.style.display="none",l.nextEl=a.navigation.nextEl,l.nextEl.style.display="none"}function v(){l.prevEl.click()}function x(){l.nextEl.click()}return(a,s)=>{const q=t("Tag"),b=t("GlobalElement"),p=t("Swiper",!0),F=t("Badge"),r=t("Flex"),o=t("Button"),w=t("Space");return y(),g("div",null,[c("h1",N,[s[0]||(s[0]=e("触摸滑动插件 Swiper")),i(q,{color:"volcano",style:{"vertical-align":"top","margin-left":"6px"}},{default:n(()=>[e(M($(S).dependencies.swiper),1)]),_:1}),s[1]||(s[1]=e()),s[2]||(s[2]=c("a",{class:"header-anchor",href:"#触摸滑动插件-swiper-pkg-dependencies-swiper","aria-label":'Permalink to "触摸滑动插件 Swiper{{ pkg.dependencies.swiper }}"'},"​",-1))]),i(b),s[5]||(s[5]=k('
触摸滑动组件
何时使用 ​
  • 创建触摸滑块和可滑动内容的区域
参考文档 ​
基本使用 ​
',6)),i(p,{images:h.value,height:480,pagination:{dynamicBullets:!0,clickable:!0},onChange:m},null,8,["images"]),s[6]||(s[6]=k(`
Show Code
vue
<script setup lang="ts">
 import { ref, onBeforeMount } from 'vue'
 import type { SwiperImage } from 'vue-amazing-ui'
 const images = ref<SwiperImage[]>([])
diff --git a/assets/guide_components_tag.md._gs_bBhE.js b/assets/guide_components_tag.md.D1a7yfLH.js
similarity index 97%
rename from assets/guide_components_tag.md._gs_bBhE.js
rename to assets/guide_components_tag.md.D1a7yfLH.js
index 716180c38..fdbe3d88e 100644
--- a/assets/guide_components_tag.md._gs_bBhE.js
+++ b/assets/guide_components_tag.md.D1a7yfLH.js
@@ -1,4 +1,4 @@
-import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa as I}from"./chunks/theme.Ds3l8bzv.js";import{d as z,r as B,a4 as D,q as A,J as l,Q as i,c as a,x as t,ak as E,a7 as d,p as u,B as p,K as j,N as m,F as f,E as N}from"./chunks/framework.BOCSoIBq.js";const Y={tabindex:"0"},M={style:{"text-align":"left"}},J=JSON.parse('{"title":"标签 Tag","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/tag.md","filePath":"guide/components/tag.md","lastUpdated":1735203463000}'),U={name:"guide/components/tag.md"},L=z({...U,setup(V){const e=B(["天空","大海","湖泊"]);D(()=>{console.log("strTags",e.value)});const y=B([{label:"天空",color:"processing"},{label:"大海",closable:!1,color:"error"},{label:"湖泊",color:"pink"}]);D(()=>{console.log("objTags",y.value)});const o=r=>{console.log("e",r)},g=(r,s)=>{console.log("item",r),console.log("index",s)};return(r,s)=>{const q=d("GlobalElement"),n=d("Tag",!0),k=d("Space"),F=d("Divider");return u(),A("div",null,[s[76]||(s[76]=l("h1",{id:"标签-tag",tabindex:"-1"},[i("标签 Tag "),l("a",{class:"header-anchor",href:"#标签-tag","aria-label":'Permalink to "标签 Tag"'},"​")],-1)),a(q),s[77]||(s[77]=l("p",null,[l("em",null,"进行标记和分类的小标签")],-1)),s[78]||(s[78]=l("h2",{id:"何时使用",tabindex:"-1"},[i("何时使用 "),l("a",{class:"header-anchor",href:"#何时使用","aria-label":'Permalink to "何时使用"'},"​")],-1)),s[79]||(s[79]=l("ul",null,[l("li",null,"用于标记事物的属性和维度"),l("li",null,"进行分类")],-1)),s[80]||(s[80]=l("h2",{id:"基本使用",tabindex:"-1"},[i("基本使用 "),l("a",{class:"header-anchor",href:"#基本使用","aria-label":'Permalink to "基本使用"'},"​")],-1)),a(k,{gap:"small"},{default:t(()=>[a(n,null,{default:t(()=>s[4]||(s[4]=[i("Tag 1")])),_:1}),a(n,null,{default:t(()=>s[5]||(s[5]=[l("a",{href:"https://blog.csdn.net/Dandrose"},"Link",-1)])),_:1}),a(n,{closable:"",onClose:o},{default:t(()=>s[6]||(s[6]=[i("Tag 2")])),_:1})]),_:1}),s[81]||(s[81]=E(`
Show Code
vue
<script setup lang="ts">
+import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa as I}from"./chunks/theme.Ds3l8bzv.js";import{d as z,r as B,a4 as D,q as A,J as l,Q as i,c as a,x as t,ak as E,a7 as d,p as u,B as p,K as j,N as m,F as f,E as N}from"./chunks/framework.BOCSoIBq.js";const Y={tabindex:"0"},M={style:{"text-align":"left"}},J=JSON.parse('{"title":"标签 Tag","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/tag.md","filePath":"guide/components/tag.md","lastUpdated":1735203463000}'),U={name:"guide/components/tag.md"},L=z({...U,setup(V){const e=B(["天空","大海","湖泊"]);D(()=>{console.log("strTags",e.value)});const y=B([{label:"天空",color:"processing"},{label:"大海",closable:!1,color:"error"},{label:"湖泊",color:"pink"}]);D(()=>{console.log("objTags",y.value)});const F=r=>{console.log("e",r)},g=(r,s)=>{console.log("item",r),console.log("index",s)};return(r,s)=>{const q=d("GlobalElement"),n=d("Tag",!0),k=d("Space"),o=d("Divider");return u(),A("div",null,[s[76]||(s[76]=l("h1",{id:"标签-tag",tabindex:"-1"},[i("标签 Tag "),l("a",{class:"header-anchor",href:"#标签-tag","aria-label":'Permalink to "标签 Tag"'},"​")],-1)),a(q),s[77]||(s[77]=l("p",null,[l("em",null,"进行标记和分类的小标签")],-1)),s[78]||(s[78]=l("h2",{id:"何时使用",tabindex:"-1"},[i("何时使用 "),l("a",{class:"header-anchor",href:"#何时使用","aria-label":'Permalink to "何时使用"'},"​")],-1)),s[79]||(s[79]=l("ul",null,[l("li",null,"用于标记事物的属性和维度"),l("li",null,"进行分类")],-1)),s[80]||(s[80]=l("h2",{id:"基本使用",tabindex:"-1"},[i("基本使用 "),l("a",{class:"header-anchor",href:"#基本使用","aria-label":'Permalink to "基本使用"'},"​")],-1)),a(k,{gap:"small"},{default:t(()=>[a(n,null,{default:t(()=>s[4]||(s[4]=[i("Tag 1")])),_:1}),a(n,null,{default:t(()=>s[5]||(s[5]=[l("a",{href:"https://blog.csdn.net/Dandrose"},"Link",-1)])),_:1}),a(n,{closable:"",onClose:F},{default:t(()=>s[6]||(s[6]=[i("Tag 2")])),_:1})]),_:1}),s[81]||(s[81]=E(`
Show Code
vue
<script setup lang="ts">
 const onClose = (e: MouseEvent) => {
   console.log(e)
 }
@@ -33,7 +33,7 @@ import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa
     <Tag color="#87d068">#87d068</Tag>
     <Tag color="#108ee9">#108ee9</Tag>
   </Space>
-</template>
预设状态的标签 ​
`,2)),a(F,{orientation:"left"},{default:t(()=>s[24]||(s[24]=[i("Without icon")])),_:1}),a(k,{gap:"small"},{default:t(()=>[a(n,{color:"success"},{default:t(()=>s[25]||(s[25]=[i("success")])),_:1}),a(n,{color:"processing"},{default:t(()=>s[26]||(s[26]=[i("processing")])),_:1}),a(n,{color:"error"},{default:t(()=>s[27]||(s[27]=[i("error")])),_:1}),a(n,{color:"warning"},{default:t(()=>s[28]||(s[28]=[i("warning")])),_:1}),a(n,{color:"default"},{default:t(()=>s[29]||(s[29]=[i("default")])),_:1})]),_:1}),a(F,{orientation:"left"},{default:t(()=>s[30]||(s[30]=[i("With icon")])),_:1}),a(k,{gap:"small"},{default:t(()=>[a(n,{color:"success"},{icon:t(()=>[a(p(c))]),default:t(()=>[s[31]||(s[31]=i(" success "))]),_:1}),a(n,{color:"processing"},{icon:t(()=>[a(p(b),{spin:""})]),default:t(()=>[s[32]||(s[32]=i(" processing "))]),_:1}),a(n,{color:"error"},{icon:t(()=>[a(p(T))]),default:t(()=>[s[33]||(s[33]=i(" error "))]),_:1}),a(n,{color:"warning"},{icon:t(()=>[a(p(v))]),default:t(()=>[s[34]||(s[34]=i(" warning "))]),_:1}),a(n,{color:"default"},{icon:t(()=>[a(p(x))]),default:t(()=>[s[35]||(s[35]=i(" waiting "))]),_:1}),a(n,{color:"default"},{icon:t(()=>[a(p(w))]),default:t(()=>[s[36]||(s[36]=i(" stop "))]),_:1}),a(n,{color:"default",icon:"😉"},{default:t(()=>s[37]||(s[37]=[i(" blink ")])),_:1})]),_:1}),s[85]||(s[85]=E(`
Show Code
vue
<script setup lang="ts">
+</template>
预设状态的标签 ​
`,2)),a(o,{orientation:"left"},{default:t(()=>s[24]||(s[24]=[i("Without icon")])),_:1}),a(k,{gap:"small"},{default:t(()=>[a(n,{color:"success"},{default:t(()=>s[25]||(s[25]=[i("success")])),_:1}),a(n,{color:"processing"},{default:t(()=>s[26]||(s[26]=[i("processing")])),_:1}),a(n,{color:"error"},{default:t(()=>s[27]||(s[27]=[i("error")])),_:1}),a(n,{color:"warning"},{default:t(()=>s[28]||(s[28]=[i("warning")])),_:1}),a(n,{color:"default"},{default:t(()=>s[29]||(s[29]=[i("default")])),_:1})]),_:1}),a(o,{orientation:"left"},{default:t(()=>s[30]||(s[30]=[i("With icon")])),_:1}),a(k,{gap:"small"},{default:t(()=>[a(n,{color:"success"},{icon:t(()=>[a(p(c))]),default:t(()=>[s[31]||(s[31]=i(" success "))]),_:1}),a(n,{color:"processing"},{icon:t(()=>[a(p(b),{spin:""})]),default:t(()=>[s[32]||(s[32]=i(" processing "))]),_:1}),a(n,{color:"error"},{icon:t(()=>[a(p(T))]),default:t(()=>[s[33]||(s[33]=i(" error "))]),_:1}),a(n,{color:"warning"},{icon:t(()=>[a(p(v))]),default:t(()=>[s[34]||(s[34]=i(" warning "))]),_:1}),a(n,{color:"default"},{icon:t(()=>[a(p(x))]),default:t(()=>[s[35]||(s[35]=i(" waiting "))]),_:1}),a(n,{color:"default"},{icon:t(()=>[a(p(w))]),default:t(()=>[s[36]||(s[36]=i(" stop "))]),_:1}),a(n,{color:"default",icon:"😉"},{default:t(()=>s[37]||(s[37]=[i(" blink ")])),_:1})]),_:1}),s[85]||(s[85]=E(`
Show Code
vue
<script setup lang="ts">
 import {
   CheckCircleOutlined,
   SyncOutlined,
@@ -132,7 +132,7 @@ import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa
 </template>
动态添加和删除 ​
使用字符串格式数组

`,4)),a(k,{gap:"small"},{default:t(()=>[a(n,{dynamic:"",value:e.value,"onUpdate:value":s[0]||(s[0]=h=>e.value=h),onDynamicClose:g},null,8,["value"])]),_:1}),s[87]||(s[87]=E(`
Show Code
vue
<script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import type { TagItem } from 'vue-amazing-ui'
-const strTags = ref(['天空', '大海', '湖泊'])
+const strTags = ref<string[]>(['天空', '大海', '湖泊'])
 watchEffect(() => {
   console.log('strTags', strTags.value)
 })
@@ -149,7 +149,7 @@ import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa
 import { ref, watchEffect } from 'vue'
 import { CheckCircleOutlined } from '@ant-design/icons-vue'
 import type { TagItem } from 'vue-amazing-ui'
-const objTags = ref([
+const objTags = ref<TagItem[]>([
   {
     label: '天空',
     color: 'processing'
@@ -187,10 +187,10 @@ import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa
       </template>
     </Tag>
   </Space>
-</template>
三种尺寸 ​
`,2)),a(k,{gap:"small"},{default:t(()=>[a(n,{closable:"",size:"small",onClose:o},{default:t(()=>s[42]||(s[42]=[i(" 爱在西元前 ")])),_:1}),a(n,{color:"warning",closable:"",onClose:o},{default:t(()=>s[43]||(s[43]=[i(" 超人不会飞 ")])),_:1}),a(n,{color:"blue",size:"large",dynamic:"",value:e.value,"onUpdate:value":s[2]||(s[2]=h=>e.value=h),closable:"",onClose:g},null,8,["value"])]),_:1}),s[89]||(s[89]=E(`
Show Code
vue
<script setup lang="ts">
+</template>
三种尺寸 ​
`,2)),a(k,{gap:"small"},{default:t(()=>[a(n,{closable:"",size:"small",onClose:F},{default:t(()=>s[42]||(s[42]=[i(" 爱在西元前 ")])),_:1}),a(n,{color:"warning",closable:"",onClose:F},{default:t(()=>s[43]||(s[43]=[i(" 超人不会飞 ")])),_:1}),a(n,{color:"blue",size:"large",dynamic:"",value:e.value,"onUpdate:value":s[2]||(s[2]=h=>e.value=h),closable:"",onClose:g},null,8,["value"])]),_:1}),s[89]||(s[89]=E(`
Show Code
vue
<script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import type { TagItem } from 'vue-amazing-ui'
-const strTags = ref(['天空', '大海', '湖泊'])
+const strTags = ref<string[]>(['天空', '大海', '湖泊'])
 watchEffect(() => {
   console.log('strTags', strTags.value)
 })
@@ -221,7 +221,7 @@ import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa
 </template>
自定义动态标签排列 ​
`,2)),a(n,{closable:"",dynamic:"",color:"blue",size:"large","space-props":{vertical:!0,gap:12},value:e.value,"onUpdate:value":s[3]||(s[3]=h=>e.value=h),onClose:g},null,8,["value"]),s[90]||(s[90]=E(`
Show Code
vue
<script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import type { TagItem } from 'vue-amazing-ui'
-const strTags = ref(['天空', '大海', '湖泊'])
+const strTags = ref<string[]>(['天空', '大海', '湖泊'])
 watchEffect(() => {
   console.log('strTags', strTags.value)
 })
@@ -240,7 +240,7 @@ import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa
     v-model:value="strTags"
     @close="onDynamicClose"
   />
-</template>
无边框 ​
`,2)),a(k,{gap:"small"},{default:t(()=>[a(n,{bordered:!1},{default:t(()=>s[44]||(s[44]=[i("Tag 1")])),_:1}),a(n,{bordered:!1},{default:t(()=>s[45]||(s[45]=[i("Tag 2")])),_:1}),a(n,{bordered:!1,closable:""},{default:t(()=>s[46]||(s[46]=[i("Tag 3")])),_:1}),a(n,{bordered:!1,closable:""},{default:t(()=>s[47]||(s[47]=[i("Tag 4")])),_:1})]),_:1}),a(F),a(k,{gap:"small"},{default:t(()=>[a(n,{bordered:!1,color:"processing"},{default:t(()=>s[48]||(s[48]=[i("processing")])),_:1}),a(n,{bordered:!1,color:"success"},{default:t(()=>s[49]||(s[49]=[i("success")])),_:1}),a(n,{bordered:!1,color:"error"},{default:t(()=>s[50]||(s[50]=[i("error")])),_:1}),a(n,{bordered:!1,color:"warning"},{default:t(()=>s[51]||(s[51]=[i("warning")])),_:1}),a(n,{bordered:!1,color:"magenta"},{default:t(()=>s[52]||(s[52]=[i("magenta")])),_:1}),a(n,{bordered:!1,color:"red"},{default:t(()=>s[53]||(s[53]=[i("red")])),_:1}),a(n,{bordered:!1,color:"volcano"},{default:t(()=>s[54]||(s[54]=[i("volcano")])),_:1}),a(n,{bordered:!1,color:"orange"},{default:t(()=>s[55]||(s[55]=[i("orange")])),_:1}),a(n,{bordered:!1,color:"gold"},{default:t(()=>s[56]||(s[56]=[i("gold")])),_:1}),a(n,{bordered:!1,color:"lime"},{default:t(()=>s[57]||(s[57]=[i("lime")])),_:1}),a(n,{bordered:!1,color:"green"},{default:t(()=>s[58]||(s[58]=[i("green")])),_:1}),a(n,{bordered:!1,color:"cyan"},{default:t(()=>s[59]||(s[59]=[i("cyan")])),_:1}),a(n,{bordered:!1,color:"blue"},{default:t(()=>s[60]||(s[60]=[i("blue")])),_:1}),a(n,{bordered:!1,color:"geekblue"},{default:t(()=>s[61]||(s[61]=[i("geekblue")])),_:1}),a(n,{bordered:!1,color:"purple"},{default:t(()=>s[62]||(s[62]=[i("purple")])),_:1})]),_:1}),s[91]||(s[91]=E(`
Show Code
vue
<template>
+</template>
无边框 ​
`,2)),a(k,{gap:"small"},{default:t(()=>[a(n,{bordered:!1},{default:t(()=>s[44]||(s[44]=[i("Tag 1")])),_:1}),a(n,{bordered:!1},{default:t(()=>s[45]||(s[45]=[i("Tag 2")])),_:1}),a(n,{bordered:!1,closable:""},{default:t(()=>s[46]||(s[46]=[i("Tag 3")])),_:1}),a(n,{bordered:!1,closable:""},{default:t(()=>s[47]||(s[47]=[i("Tag 4")])),_:1})]),_:1}),a(o),a(k,{gap:"small"},{default:t(()=>[a(n,{bordered:!1,color:"processing"},{default:t(()=>s[48]||(s[48]=[i("processing")])),_:1}),a(n,{bordered:!1,color:"success"},{default:t(()=>s[49]||(s[49]=[i("success")])),_:1}),a(n,{bordered:!1,color:"error"},{default:t(()=>s[50]||(s[50]=[i("error")])),_:1}),a(n,{bordered:!1,color:"warning"},{default:t(()=>s[51]||(s[51]=[i("warning")])),_:1}),a(n,{bordered:!1,color:"magenta"},{default:t(()=>s[52]||(s[52]=[i("magenta")])),_:1}),a(n,{bordered:!1,color:"red"},{default:t(()=>s[53]||(s[53]=[i("red")])),_:1}),a(n,{bordered:!1,color:"volcano"},{default:t(()=>s[54]||(s[54]=[i("volcano")])),_:1}),a(n,{bordered:!1,color:"orange"},{default:t(()=>s[55]||(s[55]=[i("orange")])),_:1}),a(n,{bordered:!1,color:"gold"},{default:t(()=>s[56]||(s[56]=[i("gold")])),_:1}),a(n,{bordered:!1,color:"lime"},{default:t(()=>s[57]||(s[57]=[i("lime")])),_:1}),a(n,{bordered:!1,color:"green"},{default:t(()=>s[58]||(s[58]=[i("green")])),_:1}),a(n,{bordered:!1,color:"cyan"},{default:t(()=>s[59]||(s[59]=[i("cyan")])),_:1}),a(n,{bordered:!1,color:"blue"},{default:t(()=>s[60]||(s[60]=[i("blue")])),_:1}),a(n,{bordered:!1,color:"geekblue"},{default:t(()=>s[61]||(s[61]=[i("geekblue")])),_:1}),a(n,{bordered:!1,color:"purple"},{default:t(()=>s[62]||(s[62]=[i("purple")])),_:1})]),_:1}),s[91]||(s[91]=E(`
Show Code
vue
<template>
   <Space gap="small">
     <Tag :bordered="false">Tag 1</Tag>
     <Tag :bordered="false">Tag 2</Tag>
diff --git a/assets/guide_components_tag.md._gs_bBhE.lean.js b/assets/guide_components_tag.md.D1a7yfLH.lean.js
similarity index 97%
rename from assets/guide_components_tag.md._gs_bBhE.lean.js
rename to assets/guide_components_tag.md.D1a7yfLH.lean.js
index 716180c38..fdbe3d88e 100644
--- a/assets/guide_components_tag.md._gs_bBhE.lean.js
+++ b/assets/guide_components_tag.md.D1a7yfLH.lean.js
@@ -1,4 +1,4 @@
-import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa as I}from"./chunks/theme.Ds3l8bzv.js";import{d as z,r as B,a4 as D,q as A,J as l,Q as i,c as a,x as t,ak as E,a7 as d,p as u,B as p,K as j,N as m,F as f,E as N}from"./chunks/framework.BOCSoIBq.js";const Y={tabindex:"0"},M={style:{"text-align":"left"}},J=JSON.parse('{"title":"标签 Tag","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/tag.md","filePath":"guide/components/tag.md","lastUpdated":1735203463000}'),U={name:"guide/components/tag.md"},L=z({...U,setup(V){const e=B(["天空","大海","湖泊"]);D(()=>{console.log("strTags",e.value)});const y=B([{label:"天空",color:"processing"},{label:"大海",closable:!1,color:"error"},{label:"湖泊",color:"pink"}]);D(()=>{console.log("objTags",y.value)});const o=r=>{console.log("e",r)},g=(r,s)=>{console.log("item",r),console.log("index",s)};return(r,s)=>{const q=d("GlobalElement"),n=d("Tag",!0),k=d("Space"),F=d("Divider");return u(),A("div",null,[s[76]||(s[76]=l("h1",{id:"标签-tag",tabindex:"-1"},[i("标签 Tag "),l("a",{class:"header-anchor",href:"#标签-tag","aria-label":'Permalink to "标签 Tag"'},"​")],-1)),a(q),s[77]||(s[77]=l("p",null,[l("em",null,"进行标记和分类的小标签")],-1)),s[78]||(s[78]=l("h2",{id:"何时使用",tabindex:"-1"},[i("何时使用 "),l("a",{class:"header-anchor",href:"#何时使用","aria-label":'Permalink to "何时使用"'},"​")],-1)),s[79]||(s[79]=l("ul",null,[l("li",null,"用于标记事物的属性和维度"),l("li",null,"进行分类")],-1)),s[80]||(s[80]=l("h2",{id:"基本使用",tabindex:"-1"},[i("基本使用 "),l("a",{class:"header-anchor",href:"#基本使用","aria-label":'Permalink to "基本使用"'},"​")],-1)),a(k,{gap:"small"},{default:t(()=>[a(n,null,{default:t(()=>s[4]||(s[4]=[i("Tag 1")])),_:1}),a(n,null,{default:t(()=>s[5]||(s[5]=[l("a",{href:"https://blog.csdn.net/Dandrose"},"Link",-1)])),_:1}),a(n,{closable:"",onClose:o},{default:t(()=>s[6]||(s[6]=[i("Tag 2")])),_:1})]),_:1}),s[81]||(s[81]=E(`
Show Code
vue
<script setup lang="ts">
+import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa as I}from"./chunks/theme.Ds3l8bzv.js";import{d as z,r as B,a4 as D,q as A,J as l,Q as i,c as a,x as t,ak as E,a7 as d,p as u,B as p,K as j,N as m,F as f,E as N}from"./chunks/framework.BOCSoIBq.js";const Y={tabindex:"0"},M={style:{"text-align":"left"}},J=JSON.parse('{"title":"标签 Tag","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/tag.md","filePath":"guide/components/tag.md","lastUpdated":1735203463000}'),U={name:"guide/components/tag.md"},L=z({...U,setup(V){const e=B(["天空","大海","湖泊"]);D(()=>{console.log("strTags",e.value)});const y=B([{label:"天空",color:"processing"},{label:"大海",closable:!1,color:"error"},{label:"湖泊",color:"pink"}]);D(()=>{console.log("objTags",y.value)});const F=r=>{console.log("e",r)},g=(r,s)=>{console.log("item",r),console.log("index",s)};return(r,s)=>{const q=d("GlobalElement"),n=d("Tag",!0),k=d("Space"),o=d("Divider");return u(),A("div",null,[s[76]||(s[76]=l("h1",{id:"标签-tag",tabindex:"-1"},[i("标签 Tag "),l("a",{class:"header-anchor",href:"#标签-tag","aria-label":'Permalink to "标签 Tag"'},"​")],-1)),a(q),s[77]||(s[77]=l("p",null,[l("em",null,"进行标记和分类的小标签")],-1)),s[78]||(s[78]=l("h2",{id:"何时使用",tabindex:"-1"},[i("何时使用 "),l("a",{class:"header-anchor",href:"#何时使用","aria-label":'Permalink to "何时使用"'},"​")],-1)),s[79]||(s[79]=l("ul",null,[l("li",null,"用于标记事物的属性和维度"),l("li",null,"进行分类")],-1)),s[80]||(s[80]=l("h2",{id:"基本使用",tabindex:"-1"},[i("基本使用 "),l("a",{class:"header-anchor",href:"#基本使用","aria-label":'Permalink to "基本使用"'},"​")],-1)),a(k,{gap:"small"},{default:t(()=>[a(n,null,{default:t(()=>s[4]||(s[4]=[i("Tag 1")])),_:1}),a(n,null,{default:t(()=>s[5]||(s[5]=[l("a",{href:"https://blog.csdn.net/Dandrose"},"Link",-1)])),_:1}),a(n,{closable:"",onClose:F},{default:t(()=>s[6]||(s[6]=[i("Tag 2")])),_:1})]),_:1}),s[81]||(s[81]=E(`
Show Code
vue
<script setup lang="ts">
 const onClose = (e: MouseEvent) => {
   console.log(e)
 }
@@ -33,7 +33,7 @@ import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa
     <Tag color="#87d068">#87d068</Tag>
     <Tag color="#108ee9">#108ee9</Tag>
   </Space>
-</template>
预设状态的标签 ​
`,2)),a(F,{orientation:"left"},{default:t(()=>s[24]||(s[24]=[i("Without icon")])),_:1}),a(k,{gap:"small"},{default:t(()=>[a(n,{color:"success"},{default:t(()=>s[25]||(s[25]=[i("success")])),_:1}),a(n,{color:"processing"},{default:t(()=>s[26]||(s[26]=[i("processing")])),_:1}),a(n,{color:"error"},{default:t(()=>s[27]||(s[27]=[i("error")])),_:1}),a(n,{color:"warning"},{default:t(()=>s[28]||(s[28]=[i("warning")])),_:1}),a(n,{color:"default"},{default:t(()=>s[29]||(s[29]=[i("default")])),_:1})]),_:1}),a(F,{orientation:"left"},{default:t(()=>s[30]||(s[30]=[i("With icon")])),_:1}),a(k,{gap:"small"},{default:t(()=>[a(n,{color:"success"},{icon:t(()=>[a(p(c))]),default:t(()=>[s[31]||(s[31]=i(" success "))]),_:1}),a(n,{color:"processing"},{icon:t(()=>[a(p(b),{spin:""})]),default:t(()=>[s[32]||(s[32]=i(" processing "))]),_:1}),a(n,{color:"error"},{icon:t(()=>[a(p(T))]),default:t(()=>[s[33]||(s[33]=i(" error "))]),_:1}),a(n,{color:"warning"},{icon:t(()=>[a(p(v))]),default:t(()=>[s[34]||(s[34]=i(" warning "))]),_:1}),a(n,{color:"default"},{icon:t(()=>[a(p(x))]),default:t(()=>[s[35]||(s[35]=i(" waiting "))]),_:1}),a(n,{color:"default"},{icon:t(()=>[a(p(w))]),default:t(()=>[s[36]||(s[36]=i(" stop "))]),_:1}),a(n,{color:"default",icon:"😉"},{default:t(()=>s[37]||(s[37]=[i(" blink ")])),_:1})]),_:1}),s[85]||(s[85]=E(`
Show Code
vue
<script setup lang="ts">
+</template>
预设状态的标签 ​
`,2)),a(o,{orientation:"left"},{default:t(()=>s[24]||(s[24]=[i("Without icon")])),_:1}),a(k,{gap:"small"},{default:t(()=>[a(n,{color:"success"},{default:t(()=>s[25]||(s[25]=[i("success")])),_:1}),a(n,{color:"processing"},{default:t(()=>s[26]||(s[26]=[i("processing")])),_:1}),a(n,{color:"error"},{default:t(()=>s[27]||(s[27]=[i("error")])),_:1}),a(n,{color:"warning"},{default:t(()=>s[28]||(s[28]=[i("warning")])),_:1}),a(n,{color:"default"},{default:t(()=>s[29]||(s[29]=[i("default")])),_:1})]),_:1}),a(o,{orientation:"left"},{default:t(()=>s[30]||(s[30]=[i("With icon")])),_:1}),a(k,{gap:"small"},{default:t(()=>[a(n,{color:"success"},{icon:t(()=>[a(p(c))]),default:t(()=>[s[31]||(s[31]=i(" success "))]),_:1}),a(n,{color:"processing"},{icon:t(()=>[a(p(b),{spin:""})]),default:t(()=>[s[32]||(s[32]=i(" processing "))]),_:1}),a(n,{color:"error"},{icon:t(()=>[a(p(T))]),default:t(()=>[s[33]||(s[33]=i(" error "))]),_:1}),a(n,{color:"warning"},{icon:t(()=>[a(p(v))]),default:t(()=>[s[34]||(s[34]=i(" warning "))]),_:1}),a(n,{color:"default"},{icon:t(()=>[a(p(x))]),default:t(()=>[s[35]||(s[35]=i(" waiting "))]),_:1}),a(n,{color:"default"},{icon:t(()=>[a(p(w))]),default:t(()=>[s[36]||(s[36]=i(" stop "))]),_:1}),a(n,{color:"default",icon:"😉"},{default:t(()=>s[37]||(s[37]=[i(" blink ")])),_:1})]),_:1}),s[85]||(s[85]=E(`
Show Code
vue
<script setup lang="ts">
 import {
   CheckCircleOutlined,
   SyncOutlined,
@@ -132,7 +132,7 @@ import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa
 </template>
动态添加和删除 ​
使用字符串格式数组

`,4)),a(k,{gap:"small"},{default:t(()=>[a(n,{dynamic:"",value:e.value,"onUpdate:value":s[0]||(s[0]=h=>e.value=h),onDynamicClose:g},null,8,["value"])]),_:1}),s[87]||(s[87]=E(`
Show Code
vue
<script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import type { TagItem } from 'vue-amazing-ui'
-const strTags = ref(['天空', '大海', '湖泊'])
+const strTags = ref<string[]>(['天空', '大海', '湖泊'])
 watchEffect(() => {
   console.log('strTags', strTags.value)
 })
@@ -149,7 +149,7 @@ import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa
 import { ref, watchEffect } from 'vue'
 import { CheckCircleOutlined } from '@ant-design/icons-vue'
 import type { TagItem } from 'vue-amazing-ui'
-const objTags = ref([
+const objTags = ref<TagItem[]>([
   {
     label: '天空',
     color: 'processing'
@@ -187,10 +187,10 @@ import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa
       </template>
     </Tag>
   </Space>
-</template>
三种尺寸 ​
`,2)),a(k,{gap:"small"},{default:t(()=>[a(n,{closable:"",size:"small",onClose:o},{default:t(()=>s[42]||(s[42]=[i(" 爱在西元前 ")])),_:1}),a(n,{color:"warning",closable:"",onClose:o},{default:t(()=>s[43]||(s[43]=[i(" 超人不会飞 ")])),_:1}),a(n,{color:"blue",size:"large",dynamic:"",value:e.value,"onUpdate:value":s[2]||(s[2]=h=>e.value=h),closable:"",onClose:g},null,8,["value"])]),_:1}),s[89]||(s[89]=E(`
Show Code
vue
<script setup lang="ts">
+</template>
三种尺寸 ​
`,2)),a(k,{gap:"small"},{default:t(()=>[a(n,{closable:"",size:"small",onClose:F},{default:t(()=>s[42]||(s[42]=[i(" 爱在西元前 ")])),_:1}),a(n,{color:"warning",closable:"",onClose:F},{default:t(()=>s[43]||(s[43]=[i(" 超人不会飞 ")])),_:1}),a(n,{color:"blue",size:"large",dynamic:"",value:e.value,"onUpdate:value":s[2]||(s[2]=h=>e.value=h),closable:"",onClose:g},null,8,["value"])]),_:1}),s[89]||(s[89]=E(`
Show Code
vue
<script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import type { TagItem } from 'vue-amazing-ui'
-const strTags = ref(['天空', '大海', '湖泊'])
+const strTags = ref<string[]>(['天空', '大海', '湖泊'])
 watchEffect(() => {
   console.log('strTags', strTags.value)
 })
@@ -221,7 +221,7 @@ import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa
 </template>
自定义动态标签排列 ​
`,2)),a(n,{closable:"",dynamic:"",color:"blue",size:"large","space-props":{vertical:!0,gap:12},value:e.value,"onUpdate:value":s[3]||(s[3]=h=>e.value=h),onClose:g},null,8,["value"]),s[90]||(s[90]=E(`
Show Code
vue
<script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import type { TagItem } from 'vue-amazing-ui'
-const strTags = ref(['天空', '大海', '湖泊'])
+const strTags = ref<string[]>(['天空', '大海', '湖泊'])
 watchEffect(() => {
   console.log('strTags', strTags.value)
 })
@@ -240,7 +240,7 @@ import{a4 as c,a5 as b,Y as T,a6 as v,C as x,a7 as w,a1 as S,a8 as O,a9 as P,aa
     v-model:value="strTags"
     @close="onDynamicClose"
   />
-</template>
无边框 ​
`,2)),a(k,{gap:"small"},{default:t(()=>[a(n,{bordered:!1},{default:t(()=>s[44]||(s[44]=[i("Tag 1")])),_:1}),a(n,{bordered:!1},{default:t(()=>s[45]||(s[45]=[i("Tag 2")])),_:1}),a(n,{bordered:!1,closable:""},{default:t(()=>s[46]||(s[46]=[i("Tag 3")])),_:1}),a(n,{bordered:!1,closable:""},{default:t(()=>s[47]||(s[47]=[i("Tag 4")])),_:1})]),_:1}),a(F),a(k,{gap:"small"},{default:t(()=>[a(n,{bordered:!1,color:"processing"},{default:t(()=>s[48]||(s[48]=[i("processing")])),_:1}),a(n,{bordered:!1,color:"success"},{default:t(()=>s[49]||(s[49]=[i("success")])),_:1}),a(n,{bordered:!1,color:"error"},{default:t(()=>s[50]||(s[50]=[i("error")])),_:1}),a(n,{bordered:!1,color:"warning"},{default:t(()=>s[51]||(s[51]=[i("warning")])),_:1}),a(n,{bordered:!1,color:"magenta"},{default:t(()=>s[52]||(s[52]=[i("magenta")])),_:1}),a(n,{bordered:!1,color:"red"},{default:t(()=>s[53]||(s[53]=[i("red")])),_:1}),a(n,{bordered:!1,color:"volcano"},{default:t(()=>s[54]||(s[54]=[i("volcano")])),_:1}),a(n,{bordered:!1,color:"orange"},{default:t(()=>s[55]||(s[55]=[i("orange")])),_:1}),a(n,{bordered:!1,color:"gold"},{default:t(()=>s[56]||(s[56]=[i("gold")])),_:1}),a(n,{bordered:!1,color:"lime"},{default:t(()=>s[57]||(s[57]=[i("lime")])),_:1}),a(n,{bordered:!1,color:"green"},{default:t(()=>s[58]||(s[58]=[i("green")])),_:1}),a(n,{bordered:!1,color:"cyan"},{default:t(()=>s[59]||(s[59]=[i("cyan")])),_:1}),a(n,{bordered:!1,color:"blue"},{default:t(()=>s[60]||(s[60]=[i("blue")])),_:1}),a(n,{bordered:!1,color:"geekblue"},{default:t(()=>s[61]||(s[61]=[i("geekblue")])),_:1}),a(n,{bordered:!1,color:"purple"},{default:t(()=>s[62]||(s[62]=[i("purple")])),_:1})]),_:1}),s[91]||(s[91]=E(`
Show Code
vue
<template>
+</template>
无边框 ​
`,2)),a(k,{gap:"small"},{default:t(()=>[a(n,{bordered:!1},{default:t(()=>s[44]||(s[44]=[i("Tag 1")])),_:1}),a(n,{bordered:!1},{default:t(()=>s[45]||(s[45]=[i("Tag 2")])),_:1}),a(n,{bordered:!1,closable:""},{default:t(()=>s[46]||(s[46]=[i("Tag 3")])),_:1}),a(n,{bordered:!1,closable:""},{default:t(()=>s[47]||(s[47]=[i("Tag 4")])),_:1})]),_:1}),a(o),a(k,{gap:"small"},{default:t(()=>[a(n,{bordered:!1,color:"processing"},{default:t(()=>s[48]||(s[48]=[i("processing")])),_:1}),a(n,{bordered:!1,color:"success"},{default:t(()=>s[49]||(s[49]=[i("success")])),_:1}),a(n,{bordered:!1,color:"error"},{default:t(()=>s[50]||(s[50]=[i("error")])),_:1}),a(n,{bordered:!1,color:"warning"},{default:t(()=>s[51]||(s[51]=[i("warning")])),_:1}),a(n,{bordered:!1,color:"magenta"},{default:t(()=>s[52]||(s[52]=[i("magenta")])),_:1}),a(n,{bordered:!1,color:"red"},{default:t(()=>s[53]||(s[53]=[i("red")])),_:1}),a(n,{bordered:!1,color:"volcano"},{default:t(()=>s[54]||(s[54]=[i("volcano")])),_:1}),a(n,{bordered:!1,color:"orange"},{default:t(()=>s[55]||(s[55]=[i("orange")])),_:1}),a(n,{bordered:!1,color:"gold"},{default:t(()=>s[56]||(s[56]=[i("gold")])),_:1}),a(n,{bordered:!1,color:"lime"},{default:t(()=>s[57]||(s[57]=[i("lime")])),_:1}),a(n,{bordered:!1,color:"green"},{default:t(()=>s[58]||(s[58]=[i("green")])),_:1}),a(n,{bordered:!1,color:"cyan"},{default:t(()=>s[59]||(s[59]=[i("cyan")])),_:1}),a(n,{bordered:!1,color:"blue"},{default:t(()=>s[60]||(s[60]=[i("blue")])),_:1}),a(n,{bordered:!1,color:"geekblue"},{default:t(()=>s[61]||(s[61]=[i("geekblue")])),_:1}),a(n,{bordered:!1,color:"purple"},{default:t(()=>s[62]||(s[62]=[i("purple")])),_:1})]),_:1}),s[91]||(s[91]=E(`
Show Code
vue
<template>
   <Space gap="small">
     <Tag :bordered="false">Tag 1</Tag>
     <Tag :bordered="false">Tag 2</Tag>
diff --git a/assets/guide_components_video.md.BiP_TzuL.js b/assets/guide_components_video.md.C6bf8V1Q.js
similarity index 75%
rename from assets/guide_components_video.md.BiP_TzuL.js
rename to assets/guide_components_video.md.C6bf8V1Q.js
index 70c197b3a..5892f158f 100644
--- a/assets/guide_components_video.md.BiP_TzuL.js
+++ b/assets/guide_components_video.md.C6bf8V1Q.js
@@ -1,4 +1,4 @@
-import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}from"./chunks/framework.BOCSoIBq.js";const b=JSON.parse('{"title":"播放器 Video","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/video.md","filePath":"guide/components/video.md","lastUpdated":1735180868000}'),v={name:"guide/components/video.md"},x=B({...v,setup(D){const t=d("https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.mp4"),h=d("https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.jpg"),E=d();function g(){console.log("play")}function y(){console.log("pause")}const o=()=>{E.value.play()},F=()=>{E.value.pause()};return(A,s)=>{const c=e("GlobalElement"),l=e("Video",!0),r=e("Button"),u=e("Space"),C=e("Flex");return f(),m("div",null,[s[2]||(s[2]=a("h1",{id:"播放器-video",tabindex:"-1"},[k("播放器 Video "),a("a",{class:"header-anchor",href:"#播放器-video","aria-label":'Permalink to "播放器 Video"'},"​")],-1)),i(c),s[3]||(s[3]=a("p",null,[a("em",null,"简易封装的播放器")],-1)),s[4]||(s[4]=a("h2",{id:"何时使用",tabindex:"-1"},[k("何时使用 "),a("a",{class:"header-anchor",href:"#何时使用","aria-label":'Permalink to "何时使用"'},"​")],-1)),s[5]||(s[5]=a("ul",null,[a("li",null,"当需要在网页内播放视频时")],-1)),s[6]||(s[6]=a("h2",{id:"基本使用",tabindex:"-1"},[k("基本使用 "),a("a",{class:"header-anchor",href:"#基本使用","aria-label":'Permalink to "基本使用"'},"​")],-1)),i(l,{src:t.value,poster:h.value,width:"100%",height:"56.25%",onPlay:g,onPause:y},null,8,["src","poster"]),s[7]||(s[7]=n(`
Show Code
vue
<script setup lang="ts">
+import{d as B,r,q as m,J as a,Q as e,c as i,ak as n,x as p,a7 as k,p as f}from"./chunks/framework.BOCSoIBq.js";const b=JSON.parse('{"title":"播放器 Video","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/video.md","filePath":"guide/components/video.md","lastUpdated":1735180868000}'),v={name:"guide/components/video.md"},x=B({...v,setup(D){const t=r("https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.mp4"),h=r("https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.jpg"),d=r();function g(){console.log("play")}function y(){console.log("pause")}const o=()=>{d.value.play()},c=()=>{d.value.pause()};return(A,s)=>{const F=k("GlobalElement"),l=k("Video",!0),E=k("Button"),u=k("Space"),C=k("Flex");return f(),m("div",null,[s[2]||(s[2]=a("h1",{id:"播放器-video",tabindex:"-1"},[e("播放器 Video "),a("a",{class:"header-anchor",href:"#播放器-video","aria-label":'Permalink to "播放器 Video"'},"​")],-1)),i(F),s[3]||(s[3]=a("p",null,[a("em",null,"简易封装的播放器")],-1)),s[4]||(s[4]=a("h2",{id:"何时使用",tabindex:"-1"},[e("何时使用 "),a("a",{class:"header-anchor",href:"#何时使用","aria-label":'Permalink to "何时使用"'},"​")],-1)),s[5]||(s[5]=a("ul",null,[a("li",null,"当需要在网页内播放视频时")],-1)),s[6]||(s[6]=a("h2",{id:"基本使用",tabindex:"-1"},[e("基本使用 "),a("a",{class:"header-anchor",href:"#基本使用","aria-label":'Permalink to "基本使用"'},"​")],-1)),i(l,{src:t.value,poster:h.value,width:"100%",height:"56.25%",onPlay:g,onPause:y},null,8,["src","poster"]),s[7]||(s[7]=n(`
Show Code
vue
<script setup lang="ts">
 import { ref } from 'vue'
 const src = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.mp4')
 const poster = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.jpg')
@@ -11,12 +11,12 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
+    :src="src"
+    :poster="poster"
     width="100%"
     height="56.25%"
-    @play="onPlay"
-    @pause="onPause"
+    @play="onPlay"
+    @pause="onPause"
   />
 </template>
自定义视频和图标尺寸 ​
`,2)),i(l,{src:t.value,poster:h.value,width:400,height:225,"icon-size":60},null,8,["src","poster"]),s[8]||(s[8]=n(`
Show Code
vue
<script setup lang="ts">
 import { ref } from 'vue'
@@ -25,11 +25,11 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
-    :width="400"
-    :height="225"
-    :icon-size="60"
+    :src="src"
+    :poster="poster"
+    :width="400"
+    :height="225"
+    :icon-size="60"
   />
 </template>
自动截取视频指定帧作为封面图 ​
在未设置封面时，自动截取视频第 second 秒指定帧作为封面图

`,4)),i(l,{src:t.value,second:3,width:"100%",height:"56.25%"},null,8,["src"]),s[9]||(s[9]=n(`
Show Code
vue
<script setup lang="ts">
 import { ref } from 'vue'
@@ -37,8 +37,8 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 </script>
 <template>
   <Video
-    :src="src"
-    :second="3"
+    :src="src"
+    :second="3"
     width="100%"
     height="56.25%"
   />
@@ -48,7 +48,7 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 const poster = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.jpg')
 </script>
 <template>
-  <Video :src="src" :poster="poster" fit="cover" />
+  <Video :src="src" :poster="poster" fit="cover" />
 </template>
自动循环播放 ​
据一般规则，媒体内容将在满足以下至少一个的条件下自动播放：
  1. 音频被静音或其音量设置为 0
  2. 用户和网页已有交互行为（包括点击、触摸、按下某个键等等）
  3. 网站已被列入白名单；如果浏览器确定用户经常与媒体互动，这可能会自动发生，也可能通过首选项或其他用户界面功能手动发生
  4. 自动播放策略应用到 <iframe> 或者其文档上，从而获得了自动播放的权限
否则，播放可能会被阻止。导致播放被阻塞的确切情况以及将网站列入白名单的具体方法因浏览器而异，但最好是遵循以上的原则。
autoplay：由于目前在最新版的 Chrome 浏览器（以及所有以 Chromium 为内核的浏览器）中，已不再允许自动播放音频和视频。就算你为 video 或 audio 标签设置了 autoplay 属性也一样不能自动播放！
解决方法：设置视频 autoplay 时，视频必须设置为静音 muted: true 即可实现自动播放，然后用户可以使用控制栏开启声音，类似某宝商品自动播放的宣传视频逻辑

`,8)),i(l,{src:t.value,poster:h.value,autoplay:"",loop:"",width:"100%",height:"56.25%"},null,8,["src","poster"]),s[11]||(s[11]=n(`
Show Code
vue
<script setup lang="ts">
 import { ref } from 'vue'
 const src = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.mp4')
@@ -56,8 +56,8 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
+    :src="src"
+    :poster="poster"
     autoplay
     loop
     width="100%"
@@ -70,9 +70,9 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
-    :controls="false"
+    :src="src"
+    :poster="poster"
+    :controls="false"
     width="100%"
     height="56.25%"
   />
@@ -83,13 +83,13 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
-    :play-icon="false"
+    :src="src"
+    :poster="poster"
+    :play-icon="false"
     width="100%"
     height="56.25%"
   />
-</template>
使用 Methods ​
`,2)),i(C,{vertical:""},{default:p(()=>[i(u,null,{default:p(()=>[i(r,{type:"primary",onClick:o},{default:p(()=>s[0]||(s[0]=[k("播放")])),_:1}),i(r,{onClick:F},{default:p(()=>s[1]||(s[1]=[k("暂停")])),_:1})]),_:1}),i(l,{ref_key:"video",ref:E,src:t.value,poster:h.value},null,8,["src","poster"])]),_:1}),s[14]||(s[14]=n(`
Show Code
vue
<script setup lang="ts">
+</template>
使用 Methods ​
`,2)),i(C,{vertical:""},{default:p(()=>[i(u,null,{default:p(()=>[i(E,{type:"primary",onClick:o},{default:p(()=>s[0]||(s[0]=[e("播放")])),_:1}),i(E,{onClick:c},{default:p(()=>s[1]||(s[1]=[e("暂停")])),_:1})]),_:1}),i(l,{ref_key:"video",ref:d,src:t.value,poster:h.value},null,8,["src","poster"])]),_:1}),s[14]||(s[14]=n(`
Show Code
vue
<script setup lang="ts">
 import { ref } from 'vue'
 const src = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.mp4')
 const poster = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.jpg')
@@ -104,9 +104,9 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 <template>
   <Flex vertical>
     <Space>
-      <Button type="primary" @click="play">播放</Button>
-      <Button @click="pause">暂停</Button>
+      <Button type="primary" @click="play">播放</Button>
+      <Button @click="pause">暂停</Button>
     </Space>
-    <Video ref="video" :src="src" :poster="poster" />
+    <Video ref="video" :src="src" :poster="poster" />
   </Flex>
 </template>
APIs ​
Video ​
参数说明类型默认值
width视频播放器宽度，单位 pxnumber800
height视频播放器高度，单位 pxnumber450
src视频文件地址，支持网络地址 https 和相对地址stringundefined
poster视频封面地址，支持网络地址 https 和相对地址stringundefined
second在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面，单位 snumber0.5
fit视频封面和内容的缩放规则，参考 object-fit'none' | 'fill' | 'contain' | 'cover''contain'
autoplay视频就绪后是否马上播放，优先级高于 preload，参考 MDN 自动播放指南booleanfalse
controls是否向用户显示控件，比如进度条，全屏等booleantrue
loop视频播放完成后，是否循环播放booleanfalse
muted是否静音booleanfalse
preload是否在页面加载后载入视频，如果设置了 autoplay 属性，则 preload 将被忽略'auto' | 'metadata' | 'none''metadata'
playIcon播放暂停时是否显示播放器中间的暂停图标booleantrue
iconSize暂停图标尺寸，单位 pxnumber80
preload 可选属性：
  • auto: 一旦页面加载，则开始加载视频;
  • metadata: 当页面加载后仅加载视频的元数据（例如长度），建议使用 metadata，以便视频自动获取第一帧作为封面 poster
  • none: 页面加载后不应加载视频
fit 可选属性：
  • none: 保存原有内容，不进行缩放;
  • fill: 不保持原有比例，内容拉伸填充整个内容容器;
  • contain: 保存原有比例，内容以包含方式缩放;
  • cover: 保存原有比例，内容以覆盖方式缩放
Events ​
名称说明类型
play开始播放的回调() => void
pause暂停播放的回调() => void
`,10))])}}});export{b as __pageData,x as default};
diff --git a/assets/guide_components_video.md.BiP_TzuL.lean.js b/assets/guide_components_video.md.C6bf8V1Q.lean.js
similarity index 75%
rename from assets/guide_components_video.md.BiP_TzuL.lean.js
rename to assets/guide_components_video.md.C6bf8V1Q.lean.js
index 70c197b3a..5892f158f 100644
--- a/assets/guide_components_video.md.BiP_TzuL.lean.js
+++ b/assets/guide_components_video.md.C6bf8V1Q.lean.js
@@ -1,4 +1,4 @@
-import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}from"./chunks/framework.BOCSoIBq.js";const b=JSON.parse('{"title":"播放器 Video","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/video.md","filePath":"guide/components/video.md","lastUpdated":1735180868000}'),v={name:"guide/components/video.md"},x=B({...v,setup(D){const t=d("https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.mp4"),h=d("https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.jpg"),E=d();function g(){console.log("play")}function y(){console.log("pause")}const o=()=>{E.value.play()},F=()=>{E.value.pause()};return(A,s)=>{const c=e("GlobalElement"),l=e("Video",!0),r=e("Button"),u=e("Space"),C=e("Flex");return f(),m("div",null,[s[2]||(s[2]=a("h1",{id:"播放器-video",tabindex:"-1"},[k("播放器 Video "),a("a",{class:"header-anchor",href:"#播放器-video","aria-label":'Permalink to "播放器 Video"'},"​")],-1)),i(c),s[3]||(s[3]=a("p",null,[a("em",null,"简易封装的播放器")],-1)),s[4]||(s[4]=a("h2",{id:"何时使用",tabindex:"-1"},[k("何时使用 "),a("a",{class:"header-anchor",href:"#何时使用","aria-label":'Permalink to "何时使用"'},"​")],-1)),s[5]||(s[5]=a("ul",null,[a("li",null,"当需要在网页内播放视频时")],-1)),s[6]||(s[6]=a("h2",{id:"基本使用",tabindex:"-1"},[k("基本使用 "),a("a",{class:"header-anchor",href:"#基本使用","aria-label":'Permalink to "基本使用"'},"​")],-1)),i(l,{src:t.value,poster:h.value,width:"100%",height:"56.25%",onPlay:g,onPause:y},null,8,["src","poster"]),s[7]||(s[7]=n(`
Show Code
vue
<script setup lang="ts">
+import{d as B,r,q as m,J as a,Q as e,c as i,ak as n,x as p,a7 as k,p as f}from"./chunks/framework.BOCSoIBq.js";const b=JSON.parse('{"title":"播放器 Video","description":"","frontmatter":{},"headers":[],"relativePath":"guide/components/video.md","filePath":"guide/components/video.md","lastUpdated":1735180868000}'),v={name:"guide/components/video.md"},x=B({...v,setup(D){const t=r("https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.mp4"),h=r("https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.jpg"),d=r();function g(){console.log("play")}function y(){console.log("pause")}const o=()=>{d.value.play()},c=()=>{d.value.pause()};return(A,s)=>{const F=k("GlobalElement"),l=k("Video",!0),E=k("Button"),u=k("Space"),C=k("Flex");return f(),m("div",null,[s[2]||(s[2]=a("h1",{id:"播放器-video",tabindex:"-1"},[e("播放器 Video "),a("a",{class:"header-anchor",href:"#播放器-video","aria-label":'Permalink to "播放器 Video"'},"​")],-1)),i(F),s[3]||(s[3]=a("p",null,[a("em",null,"简易封装的播放器")],-1)),s[4]||(s[4]=a("h2",{id:"何时使用",tabindex:"-1"},[e("何时使用 "),a("a",{class:"header-anchor",href:"#何时使用","aria-label":'Permalink to "何时使用"'},"​")],-1)),s[5]||(s[5]=a("ul",null,[a("li",null,"当需要在网页内播放视频时")],-1)),s[6]||(s[6]=a("h2",{id:"基本使用",tabindex:"-1"},[e("基本使用 "),a("a",{class:"header-anchor",href:"#基本使用","aria-label":'Permalink to "基本使用"'},"​")],-1)),i(l,{src:t.value,poster:h.value,width:"100%",height:"56.25%",onPlay:g,onPause:y},null,8,["src","poster"]),s[7]||(s[7]=n(`
Show Code
vue
<script setup lang="ts">
 import { ref } from 'vue'
 const src = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.mp4')
 const poster = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.jpg')
@@ -11,12 +11,12 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
+    :src="src"
+    :poster="poster"
     width="100%"
     height="56.25%"
-    @play="onPlay"
-    @pause="onPause"
+    @play="onPlay"
+    @pause="onPause"
   />
 </template>
自定义视频和图标尺寸 ​
`,2)),i(l,{src:t.value,poster:h.value,width:400,height:225,"icon-size":60},null,8,["src","poster"]),s[8]||(s[8]=n(`
Show Code
vue
<script setup lang="ts">
 import { ref } from 'vue'
@@ -25,11 +25,11 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
-    :width="400"
-    :height="225"
-    :icon-size="60"
+    :src="src"
+    :poster="poster"
+    :width="400"
+    :height="225"
+    :icon-size="60"
   />
 </template>
自动截取视频指定帧作为封面图 ​
在未设置封面时，自动截取视频第 second 秒指定帧作为封面图

`,4)),i(l,{src:t.value,second:3,width:"100%",height:"56.25%"},null,8,["src"]),s[9]||(s[9]=n(`
Show Code
vue
<script setup lang="ts">
 import { ref } from 'vue'
@@ -37,8 +37,8 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 </script>
 <template>
   <Video
-    :src="src"
-    :second="3"
+    :src="src"
+    :second="3"
     width="100%"
     height="56.25%"
   />
@@ -48,7 +48,7 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 const poster = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.jpg')
 </script>
 <template>
-  <Video :src="src" :poster="poster" fit="cover" />
+  <Video :src="src" :poster="poster" fit="cover" />
 </template>
自动循环播放 ​
据一般规则，媒体内容将在满足以下至少一个的条件下自动播放：
  1. 音频被静音或其音量设置为 0
  2. 用户和网页已有交互行为（包括点击、触摸、按下某个键等等）
  3. 网站已被列入白名单；如果浏览器确定用户经常与媒体互动，这可能会自动发生，也可能通过首选项或其他用户界面功能手动发生
  4. 自动播放策略应用到 <iframe> 或者其文档上，从而获得了自动播放的权限
否则，播放可能会被阻止。导致播放被阻塞的确切情况以及将网站列入白名单的具体方法因浏览器而异，但最好是遵循以上的原则。
autoplay：由于目前在最新版的 Chrome 浏览器（以及所有以 Chromium 为内核的浏览器）中，已不再允许自动播放音频和视频。就算你为 video 或 audio 标签设置了 autoplay 属性也一样不能自动播放！
解决方法：设置视频 autoplay 时，视频必须设置为静音 muted: true 即可实现自动播放，然后用户可以使用控制栏开启声音，类似某宝商品自动播放的宣传视频逻辑

`,8)),i(l,{src:t.value,poster:h.value,autoplay:"",loop:"",width:"100%",height:"56.25%"},null,8,["src","poster"]),s[11]||(s[11]=n(`
Show Code
vue
<script setup lang="ts">
 import { ref } from 'vue'
 const src = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.mp4')
@@ -56,8 +56,8 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
+    :src="src"
+    :poster="poster"
     autoplay
     loop
     width="100%"
@@ -70,9 +70,9 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
-    :controls="false"
+    :src="src"
+    :poster="poster"
+    :controls="false"
     width="100%"
     height="56.25%"
   />
@@ -83,13 +83,13 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
-    :play-icon="false"
+    :src="src"
+    :poster="poster"
+    :play-icon="false"
     width="100%"
     height="56.25%"
   />
-</template>
使用 Methods ​
`,2)),i(C,{vertical:""},{default:p(()=>[i(u,null,{default:p(()=>[i(r,{type:"primary",onClick:o},{default:p(()=>s[0]||(s[0]=[k("播放")])),_:1}),i(r,{onClick:F},{default:p(()=>s[1]||(s[1]=[k("暂停")])),_:1})]),_:1}),i(l,{ref_key:"video",ref:E,src:t.value,poster:h.value},null,8,["src","poster"])]),_:1}),s[14]||(s[14]=n(`
Show Code
vue
<script setup lang="ts">
+</template>
使用 Methods ​
`,2)),i(C,{vertical:""},{default:p(()=>[i(u,null,{default:p(()=>[i(E,{type:"primary",onClick:o},{default:p(()=>s[0]||(s[0]=[e("播放")])),_:1}),i(E,{onClick:c},{default:p(()=>s[1]||(s[1]=[e("暂停")])),_:1})]),_:1}),i(l,{ref_key:"video",ref:d,src:t.value,poster:h.value},null,8,["src","poster"])]),_:1}),s[14]||(s[14]=n(`
Show Code
vue
<script setup lang="ts">
 import { ref } from 'vue'
 const src = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.mp4')
 const poster = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.jpg')
@@ -104,9 +104,9 @@ import{d as B,r as d,q as m,J as a,Q as k,c as i,ak as n,x as p,a7 as e,p as f}f
 <template>
   <Flex vertical>
     <Space>
-      <Button type="primary" @click="play">播放</Button>
-      <Button @click="pause">暂停</Button>
+      <Button type="primary" @click="play">播放</Button>
+      <Button @click="pause">暂停</Button>
     </Space>
-    <Video ref="video" :src="src" :poster="poster" />
+    <Video ref="video" :src="src" :poster="poster" />
   </Flex>
 </template>
APIs ​
Video ​
参数说明类型默认值
width视频播放器宽度，单位 pxnumber800
height视频播放器高度，单位 pxnumber450
src视频文件地址，支持网络地址 https 和相对地址stringundefined
poster视频封面地址，支持网络地址 https 和相对地址stringundefined
second在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面，单位 snumber0.5
fit视频封面和内容的缩放规则，参考 object-fit'none' | 'fill' | 'contain' | 'cover''contain'
autoplay视频就绪后是否马上播放，优先级高于 preload，参考 MDN 自动播放指南booleanfalse
controls是否向用户显示控件，比如进度条，全屏等booleantrue
loop视频播放完成后，是否循环播放booleanfalse
muted是否静音booleanfalse
preload是否在页面加载后载入视频，如果设置了 autoplay 属性，则 preload 将被忽略'auto' | 'metadata' | 'none''metadata'
playIcon播放暂停时是否显示播放器中间的暂停图标booleantrue
iconSize暂停图标尺寸，单位 pxnumber80
preload 可选属性：
  • auto: 一旦页面加载，则开始加载视频;
  • metadata: 当页面加载后仅加载视频的元数据（例如长度），建议使用 metadata，以便视频自动获取第一帧作为封面 poster
  • none: 页面加载后不应加载视频
fit 可选属性：
  • none: 保存原有内容，不进行缩放;
  • fill: 不保持原有比例，内容拉伸填充整个内容容器;
  • contain: 保存原有比例，内容以包含方式缩放;
  • cover: 保存原有比例，内容以覆盖方式缩放
Events ​
名称说明类型
play开始播放的回调() => void
pause暂停播放的回调() => void
`,10))])}}});export{b as __pageData,x as default};
diff --git a/assets/guide_ondemand.md.DdzI069a.js b/assets/guide_ondemand.md.BkO99xEY.js
similarity index 96%
rename from assets/guide_ondemand.md.DdzI069a.js
rename to assets/guide_ondemand.md.BkO99xEY.js
index 3757f257b..a61b4656b 100644
--- a/assets/guide_ondemand.md.DdzI069a.js
+++ b/assets/guide_ondemand.md.BkO99xEY.js
@@ -6,7 +6,7 @@ import{_ as t,q as p,J as i,Q as a,c as l,ak as h,a7 as e,p as k}from"./chunks/f
 <template>
   <Button>button</Button>
   <Tag>tag</Tag>
-</template>
自动引入样式（推荐） ​
使用 vite-plugin-style-import 插件来按需自动引入组件样式，插件会自动解析模板中的使用到的组件，并导入其样式
sh
$ pnpm add vite-plugin-style-import -D
sh
$ npm install vite-plugin-style-import -D
sh
$ yarn add vite-plugin-style-import -D
sh
$ bun add vite-plugin-style-import -D
ts
// vite.config.ts
+</template>
自动引入样式（推荐） ​
使用 vite-plugin-style-import 插件来按需自动引入组件样式，插件会自动解析模板中的使用到的组件，并导入其样式
sh
$ pnpm add vite-plugin-style-import -D
sh
$ npm install vite-plugin-style-import -D
sh
$ yarn add vite-plugin-style-import -D
sh
$ bun add vite-plugin-style-import -D
ts
// vite.config.ts
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { createStyleImportPlugin } from 'vite-plugin-style-import'
@@ -36,7 +36,7 @@ import{_ as t,q as p,J as i,Q as a,c as l,ak as h,a7 as e,p as k}from"./chunks/f
 <template>
   <Button>button</Button>
   <Tag>tag</Tag>
-</template>
自动按需引入（强烈推荐） ​
使用 unplugin-vue-components 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件和样式
sh
$ pnpm add unplugin-vue-components -D
sh
$ npm install unplugin-vue-components -D
sh
$ yarn add unplugin-vue-components -D
sh
$ bun add unplugin-vue-components -D
ts
// vite.config.ts
+</template>
自动按需引入（强烈推荐） ​
使用 unplugin-vue-components 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件和样式
sh
$ pnpm add unplugin-vue-components -D
sh
$ npm install unplugin-vue-components -D
sh
$ yarn add unplugin-vue-components -D
sh
$ bun add unplugin-vue-components -D
ts
// vite.config.ts
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
diff --git a/assets/guide_ondemand.md.DdzI069a.lean.js b/assets/guide_ondemand.md.BkO99xEY.lean.js
similarity index 96%
rename from assets/guide_ondemand.md.DdzI069a.lean.js
rename to assets/guide_ondemand.md.BkO99xEY.lean.js
index 3757f257b..a61b4656b 100644
--- a/assets/guide_ondemand.md.DdzI069a.lean.js
+++ b/assets/guide_ondemand.md.BkO99xEY.lean.js
@@ -6,7 +6,7 @@ import{_ as t,q as p,J as i,Q as a,c as l,ak as h,a7 as e,p as k}from"./chunks/f
 <template>
   <Button>button</Button>
   <Tag>tag</Tag>
-</template>
自动引入样式（推荐） ​
使用 vite-plugin-style-import 插件来按需自动引入组件样式，插件会自动解析模板中的使用到的组件，并导入其样式
sh
$ pnpm add vite-plugin-style-import -D
sh
$ npm install vite-plugin-style-import -D
sh
$ yarn add vite-plugin-style-import -D
sh
$ bun add vite-plugin-style-import -D
ts
// vite.config.ts
+</template>
自动引入样式（推荐） ​
使用 vite-plugin-style-import 插件来按需自动引入组件样式，插件会自动解析模板中的使用到的组件，并导入其样式
sh
$ pnpm add vite-plugin-style-import -D
sh
$ npm install vite-plugin-style-import -D
sh
$ yarn add vite-plugin-style-import -D
sh
$ bun add vite-plugin-style-import -D
ts
// vite.config.ts
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { createStyleImportPlugin } from 'vite-plugin-style-import'
@@ -36,7 +36,7 @@ import{_ as t,q as p,J as i,Q as a,c as l,ak as h,a7 as e,p as k}from"./chunks/f
 <template>
   <Button>button</Button>
   <Tag>tag</Tag>
-</template>
自动按需引入（强烈推荐） ​
使用 unplugin-vue-components 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件和样式
sh
$ pnpm add unplugin-vue-components -D
sh
$ npm install unplugin-vue-components -D
sh
$ yarn add unplugin-vue-components -D
sh
$ bun add unplugin-vue-components -D
ts
// vite.config.ts
+</template>
自动按需引入（强烈推荐） ​
使用 unplugin-vue-components 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件和样式
sh
$ pnpm add unplugin-vue-components -D
sh
$ npm install unplugin-vue-components -D
sh
$ yarn add unplugin-vue-components -D
sh
$ bun add unplugin-vue-components -D
ts
// vite.config.ts
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
diff --git a/assets/guide_started.md.BYqZj2wq.js b/assets/guide_started.md.QalsHnSf.js
similarity index 97%
rename from assets/guide_started.md.BYqZj2wq.js
rename to assets/guide_started.md.QalsHnSf.js
index ac2fbd07b..2e673a928 100644
--- a/assets/guide_started.md.BYqZj2wq.js
+++ b/assets/guide_started.md.QalsHnSf.js
@@ -1,4 +1,4 @@
-import{_ as n,q as t,J as i,Q as p,c as l,ak as h,a7 as k,p as e}from"./chunks/framework.BOCSoIBq.js";const u=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/started.md","filePath":"guide/started.md","lastUpdated":1735091745000}'),E={name:"guide/started.md"};function d(r,s,g,o,y,c){const a=k("GlobalElement");return e(),t("div",null,[s[0]||(s[0]=i("h1",{id:"快速上手",tabindex:"-1"},[p("快速上手 "),i("a",{class:"header-anchor",href:"#快速上手","aria-label":'Permalink to "快速上手"'},"​")],-1)),l(a),s[1]||(s[1]=h(`
安装 ​
sh
$ pnpm add vue-amazing-ui
sh
$ npm install vue-amazing-ui
sh
$ yarn add vue-amazing-ui
sh
$ bun add vue-amazing-ui
使用组件 ​
全局完整注册（不推荐）
失去 tree-shaking 的能力，打包后有冗余代码
ts
import { createApp } from 'vue'
+import{_ as n,q as t,J as i,Q as p,c as l,ak as h,a7 as k,p as e}from"./chunks/framework.BOCSoIBq.js";const u=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/started.md","filePath":"guide/started.md","lastUpdated":1735091745000}'),E={name:"guide/started.md"};function d(r,s,g,o,y,c){const a=k("GlobalElement");return e(),t("div",null,[s[0]||(s[0]=i("h1",{id:"快速上手",tabindex:"-1"},[p("快速上手 "),i("a",{class:"header-anchor",href:"#快速上手","aria-label":'Permalink to "快速上手"'},"​")],-1)),l(a),s[1]||(s[1]=h(`
安装 ​
sh
$ pnpm add vue-amazing-ui
sh
$ npm install vue-amazing-ui
sh
$ yarn add vue-amazing-ui
sh
$ bun add vue-amazing-ui
使用组件 ​
全局完整注册（不推荐）
失去 tree-shaking 的能力，打包后有冗余代码
ts
import { createApp } from 'vue'
 import App from './App.vue'
 import VueAmazingUI from 'vue-amazing-ui'
 import 'vue-amazing-ui/css'
diff --git a/assets/guide_started.md.BYqZj2wq.lean.js b/assets/guide_started.md.QalsHnSf.lean.js
similarity index 97%
rename from assets/guide_started.md.BYqZj2wq.lean.js
rename to assets/guide_started.md.QalsHnSf.lean.js
index ac2fbd07b..2e673a928 100644
--- a/assets/guide_started.md.BYqZj2wq.lean.js
+++ b/assets/guide_started.md.QalsHnSf.lean.js
@@ -1,4 +1,4 @@
-import{_ as n,q as t,J as i,Q as p,c as l,ak as h,a7 as k,p as e}from"./chunks/framework.BOCSoIBq.js";const u=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/started.md","filePath":"guide/started.md","lastUpdated":1735091745000}'),E={name:"guide/started.md"};function d(r,s,g,o,y,c){const a=k("GlobalElement");return e(),t("div",null,[s[0]||(s[0]=i("h1",{id:"快速上手",tabindex:"-1"},[p("快速上手 "),i("a",{class:"header-anchor",href:"#快速上手","aria-label":'Permalink to "快速上手"'},"​")],-1)),l(a),s[1]||(s[1]=h(`
安装 ​
sh
$ pnpm add vue-amazing-ui
sh
$ npm install vue-amazing-ui
sh
$ yarn add vue-amazing-ui
sh
$ bun add vue-amazing-ui
使用组件 ​
全局完整注册（不推荐）
失去 tree-shaking 的能力，打包后有冗余代码
ts
import { createApp } from 'vue'
+import{_ as n,q as t,J as i,Q as p,c as l,ak as h,a7 as k,p as e}from"./chunks/framework.BOCSoIBq.js";const u=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/started.md","filePath":"guide/started.md","lastUpdated":1735091745000}'),E={name:"guide/started.md"};function d(r,s,g,o,y,c){const a=k("GlobalElement");return e(),t("div",null,[s[0]||(s[0]=i("h1",{id:"快速上手",tabindex:"-1"},[p("快速上手 "),i("a",{class:"header-anchor",href:"#快速上手","aria-label":'Permalink to "快速上手"'},"​")],-1)),l(a),s[1]||(s[1]=h(`
安装 ​
sh
$ pnpm add vue-amazing-ui
sh
$ npm install vue-amazing-ui
sh
$ yarn add vue-amazing-ui
sh
$ bun add vue-amazing-ui
使用组件 ​
全局完整注册（不推荐）
失去 tree-shaking 的能力，打包后有冗余代码
ts
import { createApp } from 'vue'
 import App from './App.vue'
 import VueAmazingUI from 'vue-amazing-ui'
 import 'vue-amazing-ui/css'
diff --git a/guide/changelog.html b/guide/changelog.html
index acb988169..8326a138b 100644
--- a/guide/changelog.html
+++ b/guide/changelog.html
@@ -44,7 +44,7 @@
       --float-btn-bottom: 100px;
       --float-btn-z-index: 9;
     " target="_self" data-v-fb8d17bf>
对于新功能、新组件、bug 修复以及文档更新，您可以向 main 分支创建拉取请求或者直接通过右下角邮箱地址直接联系我
2.0.6 
2024-01-06
 ​
  • 优化并更新 对话框 Dialog 组件，新增 destroyOnClose scrollbarProps 属性，支持：设置关闭时是否销毁 Dialog 里的子元素；固定高度时使用滚动条组件，并可自定义滚动条样式
  • 优化并更新 模态框 Modal 组件，新增 destroyOnClose 属性，支持：设置关闭时是否销毁 Modal 里的子元素
  • 组件库及文档代码优化
2.0.5 
2024-01-03
 ​
  • 优化并更新 复选框 Checkbox 组件点击动画效果及代码
  • 优化并更新 单选框 Radio 组件代码
  • 优化并更新 表格 Table 组件代码及功能优化；scroll 属性新增 initialScrollPositionOnChange 类型，用于设置当分页、排序变化后是否滚动到表格初始位置；新增 rowSelection 属性，用于支持设置列表项选择，更多配置项请参考 Selection Type
  • 组件库及文档代码优化
2.0.4 
2024-12-30
 ​
  • 优化并更新 水印 Watermark 组件，新增 fixed 属性，支持固定全屏水印
  • 组件库及文档代码优化
2.0.3 
2024-12-26
 ​
  • 优化并更新 倒计时 Countdown 组件，将 finishedText 属性重命名为 finish
  • 修复 搜索框 InputSearch 组件使用插槽自定义搜索图标不生效的问题
  • 所有支持插槽的组件文档新增 Slots 相关说明文档
  • 组件库及文档代码优化
2.0.2 
2024-12-24
 ​
  • 优化并更新 浮动按钮 FloatButton 组件，icon 属性新增类型 VNode
  • 新增 VueAmazingUIStyleResolve 方法导出，用于配合 vite-plugin-style-import 插件实现按需自动引入组件样式，具体请参考 自动引入样式
  • 组件库及文档代码优化
2.0.1 
2024-12-20
 ​
  • 优化并更新 步骤条 Steps 组件，将 Steps 属性重命名为 items
  • 优化并更新 标签页 Tabs 组件，将 tabPages 属性重命名为 items
  • 组件库及文档代码优化
2.0.0 
2024-12-18
 ​
  • 优化组件库打包构建；所有组件支持手动或自动按需引入；全面支持基于 ES modules 的 tree shaking
  • 新增 VueAmazingUIResolver 方法导出，用于配合 unplugin-vue-components 插件支持组件库的自动按需引入，具体请参考 自动按需引入
  • 组件库及文档代码优化
1.10.4 
2024-12-10
 ​
  • 优化并更新 复选框 Checkbox 组件，删除 width height 属性；新增选中动画效果
  • 优化并更新 单选框 Radio 组件，删除 width height 属性；新增选中动画效果
  • 优化并更新 文字滚动 TextScroll 组件，将 verticalInterval 属性重命名为 interval；新增 duration 属性；用于控制垂直滚动过渡持续时间；代码逻辑优化
1.10.3 
2024-12-09
 ​
  • 优化并更新 表格 Table 组件，新增 sticky 属性，支持：对于长表格设置跟随页面固定表头和水平滚动条，方便查看表头和使用滚动条
  • 优化并更新 文字滚动 TextScroll 组件，将 scrollText 属性重命名为 items；删除 interval step 属性，新增 speed 属性；用于更方便的控制水平滚动动画速度；重构水平滚动动画效果；新增 pauseOnMouseEnter 属性，支持控制鼠标移入时是否暂停滚动
  • 组件库及文档代码优化
1.10.2 
2024-12-05
 ​
  • 优化并更新 播放器 Video 组件，新增 iconSize 属性；重命名 showPlay 属性为 playIcon；新增 play pause 方法；支持：设置播放暂停图标的尺寸；使用 Methods 控制播放暂停
1.10.1 
2024-12-04
 ​
  • 优化类型声明文件导出
  • 组件库及文档代码优化
1.10.0 
2024-12-03
 ​
  • 添加类型声明文件，提供所有组件相关类型定义的导出，为使用 TypeScript 开发提供更好的支持
  • 组件库及文档代码优化
1.9.12 
2024-12-02
 ​
  • 优化并更新 折叠面板 Collapse 组件，将 collapseData 属性重命名为 items，新增 collapseStyle copyText copiedText 等属性；支持：自定义样式；自定义箭头图标；自定义复制按钮文本；单个面板自定义样式、箭头属性、复制按钮等功能
  • 优化并更新 时间轴 Timeline 组件，将 timelineData 属性重命名为 items
1.9.11 
2024-11-28
 ​
  • 修复组件库 vue-amazing-ui@1.9.10 更新 vite 至 v6 后，打包时 cssFileName 默认值更改为 package.json 中的 name 值导致无法引入 css 文件的相关问题
1.9.10 
2024-11-28
 ​
  • 优化并更新 回到顶部 BackTop 组件，新增支持设置多种 CSS 变量自定义样式
  • 优化并更新 滑动输入条 Slider 组件，新增支持设置多种 CSS 变量自定义样式
  • 组件库及文档代码优化
1.9.9 
2024-11-27
 ​
  • 优化并更新 表格 Table 组件代码和功能
  • 优化并更新 进度条 Progress 组件，重构组件，新增支持更多样式自定义
  • 组件库及文档代码优化
1.9.8 
2024-11-26
 ​
  • 优化并更新 滚动条 Scrollbar 组件，新增 yScrollable 属性，用于控制是否使用垂直滚动；新增支持通过设置 --scrollbar 相关变量自定义滚动条样式
  • 优化并更新 表格 Table 组件，新增 rowClassName showSorterTooltip sortDirections tooltipProps 属性；表格列的配置项 columns 属性新增 align className key children showSorterTooltip sortTooltipProps defaultSortOrder sortDirections sorter 类型；新增 expand expandedRowsChange 事件；支持：设置列文本对齐方式；自定义样式；列表头分组；是否显示下一次排序的 tooltip 提示；自定义某列的默认排序顺序；设置支持的排序方式；表格排序控制；展开行变化回调事件；排序变化回调事件
  • 优化并更新 文字提示 Tooltip 组件，新增 contentClass showControl 属性，支持：设置展示内容的类名；是否 trigger: hover 时只使用 show 属性控制显示隐藏
  • 优化并更新 弹出确认 Popconfirm 组件，新增 keyboard 属性，默认支持按键操作
  • 优化并更新 气泡卡片 Popover 组件，新增 keyboard 属性，默认支持按键操作
  • 组件库及文档代码优化
1.9.7 
2024-11-20
 ​
  • 优化并更新 滚动条 Scrollbar 组件，新增 xPlacement yPlacement 属性，支持设置滚动条位置；调整是否使用横向滚动属性名 horizontal 为 xScrollable；新增 getScrollData 方法，用于获取滚动区域相关数据；新增 scrollend 回调函数，同时回调函数新增 direction 参数，用于表示滚动方向
  • 优化并更新 表格 Table 组件，新增 scrollbarProps 属性，表格所有滚动均使用 滚动条 Scrollbar 组件，并支持滚动条相关属性配置
  • 新增 滚动监测 useScroll 工具函数，用于实时监测指定元素滚动位置及状态；删除 useScrollDirection 工具函数
  • 组件库及文档代码优化
1.9.6 
2024-11-15
 ​
  • 优化并更新 选择器 Select 组件，新增 size 属性，支持设置选择器的尺寸大小
  • 优化并更新 分页 Pagination 组件，新增 size 属性，支持设置分页器的尺寸大小
  • 优化并更新 表格 Table 组件，新增 size striped ellipsisProps scroll showExpandColumn expandColumnTitle expandColumnWidth expandCell expandedRowRender expandFixed expandedRowKeys expandRowByClick 等属性；支持：设置三种尺寸；斑马条纹；合并单元格；可编辑单元格；可编辑行；可展开；固定列；固定表头；固定头和列等多种功能
  • 组件库及文档代码优化
1.9.5 
2024-11-13
 ​
1.9.4 
2024-11-08
 ​
  • 优化并更新 文本省略 Ellipsis 组件，优化弹出提示默认最大宽度计算方式
  • 优化并更新 文字提示 Tooltip 组件，优化自动调整弹出位置算法逻辑
  • 优化并更新 警告提示 Alert 组件，优化关闭时的动画效果
  • 优化并更新 徽标 Badge 组件，优化关闭时的动画效果
  • 优化并更新 图片 Image 组件，优化预览打开关闭动画效果
  • 优化并更新 全局提示 Message 组件，优化显示隐藏动画效果
  • 优化并更新 选择器 Select 组件，优化红点显示隐藏动画效果
  • 优化并更新 表格 Table 组件，重构表格组件；新增 header footer bordered tableLayout 属性；支持：使用 headerCell bodyCell 自定义个性化头部单元格和内容单元格；引入文本省略组件，支持表格头部或内容单元格文本溢出时自动显示省略号，且悬浮省略文本时，自动弹出文字提示
  • 组件库及文档代码优化
1.9.3 
2024-11-06
 ​
  • 优化并更新 上传 Upload 组件，新增 draggable 属性，支持控制拖拽上传功能
  • 优化并更新 文字提示 Tooltip 组件代码和动画效果，支持异步更新内容和文字提示，自动更新文字提示框位置
  • 优化并更新 回到顶部 BackTop 组件，icon 属性新增支持 VNode 类型
  • 优化并更新 按钮 Button 组件，icon 属性新增支持 VNode 类型
  • 组件库及文档代码优化
1.9.2 
2024-11-04
 ​
  • 优化并更新 对话框 Dialog 组件，新增 titleStyle contentStyle bodyClass bodyStyle maskStyle transformOrigin blockScroll keyboard maskClosable 等属性；删除部分属性；支持：控制对话框动画出现位置；控制打开对话框时禁用背景滚动；控制键盘 Esc 关闭；控制点击蒙层关闭；设置标题、内容、body、蒙层样式等功能
  • 优化并更新 模态框 Modal 组件，新增 titleStyle contentStyle bodyClass bodyStyle maskStyle transformOrigin blockScroll keyboard maskClosable 等属性；删除部分属性；支持：控制模态框动画出现位置；控制打开模态框时禁用背景滚动；控制键盘 Esc 关闭；控制点击蒙层关闭；设置标题、内容、body、蒙层样式等功能
  • 组件库及文档代码优化
1.9.1 
2024-10-31
 ​
  • 优化并更新 对话框 Dialog 组件，优化显示隐藏动画效果
  • 优化并更新 图片 Image 组件，优化显示隐藏动画效果
  • 优化并更新 全局提示 Message 组件，优化显示隐藏动画效果
  • 优化并更新 模态框 Modal 组件，优化显示隐藏动画效果
  • 优化并更新 按钮 Button 组件，新增 keyboard 属性，支持控制是否支持键盘操作
  • 组件库及文档代码优化
1.9.0 
2024-10-30
 ​
  • 优化并更新 文字提示 Tooltip 组件，新增 flip keyboard transitionDuration 属性，支持自动调整弹出位置；按键控制；自定义过渡动画时间；使用 Methods 控制显示隐藏
  • 优化并更新 弹出确认 Popconfirm 组件，以 Tooltip 组件为基础重构，新增 tooltipStyle 属性，删除部分原有属性，更多属性请参考 Tooltip，支持自动调整弹出位置；自定义过渡动画时间等
  • 优化并更新 气泡卡片 Popover 组件，以 Tooltip 组件为基础重构，新增 tooltipStyle 属性，删除部分原有属性，更多属性请参考 Tooltip，支持自动调整弹出位置；自定义过渡动画时间等
  • 优化并更新 文本省略 Ellipsis 组件，新增 tooltipMaxWidth 属性，删除 tooltipProps 属性，更多属性请参考 Tooltip，支持自动调整弹出位置；自定义过渡动画时间；延迟显示隐藏；隐藏箭头等
  • 组件库及文档代码优化
1.8.10 
2024-10-25
 ​
  • 优化并更新 文字提示 Tooltip 组件，新增 tooltipClass placement 属性，支持自定义弹出提示位置及类名
  • 优化并更新 标签页 Tabs 组件，修复当标签页左右切换时，页面会短暂出现滚动条的问题
  • 组件库及文档代码优化
1.8.9 
2024-10-24
 ​
1.8.8 
2024-10-22
 ​
  • 优化并更新 头像 Avatar 组件，新增 href target 属性，支持链接跳转功能
  • 优化并更新 文字滚动 TextScroll 组件，新增 hrefHoverColor 属性，支持自定义链接悬浮颜色
  • 组件库及文档代码优化
1.8.7 
2024-10-21
 ​
  • 优化并更新 上传 Upload 组件，新增 drop preview 事件回调，调整 beforeUpload 属性，支持返回一个 Promise 对象，用于控制上传
  • 优化并更新 加载中 Spin 组件
  • 组件库及文档代码优化
1.8.6 
2024-10-18
 ​
1.8.5 
2024-10-17
 ​
1.8.4 
2024-10-16
 ​
  • 优化并更新 评分 Rate 组件，支持键盘左/右按键操作评分
  • 组件库及文档代码优化
1.8.3 
2024-10-15
 ​
  • 优化并更新 单选框 Radio 组件，新增 checked width height 属性，调整 gap 属性相关功能
  • 优化并更新 评分 Rate 组件，新增 tooltips tooltipProps 属性，支持设置文案提示
  • 组件库及文档代码优化
1.8.2 
2024-10-14
 ​
1.8.1 
2024-10-11
 ​
  • 优化并更新 选择器 Select 组件，新增 openChange 事件
  • 优化并更新 文字滚动 TextScroll 组件，新增 start stop reset 方法，支持手动控制开始、暂停、重置滚动
  • 组件库及文档代码优化
1.8.0 
2024-10-10
 ​
1.7.2 
2024-10-09
 ​
  • 优化并更新 对话框 Dialog 组件，将属性 show 重命名为 open
  • 组件库及文档代码优化
1.7.1 
2024-10-01
 ​
1.7.0 
2024-09-28
 ​
  • 优化并更新 标签页 Tabs 组件，新增 prefix suffix animated tabGutter tabStyle tabPosition contentStyle 属性
1.6.9 
2024-09-26
 ​
  • 优化并更新 标签页 Tabs 组件，新增带图标的标签页功能
  • 组件库及文档代码优化
1.6.8 
2024-09-24
 ​
  • 优化 徽标 Badge 组件实现
  • 优化并更新 卡片 Card 组件，新增 hoverable skeletonProps 属性，并调整卡片尺寸 size 功能
  • 优化并更新 折叠面板 Collapse 组件，新增 copyProps 属性
  • 组件库及文档代码优化
1.6.7 
2024-09-18
 ​
  • 组件库代码优化
1.6.6 
2024-09-13
 ​
1.6.5 
2024-09-10
 ​
  • 优化并更新 全局提示 Message 组件，新增自定义图标、自定义类名、自定义样式等功能
  • 优化并更新 模态框 Modal 组件，新增自定义图标、自定义类型、自定义样式等功能
  • 组件库及文档代码优化
1.6.4 
2024-09-06
 ​
  • 优化并更新 倒计时 Countdown 组件，新增随时暂停和重置倒计时功能
  • 优化并更新 通知提醒 Notification 组件，新增自定义图标、自定义类名、自定义样式等功能
  • 组件库及文档代码优化
1.6.3 
2024-08-30
 ​
  • 优化并更新 回到顶部 Backtop 组件，新增 icon description tooltip tooltipProps type shape 属性
  • 优化并更新 文字提示 Tooltip 组件，新增 contentStyle 属性
  • 优化并更新 按钮 Button 组件，新增 buttonClass 属性，删除 loadingColor 属性
  • 组件库及文档代码优化
1.6.2 
2024-08-29
 ​
  • 优化并更新 对话框 Dialog 组件，top 属性新增 string 类型
  • 优化并更新 水印 Watermark 组件，新增 textStyle 属性，删除 color fontSize fontWeight fontFamily fontStyle 属性
  • 优化并更新 折叠面板 Collapse 组件，新增 disabled itemStyle headerStyle contentStyle arrow arrowStyle extra 属性
  • 组件库及文档代码优化
1.6.1 
2024-08-27
 ​
  • 优化并更新 输入框 Input 组件
  • 优化并更新 文字提示 Tooltip 组件，新增 bgColor tooltipStyle arrow trigger showDelay hideDelay show 属性
  • 优化并更新 气泡卡片 Popover 组件，新增 titleStyle contentStyle bgColor popoverStyle arrow trigger showDelay hideDelay show 属性
  • 优化并更新 弹出确认 Popconfirm 组件，新增 titleStyle descriptionStyle bgColor popconfirmStyle iconStyle arrow trigger showDelay hideDelay show 属性
  • 组件库代码优化
1.6.0 
2024-08-23
 ​
1.5.4 
2024-08-22
 ​
1.5.3 
2024-08-19
 ​
  • 优化并更新 面包屑 Breadcrumb 组件，新增 breadcrumbClass breadcrumbStyle separatorStyle 属性
  • 优化并更新 对话框 Dialog 组件，新增 cancelProps okProps 属性
  • 优化并更新 加载中 Spin 组件，新增 spinCircleWidth spinCirclePercent ringRailColor 属性
  • 组件库代码优化
1.5.2 
2024-08-16
 ​
  • 优化并更新 水印 Watermark 组件，新增浏览器暗黑模式下水印颜色自动反转
  • 优化并更新 警告提示 Alert，新增 actions 属性
  • 优化并更新 加载中 Spin，新增 indicator: 'ring-circle' 加载中类型，并新增 ringCirclePercent ringCircleColor 属性，优化整体效果
  • 组件库优化
1.5.1 
2024-08-15
 ​
  • 优化并更新 列表 List 组件
  • 组件库代码优化
1.5.0 
2024-08-14
 ​
1.4.7 
2024-08-13
 ​
1.4.6 
2024-08-08
 ​
1.4.5 
2024-08-07
 ​
1.4.4 
2024-08-05
 ​
1.4.3 
2024-08-02
 ​
  • 优化并更新 空状态 Empty 组件
  • 优化并更新 模态框 Modal 组件，新增 cancelProps okType okProps noticeProps 属性
  • 组件库及文档代码优化
1.4.2 
2024-08-01
 ​
1.4.1 
2024-07-31
 ​
  • 优化 按钮 Button 组件
  • 优化并更新 标签 Tag 组件，新增 spaceProps 属性
  • 优化并更新 图片 Image 组件，新增 spaceProps spinProps 属性，同时删除了部分属性
  • 优化并更新 上传 Upload 组件，新增 spaceProps spinProps imageProps messageProps actionMessage 属性，同时删除了部分属性
  • 组件库及文档代码优化
1.4.0 
2024-07-30
 ​
1.3.4 
2024-07-29
 ​
1.3.3 
2024-07-26
 ​
1.3.2 
2024-07-26
 ​
1.3.1 
2024-07-25
 ​
1.3.0 
2024-07-24
 ​
1.2.0 
2024-07-23
 ​
1.1.2 
2024-07-22
 ​
1.1.1 
2024-07-19
 ​
1.1.0 
2024-07-18
 ​
future ​
  • 新增 布局 Layout 组件
  • 新增 菜单 Menu 组件
  • 新增 穿梭框 Transfer 组件
  • 新增 颜色选择器 ColorPicker 组件
Released under the MIT License.
Copyright © 2023-present the Muse Catcher

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/components/alert.html b/guide/components/alert.html
index be5d94524..b0533a417 100644
--- a/guide/components/alert.html
+++ b/guide/components/alert.html
@@ -350,7 +350,7 @@
     </Alert>
   </Flex>
 </template>
APIs ​
Alert ​
参数说明类型默认值
message警告提示内容string | slotundefined
description警告提示的辅助性文字介绍string | slotundefined
type警告提示的类型'default' | 'success' | 'info' | 'warning' | 'error''default'
bordered是否显示边框booleantrue
closable是否显示关闭按钮booleanfalse
closeText自定义关闭按钮string | slotundefined
icon自定义图标，showIcon 为 true 时有效string | slotundefined
showIcon是否显示辅助图标booleanfalse
actions自定义操作项slotundefined
Slots ​
名称说明类型
default警告提示内容v-slot:default
description警告提示的辅助性文字介绍v-slot:description
closeText自定义关闭按钮v-slot:closeText
icon自定义图标v-slot:icon
actions自定义操作项v-slot:actions
Events ​
名称说明类型
close关闭时触发的回调函数(e: Event) => void
- + \ No newline at end of file diff --git a/guide/components/avatar.html b/guide/components/avatar.html index c02e449ac..a7b3e2e34 100644 --- a/guide/components/avatar.html +++ b/guide/components/avatar.html @@ -170,7 +170,7 @@ /> </Tooltip> </template>

APIs ​

Avatar ​

参数说明类型默认值
color头像的背景色string'rgba(0, 0, 0, 0.25)'
shape指定头像的形状'circle' | 'square''circle'
size设置头像的大小，number类型时单位 pxnumber | 'small' | 'middle' | 'large' | Responsive'middle'
src图片类头像资源地址stringundefined
alt图片无法显示时的替代文本stringundefined
icon设置头像的图标VNode | slotundefined
href点击跳转的地址，指定此属性按钮的行为和 a 链接一致stringundefined
target相当于 a 标签的 target 属性，href 存在时生效'self' | '_blank''self'

Responsive Type ​

名称说明类型默认值
xs<576px 响应式栅格numberundefined
sm≥576px 响应式栅格numberundefined
md≥768px 响应式栅格numberundefined
lg≥992px 响应式栅格numberundefined
xl≥1200px 响应式栅格numberundefined
xxl≥1600px 响应式栅格numberundefined

Slots ​

名称说明类型
default字符类型的头像内容v-slot:default
icon自定义头像图标v-slot:icon
- + \ No newline at end of file diff --git a/guide/components/backtop.html b/guide/components/backtop.html index 51389a37c..70f723022 100644 --- a/guide/components/backtop.html +++ b/guide/components/backtop.html @@ -185,7 +185,7 @@ <br /> </Scrollbar> </template>

APIs ​

BackTop ​

参数说明类型默认值
icon自定义图标VNode | Slotundefined
description文字描述string | slotundefined
tooltip文字提示内容string | slotundefined
tooltipPropsTooltip 组件属性配置，参考 Tooltip Propsobject{}
type设置按钮类型'default' | 'primary''default'
shape设置按钮形状'circle' | 'square''circle'
bottomBackTop 距离页面底部的高度，单位 pxnumber | string40
rightBackTop 距离页面右侧的宽度，单位 pxnumber | string40
zIndex设置 BackTop 的 z-indexnumber9
visibilityHeight滚动时触发显示回到顶部的高度，单位 pxnumber180
toBackTop 渲染的容器节点，可选：元素标签名（例如 body）或者元素本身，下同string | HTMLElement'body'
listenTo监听滚动的元素，如果为 undefined 会监听距离最近的一个可滚动的祖先节点string | HTMLElementundefined

Slots ​

名称说明类型
default自定义按钮v-slot:default
icon自定义图标v-slot:icon
description自定义文字描述v-slot:description
tooltip自定义文字提示内容v-slot:tooltip

Events ​

名称说明类型
click点击按钮的回调函数() => void
show按钮显示隐藏的回调函数(show: boolean) => void
- + \ No newline at end of file diff --git a/guide/components/badge.html b/guide/components/badge.html index dcb7a2408..e9224c598 100644 --- a/guide/components/badge.html +++ b/guide/components/badge.html @@ -229,7 +229,7 @@ <Badge color="#108ee9" text="#108ee9" /> </Space> </template>

APIs ​

Badge ​

参数说明类型默认值
color自定义小圆点的颜色，优先级高于 statusPresetColor | stringundefined
value展示的数字或文字，为数字时大于 max 显示为 max+，为 0 时隐藏number | string | slotundefined
max展示封顶的数字值number99
showZero当数值为 0 时，是否展示 Badgebooleanfalse
dot不展示数字，只有一个小红点booleanfalse
offset设置状态点的位置偏移，距默认位置左侧、上方的偏移量 [x, y]: [水平偏移, 垂直偏移][number | string, number | string]undefined
status设置 Badge 为状态点Statusundefined
text在设置了 status 的前提下有效，设置状态点的文本string | slotundefined
valueStyle设置徽标的样式CSSProperties{}
zIndex设置徽标的 z-indexnumber9
title设置鼠标放在状态点上时显示的文字stringundefined
ripple是否开启涟漪动画效果booleantrue

PresetColor Type ​

名称值
PresetColor'pink' | 'red' | 'yellow' | 'orange' | 'cyan' | 'green' | 'blue' | 'purple' | 'geekblue' | 'magenta' | 'volcano' | 'gold' | 'lime'

Status Type ​

名称值
Status'success' | 'processing' | 'default' | 'error' | 'warning'

Slots ​

名称说明类型
default自定义内容元素v-slot:default
value自定义徽标数字或文字v-slot:value
- + \ No newline at end of file diff --git a/guide/components/breadcrumb.html b/guide/components/breadcrumb.html index 7aa9e80c2..9eaa478f4 100644 --- a/guide/components/breadcrumb.html +++ b/guide/components/breadcrumb.html @@ -206,7 +206,7 @@ <template> <Breadcrumb :routes="routes" target="_blank" /> </template>

APIs ​

参数说明类型默认值
routes路由数组Route[][]
breadcrumbClass设置面包屑类名stringundefined
breadcrumbStyle设置面包屑样式CSSProperties{}
maxWidth设置文本最大显示宽度，超出后显示省略号，单位 pxstring | number'100%'
separator自定义分隔符，默认为 >string | slotundefined
separatorStyle设置分隔符样式CSSProperties{}
target如何打开目标URL'_self' | '_blank''_self'

Route Type ​

名称说明类型默认值
name路由名称stringundefined
path?路由地址stringundefined
query?路由查询参数Queryundefined

Query Type ​

名称说明类型默认值
[propName: string]用于包含带有任意数量的其他属性anyundefined

Slots ​

名称说明类型
separator自定义分隔符v-slot:separator="{ route, index }"
- + \ No newline at end of file diff --git a/guide/components/button.html b/guide/components/button.html index 861bbc9d7..5c894fa79 100644 --- a/guide/components/button.html +++ b/guide/components/button.html @@ -553,7 +553,7 @@ <Button block type="danger" ghost>Danger Button</Button> </Space> </template>

APIs ​

Button ​

参数说明类型默认值
type设置按钮类型'default' | 'reverse' | 'primary' | 'danger' | 'dashed' | 'text' | 'link''default'
shape设置按钮形状'default' | 'circle' | 'round''default'
icon设置按钮图标VNode | Slotundefined
size设置按钮尺寸'small' | 'middle' | 'large''middle'
ghost按钮背景是否透明，仅当 type: 'primary' | 'danger' 时生效booleanfalse
buttonClass设置按钮类名stringundefined
rippleColor点击时的波纹颜色，一般不需要设置，默认会根据 type 自动匹配，主要用于自定义样式时且 type: 'default'stringundefined
href点击跳转的地址，与 a 链接的 href 属性一致stringundefined
target如何打开目标链接，相当于 a 链接的 target 属性，href 存在时生效'_self' | '_blank''_self'
keyboard是否支持键盘操作booleantrue
disabled是否禁用booleanfalse
loading是否加载中booleanfalse
loadingType加载指示符类型'static' | 'dynamic''dynamic'
block是否将按钮宽度调整为其父宽度booleanfalse

Slots ​

名称说明类型
default自定义按钮内容v-slot:default
icon自定义按钮图标v-slot:icon

Events ​

名称说明类型
click点击按钮时的回调(e: Event) => void
- + \ No newline at end of file diff --git a/guide/components/card.html b/guide/components/card.html index 2f1130041..2dc672f97 100644 --- a/guide/components/card.html +++ b/guide/components/card.html @@ -170,7 +170,7 @@ </Row> </div> </template>

APIs ​

Card ​

参数说明类型默认值
width卡片宽度，单位 pxnumber | string'auto'
bordered是否有边框booleantrue
size卡片的尺寸'small' | 'middle' | 'large''middle'
hoverable鼠标移过时可浮起booleanfalse
loading当卡片内容还在加载中时，可以用 loading 展示一个占位booleanfalse
skeletonProps加载中时，骨架屏的属性配置，参考 Skeleton Propsobject{}
title卡片标题string | slotundefined
extra卡片右上角的操作区域string | slotundefined
headStyle自定义标题区域样式CSSProperties{}
bodyStyle自定义内容区域样式CSSProperties{}

Slots ​

名称说明类型
title自定义卡片标题v-slot:title
extra自定义右上角的操作区域v-slot:extra
- + \ No newline at end of file diff --git a/guide/components/carousel.html b/guide/components/carousel.html index 6a8f2afef..e4c0b10a7 100644 --- a/guide/components/carousel.html +++ b/guide/components/carousel.html @@ -580,7 +580,7 @@ /> </Flex> </template>

APIs ​

参数说明类型默认值
images轮播图图片数组Image[][]
width轮播图宽度，单位 pxnumber | string'100%'
height轮播图高度，单位 pxnumber | string'100vh'
autoplay是否自动轮播booleanfalse
pauseOnMouseEnter当鼠标移入轮播图时，是否暂停自动轮播booleanfalse
effect轮播图切换时的过渡效果'slide' | 'fade''slide'
interval自动轮播间隔，单位 msnumber3000
showArrow是否显示箭头booleantrue
arrowColor箭头颜色string'#FFF'
arrowSize箭头大小，单位 pxnumber36
dots是否显示指示点booleantrue
dotSize指示点大小，单位 pxnumber10
dotColor指示点颜色string'rgba(255, 255, 255, 0.3)'
dotActiveColor指示点选中颜色string'#1677FF'
dotStyle指示点样式，优先级高于 dotSize、dotColorCSSProperties{}
dotActiveStyle指示点选中样式，优先级高于 dotActiveColorCSSProperties{}
dotPosition指示点位置，位置为 left | right 时，effect: 'slide' 轮播自动变为垂直轮播'bottom' | 'top' | 'left' | 'right''bottom'
dotsTrigger指示点触发切换的方式'click' | 'hover''click'
spinProps图片加载中样式，Spin 组件属性配置，参考 Spin Propsobject{}
fadeDuration渐变动画持续时长，单位 ms，仅当 effect 为 'fade' 时生效number500
fadeFunction渐变动画函数，仅当 effect 为 'fade' 时生效，可参考 transition-timing-functionstring'cubic-bezier(0.4, 0, 0.2, 1)'
slideDuration滑动动画持续时长，单位 ms，仅当 effect 为 'slide' 时生效number800
slideFunction滑动动画函数，，仅当 effect 为 'slide' 时生效，可参考 useTransitionnumber[][0.65, 0, 0.35, 1]

Image Type ​

名称说明类型默认值
title?图片名称stringundefined
src图片地址stringundefined
link?图片跳转链接stringundefined

Methods ​

名称说明类型
to切换至某一页，从 1 开始(n: number) => void
prev切换至前一页() => void
next切换至后一页() => void
getCurrentIndex获取当前页，从 1 开始() => number

Events ​

名称说明类型
change切换时的图片索引，从 1 开始(index: number) => void
click点击图片时的回调(image: Image) => void
- + \ No newline at end of file diff --git a/guide/components/cascader.html b/guide/components/cascader.html index af3b4abbb..7843f06f3 100644 --- a/guide/components/cascader.html +++ b/guide/components/cascader.html @@ -769,7 +769,7 @@ children="items" @change="onChange" /> </template>

APIs ​

Cascader ​

参数说明类型默认值
options可选项数据源Option[][]
label下拉字典项的文本字段名string'label'
value下拉字典项的值字段名string'value'
children下拉字典项的后代字段名string'children'
placeholder三级下拉各自占位文本string | string[]'请选择'
changeOnSelect当此项为 true 时，点选每级菜单选项值都会发生变化；否则只有选择第三级选项后选项值才会变化booleanfalse
gap级联下拉框相互间隙宽度，单位 pxnumber8
width三级下拉各自宽度，单位 px'auto' | number | number[]'auto'
height下拉框高度，单位 pxnumber32
disabled三级各自是否禁用boolean | boolean[]false
allowClear是否支持清除booleanfalse
search是否支持搜索，使用搜索时请设置 widthbooleanfalse
filter过滤条件函数，仅当支持搜索时生效，根据输入项进行筛选：
  • 默认为 true 时，筛选每个选项的文本字段 label 是否包含输入项，包含返回 true，反之返回 false
  • 当其为函数 Function 时，接受 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false
    		• Function | truetrue
    maxDisplay下拉面板最多能展示的下拉项数，超过后滚动显示number6
    modelValue
    v-model
    		级联选中项number[] | string[][]

    Option Type ​

    名称说明类型默认值
    label?选项名stringundefined
    value?选项值string | numberundefined
    disabled?是否禁用选项booleanfalse
    children?选项 children 数组Option[]undefined
    [propName: string]添加一个字符串索引签名，用于包含带有任意数量的其他属性anyundefined

    Events ​

    名称说明类型
    change选择完成后的回调(values: (number|string)[], labels: string[]) => void
    - + \ No newline at end of file diff --git a/guide/components/checkbox.html b/guide/components/checkbox.html index fdea10251..35c8735a9 100644 --- a/guide/components/checkbox.html +++ b/guide/components/checkbox.html @@ -360,7 +360,7 @@ <Checkbox :gap="[horizontalGap, verticalGap]" :options="options" v-model:value="selectedOptions" /> </Flex> </template>

    APIs ​

    Checkbox ​

    参数说明类型默认值
    options复选框选项数据Option[][]
    disabled是否禁用booleanfalse
    vertical是否垂直排列booleanfalse
    value
    v-model
    		当前选中的值，配合 options 使用(string | number)[][]
    gap多个复选框之间的间距；垂直排列时为垂直间距，单位 px；数组间距用于水平排列折行时：[水平间距, 垂直间距]number8
    indeterminate全选时的样式控制booleanfalse
    checked
    v-model
    		当前是否选中booleanfalse

    Option Type ​

    名称说明类型默认值
    label选项名stringundefined
    value选项值string | numberundefined
    disabled?是否禁用选项booleanundefined

    Slots ​

    名称说明类型
    default自定义选项名v-slot:default="{ option, label, index }"

    Events ​

    名称说明类型
    change变化时回调函数(value: boolean | (string | number)[]) => void
    - + \ No newline at end of file diff --git a/guide/components/collapse.html b/guide/components/collapse.html index 167d7ecc6..4a2ccfccb 100644 --- a/guide/components/collapse.html +++ b/guide/components/collapse.html @@ -600,7 +600,7 @@ </template> </Collapse> </template>

    APIs ​

    Collapse ​

    参数说明类型默认值
    items折叠面板数据Item[][]
    activeKey
    v-model
    		当前激活 tab 面板的 keynumber[] | number | string[] | string | nullnull
    bordered带边框风格的折叠面板booleantrue
    disabled是否禁用展开收起booleanfalse
    ghost使折叠面板透明且无边框booleanfalse
    headerStyle设置面板标题的样式CSSProperties{}
    contentStyle设置面板内容的样式CSSProperties{}
    collapseStyle设置面板容器的样式CSSProperties{}
    arrow自定义箭头切换图标VNode | slotundefined
    showArrow是否展示箭头booleantrue
    arrowPlacement箭头位置'left' | 'right''left'
    arrowStyle设置面板箭头的样式CSSProperties{}
    extra面板标题右侧的额外内容string | slotundefined
    lang面板右上角固定内容，例如 language 标识string | slotundefined
    copyable是否可复制面板内容booleanfalse
    copyProps复制按钮属性配置，参考 Button Propsobject{}
    copyText复制按钮文本string'Copy'
    copiedText已复制按钮文本string'Copied'

    Item Type ​


    以下属性均具有更高优先级

    名称说明类型默认值
    key?对应 activeKey，如果没有传入 key 属性，则默认使用数据索引 (0,1,2...) 绑定string | numberundefined
    disabled?是否禁用展开收起booleanundefined
    header?面板标题string | v-slot:header="{ item, header, key, active }"undefined
    headerStyle?设置面板标题的样式CSSPropertiesundefined
    content?面板内容string | v-slot:content="{ item, content, key, active }"undefined
    contentStyle?设置面板内容的样式CSSPropertiesundefined
    collapseStyle?设置面板容器的样式CSSPropertiesundefined
    arrow?自定义箭头切换图标VNodeundefined
    showArrow?是否展示箭头booleanundefined
    arrowPlacement?箭头位置'left' | 'right'undefined
    arrowStyle?设置面板箭头的样式CSSPropertiesundefined
    extra?面板标题右侧的额外内容string | slotundefined
    lang?面板右上角固定内容，例如标识 languagestring | slotundefined
    copyable?是否可复制面板内容booleanundefined
    copyProps?复制按钮属性配置，参考 Button Propsobjectundefined
    copyText?复制按钮文本stringundefined
    copiedText?已复制按钮文本stringundefined

    Slots ​

    名称说明类型
    header自定义面板标题v-slot:header="{ item, header, key, active }"
    content自定义面板内容v-slot:content="{ item, content, key, active }"
    arrow自定义箭头切换图标v-slot:arrow="{ item, key, active }"
    extra自定义面板标题右侧的额外内容v-slot:extra="{ item, extra, key, active }"
    lang自定义面板右上角固定内容v-slot:lang="{ item, lang, key, active }"

    Events ​

    名称说明类型
    change切换面板的回调(key: number | string) => void
    - + \ No newline at end of file diff --git a/guide/components/countdown.html b/guide/components/countdown.html index dab14c627..8afe34b10 100644 --- a/guide/components/countdown.html +++ b/guide/components/countdown.html @@ -124,7 +124,7 @@ /> </Space> </template>

    APIs ​

    Countdown ​

    参数说明类型默认值
    title倒计时标题string | slotundefined
    titleStyle设置标题的样式CSSProperties{}
    prefix倒计时的前缀string | slotundefined
    suffix倒计时的后缀string | slotundefined
    finish倒计时完成后的展示文本string | slotundefined
    futurevalue 是否为未来某时刻的时间戳；为 false 表示相对剩余时间戳booleantrue
    format倒计时展示格式，(Y/YY：年，M/MM：月，D/DD：日，H/HH：时，m/mm：分钟，s/ss：秒，SSS：毫秒)string'HH:mm:ss'
    value倒计时数值，支持设置未来某时刻的时间戳或相对剩余时间，单位 msnumber0
    valueStyle设置倒计时的样式CSSProperties{}
    active是否处于计时状态，仅当 future: false 时生效booleantrue

    Slots ​

    名称说明类型
    title自定义倒计时标题v-slot:title
    prefix自定义倒计时的前缀v-slot:prefix
    suffix自定义倒计时的后缀v-slot:suffix
    finish自定义完成后的展示文本v-slot:finish

    Methods ​

    名称说明类型
    reset重置倒计时() => void

    Events ​

    名称说明类型
    finish倒计时结束的回调() => void
    - + \ No newline at end of file diff --git a/guide/components/datepicker.html b/guide/components/datepicker.html index 94c4f48f8..502fdfb1b 100644 --- a/guide/components/datepicker.html +++ b/guide/components/datepicker.html @@ -303,7 +303,7 @@ v-model="yearValue" /> </template>

    APIs ​

    DatePicker ​


    更多使用 API 请参考 官方文档

    参数说明类型默认值
    width日期选择器宽度，单位 pxnumber180
    mode选择器模式'time' | 'date' | 'week' | 'month' | 'year''date'
    format日期展示格式string | ((date: Date) => string) | ((dates: Date[]) => string)DefaultFormat
    showTime是否增加时间选择booleanfalse
    showToday是否展示”今天“按钮booleanfalse
    modelValue
    v-model
    		双向绑定值number | string | object | arraynull
    modelTypev-model 值类型，可选 timestamp: 时间戳、format: 字符串，mode 为 week 或 year 时，该配置不生效'timestamp' | 'format''format'

    DefaultFormat Value ​

    类型值
    Single picker'MM/dd/yyyy HH:mm'
    Range picker'MM/dd/yyyy HH:mm - MM/dd/yyyy HH:mm'
    Month picker'MM/yyyy'
    Time picker'HH:mm'
    Time picker range'HH:mm - HH:mm'
    Week picker'ww-yyyy'

    format 支持的格式化占位符列表 ​

    标识示例描述
    yy23年，两位数
    yyyy2023年，四位数
    M1-12月
    MM01-12月，两位数
    d1-31日
    dd01-31日，两位数
    H0-23小时
    HH00-23小时，两位数
    m0-59分钟
    mm00-59分钟，两位数
    s0-59秒
    ss00-59秒，两位数
    w1-52第几周
    ww01-52第几周，两位数
    - + \ No newline at end of file diff --git a/guide/components/descriptions.html b/guide/components/descriptions.html index 5340e1ba1..44f569a20 100644 --- a/guide/components/descriptions.html +++ b/guide/components/descriptions.html @@ -438,7 +438,7 @@ </Descriptions> </Flex> </template>

    APIs ​

    Descriptions ​

    参数说明类型默认值
    title描述列表的标题，显示在最顶部string | slotundefined
    extra描述列表的操作区域，显示在右上方string | slotundefined
    bordered是否展示边框booleanfalse
    vertical是否使用垂直描述列表booleanfalse
    size设置列表的大小'default' | 'middle' | 'small''default'
    column一行的 DescriptionItems 数量，可以写成数值或支持响应式的对象写法 { xs: 8, sm: 16, md: 24 }number | Responsive{xs: 1, sm: 2, md: 3}
    labelStyle自定义标签样式，优先级低于 DescriptionItems 的 labelStyleCSSProperties{}
    contentStyle自定义内容样式，优先级低于 DescriptionItems 的 contentStyleCSSProperties{}

    Responsive Type ​

    名称说明类型默认值
    xs<576px 响应式栅格numberundefined
    sm≥576px 响应式栅格numberundefined
    md≥768px 响应式栅格numberundefined
    lg≥992px 响应式栅格numberundefined
    xl≥1200px 响应式栅格numberundefined
    xxl≥1600px 响应式栅格numberundefined

    DescriptionsItem ​

    参数说明类型默认值
    label内容的描述标签string | slotundefined
    span包含列的数量，当使用水平列表且未设置 span 时等效于 span: 1，但最后一行的最后一项，会包含该行剩余的所有列数numberundefined
    labelStyle自定义标签样式，优先级高于 Description 的 labelStyleCSSProperties{}
    contentStyle自定义内容样式，优先级高于 Description 的 contentStyleCSSProperties{}

    Slots ​

    Descriptions Slots ​

    名称说明类型
    title自定义描述列表的标题v-slot:title
    extra自定义描述列表的操作区域v-slot:extra

    DescriptionsItem Slots ​

    名称说明类型
    label自定义描述标签v-slot:label
    default自定义内容v-slot:default
    - + \ No newline at end of file diff --git a/guide/components/dialog.html b/guide/components/dialog.html index 6901007e3..4357952db 100644 --- a/guide/components/dialog.html +++ b/guide/components/dialog.html @@ -461,7 +461,7 @@ <p>Bla bla ...</p> </Dialog> </template>

    APIs ​

    Dialog ​

    参数说明类型默认值
    width对话框宽度，单位 pxstring | number520
    height对话框高度，单位 px，默认自适应内容高度string | number'auto'
    title标题string | slotundefined
    titleStyle自定义标题样式CSSProperties{}
    content内容string | slotundefined
    contentStyle自定义内容样式CSSProperties{}
    bodyClass自定义 body 类名stringundefined
    bodyStyle自定义 body 样式CSSProperties{}
    scrollbarPropsScrollbar 组件属性配置，参考 Scrollbar Props，用于设置内容滚动条的样式object{}
    cancelText取消按钮文字string'取消'
    cancelProps取消按钮 props 配置，参考 Button Propsobject{}
    okText确定按钮文字string'确定'
    okType确定按钮类型'primary' | 'danger''primary'
    okProps确认按钮 props 配置，优先级高于 okType，参考 Button Propsobject{}
    footer是否显示底部按钮boolean | slottrue
    destroyOnClose关闭时是否销毁 Dialog 里的子元素booleanfalse
    switchFullscreen是否允许切换全屏，允许后右上角会出现一个切换按钮booleanfalse
    centered是否水平垂直居中，否则固定高度水平居中booleanfalse
    top固定高度水平居中时，距顶部高度，仅当 centered: false 时生效，单位 pxstring | number100
    transformOrigin对话框动画出现的位置'mouse' | 'center''mouse'
    confirmLoading确定按钮 loadingbooleanfalse
    blockScroll是否在打开对话框时禁用背景滚动booleantrue
    keyboard是否支持键盘 esc 关闭booleantrue
    maskClosable点击蒙层是否允许关闭booleantrue
    maskStyle自定义蒙层样式CSSProperties{}
    open
    v-model
    		对话框是否可见booleanfalse

    Slots ​

    名称说明类型
    title自定义标题v-slot:title
    default自定义内容v-slot:default
    footer自定义底部内容v-slot:footer

    Events ​

    名称说明类型
    cancel点击蒙层或 Esc 键或右上角叉或取消按钮的回调() => void
    ok点击确定的回调() => void
    - + \ No newline at end of file diff --git a/guide/components/divider.html b/guide/components/divider.html index b333ef291..c8a6ac9f4 100644 --- a/guide/components/divider.html +++ b/guide/components/divider.html @@ -78,7 +78,7 @@ <Divider vertical :border-width="3" border-style="dotted" border-color="orange" height="100%" /> </Flex> </template>

    APIs ​

    Divider ​

    参数说明类型默认值
    orientation分割线标题的位置'left' | 'center' | 'right''center'
    orientationMargin标题和最近 left / right 边框之间的距离，去除了分割线，同时 orientation 必须为 left 或 rightstring | numberundefined
    borderWidth分割线宽度，单位 pxnumber1
    borderStyle分割线样式'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset''solid'
    borderColor分割线颜色string'rgba(5, 5, 5, 0.06)'
    vertical垂直分割线高度，仅当 vertical: true 时生效string | number'0.9em'

    Slots ​

    名称说明类型
    default自定义内容v-slot:default
    - + \ No newline at end of file diff --git a/guide/components/drawer.html b/guide/components/drawer.html index 0275c6f4d..8f3fe633e 100644 --- a/guide/components/drawer.html +++ b/guide/components/drawer.html @@ -244,7 +244,7 @@ <p>Some contents...</p> </Drawer> </template>

    APIs ​

    Drawer ​

    参数说明类型默认值
    width抽屉宽度，在 placement 为 right 或 left 时使用，单位 pxstring | number378
    height抽屉高度，在 placement 为 top 或 bottom 时使用，单位 pxstring | number378
    title标题string | slotundefined
    closable是否显示左上角的关闭按钮booleantrue
    placement抽屉的方向'top' | 'right' | 'bottom' | 'left''right'
    headerClass设置 Drawer 头部的类名stringundefined
    headerStyle设置 Drawer 头部的样式CSSProperties{}
    bodyClass设置 Drawer 内容部分的类名stringundefined
    bodyStyle设置 Drawer 内容部分的样式CSSProperties{}
    scrollbarPropsScrollbar 组件属性配置，参考 Scrollbar Props，用于设置内容滚动条的样式object{}
    extra抽屉右上角的操作区域string | slotundefined
    footer抽屉的页脚string | slotundefined
    footerClass设置 Drawer 页脚的类名stringundefined
    footerStyle设置 Drawer 页脚的样式CSSProperties{}
    destroyOnClose关闭时是否销毁 Drawer 里的子元素booleanfalse
    zIndex设置 Drawer 的 z-indexnumber1000
    open
    v-model
    		抽屉是否可见booleanfalse

    Slots ​

    名称说明类型
    title自定义标题v-slot:title
    extra自定义抽屉右上角的操作区域v-slot:extra
    default自定义抽屉内容v-slot:default
    footer自定义抽屉的页脚v-slot:footer

    Events ​

    名称说明类型
    close点击遮罩层或左上角叉或取消按钮的回调(e: Event) => void
    - + \ No newline at end of file diff --git a/guide/components/ellipsis.html b/guide/components/ellipsis.html index beefc494d..049f69f81 100644 --- a/guide/components/ellipsis.html +++ b/guide/components/ellipsis.html @@ -112,7 +112,7 @@ Hide Arrow 住在我心里孤独的 孤独的海怪 痛苦之王 开始厌倦 深海的光 停滞的海浪 </Ellipsis> </template>

    更多使用方式请参考 文字提示 Tooltip

    APIs ​

    Ellipsis ​

    参数说明类型默认值
    maxWidth文本最大宽度，单位 pxstring | number'100%'
    tooltipMaxWidth弹出提示最大宽度，单位 px，默认为 文本宽度 + 24string | numberundefined
    line最大行数numberundefined
    expand是否启用点击文本展开全部booleanfalse
    tooltip是否启用文本提示框，可自定义设置弹出提示内容boolean | slottrue

    更多属性请参考 Tooltip

    Slots ​

    名称说明类型
    tooltip自定义弹出提示内容v-slot:tooltip
    default自定义展示内容v-slot:default

    Events ​

    名称说明类型
    expandChange点击文本展开收起时的回调(expand: boolean) => void
    - + \ No newline at end of file diff --git a/guide/components/empty.html b/guide/components/empty.html index f69e87082..6da53347e 100644 --- a/guide/components/empty.html +++ b/guide/components/empty.html @@ -94,7 +94,7 @@ stroke: rgb(169, 174, 184); } </style>

    APIs ​

    Empty ​

    参数说明类型默认值
    description自定义描述内容string | slot'暂无数据'
    descriptionStyle设置描述文本的样式CSSProperties{}
    image显示图片的链接，或者选择两种预置风格图片'filled' | 'outlined' | string | slot'filled'
    imageStyle设置图片的样式CSSProperties{}
    footer设置底部内容slotundefined

    Slots ​

    名称说明类型
    description自定义描述内容v-slot:description
    default自定义图片v-slot:default
    footer自定义底部内容v-slot:footer
    - + \ No newline at end of file diff --git a/guide/components/flex.html b/guide/components/flex.html index bbf8877c3..c1ce8c028 100644 --- a/guide/components/flex.html +++ b/guide/components/flex.html @@ -214,7 +214,7 @@ <Button v-for="n in 16" :key="n" type="primary">Button</Button> </Flex> </template>

    APIs ​

    Flex ​

    参数说明类型默认值
    width弹性区域总宽度，单位 pxstring | number'auto'
    verticalflex 主轴的方向是否垂直，vertical 使用 flex-direction: columnbooleanfalse
    wrap设置元素单行显示还是多行显示；参考 flex-wrap'nowrap' | 'wrap' | 'wrap-reverse''nowrap'
    justify设置元素在主轴方向上的对齐方式；参考 justify-contentstring'normal'
    align设置元素在交叉轴方向上的对齐方式；参考 align-itemsstring'normal'
    gap设置网格之间的间隙，数组时表示: [水平间距, 垂直间距]number | number[] | 'small' | 'middle' | 'large''middle'

    Slots ​

    名称说明类型
    default自定义内容v-slot:default
    - + \ No newline at end of file diff --git a/guide/components/floatbutton.html b/guide/components/floatbutton.html index e8db9a25e..2ecf28923 100644 --- a/guide/components/floatbutton.html +++ b/guide/components/floatbutton.html @@ -517,7 +517,7 @@ </FloatButton> </Card> </template>

    APIs ​

    FloatButton ​

    参数说明类型默认值
    top按钮定位的上边距，单位 pxnumber | stringundefined
    bottom按钮定位的下边距，单位 pxnumber | string40
    left按钮定位的左边距，单位 pxnumber | stringundefined
    right按钮定位的右边距，单位 pxnumber | string40
    zIndex设置按钮的 z-indexnumber9
    width浮动按钮宽度，单位 pxnumber | string44
    height浮动按钮高度，单位 pxnumber | string44
    type浮动按钮类型'default' | 'primary''default'
    shape浮动按钮形状'circle' | 'square''circle'
    icon浮动按钮图标VNode | Slotundefined
    description文字描述信息string | slotundefined
    href点击跳转的地址，指定此属性按钮的行为和 a 链接一致stringundefined
    target相当于 a 标签的 target 属性，href 存在时生效'self' | '_blank''self'
    menuTrigger浮动按钮菜单显示的触发方式'click' | 'hover'undefined
    tooltip气泡卡片的内容sring | slotundefined
    tooltipPropsTooltip 组件属性配置，参考 Tooltip Propsobject{}
    badgeProps带徽标的浮动按钮（不支持 status 以及相关属性），参考 Badge Propsobject{}

    Slots ​

    名称说明类型
    icon自定义浮动按钮图标v-slot:icon
    description自定义文字描述信息v-slot:description
    menu自定义菜单按钮v-slot:menu
    tooltip自定义气泡卡片的内容v-slot:tooltip

    Events ​

    名称说明类型
    click点击浮动按钮时的回调(e: Event) => void
    openChange浮动按钮菜单展开收起时的回调(open: boolean) => void
    - + \ No newline at end of file diff --git a/guide/components/gradienttext.html b/guide/components/gradienttext.html index c5b2b20b7..584c45abf 100644 --- a/guide/components/gradienttext.html +++ b/guide/components/gradienttext.html @@ -92,7 +92,7 @@ <GradientText :size="24" :weight="500" gradient="linear-gradient(90deg, #1677ff 0%, lime 50%, #ff6900 100%)">瞎写的颜色</GradientText> </Space> </template>

    APIs ​

    GradientText ​

    参数说明类型默认值
    gradient文字渐变色参数string | Gradientundefined
    size文字大小，不指定单位时，默认单位 pxnumber | string14
    weight文字粗细number400
    type渐变文字的类型'primary' | 'info' | 'success' | 'warning' | 'error''primary'

    Gradient Type ​

    名称说明类型默认值
    from起始颜色stringundefined
    to终点颜色stringundefined
    deg?渐变角度，单位 degnumber | string252

    Slots ​

    名称说明类型
    default自定义内容v-slot:default
    - + \ No newline at end of file diff --git a/guide/components/grid.html b/guide/components/grid.html index b97c73017..1a0544678 100644 --- a/guide/components/grid.html +++ b/guide/components/grid.html @@ -565,7 +565,7 @@ } } </style>

    APIs ​

    Row ​

    参数说明类型默认值
    width行宽度，单位 pxstring | number'auto'
    gutter栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 [水平间距, 垂直间距]number | [number | Responsive, number | Responsive] | Responsive0
    wrap是否自动换行booleanfalse
    align垂直对齐方式'top' | 'middle' | 'bottom' | 'stretch''top'
    justify水平排列方式'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly''start'

    Responsive Type ​

    名称说明类型默认值
    xs<576px 响应式栅格numberundefined
    sm≥576px 响应式栅格numberundefined
    md≥768px 响应式栅格numberundefined
    lg≥992px 响应式栅格numberundefined
    xl≥1200px 响应式栅格numberundefined
    xxl≥1600px 响应式栅格numberundefined

    Col ​

    参数说明类型默认值
    span栅格占位格数，取 0,1,2...24，为 0 时相当于 display: none，优先级低于 xs, sm, md, lg, xl, xxlnumberundefined
    offset栅格左侧的间隔格数，取 0,1,2...24number0
    flexflex 布局填充string | numberundefined
    order栅格顺序，取 0,1,2...number0
    xs<576px 响应式栅格number | {span?: number, offset?: number}undefined
    sm≥576px 响应式栅格number | {span?: number, offset?: number}undefined
    md≥768px 响应式栅格number | {span?: number, offset?: number}undefined
    lg≥992px 响应式栅格number | {span?: number, offset?: number}undefined
    xl≥1200px 响应式栅格number | {span?: number, offset?: number}undefined
    xxl≥1600px 响应式栅格number | {span?: number, offset?: number}undefined

    Slots ​

    Row Slots ​

    名称说明类型
    default自定义行内容v-slot:default

    Col Slots ​

    名称说明类型
    default自定义列内容v-slot:default
    - + \ No newline at end of file diff --git a/guide/components/image.html b/guide/components/image.html index 6b7b78db6..b3d3830d5 100644 --- a/guide/components/image.html +++ b/guide/components/image.html @@ -213,7 +213,7 @@ :max-zoom-scale="2" src="https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/1.jpg" /> </template>

    APIs ​

    Image ​

    参数说明类型默认值
    src图像地址或图像地址数组string | Image[]undefined
    name图像名称，没有传入图片名时自动从图像地址 src 中读取stringundefined
    width图像宽度，单位 pxstring | number | (string | number)[]100
    height图像高度，单位 pxstring | number | (string | number)[]100
    bordered是否显示边框booleantrue
    fit图片在容器内的的适应类型，参考 object-fit'contain' | 'fill' | 'cover' | 'none' | 'scale-down''contain'
    preview预览文本string | slot'预览'
    spacePropsSpace 组件属性配置，参考 Space Props，用于配置多张展示图片时的排列方式object{}
    spinPropsSpin 组件属性配置，参考 Spin Props，用于配置图片加载中样式object{}
    zoomRatio每次缩放比率number0.1
    minZoomScale最小缩放比例number0.1
    maxZoomScale最大缩放比例number10
    resetOnDbclick缩放移动旋转图片后，是否可以双击还原booleantrue
    loop是否可以循环切换图片booleanfalse
    album是否相册模式，即从一张展示图片点开相册booleanfalse

    Image Type ​

    名称说明类型默认值
    src图像地址stringundefined
    name?图像名称stringundefined

    Slots ​

    名称说明类型
    preview自定义预览文本v-slot:preview

    Methods ​

    名称说明类型
    preview预览索引为 index 的图片，从 0 开始(index: number) => void
    - + \ No newline at end of file diff --git a/guide/components/input.html b/guide/components/input.html index 17352b816..8f54912af 100644 --- a/guide/components/input.html +++ b/guide/components/input.html @@ -203,7 +203,7 @@ <template> <Input disabled v-model:value="value" placeholder="disabled input" /> </template>

    APIs ​

    Input ​

    参数说明类型默认值
    width输入框宽度，单位 pxstring | number'100%'
    size输入框大小'small' | 'middle' | 'large''middle'
    addonBefore设置前置标签string | slotundefined
    addonAfter设置后置标签string | slotundefined
    prefix前缀图标string | slotundefined
    suffix后缀图标string | slotundefined
    allowClear可以点击清除图标删除内容booleanfalse
    password是否启用密码框booleanfalse
    disabled是否禁用booleanfalse
    placeholder文本输入的占位符stringundefined
    maxlength最大长度numberundefined
    showCount是否展示字数booleanfalse
    value
    v-model
    		输入框内容stringundefined

    Slots ​

    名称说明类型
    addonBefore自定义前置标签v-slot:addonBefore
    addonAfter自定义后置标签v-slot:addonAfter
    prefix自定义前缀图标v-slot:prefix
    suffix自定义后缀图标v-slot:suffix

    Events ​

    名称说明类型
    change输入框内容变化时的回调(e: Event) => void
    enter按下回车的回调(e: Event) => void
    - + \ No newline at end of file diff --git a/guide/components/inputnumber.html b/guide/components/inputnumber.html index ee726fa0b..1e01899a3 100644 --- a/guide/components/inputnumber.html +++ b/guide/components/inputnumber.html @@ -150,7 +150,7 @@ <InputNumber v-model:value="value" :disabled="disabled" /> </Space> </template>

    APIs ​

    InputNumber ​

    参数说明类型默认值
    width数字输入框宽度，单位 pxstring | number90
    min最小值number-Infinity
    max最大值numberInfinity
    step每次改变步数，可以为小数number1
    precision数值精度number0
    prefix前缀图标string | slotundefined
    formatter指定展示值的格式(value: number | string) => stringundefined
    parser指定从 formatter 里转换回数字的方式，和 formatter 搭配使用(value: string) => numberundefined
    keyboard是否启用键盘快捷键行为（上方向键增，下方向键减）booleantrue
    disabled是否禁用booleanfalse
    placeholder数字输入的占位符stringundefined
    value
    v-model
    		当前值numberundefined

    Slots ​

    名称说明类型
    prefix自定义前缀图标v-slot:prefix

    Events ​

    名称说明类型
    change变化回调(value: number) => void
    - + \ No newline at end of file diff --git a/guide/components/inputsearch.html b/guide/components/inputsearch.html index 7c7c139bd..1abbe23d9 100644 --- a/guide/components/inputsearch.html +++ b/guide/components/inputsearch.html @@ -380,7 +380,7 @@ </InputSearch> </Space> </template>

    APIs ​

    InputSearch ​

    参数说明类型默认值
    width搜索框宽度，单位 pxstring | number'100%'
    icon搜索图标boolean | slottrue
    search搜索按钮，默认时为搜索图标string | slotundefined
    searchProps设置搜索按钮的属性，参考 Button Propsobject{}
    size搜索框大小'small' | 'middle' | 'large''middle'
    addonBefore设置前置标签string | slotundefined
    prefix前缀图标stringundefined
    suffix后缀图标stringundefined
    allowClear可以点击清除图标删除搜索框内容booleanfalse
    loading是否搜索中booleanfalse
    disabled是否禁用booleanfalse
    placeholder搜索框输入的占位符stringundefined
    maxlength文本最大长度numberundefined
    showCount是否展示字数booleanfalse
    value
    v-model
    		搜索框内容stringundefined

    Slots ​

    名称说明类型
    icon自定义搜索图标v-slot:icon
    search自定义搜索按钮v-slot:search
    addonBefore自定义前置标签v-slot:addonBefore
    prefix自定义前缀图标v-slot:prefix
    suffix自定义后缀图标v-slot:suffix

    Events ​

    名称说明类型
    change搜索框内容变化时的回调(e: Event) => void
    enter点击搜索或按下回车键时的回调(value: string) => void
    - + \ No newline at end of file diff --git a/guide/components/list.html b/guide/components/list.html index b4ac6433d..0f12cdece 100644 --- a/guide/components/list.html +++ b/guide/components/list.html @@ -685,7 +685,7 @@ </List> </Flex> </template>

    APIs ​

    List ​

    参数说明类型默认值
    bordered是否展示边框booleanfalse
    vertical是否使用竖直样式booleanfalse
    split是否展示分割线booleantrue
    size列表尺寸'small' | 'middle' | 'large''middle'
    loading是否加载中booleanfalse
    hoverable是否显示悬浮样式booleanfalse
    header列表头部string | slotundefined
    footer列表底部string | slotundefined
    spinPropsSpin 组件属性配置，参考 Spin Props，用于配置列表加载中样式object{}
    emptyPropsEmpty 组件属性配置，参考 Empty Props，用于配置暂无数据样式object{}
    showPagination是否显示分页booleanfalse
    paginationPagination 组件属性配置，参考 Pagination Props，用于配置分页功能object{}

    ListItem ​

    参数说明类型默认值
    avatar列表元素的图标string | slotundefined
    avatarPropsAvatar 组件属性配置，参考 Avatar Props，用于配置列表图标样式object{}
    title列表元素的标题string | slotundefined
    description列表元素的描述内容string | slotundefined
    actions列表操作组slotundefined
    extra额外内容，展示在列表右侧string | slotundefined
    avatarStyle设置图标的样式CSSProperties{}
    titleStyle设置标题的样式CSSProperties{}
    descriptionStyle设置描述内容的样式CSSProperties{}
    contentStyle设置内容的样式CSSProperties{}
    actionsStyle设置操作区域的样式CSSProperties{}
    extraStyle设置额外内容的样式CSSProperties{}

    Slots ​

    List Slots ​

    名称说明类型
    header自定义列表头部v-slot:header
    default自定义内容v-slot:default
    footer自定义列表底部v-slot:footer

    ListItem Slots ​

    名称说明类型
    avatar自定义列表元素的图标v-slot:avatar
    title自定义列表元素的标题v-slot:title
    description自定义列表元素的描述内容v-slot:description
    default自定义内容v-slot:default
    actions自定义列表操作组v-slot:actions
    extra自定义额外内容v-slot:extra
    - + \ No newline at end of file diff --git a/guide/components/loadingbar.html b/guide/components/loadingbar.html index d7697b8f9..6b85454e0 100644 --- a/guide/components/loadingbar.html +++ b/guide/components/loadingbar.html @@ -109,7 +109,7 @@ color-error="magenta" /> </template>

    APIs ​

    LoadingBar ​

    参数说明类型默认值
    containerClass加载条容器的类名stringundefined
    containerStyle加载条容器的样式CSSProperties{}
    loadingBarSize加载条大小，单位 pxnumber2
    colorLoading加载中颜色string'#1677ff'
    colorFinish加载完成颜色string'#1677ff'
    colorError加载错误颜色string'#ff4d4f'
    to加载条的挂载位置，可选：元素标签名（例如 body）或者元素本身string | HTMLElement'body'

    Methods ​

    名称说明类型
    start开始加载的回调函数(from = 0, to = 80) => void
    finish结束加载的回调函数() => void
    error出现错误的回调函数() => void
    - + \ No newline at end of file diff --git a/guide/components/message.html b/guide/components/message.html index 6b03ab4ae..2253a0d18 100644 --- a/guide/components/message.html +++ b/guide/components/message.html @@ -207,7 +207,7 @@ <template> <Button @click="onClick">按钮</Button> </template> - + \ No newline at end of file diff --git a/guide/components/modal.html b/guide/components/modal.html index 449ea7647..65c3c6a2c 100644 --- a/guide/components/modal.html +++ b/guide/components/modal.html @@ -463,7 +463,7 @@ <template> <Button @click="onClick">按钮</Button> </template> - + \ No newline at end of file diff --git a/guide/components/notification.html b/guide/components/notification.html index 9f04900b5..6de0d1a5f 100644 --- a/guide/components/notification.html +++ b/guide/components/notification.html @@ -226,7 +226,7 @@ </Space> <Notification ref="notification" @close="onClose" /> </template>

    APIs ​

    Notification ​

    参数说明类型默认值
    title通知提醒标题stringundefined
    description通知提醒内容stringundefined
    duration自动关闭的延时时长，单位 ms，默认 4500ms；设置 null 时，不自动关闭number | null4500
    top消息从顶部弹出时，距离顶部的位置，单位 pxnumber24
    bottom消息从底部弹出时，距离底部的位置，单位 pxnumber24
    placement消息弹出位置'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight''topRight'

    Notification Type ​


    调用时传入的 Notification 类型，以下属性均具有更高优先级

    名称说明类型默认值
    title?通知提醒标题stringundefined
    description?通知提醒内容stringundefined
    icon?自定义图标VNodeundefined
    class?自定义类名stringundefined
    style?自定义样式stringundefined
    duration?自动关闭的延时时长，单位 ms；设置 null 时，不自动关闭number | nullundefined
    placement?通知提醒弹出位置'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight'undefined
    onClose关闭时的回调函数Functionundefined

    Methods ​

    名称说明类型
    open基本通知提醒(data: Notification) => void
    info信息通知提醒(data: Notification) => void
    success成功通知提醒(data: Notification) => void
    error失败通知提醒(data: Notification) => void
    warning警告通知提醒(data: Notification) => void

    Events ​

    名称说明类型
    close通知提醒关闭时的回调() => void
    - + \ No newline at end of file diff --git a/guide/components/numberanimation.html b/guide/components/numberanimation.html index fe3194577..e6ce6ed08 100644 --- a/guide/components/numberanimation.html +++ b/guide/components/numberanimation.html @@ -128,7 +128,7 @@ </Statistic> </Space> </template>

    APIs ​

    NumberAnimation ​

    参数说明类型默认值
    from数值动画起始数值number0
    to数值目标值number1000
    duration数值动画持续时间，单位 msnumber3000
    autoplay是否自动开始动画booleantrue
    precision精度，保留小数点后几位number0
    prefix前缀stringundefined
    suffix后缀stringundefined
    separator千分位分隔符string','
    decimal小数点字符string'.'
    valueStyle数值文本样式CSSProperties{}
    transition动画过渡效果TransitionFunc'easeInOutCubic'

    TransitionFunc Type ​

    名称值
    TransitionFunc'linear' | 'easeOutSine' | 'easeInOutSine' | 'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' | 'easeInQuart' | 'easeOutQuart' | 'easeInOutQuart' | 'easeInQuint' | 'easeOutQuint' | 'easeInOutQuint' | 'easeInExpo' | 'easeOutExpo' | 'easeInOutExpo' | 'easeInCirc' | 'easeOutCirc' | 'easeInOutCirc' | 'easeInBack' | 'easeOutBack' | 'easeInOutBack'

    Methods ​

    名称说明类型
    play播放动画() => void

    Events ​

    名称说明类型
    started动画开始播放() => void
    finished动画播放完成() => void
    - + \ No newline at end of file diff --git a/guide/components/pagination.html b/guide/components/pagination.html index 8c2ae4cbe..7bf5d55d3 100644 --- a/guide/components/pagination.html +++ b/guide/components/pagination.html @@ -207,7 +207,7 @@ <template> <Pagination disabled v-model:page="page" :total="total" show-quick-jumper @change="onChange" /> </template>

    APIs ​

    Pagination ​

    参数说明类型默认值
    page
    v-model
    		当前页数number1
    pageSize
    v-model
    		每页条数number10
    total数据总数number0
    disabled是否禁用booleanfalse
    pageAmount显示的页码数number5
    hideOnSinglePage只有一页时是否隐藏分页booleanfalse
    showQuickJumper是否可以快速跳转至某页booleanfalse
    showSizeChanger是否展示 pageSize 切换器，当 total 大于 50 时默认为 truebooleanundefined
    pageSizeOptions设置每页可以显示多少条string[] | number[][10, 20, 50 ,100]
    showTotal用于显示数据总量和当前数据顺序boolean | ((total: number, range: number[]) => string)false
    placement分页展示位置'left' | 'center' | 'right''center'
    size分页按钮大小'large' | 'middle' | 'small''large'

    Events ​

    名称说明类型
    change页码 page 或每页条数 pageSize 改变的回调(page: number, pageSize: number) => void
    pageSizeChange每页条数 pageSize 变化的回调(page: number, pageSize: number) => void
    - + \ No newline at end of file diff --git a/guide/components/popconfirm.html b/guide/components/popconfirm.html index 930e92f8e..4817976fa 100644 --- a/guide/components/popconfirm.html +++ b/guide/components/popconfirm.html @@ -349,7 +349,7 @@ </Popconfirm> <Message ref="message" /> </template>

    更多使用方式请参考 文字提示 Tooltip

    APIs ​

    Popconfirm ​

    参数说明类型默认值
    title弹出确认框的标题string | slotundefined
    titleStyle设置标题的样式CSSProperties{}
    description弹出确认框的内容描述string | slotundefined
    descriptionStyle设置内容描述的样式CSSProperties{}
    keyboard是否支持按键操作 (enter 显示；esc 关闭)booleantrue
    tooltipStyle设置弹出提示的样式CSSProperties{}
    icon自定义弹出确认框 Icon 图标'success' | 'info' | 'warning' | 'danger' | VNode | Slot'warning'
    iconStyle设置 Icon 图标的样式，一般不需要设置，主要用于自定义 Icon 图标时CSSProperties{}
    cancelText取消按钮文字string | slot'取消'
    cancelType取消按钮类型'default' | 'reverse' | 'primary' | 'danger' | 'dashed' | 'text' | 'link''default'
    cancelProps取消按钮 props，优先级高于 cancelType，参考 Button Propsobject{}
    okText确认按钮文字string | slot'确定'
    okType确认按钮类型'default' | 'reverse' | 'primary' | 'danger' | 'dashed' | 'text' | 'link''primary'
    okProps确认按钮 props，优先级高于 okType，参考 Button Propsobject{}
    showCancel是否显示取消按钮booleantrue

    更多属性请参考 Tooltip

    Slots ​

    名称说明类型
    title自定义弹出确认框的标题v-slot:title
    description自定义弹出确认框的内容描述v-slot:description
    icon自定义图标v-slot:icon
    cancelText自定义取消按钮文字v-slot:cancelText
    okText自定义确认按钮文字v-slot:okText
    default自定义内容v-solt:default

    Events ​

    名称说明类型
    cancel点击取消的回调(e: Event) => void
    ok点击确认的回调(e: Event) => void
    openChange显示隐藏的回调(open: boolean) => void
    - + \ No newline at end of file diff --git a/guide/components/popover.html b/guide/components/popover.html index 9481cf0c6..ec986c855 100644 --- a/guide/components/popover.html +++ b/guide/components/popover.html @@ -139,7 +139,7 @@ <Button type="primary">Hide Arrow</Button> </Popover> </template>

    更多使用方式请参考 文字提示 Tooltip

    APIs ​

    Popover ​

    参数说明类型默认值
    title卡片标题string | slotundefined
    titleStyle卡片标题样式CSSProperties{}
    content卡片内容string | slotundefined
    contentStyle卡片内容样式CSSProperties{}
    keyboard是否支持按键操作 (enter 显示；esc 关闭)booleantrue
    tooltipStyle设置弹出提示的样式CSSProperties{}

    更多属性请参考 Tooltip

    Slots ​

    名称说明类型
    title自定义卡片标题v-slot:title
    content自定义卡片内容v-slot:content
    default自定义内容v-solt:default

    Events ​

    名称说明类型
    openChange显示隐藏的回调(open: boolean) => void
    - + \ No newline at end of file diff --git a/guide/components/progress.html b/guide/components/progress.html index fa100edfb..66cfe3b68 100644 --- a/guide/components/progress.html +++ b/guide/components/progress.html @@ -385,7 +385,7 @@ </Space> </Flex> </template>

    APIs ​

    Progress ​

    参数说明类型默认值
    width进度条宽度，单位 px；type: 'line' 时，为进度条宽度，默认值 '100%'；type: 'circle' 时，为进度圈宽高，默认值 120string | numberundefined
    percent当前进度百分比number0
    lineSize进度条的尺寸，单位 px；type: 'line' 时，为进度条线高，默认值 8；type: 'circle' 时，单位是进度圈画布宽度的百分比，默认值 6numberundefined
    lineColor进度条的色彩，传入 string 时为纯色，传入 Gradient 时为渐变；进度圈时 direction: 'left' 为逆时针，direction: 'right' 为顺时针string | Gradient'#1677FF'
    lineCap进度条边缘的形状'round' | 'square''round'
    showInfo是否显示进度数值或状态图标booleantrue
    infoSize进度数值或状态图标的尺寸，单位 px；type: 'line' 时，默认值 14；type: 'circle' 时，默认值 24numberundefined
    success进度完成时的信息string | slotundefined
    format内容的模板函数(percent: number) => (string | number) | slot(percent: number) => percent + '%'
    type进度条类型'line' | 'circle''line'

    Gradient Type ​

    名称说明类型默认值
    '0%'?起始值stringundefined
    '100%'?终点值stringundefined
    from?起始值stringundefined
    to?终点值stringundefined
    direction?渐变方向'right' | 'left''right'

    Slots ​

    名称说明类型
    success自定义进度完成时的信息v-slot:success
    format自定义格式化内容v-slot:format="{ percent }"
    - + \ No newline at end of file diff --git a/guide/components/qrcode.html b/guide/components/qrcode.html index 972174295..688065bed 100644 --- a/guide/components/qrcode.html +++ b/guide/components/qrcode.html @@ -100,7 +100,7 @@ <Textarea v-model:value="value" :width="200" allowClear /> </Space> </template>

    APIs ​

    QRCode ​

    参数说明类型默认值
    value扫描后的文本或地址stringundefined
    size二维码大小，单位 pxnumber160
    color二维码颜色，Value must be in hex format (十六进制颜色值)string'#000'
    bgColor二维码背景色，Value must be in hex format (十六进制颜色值)string'#FFF'
    bordered是否有边框booleantrue
    borderColor边框颜色string'#0505050f'
    scale每个 black dots 多少像素number8
    errorLevel二维码纠错等级'L' | 'M' | 'Q' | 'H''H'
    - + \ No newline at end of file diff --git a/guide/components/radio.html b/guide/components/radio.html index 1879065af..d764e8c42 100644 --- a/guide/components/radio.html +++ b/guide/components/radio.html @@ -453,7 +453,7 @@ <Radio :options="options" v-model:value="value" button button-style="solid" :button-size="buttonSize" /> </Space> </template>

    APIs ​

    Radio ​

    参数说明类型默认值
    options单选框选项数据Option[][]
    disabled是否禁用booleanfalse
    vertical是否垂直排列，仅当 button: false 时生效booleanfalse
    checked
    v-model
    		当前是否选中booleanfalse
    gap多个单选框之间的间距；垂直排列时为垂直间距，单位 px；数组间距用于水平排列折行时：[水平间距, 垂直间距]；仅当 button: false 时生效number | number[]8
    button是否启用按钮样式booleanfalse
    buttonStyle按钮样式风格'outline' | 'solid''outline'
    buttonSize按钮大小；仅当 button: true 时生效'small' | 'middle' | 'large''middle'
    value
    v-model
    		当前选中的值string | number | booleanundefined

    Option Type ​

    名称说明类型默认值
    label选项名stringundefined
    value选项值string | number | booleanundefined
    disabled?是否禁用选项booleanundefined

    Slots ​

    名称说明类型
    default自定义选项名v-slot:default="{ option, label, index }"

    Events ​

    名称说明类型
    change选项变化时的回调函数(value: string | number | boolean) => void
    - + \ No newline at end of file diff --git a/guide/components/rate.html b/guide/components/rate.html index 29701a9f6..8d9803c10 100644 --- a/guide/components/rate.html +++ b/guide/components/rate.html @@ -258,7 +258,7 @@ /> </Badge> </template>

    APIs ​

    Rate ​

    参数说明类型默认值
    allowClear是否允许再次点击后清除booleantrue
    allowHalf是否允许半选booleanfalse
    countstar 总数number5
    character字符或图标，预置四种图标'star-outlined' | 'star-filled' | 'heart-outlined' | 'heart-filled' | string | slot'star-filled'
    size字符大小，单位 pxnumber20
    color字符选中颜色string'#fadb14'
    gap字符间距，单位 pxnumber8
    disabled只读，无法进行交互booleanfalse
    tooltips自定义每项的提示信息string[][]
    tooltipPropsTooltip 组件属性配置，参考 Tooltip Propsobject{}
    value
    v-model
    		当前数，受控值 0,1,2,3...number0

    Slots ​

    名称说明类型
    character自定义字符或图标v-slot:character="{ value }"
    tooltip自定义每项的提示信息v-slot:tooltip="{ tooltip, value }"

    Events ​

    名称说明类型
    change选择时的回调(value: number) => void
    hoverChange鼠标经过时数值变化的回调(value: number) => void
    - + \ No newline at end of file diff --git a/guide/components/result.html b/guide/components/result.html index f2def714f..b11964d51 100644 --- a/guide/components/result.html +++ b/guide/components/result.html @@ -132,7 +132,7 @@ </template> </Result> </template>

    APIs ​

    Result ​

    参数说明类型默认值
    icon自定义图标slotundefined
    status结果的状态，决定图标和颜色'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500''info'
    title标题文字string | slotundefined
    subTitle副标题文字string | slotundefined
    extra额外内容string | slotundefined

    Slots ​

    名称说明类型
    icon自定义图标v-slot:icon
    title自定义标题文字v-slot:title
    subTitle自定义副标题文字v-slot:subTitle
    extra自定义额外内容v-slot:extra
    default自定义内容v-slot:default
    - + \ No newline at end of file diff --git a/guide/components/scrollbar.html b/guide/components/scrollbar.html index 2fc1ec7d5..407db59e4 100644 --- a/guide/components/scrollbar.html +++ b/guide/components/scrollbar.html @@ -241,7 +241,7 @@ </Scrollbar> </Flex> </template>

    APIs ​

    Scrollbar ​

    参数说明类型默认值
    contentClass内容 div 的类名stringundefined
    contentStyle内容 div 的样式CSSProperties{}
    size滚动条的大小，单位 pxnumber5
    trigger显示滚动条的时机，'none' 表示一直显示'hover' | 'none''hover'
    autoHide是否自动隐藏滚动条，仅当 trigger: 'hover' 时生效；为 true 时表示鼠标在滚动区域且不滚动时自动隐藏，滚动时自动显示；为 false 时表示鼠标在滚动区域时始终显示，无论是否在滚动booleantrue
    delay滚动条自动隐藏的延迟时间，单位 msnumber500
    xScrollable是否使用横向滚动booleanfalse
    yScrollable是否使用纵向滚动booleantrue
    xPlacement横向滚动时滚动条的位置'top' | 'bottom''bottom'
    yPlacement纵向滚动时滚动条的位置'left' | 'right''right'

    Slots ​

    名称说明类型
    default自定义内容v-slot:default

    Methods ​

    名称说明类型
    scrollTo滚动到指定坐标位置(options: { left?: number, top?: number, behavior?: ScrollBehavior })=> void | (x: number, y: number) => void
    scrollBy滚动一段特定距离(options: { left?: number, top?: number, behavior?: ScrollBehavior })=> void | (x: number, y: number) => void
    getScrollData获取滚动元素数据() => { scrollWidth: number, clientWidth: number, scrollHeight: number, clientHeight: number }

    ScrollBehavior Type ​

    值说明
    smooth平滑滚动并产生过渡效果
    instant滚动会直接跳转到目标位置，没有过渡效果
    auto或缺省值表示浏览器会自动选择滚动时的过渡效果

    Events ​

    名称说明类型
    scroll滚动的回调(e: Event, direction: 'left' | 'right' | 'top' | 'bottom') => void
    scrollend滚动结束的回调(e: Event, direction: 'left' | 'right' | 'top' | 'bottom') => void
    - + \ No newline at end of file diff --git a/guide/components/segmented.html b/guide/components/segmented.html index ea65a4a69..387d23fd3 100644 --- a/guide/components/segmented.html +++ b/guide/components/segmented.html @@ -211,7 +211,7 @@ <Segmented v-model:value="value" :options="options" size="small" /> </Space> </template>

    APIs ​

    Segmented ​

    参数说明类型默认值
    block是否将宽度调整为父元素宽度，同时所有选项占据相同的宽度booleanfalse
    disabled是否禁用booleanfalse
    options选项数据string[] | number[] | Option[][]
    size控件尺寸'small' | 'middle' | 'large''middle'
    value
    v-model
    		当前选中的值string | numberundefined

    Option Type ​

    名称说明类型默认值
    label?选项名stringundefined
    value选项值string | numberundefined
    disabled?是否禁用选项booleanfalse
    payload?自定义数据载体anyundefined

    Slots ​

    名称说明类型
    label自定义图标v-slot:label="{ option, label, index, payload }"

    Events ​

    名称说明类型
    change选项变化时的回调函数(value: string | number) => void
    - + \ No newline at end of file diff --git a/guide/components/select.html b/guide/components/select.html index 9846430b4..35e532b28 100644 --- a/guide/components/select.html +++ b/guide/components/select.html @@ -606,7 +606,7 @@ <template> <Select :options="options" v-model="selectedValue" :scrollbar-props="{ size: 8, delay: 2000 }" /> </template>

    APIs ​

    Select ​

    参数说明类型默认值
    options选项数据Option[][]
    label选项的 label 文本字段名string'label'
    value选项的 value 值字段名string'value'
    placeholder默认占位文本string'请选择'
    disabled是否禁用booleanfalse
    allowClear是否支持清除booleanfalse
    search是否支持搜索，使用搜索时请设置 widthbooleanfalse
    filter过滤条件函数，仅当支持搜索时生效，根据输入项进行筛选：
  • 默认为 true 时，筛选每个选项的文本字段 label 是否包含输入项，包含返回 true，反之返回 false
  • 当其为函数 Function 时，接受 inputValue option 两个参数，当 option 符合筛选条件时，应返回 true，反之则返回 false
    		• Function | truetrue
    width选择器宽度，单位 pxstring | number'auto'
    height选择器高度，单位 pxnumber32
    size选择器大小'small' | 'middle' | 'large''middle'
    scrollbarProps下拉面板滚动条 scrollbar 组件属性配置，参考 Scrollbar Propsobject{}
    maxDisplay下拉面板最多能展示的下拉项数，超过后滚动显示number6
    modelValue
    v-model
    		当前选中的 option 条目值number | stringundefined

    Option Type ​

    名称说明类型默认值
    label?选项名stringundefined
    value?选项值string | numberundefined
    disabled?是否禁用选项booleanfalse
    [propName: string]用于包含带有任意数量的其他属性anyundefined

    Events ​

    名称说明类型
    change选项值改变后的回调(value: string | number, label: string, index: number) => void
    openChange下拉菜单展开收起的回调(open: boolean) => void
    - + \ No newline at end of file diff --git a/guide/components/skeleton.html b/guide/components/skeleton.html index 3392b9980..a06cb5ef3 100644 --- a/guide/components/skeleton.html +++ b/guide/components/skeleton.html @@ -176,7 +176,7 @@ </Flex> </Flex> </template>

    APIs ​

    Skeleton ​

    参数说明类型默认值
    animated是否展示动画效果booleantrue
    button是否使用按钮占位图boolean | SkeletonButtonPropsfalse
    avatar是否显示头像占位图boolean | SkeletonAvatarPropsfalse
    input是否使用输入框占位图boolean | SkeletonInputPropsfalse
    image是否使用图像占位图booleanfalse
    title是否显示标题占位图boolean | SkeletonTitlePropstrue
    paragraph是否显示段落占位图boolean | SkeletonParagraphPropstrue
    loading为 true 时，显示占位图，反之则直接展示子组件booleantrue

    SkeletonButtonProps Type ​

    名称说明类型默认值
    shape?指定按钮的形状'default' | 'round' | 'circle''default'
    size?设置按钮的大小'small' | 'middle' | 'large''middle'
    block?将按钮宽度调整为其父宽度的选项booleanfalse

    SkeletonAvatarProps Type ​

    名称说明类型默认值
    shape指定头像的形状'circle' | 'square''circle'
    size设置头像占位图的大小number | 'small' | 'middle' | 'large''middle'

    SkeletonInputProps Type ​

    名称说明类型默认值
    size设置输入框的大小'small' | 'middle' | 'large''middle'

    SkeletonTitleProps Type ​

    名称说明类型默认值
    width设置标题占位图的宽度number | string'38%'

    SkeletonParagraphProps Type ​

    名称说明类型默认值
    rows设置段落占位图的行数number | stringavatar ? 2 : 3
    width设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度number | string | Array<number|string>'61%'

    Slots ​

    名称说明类型
    default自定义内容v-slot:default
    - + \ No newline at end of file diff --git a/guide/components/slider.html b/guide/components/slider.html index e08055128..558755f00 100644 --- a/guide/components/slider.html +++ b/guide/components/slider.html @@ -261,7 +261,7 @@ <Slider :style="rangeCustomStyle" range v-model:value="doubleValue" /> </Flex> </template>

    APIs ​

    Slider ​

    参数说明类型默认值
    width滑动输入条宽度，单位 px，水平模式时生效string | number'100%'
    height滑动输入条高度，单位 px，垂直模式时生效string | number'100%'
    vertical是否启用垂直模式booleanfalse
    min最小值number0
    max最大值number100
    disabled是否禁用booleanfalse
    range是否使用双滑块模式booleanfalse
    step步长，取值必须大于 0，并且可被 (max - min) 整除number1
    formatTooltipSlider 会把当前值传给 formatTooltip，并在 Tooltip 中显示 formatTooltip 的返回值(value: number) => string | number(value: number) => value
    tooltip是否展示 Tooltipbooleantrue
    value
    v-model
    		设置当前取值，当 range 为 false 时，使用 number，否则用 [number, number]number | number[]0

    Events ​

    名称说明类型
    change当前取值变化后的回调(value: number | number[]) => void
    - + \ No newline at end of file diff --git a/guide/components/space.html b/guide/components/space.html index c7a40522e..5412a1c77 100644 --- a/guide/components/space.html +++ b/guide/components/space.html @@ -159,7 +159,7 @@ </template> </Space> </template>

    APIs ​

    Space ​

    参数说明类型默认值
    width区域总宽度，单位 pxstring | number'auto'
    align垂直排列方式'stretch' | 'start' | 'end' | 'center' | 'baseline''start'
    vertical是否为垂直布局booleanfalse
    gap间距大小，数组时表示: [水平间距, 垂直间距]number | number[] | 'small' | 'middle' | 'large''middle'
    wrap是否自动换行，仅在 horizontal 时有效booleantrue

    Slots ​

    名称说明类型
    default自定义内容v-slot:default
    - + \ No newline at end of file diff --git a/guide/components/spin.html b/guide/components/spin.html index 53c541ed4..7f84a3419 100644 --- a/guide/components/spin.html +++ b/guide/components/spin.html @@ -344,7 +344,7 @@ height: 100px !important; } </style>

    APIs ​

    Spin ​

    参数说明类型默认值
    spinning是否为加载中状态booleantrue
    size加载中尺寸'small' | 'middle' | 'large''middle'
    tip描述文案string | slotundefined
    indicator加载指示符'dot' | 'spin-dot' | 'spin-line' | 'ring-circle' | 'ring-rail' | 'dynamic-circle' | 'magic-ring''dot'
    color指示符颜色，当 indicator: 'magic-ring' 时为外环颜色string'#1677ff'
    spinCircleWidth圆环宽度，单位是加载指示符宽度的百分比，仅当 indicator: 'ring-circle' | 'ring-rail' 时生效number12
    spinCirclePercent圆环长度百分比 (0～100)，单位是圆环周长的百分比，仅当 indicator: 'ring-circle' | 'ring-rail' 时生效number33
    ringRailColor圆环轨道颜色，仅当 indicator: 'ring-rail' 时生效string'rgba(0, 0, 0, 0.12)'
    magicRingColor内环颜色，仅当 indicator: 'magic-ring' 时生效string'#4096ff'
    rotatespin-dot 或 spin-line 初始是否旋转，仅当 indicator: 'spin-dot' | 'spin-line' 时生效booleanfalse
    speedspin-dot 或 spin-line 渐变旋转的动画速度，单位 ms，仅当 indicator: 'spin-dot' | 'spin-line' 时生效number800

    Slots ​

    名称说明类型
    tip自定义描述文案v-slot:tip
    default自定义内容v-slot:default
    - + \ No newline at end of file diff --git a/guide/components/statistic.html b/guide/components/statistic.html index 59da344b3..c56bbad31 100644 --- a/guide/components/statistic.html +++ b/guide/components/statistic.html @@ -136,7 +136,7 @@ :value-style="{ color: '#1677ff' }" :formatter="formatter" /> </template>

    APIs ​

    Statistic ​

    参数说明类型默认值
    title数值的标题stringundefined
    value数值的内容string | number | slotundefined
    valueStyle设置数值的样式CSSProperties{}
    precision数值精度number0
    prefix设置数值的前缀string | slotundefined
    suffix设置数值的后缀string | slotundefined
    separator设置千分位标识符string','
    formatter自定义数值展示Function(value: string) => value

    Slots ​

    名称说明类型
    title自定义数值的标题v-slot:title
    default自定义数值的内容v-slot:default
    prefix自定义数值的前缀v-slot:prefix
    suffix自定义数值的后缀v-slot:suffix
    - + \ No newline at end of file diff --git a/guide/components/steps.html b/guide/components/steps.html index 958b1e970..e6495c611 100644 --- a/guide/components/steps.html +++ b/guide/components/steps.html @@ -351,7 +351,7 @@ margin-top: 30px; } </style>

    APIs ​

    Steps ​

    参数说明类型默认值
    items步骤数组Item[][]
    width步骤条总宽度，单位 pxnumber | string'auto'
    size步骤条大小'default' | 'small''default'
    vertical是否使用垂直步骤条，当 vertical: true 时，labelPlacement 自动设为 rightbooleanfalse
    labelPlacement标签放置位置，默认放图标右侧，可选 bottom 放图标下方'right' | 'bottom''right'
    dotted是否使用点状步骤条，当 dotted: true 且 vertical: false 时，labelPlacement 将自动设为 bottombooleanfalse
    current
    v-model
    		当前选中的步骤，设置 v-model 后，Steps 变为可点击状态。从 1 开始计数number1

    Item Type ​

    名称说明类型默认值
    title?标题stringundefined
    description?描述stringundefined

    Events ​

    名称说明类型
    change点击切换步骤时触发(index: number) => void
    - + \ No newline at end of file diff --git a/guide/components/swiper.html b/guide/components/swiper.html index e9647d194..d9efd4221 100644 --- a/guide/components/swiper.html +++ b/guide/components/swiper.html @@ -14,7 +14,7 @@ - + @@ -313,8 +313,8 @@ @swiper="onBroadcastSwiper" /> </Flex> -</template>

    APIs ​

    Swiper ​

    参数说明类型默认值
    images轮播图片数组Image[][]
    width轮播区域宽度，单位 pxnumber | string'100%'
    height轮播区域高度，单位 pxnumber | string'100%'
    modebanner: 轮播图模式; carousel: 走马灯模式; broadcast: 信息展播模式'banner' | 'carousel' | 'broadcast''banner'
    navigation是否显示导航booleanfalse
    effect切换动画效果'slide' | 'fade' | 'cube' | 'flip' | 'coverflow' | 'cards' | 'creative''slide'
    delay自动切换的时间间隔，仅当 mode: 'banner' 时生效，单位 msnumber3000
    speed切换过渡的动画持续时间，单位 msnumber300
    loop是否循环切换booleantrue
    pauseOnMouseEnter当鼠标移入走马灯时，是否暂停自动轮播，仅当 mode: 'banner' 或 mode: 'carousel' 时生效booleanfalse
    swipe是否可以鼠标拖动booleantrue
    preloaderColor预加载时的 loading 颜色'theme' | 'white' | 'black''theme'

    Image Type ​

    名称说明类型默认值
    name?图片名称stringundefined
    src图片地址stringundefined
    link?图片跳转链接stringundefined

    Events ​

    名称说明类型
    swiperSwiper初始化后的回调(swiper: any) => void
    change轮播图片变化时的回调(swiper: any) => void
    - +</template>

    APIs ​

    Swiper ​

    参数说明类型默认值
    images轮播图片数组Image[][]
    width轮播区域宽度，单位 pxnumber | string'100%'
    height轮播区域高度，单位 pxnumber | string'100%'
    modebanner: 轮播图模式; carousel: 走马灯模式; broadcast: 信息展播模式'banner' | 'carousel' | 'broadcast''banner'
    navigation是否显示导航booleanfalse
    effect切换动画效果'slide' | 'fade' | 'cube' | 'flip' | 'coverflow' | 'cards' | 'creative''slide'
    delay自动切换的时间间隔，仅当 mode: 'banner' 时生效，单位 msnumber3000
    speed切换过渡的动画持续时间，单位 msnumber300
    loop是否循环切换booleantrue
    pauseOnMouseEnter当鼠标移入走马灯时，是否暂停自动轮播，仅当 mode: 'banner' 或 mode: 'carousel' 时生效booleanfalse
    swipe是否可以鼠标拖动booleantrue
    preloaderColor预加载时的 loading 颜色'theme' | 'white' | 'black''theme'

    Image Type ​

    名称说明类型默认值
    name?图片名称stringundefined
    src图片地址stringundefined
    link?图片跳转链接stringundefined

    Events ​

    名称说明类型
    swiperSwiper初始化后的回调(swiper: any) => void
    change轮播图片变化时的回调(swiper: any) => void
    + \ No newline at end of file diff --git a/guide/components/switch.html b/guide/components/switch.html index b1fa583f7..45b425db0 100644 --- a/guide/components/switch.html +++ b/guide/components/switch.html @@ -189,7 +189,7 @@ </Space> </Space> </template>

    APIs ​

    Switch ​

    参数说明类型默认值
    checked选中时的内容string | slotundefined
    checkedValue选中时的值boolean | string | numbertrue
    unchecked未选中时的内容string | slotundefined
    uncheckedValue未选中时的值boolean | string | numberfalse
    loading是否加载中booleanfalse
    disabled是否禁用booleanfalse
    size开关大小'small' | 'middle' | 'large''middle'
    rippleColor点击时的波纹颜色，当自定义选中颜色时需要设置string'#1677ff'
    circleStyle圆点样式CSSProperties{}
    modelValue
    v-model
    		指定当前是否选中boolean | string | numberfalse

    Slots ​

    名称说明类型
    checked自定义选中时的内容v-slot:checked
    unchecked自定义未选中时的内容v-slot:unchecked
    node自定义开关节点v-slot:node="{ checked }"

    Events ​

    名称说明类型
    change变化时的回调(checked: boolean) => void
    - + \ No newline at end of file diff --git a/guide/components/table.html b/guide/components/table.html index 714f8894e..5f98fbfba 100644 --- a/guide/components/table.html +++ b/guide/components/table.html @@ -1416,7 +1416,7 @@ --wrap: nowrap; --justify: normal; --align: normal; - " data-v-a2d72bd4 data-v-7d33d722>
    bordered:
    NameOtherCompanyGender
    AddressCompany AddressCompany Name
    StreetBlock
    BuildingDoor No.
    John Brown4Lake ParkC02035Lake Street 42SoftLake CoM
    John Brown6Lake ParkC12035Lake Street 42SoftLake CoM
    John Brown8Lake ParkC22035Lake Street 42SoftLake CoM
    John Brown7Lake ParkC32035Lake Street 42SoftLake CoM
    John Brown5Lake ParkC42035Lake Street 42SoftLake CoM
    John Brown3Lake ParkC52035Lake Street 42SoftLake CoM
    John Brown9Lake ParkC62035Lake Street 42SoftLake CoM
    John Brown4Lake ParkC72035Lake Street 42SoftLake CoM
    John Brown10Lake ParkC82035Lake Street 42SoftLake CoM
    John Brown9Lake ParkC92035Lake Street 42SoftLake CoM
    1 2345•••10
    10 条/页
    Show Code
    vue
    <script setup lang="ts">
+    " data-v-a2d72bd4 data-v-7d33d722>
     bordered: 
    NameOtherCompanyGender
    AddressCompany AddressCompany Name
    StreetBlock
    BuildingDoor No.
    John Brown10Lake ParkC02035Lake Street 42SoftLake CoM
    John Brown5Lake ParkC12035Lake Street 42SoftLake CoM
    John Brown8Lake ParkC22035Lake Street 42SoftLake CoM
    John Brown9Lake ParkC32035Lake Street 42SoftLake CoM
    John Brown7Lake ParkC42035Lake Street 42SoftLake CoM
    John Brown9Lake ParkC52035Lake Street 42SoftLake CoM
    John Brown2Lake ParkC62035Lake Street 42SoftLake CoM
    John Brown1Lake ParkC72035Lake Street 42SoftLake CoM
    John Brown10Lake ParkC82035Lake Street 42SoftLake CoM
    John Brown9Lake ParkC92035Lake Street 42SoftLake CoM
     1 2345•••10
    10 条/页
    Show Code
    vue
    <script setup lang="ts">
 import { ref, reactive } from 'vue'
 import type { TableColumn } from 'vue-amazing-ui'
 const groupBordered = ref(true)
@@ -1742,7 +1742,7 @@
     </Table>
   </Flex>
 </template>

    APIs ​

    Table ​

    参数说明类型默认值
    header表格标题string | slotundefined
    footer表格尾部string | slotundefined
    columns表格列的配置项Column[][]
    dataSource表格数据数组object[][]
    bordered是否展示外边框和列边框booleanfalse
    rowClassName自定义行的类名string | ((record: any, rowIndex: number) => string)undefined
    size表格大小'large' | 'middle' | small'large'
    striped是否使用斑马条纹booleanfalse
    loading是否加载中booleanfalse
    spinPropsSpin 组件属性配置，参考 Spin Props，用于配置数据加载中object{}
    emptyPropsEmpty 组件属性配置，参考 Empty Props，用于配置暂无数据object{}
    ellipsisPropsEllipsis 组件属性配置，参考 Ellipsis Props，用于全局配置文本省略object{}
    showSorterTooltip表头是否显示下一次排序的 tooltip 提示booleantrue
    sortDirections支持的排序方式('ascend' | 'descend')[]['ascend', 'descend']
    sortTooltipProps排序 Tooltip 组件属性配置，参考 Tooltip Props，用于全局配置排序弹出提示object{}
    sticky是否设置粘性定位的表头和水平滚动条，设置之后表头和滚动条会跟随页面固定booleanfalse
    showPagination是否显示分页booleantrue
    paginationPagination 组件属性配置，参考 Pagination Props，用于配置分页功能object{}
    rowSelection列表项是否可选择Selectionundefined
    scroll表格是否可滚动，也可以指定滚动区域的宽、高ScrollOption | booleanundefined
    scrollbarPropsScrollbar 组件属性配置，参考 Scrollbar Props，用于配置表格滚动条object{}
    tableLayout表格布局方式，设为 fixed 表示内容不会影响列的布局，参考 table-layout 属性，固定表头/列或使用了 column.ellipsis 时，默认值为 fixed'auto' | 'fixed'undefined
    showExpandColumn是否展示展开列booleanfalse
    expandColumnTitle自定义展开列表头string | slotundefined
    expandColumnWidth展开列的宽度string | number48
    expandCell自定义展开按钮slotundefined
    expandedRowRender自定义额外的展开行内容slotundefined
    expandFixed是否固定展开列booleanfalse
    expandedRowKeys
    v-model
    		展开行的 key 数组，控制展开行的属性；需与 dataSource 数据中的 key 配合使用(string | number)[][]
    expandRowByClick点击行是否展开booleanfalse

    Column Type ​

    名称说明类型默认值
    title?列头显示文字stringundefined
    align?列文本的对齐方式'left' | 'center' | 'right'undefined
    width?列宽度，单位 pxstring | numberundefined
    className?自定义列的类名stringundefined
    colSpan?表头列合并,设置为 0 时，不渲染numberundefined
    dataIndex列数据在数据项中对应的路径索引；数据展示列必传，操作列可忽略stringundefined
    key?自定义列标识stringundefined
    ellipsis?超过宽度是否自动省略booleanundefined
    ellipsisProps?Ellipsis 组件属性配置，参考 Ellipsis Props，用于单独配置某列文本省略objectundefined
    fixed?列是否固定'left' | 'right'undefined
    slot?列插槽名称索引stringundefined
    children?列表头分组的子节点Column[]undefined
    showSorterTooltip?表头是否显示下一次排序的 tooltip 提示，较高优先级booleanundefined
    sortTooltipProps?Tooltip 组件属性配置，参考 Tooltip Props，用于单独配置某列的排序弹出提示，较高优先级objectundefined
    defaultSortOrder?默认排序顺序，建议只设置一列的默认排序；如果设置多列，则只有第一列默认排序生效'ascend' | 'descend'undefined
    sortDirections?支持的排序方式('ascend' | 'descend')[]undefined
    sorter?升序排序函数，参考 Array.sort 的 compareFunction，当列表头分组时，请将排序设置在叶子节点Functionundefined
    customCell?设置单元格属性(record: any, rowIndex: number, column: Column) => object | undefinedundefined

    ScrollOption Type ​

    名称说明类型默认值
    x?设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 'max-content'string | number | trueundefined
    y?设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值string | numberundefined

    Selection Type ​

    名称说明类型默认值
    columnTitle?自定义选择框标题string | VNodeundefined
    columnWidth?列表选择框宽度string | numberundefined
    fixed?复选框列是否固定在左边booleanundefined
    hideSelectAll?是否隐藏全选复选框booleanundefined
    type?复选框/单选框'checkbox' | 'radio'undefined
    onChange?选中项发生变化时的回调(selectedRowKeys: string[], selectedRows: any[]) => voidundefined
    onSelect?点击除全选外某行选择框时的回调(record: any, selected: boolean, selectedRows: any[], selectedRowKeys: string[]) => voidundefined
    onSelectAll?点击复选框全选时的回调(selected: boolean, selectedRows: any[], changeRows: any[], selectedRowKeys: string[], changeRowKeys: string[]) => voidundefined
    getSelectionProps?选择框组件的属性配置(record: any, rowIndex: number) => objectundefined

    ScrollOption Type ​

    名称说明类型默认值
    initialScrollPositionOnChange?当分页、排序变化后是否滚动到表格初始位置booleanundefined
    x?设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 'max-content'string | number | trueundefined
    y?设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值string | numberundefined

    Slots ​

    名称说明类型
    header自定义表格标题v-slot:header
    footer自定义表格尾部v-slot:footer
    expandColumnTitle自定义展开列表头v-slot:expandColumnTitle
    headerCell个性化头部单元格v-slot:headerCell="{ column, title }"
    expandCell自定义展开按钮v-slot:expandCell="{ record, index, expanded }"
    bodyCell个性化单元格v-slot:bodyCell="{ column, record, text, index }"
    expandedRowRender自定义额外的展开行内容v-slot:expandedRowRender="{ record, index, expanded }"

    Events ​

    名称说明类型
    expand点击展开图标时的回调(expanded: boolean, record: any) => void
    expandedRowsChange展开的行变化时的回调(expandedRows: (string | number)[]) => void
    sortChange排序变化时的回调(column: Column, currentDataSource: any[]) => void
    change分页变化时的回调(pager: { page: number, pageSize: number }) => void
    - + \ No newline at end of file diff --git a/guide/components/tabs.html b/guide/components/tabs.html index f71489cfb..34f3f726d 100644 --- a/guide/components/tabs.html +++ b/guide/components/tabs.html @@ -868,7 +868,7 @@ <Tabs :items="tabItems" v-model:active-key="activeKey" v-bind="state" /> </Flex> </template>

    APIs ​

    Tabs ​

    参数说明类型默认值
    items标签页数组Item[][]
    prefix标签页前缀string | slotundefined
    suffix标签页后缀string | slotundefined
    animated是否启用切换动画，在 tabPosition: 'top' | 'bottom' 时有效booleantrue
    centered标签是否居中展示booleanfalse
    size标签页大小'small' | 'middle' | 'large''middle'
    type标签页的类型'line' | 'card''line'
    tabGutter页签之前的间隙大小，单位 pxnumberundefined
    tabStyle自定义页签样式CSSProperties{}
    tabPosition自定义页签位置'top' | 'right' | 'bottom' | 'left''top'
    contentStyle自定义内容样式CSSProperties{}
    activeKey
    v-model
    		当前激活 tab 面板的 keystring | numberundefined

    Item Type ​

    名称说明类型默认值
    key?对应 activeKey，如果没有传入 key 属性，则默认使用数据索引 (0,1,2...) 绑定string | numberundefined
    tab?页签显示文字stringundefined
    icon?页签图标VNodeundefined
    content?标签页内容string | slotundefined
    disabled?是否禁用页签booleanfalse

    Slots ​

    名称说明类型
    tab自定义页签显示文字v-slot:tab="{ item, tab, key }"
    content自定义标签页内容v-slot:content="{ item, content, key }"
    prefix自定义标签页前缀v-slot:prefix
    suffix自定义标签页后缀v-slot:suffix

    Events ​

    名称说明类型
    change切换面板的回调(key: string | number) => void
    - + \ No newline at end of file diff --git a/guide/components/tag.html b/guide/components/tag.html index 2b9dec850..6f20e226c 100644 --- a/guide/components/tag.html +++ b/guide/components/tag.html @@ -13,7 +13,7 @@ - + @@ -177,7 +177,7 @@ </template>

    动态添加和删除 ​

    使用字符串格式数组


    天空
    大海
    湖泊
    Show Code
    vue
    <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import type { TagItem } from 'vue-amazing-ui'
-const strTags = ref(['天空', '大海', '湖泊'])
+const strTags = ref<string[]>(['天空', '大海', '湖泊'])
 watchEffect(() => {
   console.log('strTags', strTags.value)
 })
@@ -194,7 +194,7 @@
 import { ref, watchEffect } from 'vue'
 import { CheckCircleOutlined } from '@ant-design/icons-vue'
 import type { TagItem } from 'vue-amazing-ui'
-const objTags = ref([
+const objTags = ref<TagItem[]>([
   {
     label: '天空',
     color: 'processing'
@@ -235,7 +235,7 @@
 </template>

    三种尺寸 ​

    爱在西元前
    超人不会飞
    天空
    大海
    湖泊
    Show Code
    vue
    <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import type { TagItem } from 'vue-amazing-ui'
-const strTags = ref(['天空', '大海', '湖泊'])
+const strTags = ref<string[]>(['天空', '大海', '湖泊'])
 watchEffect(() => {
   console.log('strTags', strTags.value)
 })
@@ -266,7 +266,7 @@
 </template>

    自定义动态标签排列 ​

    天空
    大海
    湖泊
    Show Code
    vue
    <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import type { TagItem } from 'vue-amazing-ui'
-const strTags = ref(['天空', '大海', '湖泊'])
+const strTags = ref<string[]>(['天空', '大海', '湖泊'])
 watchEffect(() => {
   console.log('strTags', strTags.value)
 })
@@ -311,7 +311,7 @@
     <Tag :bordered="false" color="purple">purple</Tag>
   </Space>
 </template>

    APIs ​

    Tag ​

    参数说明类型默认值
    closable标签是否可以关闭booleanfalse
    color标签颜色，预置多种常用颜色：'success', 'processing', 'error', 'warning', 'pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'stringundefined
    icon设置图标string | slotundefined
    size标签尺寸'small' | 'middle' | 'large''middle'
    bordered是否有边框booleantrue
    dynamic是否启用标签动态添加和删除booleanfalse
    spacePropsSpace 组件属性配置，参考 Space Props ，仅当 dynamic: true 时生效object{}
    value
    v-model
    		动态标签数组，仅当 dynamic: true 时生效string[] | Item[][]

    Item Type ​

    名称说明类型默认值
    label?标签文本string | slotundefined
    closable?标签是否可以关闭booleantrue
    color?标签颜色stringundefined
    icon?设置图标string | slotundefined
    size?标签尺寸'small' | 'middle' | 'large''middle'
    bordered?是否有边框booleantrue

    Slots ​

    名称说明类型
    icon自定义图标v-slot:icon="{ item, icon, index }"
    label自定义标签文本v-slot:label="{ item, label, index }"
    default自定义内容v-slot:default

    Events ​

    名称说明类型
    close关闭时的回调(e: Event) => void
    dynamicClose启用标签动态添加和删除时关闭的回调(item: Item, index: number) => void
    - + \ No newline at end of file diff --git a/guide/components/textarea.html b/guide/components/textarea.html index 036c38b62..2ab6730bc 100644 --- a/guide/components/textarea.html +++ b/guide/components/textarea.html @@ -121,7 +121,7 @@ <Textarea v-model:value="value" disabled /> </Space> </template>

    APIs ​

    Textarea ​

    参数说明类型默认值
    width文本域宽度，单位 pxstring | number'100%'
    allowClear可以点击清除图标删除内容booleanfalse
    autoSize自适应内容高度boolean | {minRows?: number, maxRows?: number}false
    disabled是否禁用booleanfalse
    placeholder文本域输入的占位符stringundefined
    maxlength文字最大长度numberundefined
    showCount是否展示字数booleanfalse
    value
    v-model
    		文本域内容stringundefined

    Events ​

    名称说明类型
    change文本域内容变化时的回调(e: Event) => void
    enter按下回车的回调(e: Event) => void
    - + \ No newline at end of file diff --git a/guide/components/textscroll.html b/guide/components/textscroll.html index 60eda86cd..8a8b5bcef 100644 --- a/guide/components/textscroll.html +++ b/guide/components/textscroll.html @@ -518,7 +518,7 @@ margin-top: 30px; } </style>

    APIs ​

    TextScroll ​

    参数说明类型默认值
    items滚动文字数组，single 为 true 时，类型为 Item；多条文字水平滚动时，数组长度必须大于等于 amount 才能滚动Item[] | Item[]
    single是否启用单条文字滚动效果，水平滚动时生效，为 true 时，amount 自动设为 1booleanfalse
    width滚动区域宽度，单位 pxstring | number'100%'
    height滚动区域高度，单位 pxnumber50
    itemStyle滚动文字样式CSSProperties{}
    hrefHoverColor链接文字鼠标悬浮颜色；仅当 href 存在时生效string'#1677ff'
    amount滚动区域展示条数，水平滚动时生效number4
    gap水平滚动文字各列间距或垂直滚动文字两边的间距，单位 pxnumber20
    speed水平滚动时移动的速度，单位是像素每秒，水平滚动时生效number48
    vertical是否垂直滚动booleanfalse
    duration垂直滚动过渡持续时间，单位 ms，垂直滚动时生效number1000
    interval垂直文字滚动时间间隔，单位 ms，垂直滚动时生效number3000
    pauseOnMouseEnter鼠标移入是否暂停滚动booleantrue

    Item Type ​

    名称说明类型默认
    title文字标题stringundefined
    href?跳转链接stringundefined
    target?跳转链接打开方式，href 存在时生效'_self' | '_blank'undefined

    Methods ​

    名称说明类型
    start开始滚动() => void
    stop暂停滚动() => void
    reset重置滚动() => void

    Events ​

    名称说明类型
    click点击标题时的回调(item: Item) => void
    - + \ No newline at end of file diff --git a/guide/components/timeline.html b/guide/components/timeline.html index 0bca317ae..33f6a6b66 100644 --- a/guide/components/timeline.html +++ b/guide/components/timeline.html @@ -237,7 +237,7 @@ </template> </Timeline> </template>

    APIs ​

    Timeline ​

    参数说明类型默认值
    items时间轴内容数组Item[][]
    width时间轴区域总宽度，单位 pxnumber | string'100%'
    lineStyle时间线样式'solid' | 'dashed' | 'dotted''solid'
    mode通过设置 mode 可以改变时间轴和内容的相对位置'left' | 'center' | 'right''left'
    position当 mode 为 center 时，内容交替展现，内容从左边（left）开始或者右边（right）开始展现'left' | 'right''left'

    Item Type ​

    名称说明类型默认值
    desc文字描述string | slotundefined
    color?圆圈颜色'blue' | 'green' | 'red' | 'gray' | string'blue'

    Slots ​

    名称说明类型
    dot自定义时间轴点v-slot:dot="{ item, index }"
    desc自定义文字描述v-slot:desc="{ item, index }"
    - + \ No newline at end of file diff --git a/guide/components/tooltip.html b/guide/components/tooltip.html index d6a7e4061..11077273c 100644 --- a/guide/components/tooltip.html +++ b/guide/components/tooltip.html @@ -188,7 +188,7 @@ <Button type="primary">Hide Arrow</Button> </Tooltip> </template>

    APIs ​

    Tooltip ​

    参数说明类型默认值
    maxWidth文字提示最大宽度，单位 pxstring | number240
    content展示的内容string | slotundefined
    contentClass设置展示内容的类名stringundefined
    contentStyle设置展示内容的样式CSSProperties{}
    tooltip文字提示内容string | slotundefined
    tooltipClass设置文字提示的类名stringundefined
    tooltipStyle设置文字提示的样式CSSProperties{}
    bgColor文字提示框背景颜色string'rgba(0, 0, 0, 0.85)'
    arrow是否显示箭头booleantrue
    placement文字提示位置'top' | 'bottom' | 'left' | 'right''top'
    flip文字提示被浏览器窗口或最近可滚动父元素遮挡时自动调整弹出位置booleantrue
    trigger文字提示触发方式'hover' | 'click''hover'
    keyboard是否支持按键操作 (enter 显示；esc 关闭)，仅当 trigger: 'click' 时生效booleanfalse
    transitionDuration文字提示动画的过渡持续时间，单位 msnumber100
    showDelay文字提示显示的延迟时间，单位 msnumber100
    hideDelay文字提示隐藏的延迟时间，单位 msnumber100
    show
    v-model
    		文字提示是否显示booleanfalse
    showControl只使用 show 属性控制显示隐藏，仅当 trigger: hover 时生效，此时移入移出将不会触发显示隐藏，全部由 show 属性控制booleanfalse

    Slots ​

    名称说明类型
    tooltip自定义文字提示内容v-slot:tooltip
    default自定义展示的内容v-slot:default

    Methods ​

    名称说明类型
    show显示文字提示() => void
    hide隐藏文字提示() => void

    Events ​

    名称说明类型
    openChange显示隐藏的回调(open: boolean) => void
    - + \ No newline at end of file diff --git a/guide/components/upload.html b/guide/components/upload.html index e3fa1b6fd..5fd313730 100644 --- a/guide/components/upload.html +++ b/guide/components/upload.html @@ -321,7 +321,7 @@ @remove="onRemove" /> </template>

    APIs ​

    Upload ​

    参数说明类型默认值
    accept接受上传的文件类型，与<input type="file" />的 accept 属性一致，参考 input accept Attributestring'*'
    multiple是否支持多选文件，开启后可选择多个文件booleanfalse
    maxCount限制上传数量。当为 1 时，始终用最新上传的文件代替当前文件numberundefined
    tip上传描述文字string'Upload'
    fit预览图片缩放规则，参考 object-fit，仅当上传文件为图片时生效'fill' | 'contain' | 'cover' | 'none' | 'scale-down''contain'
    draggable是否支持拖拽上传，开启后可拖拽文件到选择框上传booleantrue
    disabled是否禁用，只能预览，不能删除和上传booleanfalse
    spacePropsSpace 组件属性配置，参考 Space Props，用于配置多个文件时的排列方式object{}
    spinPropsSpin 组件属性配置，参考 Spin Props，用于配置上传中样式object{}
    imagePropsImage 组件属性配置，参考 Image Props，用于配置图片预览object{}
    messagePropsMessage 组件属性配置，参考 Message Props，用于配置操作消息提示object{}
    actionMessage操作成功的消息提示，传 {} 即可不显示任何消息提示MessageType{ upload: '上传成功', remove: '删除成功' }
    beforeUpload上传文件之前的钩子，参数为上传的文件，返回 false 则停止上传，返回 true 开始上传；支持返回一个 Promise 对象（如服务端校验等），Promise 对象 reject 时停止上传，resolve 时开始上传；通常用来校验用户上传的文件格式和大小Function() => true
    uploadMode上传文件的方式，可选 'base64' | 'custom''base64' | 'custom''base64'
    customRequest自定义上传行为，只有 uploadMode: custom 时，才会使用 customRequest 自定义上传行为Function() => {}
    fileList
    v-model
    		已上传的文件列表FileType[][]

    FileType Type ​

    名称说明类型默认值
    name?文件名stringundefined
    url文件地址stringundefined
    [propName: string]用于包含带有任意数量的其他属性anyundefined

    MessageType Type ​

    名称说明类型默认值
    upload?上传成功的消息提示，没有设置该属性时即不显示上传消息提示string'上传成功'
    remove?删除成功的消息提示，没有设置该属性时即不显示删除消息提示string'删除成功'

    Slots ​

    名称说明类型
    tip自定义上传描述文字v-slot:tip

    Methods ​

    名称说明类型
    info上传基本信息提示(content: string) => void
    success上传成功信息提示(content: string) => void
    error上传失败信息提示(content: string) => void
    warning上传警告信息提示(content: string) => void
    loading加载中信息提示(content: string) => void

    Events ​

    名称说明类型
    drop当文件被拖入上传区域时的回调(e: DragEvent) => void
    change上传文件改变时的回调(files: FileType[]) => void
    preview点击预览时的回调(file: FileType) => void
    remove点击移除文件时的回调(files: FileType) => void
    - + \ No newline at end of file diff --git a/guide/components/video.html b/guide/components/video.html index 84a81c7e2..890102dec 100644 --- a/guide/components/video.html +++ b/guide/components/video.html @@ -13,7 +13,7 @@ - + @@ -57,12 +57,12 @@ </script> <template> <Video - :src="src" - :poster="poster" + :src="src" + :poster="poster" width="100%" height="56.25%" - @play="onPlay" - @pause="onPause" + @play="onPlay" + @pause="onPause" /> </template>

    自定义视频和图标尺寸 ​

    Show Code
    vue
    <script setup lang="ts">
@@ -72,11 +72,11 @@
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
-    :width="400"
-    :height="225"
-    :icon-size="60"
+    :src="src"
+    :poster="poster"
+    :width="400"
+    :height="225"
+    :icon-size="60"
   />
 </template>

    自动截取视频指定帧作为封面图 ​

    在未设置封面时，自动截取视频第 second 秒指定帧作为封面图


    Show Code
    vue
    <script setup lang="ts">
@@ -85,8 +85,8 @@
 </script>
 <template>
   <Video
-    :src="src"
-    :second="3"
+    :src="src"
+    :second="3"
     width="100%"
     height="56.25%"
   />
@@ -97,7 +97,7 @@
 const poster = ref('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.1.2/ultra.jpg')
 </script>
 <template>
-  <Video :src="src" :poster="poster" fit="cover" />
+  <Video :src="src" :poster="poster" fit="cover" />
 </template>

    自动循环播放 ​

    据一般规则，媒体内容将在满足以下至少一个的条件下自动播放：

    1. 音频被静音或其音量设置为 0
    2. 用户和网页已有交互行为（包括点击、触摸、按下某个键等等）
    3. 网站已被列入白名单；如果浏览器确定用户经常与媒体互动，这可能会自动发生，也可能通过首选项或其他用户界面功能手动发生
    4. 自动播放策略应用到 <iframe> 或者其文档上，从而获得了自动播放的权限

    否则，播放可能会被阻止。导致播放被阻塞的确切情况以及将网站列入白名单的具体方法因浏览器而异，但最好是遵循以上的原则。

    autoplay：由于目前在最新版的 Chrome 浏览器（以及所有以 Chromium 为内核的浏览器）中，已不再允许自动播放音频和视频。就算你为 video 或 audio 标签设置了 autoplay 属性也一样不能自动播放！

    解决方法：设置视频 autoplay 时，视频必须设置为静音 muted: true 即可实现自动播放，然后用户可以使用控制栏开启声音，类似某宝商品自动播放的宣传视频逻辑


    Show Code
    vue
    <script setup lang="ts">
 import { ref } from 'vue'
@@ -106,8 +106,8 @@
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
+    :src="src"
+    :poster="poster"
     autoplay
     loop
     width="100%"
@@ -121,9 +121,9 @@
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
-    :controls="false"
+    :src="src"
+    :poster="poster"
+    :controls="false"
     width="100%"
     height="56.25%"
   />
@@ -135,9 +135,9 @@
 </script>
 <template>
   <Video
-    :src="src"
-    :poster="poster"
-    :play-icon="false"
+    :src="src"
+    :poster="poster"
+    :play-icon="false"
     width="100%"
     height="56.25%"
   />
@@ -164,13 +164,13 @@
 <template>
   <Flex vertical>
     <Space>
-      <Button type="primary" @click="play">播放</Button>
-      <Button @click="pause">暂停</Button>
+      <Button type="primary" @click="play">播放</Button>
+      <Button @click="pause">暂停</Button>
     </Space>
-    <Video ref="video" :src="src" :poster="poster" />
+    <Video ref="video" :src="src" :poster="poster" />
   </Flex>
 </template>

    APIs ​

    Video ​

    参数说明类型默认值
    width视频播放器宽度，单位 pxnumber800
    height视频播放器高度，单位 pxnumber450
    src视频文件地址，支持网络地址 https 和相对地址stringundefined
    poster视频封面地址，支持网络地址 https 和相对地址stringundefined
    second在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面，单位 snumber0.5
    fit视频封面和内容的缩放规则，参考 object-fit'none' | 'fill' | 'contain' | 'cover''contain'
    autoplay视频就绪后是否马上播放，优先级高于 preload，参考 MDN 自动播放指南booleanfalse
    controls是否向用户显示控件，比如进度条，全屏等booleantrue
    loop视频播放完成后，是否循环播放booleanfalse
    muted是否静音booleanfalse
    preload是否在页面加载后载入视频，如果设置了 autoplay 属性，则 preload 将被忽略'auto' | 'metadata' | 'none''metadata'
    playIcon播放暂停时是否显示播放器中间的暂停图标booleantrue
    iconSize暂停图标尺寸，单位 pxnumber80

    preload 可选属性：

    fit 可选属性：

    Events ​

    名称说明类型
    play开始播放的回调() => void
    pause暂停播放的回调() => void
    - + \ No newline at end of file diff --git a/guide/components/waterfall.html b/guide/components/waterfall.html index 48c11ff2f..8a370ef1a 100644 --- a/guide/components/waterfall.html +++ b/guide/components/waterfall.html @@ -124,7 +124,7 @@ margin-top: 30px; } </style>

    APIs ​

    Waterfall ​

    参数说明类型默认值
    images图片数组Image[][]
    columnCount要划分的列数number3
    columnGap各列之间的间隙，单位 pxnumber20
    width瀑布流区域的总宽度string | number'100%'
    borderRadius瀑布流区域和图片圆角，单位 pxnumber8
    backgroundColor瀑布流区域背景填充色string'#F2F4F8'
    spinPropsSpin 组件属性配置，参考 Spin Props，用于配置图片加载中样式object{}

    Image Type ​

    名称说明类型默认值
    name?图片名称stringundefined
    src图片地址stringundefined
    - + \ No newline at end of file diff --git a/guide/components/watermark.html b/guide/components/watermark.html index 3cff16a0e..77a9b2193 100644 --- a/guide/components/watermark.html +++ b/guide/components/watermark.html @@ -209,7 +209,7 @@ line-height: 1.5714285714285714; } </style>

    APIs ​

    Watermark ​

    参数说明类型默认值
    width水印的宽度，默认为 content 自身的宽度，单位 pxnumberundefined
    height水印的高度，默认为 content 自身的高度，单位 pxnumberundefined
    layout水印的布局方式：平行布局 parallel; 交替布局 alternate'parallel' | 'alternate''alternate'
    rotate水印绘制时，旋转的角度，单位 °number-22
    zIndex追加的水印元素的 z-indexnumber90
    image图片源，建议使用 2 倍或 3 倍图，优先级高于文字stringundefined
    content水印文字内容string | string[]undefined
    fullscreen是否启用全屏水印booleanfalse
    fixed是否固定水印，仅当启用全屏水印时生效booleantrue
    textStyle水印文字样式Font{
      color: 'rgba(0, 0, 0, 0.15)',
      fontSize: 16,
      fontWeight: 'normal',
      fontFamily: 'sans-serif',
      fontStyle: 'normal'
    }
    gap水印之间的间距[number, number][100, 100]
    offset水印距离容器左上角的偏移量，默认为 gap/2[number, number][50, 50]

    Font Type ​

    名称说明类型默认值
    color字体颜色string'rgba(0, 0, 0, 0.15)'
    fontSize字体大小，单位 pxnumber16
    fontWeight字体粗细'normal' | 'light' | 'weight' | number'normal'
    fontFamily字体类型string'sans-serif'
    fontStyle字体样式'none' | 'normal' | 'italic' | 'oblique''normal'

    Slots ​

    名称说明类型
    default自定义内容v-slot:default
    - + \ No newline at end of file diff --git a/guide/features.html b/guide/features.html index 19dd64fbb..d64b4d98d 100644 --- a/guide/features.html +++ b/guide/features.html @@ -87,7 +87,7 @@ color: #4096ff; } } - + \ No newline at end of file diff --git a/guide/ondemand.html b/guide/ondemand.html index 4efbcade8..350f09efe 100644 --- a/guide/ondemand.html +++ b/guide/ondemand.html @@ -13,7 +13,7 @@ - + @@ -51,7 +51,7 @@ <template> <Button>button</Button> <Tag>tag</Tag> -</template>

    自动引入样式（推荐） ​

    使用 vite-plugin-style-import 插件来按需自动引入组件样式，插件会自动解析模板中的使用到的组件，并导入其样式

    sh
    $ pnpm add vite-plugin-style-import -D
    sh
    $ npm install vite-plugin-style-import -D
    sh
    $ yarn add vite-plugin-style-import -D
    sh
    $ bun add vite-plugin-style-import -D
    ts
    // vite.config.ts
+</template>

    自动引入样式（推荐） ​

    使用 vite-plugin-style-import 插件来按需自动引入组件样式，插件会自动解析模板中的使用到的组件，并导入其样式

    sh
    $ pnpm add vite-plugin-style-import -D
    sh
    $ npm install vite-plugin-style-import -D
    sh
    $ yarn add vite-plugin-style-import -D
    sh
    $ bun add vite-plugin-style-import -D
    ts
    // vite.config.ts
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { createStyleImportPlugin } from 'vite-plugin-style-import'
@@ -81,7 +81,7 @@
 <template>
   <Button>button</Button>
   <Tag>tag</Tag>
-</template>

    自动按需引入（强烈推荐） ​

    使用 unplugin-vue-components 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件和样式

    sh
    $ pnpm add unplugin-vue-components -D
    sh
    $ npm install unplugin-vue-components -D
    sh
    $ yarn add unplugin-vue-components -D
    sh
    $ bun add unplugin-vue-components -D
    ts
    // vite.config.ts
+</template>

    自动按需引入（强烈推荐） ​

    使用 unplugin-vue-components 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件和样式

    sh
    $ pnpm add unplugin-vue-components -D
    sh
    $ npm install unplugin-vue-components -D
    sh
    $ yarn add unplugin-vue-components -D
    sh
    $ bun add unplugin-vue-components -D
    ts
    // vite.config.ts
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import Components from 'unplugin-vue-components/vite'
@@ -115,7 +115,7 @@
   <Button>button</Button>
   <Tag>tag</Tag>
 </template>
    - + \ No newline at end of file diff --git a/guide/started.html b/guide/started.html index 4eb882b94..50abbfea3 100644 --- a/guide/started.html +++ b/guide/started.html @@ -13,7 +13,7 @@ - + @@ -43,7 +43,7 @@ --float-btn-top: undefined; --float-btn-bottom: 100px; --float-btn-z-index: 9; - " target="_self" data-v-fb8d17bf>

    安装 ​

    sh
    $ pnpm add vue-amazing-ui
    sh
    $ npm install vue-amazing-ui
    sh
    $ yarn add vue-amazing-ui
    sh
    $ bun add vue-amazing-ui

    使用组件 ​

    全局完整注册（不推荐）

    失去 tree-shaking 的能力，打包后有冗余代码

    ts
    import { createApp } from 'vue'
+    " target="_self" data-v-fb8d17bf>

    安装 ​

    sh
    $ pnpm add vue-amazing-ui
    sh
    $ npm install vue-amazing-ui
    sh
    $ yarn add vue-amazing-ui
    sh
    $ bun add vue-amazing-ui

    使用组件 ​

    全局完整注册（不推荐）

    失去 tree-shaking 的能力，打包后有冗余代码

    ts
    import { createApp } from 'vue'
 import App from './App.vue'
 import VueAmazingUI from 'vue-amazing-ui'
 import 'vue-amazing-ui/css'
@@ -92,7 +92,7 @@
   useSlotsExist
 } from 'vue-amazing-ui'
 </script>
    - + \ No newline at end of file diff --git a/guide/template.html b/guide/template.html index 8c932e9fd..bb86cff32 100644 --- a/guide/template.html +++ b/guide/template.html @@ -45,7 +45,7 @@ --float-btn-z-index: 9; " target="_self" data-v-fb8d17bf>

    模板文件

    何时使用 ​

    基本使用 ​

    Show Code
    vue
    <template>
 </template>

    :::

    APIs ​

    Template ​

    参数说明类型默认值

    Methods ​

    名称说明类型

    Events ​

    名称说明类型
    - + \ No newline at end of file diff --git a/hashmap.json b/hashmap.json index 70815151b..51250e0e8 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"guide_changelog.md":"Bh_QOKnh","guide_components_alert.md":"y5xxzzvg","guide_components_avatar.md":"B9Ox8Ugk","guide_components_backtop.md":"BRu4iP31","guide_components_badge.md":"CoVgoi0S","guide_components_breadcrumb.md":"CaK8mnZG","guide_components_button.md":"CTeVDUJj","guide_components_card.md":"BVb8VGui","guide_components_carousel.md":"ggih7UYD","guide_components_cascader.md":"DaILr_Ah","guide_components_checkbox.md":"Dfdwod2A","guide_components_collapse.md":"sW1uRwIP","guide_components_countdown.md":"RNmiLNTB","guide_components_datepicker.md":"DadHD9wl","guide_components_descriptions.md":"SzoP-hFY","guide_components_dialog.md":"DFX-uhj7","guide_components_divider.md":"9FXEwCAa","guide_components_drawer.md":"BeOnlk25","guide_components_ellipsis.md":"BpU40PYF","guide_components_empty.md":"DM8K2K8f","guide_components_flex.md":"CsGXEnms","guide_components_floatbutton.md":"DBAR5WIT","guide_components_gradienttext.md":"CDuL_7Ap","guide_components_grid.md":"DgR0hqDz","guide_components_image.md":"_zxjcZhV","guide_components_input.md":"Ci916-pb","guide_components_inputnumber.md":"DiwAZp9j","guide_components_inputsearch.md":"BiUlBDhS","guide_components_list.md":"BWO6A8jL","guide_components_loadingbar.md":"CBWJkcKg","guide_components_message.md":"bsdc_Oec","guide_components_modal.md":"9rp3GBU1","guide_components_notification.md":"DPeqlvwK","guide_components_numberanimation.md":"D8Cy-4hz","guide_components_pagination.md":"df12nEwy","guide_components_popconfirm.md":"DL-Rsxlz","guide_components_popover.md":"BUvYtInx","guide_components_progress.md":"BELGK2nW","guide_components_qrcode.md":"DxXg-DTy","guide_components_radio.md":"DPQ2ogHT","guide_components_rate.md":"BlFWg7l4","guide_components_result.md":"CG_C1o4f","guide_components_scrollbar.md":"BsyvrnKU","guide_components_segmented.md":"CI0-I2C7","guide_components_select.md":"B_yFMEnG","guide_components_skeleton.md":"CufRCzWu","guide_components_slider.md":"i-b_GHYs","guide_components_space.md":"Bb7JNf_K","guide_components_spin.md":"DNKOD5eB","guide_components_statistic.md":"CQYOb4t3","guide_components_steps.md":"BDNFD6ev","guide_components_swiper.md":"7K6bdnKK","guide_components_switch.md":"HTvDCnJQ","guide_components_table.md":"CHWBZUTu","guide_components_tabs.md":"Sk58Za-k","guide_components_tag.md":"_gs_bBhE","guide_components_textarea.md":"ClULzbkf","guide_components_textscroll.md":"CoSRz4nR","guide_components_timeline.md":"BbI7uIlf","guide_components_tooltip.md":"BHqd5rYd","guide_components_upload.md":"DnEo1uHp","guide_components_video.md":"BiP_TzuL","guide_components_waterfall.md":"DNYkORwg","guide_components_watermark.md":"BIOTlKRU","guide_features.md":"D-U8giUD","guide_ondemand.md":"DdzI069a","guide_started.md":"BYqZj2wq","guide_template.md":"C7SrxXpk","index.md":"JmGjhul5","sponsor_charge.md":"M27lA7PI","utils_functions_add.md":"DmQnTA08","utils_functions_date-format.md":"BLV_AYO-","utils_functions_debounce.md":"BWfh3172","utils_functions_download-file.md":"D3sF6lwC","utils_functions_event-listener.md":"BvUAlfag","utils_functions_format-number.md":"9i2vbWqt","utils_functions_fps.md":"BX97GC43","utils_functions_media-query.md":"iD89vN9V","utils_functions_mutation-observer.md":"CBjTWooD","utils_functions_raf-timeout.md":"CNHLndAm","utils_functions_resize-observer.md":"C4uJioIa","utils_functions_scroll.md":"B6Ux1xJt","utils_functions_slots-exist.md":"DxZ8_wIt","utils_functions_throttle.md":"DdLceZCp","utils_functions_toggle-dark.md":"FpnLq98v","utils_started.md":"DTKEAGoW"} +{"guide_changelog.md":"Bh_QOKnh","guide_components_alert.md":"y5xxzzvg","guide_components_avatar.md":"B9Ox8Ugk","guide_components_backtop.md":"BRu4iP31","guide_components_badge.md":"CoVgoi0S","guide_components_breadcrumb.md":"CaK8mnZG","guide_components_button.md":"CTeVDUJj","guide_components_card.md":"BVb8VGui","guide_components_carousel.md":"ggih7UYD","guide_components_cascader.md":"DaILr_Ah","guide_components_checkbox.md":"Dfdwod2A","guide_components_collapse.md":"sW1uRwIP","guide_components_countdown.md":"RNmiLNTB","guide_components_datepicker.md":"DadHD9wl","guide_components_descriptions.md":"SzoP-hFY","guide_components_dialog.md":"DFX-uhj7","guide_components_divider.md":"9FXEwCAa","guide_components_drawer.md":"BeOnlk25","guide_components_ellipsis.md":"BpU40PYF","guide_components_empty.md":"DM8K2K8f","guide_components_flex.md":"CsGXEnms","guide_components_floatbutton.md":"DBAR5WIT","guide_components_gradienttext.md":"CDuL_7Ap","guide_components_grid.md":"DgR0hqDz","guide_components_image.md":"_zxjcZhV","guide_components_input.md":"Ci916-pb","guide_components_inputnumber.md":"DiwAZp9j","guide_components_inputsearch.md":"BiUlBDhS","guide_components_list.md":"BWO6A8jL","guide_components_loadingbar.md":"CBWJkcKg","guide_components_message.md":"bsdc_Oec","guide_components_modal.md":"9rp3GBU1","guide_components_notification.md":"DPeqlvwK","guide_components_numberanimation.md":"D8Cy-4hz","guide_components_pagination.md":"df12nEwy","guide_components_popconfirm.md":"DL-Rsxlz","guide_components_popover.md":"BUvYtInx","guide_components_progress.md":"BELGK2nW","guide_components_qrcode.md":"DxXg-DTy","guide_components_radio.md":"DPQ2ogHT","guide_components_rate.md":"BlFWg7l4","guide_components_result.md":"CG_C1o4f","guide_components_scrollbar.md":"BsyvrnKU","guide_components_segmented.md":"CI0-I2C7","guide_components_select.md":"B_yFMEnG","guide_components_skeleton.md":"CufRCzWu","guide_components_slider.md":"i-b_GHYs","guide_components_space.md":"Bb7JNf_K","guide_components_spin.md":"DNKOD5eB","guide_components_statistic.md":"CQYOb4t3","guide_components_steps.md":"BDNFD6ev","guide_components_swiper.md":"BMmcK8Oh","guide_components_switch.md":"HTvDCnJQ","guide_components_table.md":"CHWBZUTu","guide_components_tabs.md":"Sk58Za-k","guide_components_tag.md":"D1a7yfLH","guide_components_textarea.md":"ClULzbkf","guide_components_textscroll.md":"CoSRz4nR","guide_components_timeline.md":"BbI7uIlf","guide_components_tooltip.md":"BHqd5rYd","guide_components_upload.md":"DnEo1uHp","guide_components_video.md":"C6bf8V1Q","guide_components_waterfall.md":"DNYkORwg","guide_components_watermark.md":"BIOTlKRU","guide_features.md":"D-U8giUD","guide_ondemand.md":"BkO99xEY","guide_started.md":"QalsHnSf","guide_template.md":"C7SrxXpk","index.md":"JmGjhul5","sponsor_charge.md":"M27lA7PI","utils_functions_add.md":"DmQnTA08","utils_functions_date-format.md":"BLV_AYO-","utils_functions_debounce.md":"BWfh3172","utils_functions_download-file.md":"D3sF6lwC","utils_functions_event-listener.md":"BvUAlfag","utils_functions_format-number.md":"9i2vbWqt","utils_functions_fps.md":"BX97GC43","utils_functions_media-query.md":"iD89vN9V","utils_functions_mutation-observer.md":"CBjTWooD","utils_functions_raf-timeout.md":"CNHLndAm","utils_functions_resize-observer.md":"C4uJioIa","utils_functions_scroll.md":"B6Ux1xJt","utils_functions_slots-exist.md":"DxZ8_wIt","utils_functions_throttle.md":"DdLceZCp","utils_functions_toggle-dark.md":"FpnLq98v","utils_started.md":"DTKEAGoW"} diff --git a/index.html b/index.html index 55fcc2ce0..fbbe8a90f 100644 --- a/index.html +++ b/index.html @@ -37,7 +37,7 @@ --float-btn-bottom: 100px; --float-btn-z-index: 9; " target="_self" data-v-fb8d17bf> - + \ No newline at end of file diff --git a/sponsor/charge.html b/sponsor/charge.html index bb6165f40..0e5f44ec1 100644 --- a/sponsor/charge.html +++ b/sponsor/charge.html @@ -21,7 +21,7 @@
    Vue Amazing UI

    Appearance

    Released under the MIT License.

    Copyright © 2023-present the Muse Catcher

    - + \ No newline at end of file diff --git a/utils/functions/add.html b/utils/functions/add.html index 93fa4f320..f7417cb0e 100644 --- a/utils/functions/add.html +++ b/utils/functions/add.html @@ -80,7 +80,7 @@ console.log(0.1 + 0.2) // js直接计算结果: 0.30000000000000004 add(0.1, 0.2) // 0.3 </script>

    Params ​

    参数说明类型默认值
    num1加数1numberundefined
    num2加数2numberundefined
    - + \ No newline at end of file diff --git a/utils/functions/date-format.html b/utils/functions/date-format.html index 44e28dfb8..a77a99dcd 100644 --- a/utils/functions/date-format.html +++ b/utils/functions/date-format.html @@ -103,7 +103,7 @@ console.error('Error formatting date:', error) return '' } -}

    何时使用 ​

    基本使用 ​

    格式化时间戳


    2025-01-06 17:12:25

    vue
    <script setup lang="ts">
+}

    何时使用 ​

    基本使用 ​

    格式化时间戳


    2025-01-06 17:17:42

    vue
    <script setup lang="ts">
 import { dateFormat } from 'vue-amazing-ui'
 
 dateFormat(Date.now())
@@ -111,12 +111,12 @@
 import { dateFormat } from 'vue-amazing-ui'
 
 dateFormat('2023-05-31', 'MM/DD/YYYY') // 05/31/2023
-</script>

    展示毫秒值 ​


    2025-01-06 17:12:25:325

    vue
    <script setup lang="ts">
+</script>

    展示毫秒值 ​


    2025-01-06 17:17:42:713

    vue
    <script setup lang="ts">
 import { dateFormat } from 'vue-amazing-ui'
 
 dateFormat(Date.now(), 'YYYY-MM-DD HH:mm:ss:SSS')
 </script>

    Params ​

    参数说明类型默认值
    value待格式化的日期时间值，支持数字、字符串和 Date 类型，默认为当前时间戳number | string | DateDate.now()
    format格式化字符串string'YYYY-MM-DD HH:mm:ss'

    format 支持的格式化占位符列表 ​

    标识示例描述
    YY23年，两位数
    YYYY2023年，四位数
    M1-12月，从1开始
    MM01-12月，两位数
    D1-31日
    DD01-31日，两位数
    H0-23小时
    HH00-23小时，两位数
    m0-59分钟
    mm00-59分钟，两位数
    s0-59秒
    ss00-59秒，两位数
    SSS000-999毫秒，三位数
    - + \ No newline at end of file diff --git a/utils/functions/debounce.html b/utils/functions/debounce.html index 9dbc8dac7..314be0ef5 100644 --- a/utils/functions/debounce.html +++ b/utils/functions/debounce.html @@ -21,7 +21,7 @@
    Vue Amazing UI

    Appearance

    Released under the MIT License.

    Copyright © 2023-present the Muse Catcher

    - + \ No newline at end of file diff --git a/utils/functions/download-file.html b/utils/functions/download-file.html index f3239414b..83a7b4ab2 100644 --- a/utils/functions/download-file.html +++ b/utils/functions/download-file.html @@ -87,7 +87,7 @@ donwloadFile('https://cdn.jsdelivr.net/gh/themusecatcher/resources@0.0.5/Markdown.pdf', 'Markdown') </script>

    Params ​

    参数说明类型默认值
    url文件的 URLstringundefined
    fileName?文件的命名，如果未提供，则从 URL 中尝试提取stringundefined
    - + \ No newline at end of file diff --git a/utils/functions/event-listener.html b/utils/functions/event-listener.html index 40578b299..25860574e 100644 --- a/utils/functions/event-listener.html +++ b/utils/functions/event-listener.html @@ -21,7 +21,7 @@
    Vue Amazing UI

    Appearance

    Released under the MIT License.

    Copyright © 2023-present the Muse Catcher

    - + \ No newline at end of file diff --git a/utils/functions/format-number.html b/utils/functions/format-number.html index d0df5c41d..a3b7af7cc 100644 --- a/utils/functions/format-number.html +++ b/utils/functions/format-number.html @@ -93,7 +93,7 @@ formatNumber(123456789.87654321, 2, ',') // 123,456,789.88 </script>

    Params ​

    参数说明类型默认值
    value要格式化的数字或数字字符串number | stringundefined
    precision小数点后的位数number2
    separator千分位分隔符string','
    decimal小数点字符string'.'
    prefix?数字前的字符串stringundefined
    suffix?数字后的字符串stringundefined
    - + \ No newline at end of file diff --git a/utils/functions/fps.html b/utils/functions/fps.html index 2d80a4fef..06062b819 100644 --- a/utils/functions/fps.html +++ b/utils/functions/fps.html @@ -21,7 +21,7 @@
    Vue Amazing UI

    Appearance

    Released under the MIT License.

    Copyright © 2023-present the Muse Catcher

    - + \ No newline at end of file diff --git a/utils/functions/media-query.html b/utils/functions/media-query.html index 839eddb3c..132fdc397 100644 --- a/utils/functions/media-query.html +++ b/utils/functions/media-query.html @@ -21,7 +21,7 @@
    Vue Amazing UI

    Appearance

    Released under the MIT License.

    Copyright © 2023-present the Muse Catcher

    - + \ No newline at end of file diff --git a/utils/functions/mutation-observer.html b/utils/functions/mutation-observer.html index d21385f73..1016edf42 100644 --- a/utils/functions/mutation-observer.html +++ b/utils/functions/mutation-observer.html @@ -157,7 +157,7 @@ <slot></slot> </div> </template>

    Params ​

    参数说明类型默认值
    target要观察的 DOM 元素或元素数组，可以是 ref 引用，也可以是 DOM 元素本身Ref | Ref[] | HTMLElement | HTMLElement[]undefined
    callback当观察到变化时调用的回调函数MutationCallbackundefined
    options观察选项，默认为空对象，参考文档object{}
    - + \ No newline at end of file diff --git a/utils/functions/raf-timeout.html b/utils/functions/raf-timeout.html index 630be144c..321323d13 100644 --- a/utils/functions/raf-timeout.html +++ b/utils/functions/raf-timeout.html @@ -21,7 +21,7 @@
    Vue Amazing UI

    Appearance

    Released under the MIT License.

    Copyright © 2023-present the Muse Catcher

    - + \ No newline at end of file diff --git a/utils/functions/resize-observer.html b/utils/functions/resize-observer.html index 44277dbf4..ef098c83c 100644 --- a/utils/functions/resize-observer.html +++ b/utils/functions/resize-observer.html @@ -236,7 +236,7 @@ } } </style>

    Params ​

    参数说明类型默认值
    target要观察的目标，可以是 Ref 对象、Ref 数组、HTMLElement 或 HTMLElement 数组Ref | Ref[] | HTMLElement | HTMLElement[]undefined
    callback当元素尺寸变化时调用的回调函数ResizeObserverCallbackundefined
    optionsResizeObserver 选项，用于定制观察行为，参考文档object{}
    - + \ No newline at end of file diff --git a/utils/functions/scroll.html b/utils/functions/scroll.html index 299f96bc5..841c21b09 100644 --- a/utils/functions/scroll.html +++ b/utils/functions/scroll.html @@ -212,7 +212,7 @@ } } </style>

    Params ​

    参数说明类型默认值
    target滚动目标元素Ref | HTMLElement | Window | Documentwindow
    throttleDelay节流延迟时间，单位 ms，用于限制滚动事件的触发频率number0
    onScroll?滚动事件的回调函数(e: Event) => voidundefined
    onStop?滚动结束的回调函数(e: Event) => voidundefined
    - + \ No newline at end of file diff --git a/utils/functions/slots-exist.html b/utils/functions/slots-exist.html index 45aaa409d..2543d942f 100644 --- a/utils/functions/slots-exist.html +++ b/utils/functions/slots-exist.html @@ -117,7 +117,7 @@ <slot name="header">{{ headerContent }}</slot> </div> </template>

    Params ​

    参数说明类型默认值
    slotsName插槽的名称或名称数组string | string[]'default'
    - + \ No newline at end of file diff --git a/utils/functions/throttle.html b/utils/functions/throttle.html index 0defd3894..890e97106 100644 --- a/utils/functions/throttle.html +++ b/utils/functions/throttle.html @@ -21,7 +21,7 @@
    Vue Amazing UI

    Appearance

    Released under the MIT License.

    Copyright © 2023-present the Muse Catcher

    - + \ No newline at end of file diff --git a/utils/functions/toggle-dark.html b/utils/functions/toggle-dark.html index 261ef81f9..5aa169bea 100644 --- a/utils/functions/toggle-dark.html +++ b/utils/functions/toggle-dark.html @@ -124,7 +124,7 @@ } } </style> - + \ No newline at end of file diff --git a/utils/started.html b/utils/started.html index 297ff1063..0aaf126e8 100644 --- a/utils/started.html +++ b/utils/started.html @@ -63,7 +63,7 @@ useSlotsExist } from 'vue-amazing-ui' </script>

    常用工具函数 ​

    NameDescriptionType
    dateFormat格式化日期时间字符串函数(value: number | string | Date = Date.now(), format: string = 'YYYY-MM-DD HH:mm:ss') => string
    formatNumber数字格式化函数(value: number | string, precision: number = 2, separator: string = ',', decimal: string = '.', prefix?: string, suffix?: string) => string
    rafTimeout使用 requestAnimationFrame 实现的延迟 setTimeout 或间隔 setInterval 调用函数(fn: Function, delay: number = 0, interval: boolean = false) => object
    cancelRaf用于取消 rafTimeout 函数(raf: { id: number }) => void
    throttle节流函数(fn: Function, delay: number = 300) => any
    debounce防抖函数(fn: Function, delay: number = 300) => any
    add消除 js 加减精度问题的加法函数(num1: number, num2: number) => number
    downloadFile下载文件并自定义文件名，未传 name 时，从文件地址中自动提取文件名称(url: string, fileName?: string) => void
    toggleDark一键切换暗黑模式函数() => void
    useEventListener使用 Vue 的生命周期钩子添加和移除事件监听器(target: HTMLElement | Window | Document, event: string, callback: Function) => void
    useMutationObserver使用 MutationObserver 观察 DOM 元素的变化(target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: MutationCallback, options = {}) => object
    useScroll实时监测目标元素滚动位置及状态(target: Ref | HTMLElement | Window | Document = window, throttleDelay: number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => object
    useFps实时监测浏览器刷新率FPS() => object
    useMediaQuery使用媒体查询来判断当前环境是否符合指定的媒体查询条件(mediaQuery: string) => object
    useResizeObserver使用 ResizeObserver 观察 DOM 元素尺寸变化(target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: ResizeObserverCallback, options = {}) => object
    useSlotsExist监听给定名称或名称数组的插槽是否存在，支持监听单个插槽或一组插槽的存在(slotsName: string | string[] = 'default') => Reactive | Ref<boolean>
    - + \ No newline at end of file