diff --git a/404.html b/404.html index 69c481dd2..8ce7f2838 100644 --- a/404.html +++ b/404.html @@ -5,7 +5,7 @@ 404 | Fighting Design - + @@ -21,7 +21,7 @@
Fighting Design

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home
- diff --git a/README.html b/README.html index d8aa913d1..6d98221a6 100644 --- a/README.html +++ b/README.html @@ -5,7 +5,7 @@ Docs | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -56,8 +56,8 @@ <f-avatar round src="" /> </a>

例如我的：

html
<a href="https://github.com/Tyh2001" target="_blank">
   <f-avatar round src="https://avatars.githubusercontent.com/u/73180970?v=4" />
-</a>

💬 写在最后 ​

规范可能随时会增加或者修改，在编写文档前请认真阅读规范指南。

- diff --git a/assets/README.md.b43e401d.js b/assets/README.md.6165697a.js similarity index 99% rename from assets/README.md.b43e401d.js rename to assets/README.md.6165697a.js index c1ccb5f95..842b6a2c3 100644 --- a/assets/README.md.b43e401d.js +++ b/assets/README.md.6165697a.js @@ -1,4 +1,4 @@ -import{_ as s,c as a,o as e,M as t}from"./chunks/framework.a8ebc9a3.js";const y=JSON.parse('{"title":"Docs","description":"","frontmatter":{},"headers":[],"relativePath":"README.md","filePath":"README.md","lastUpdated":1718865452000}'),n={name:"README.md"},o=t(`

Docs ​

✨ 介绍 ​

Docs 是 fighting design 官方文档目录，使用 VitePress 进行开发。

vitePress 是一个 Vite 和 Vue 支持的静态站点生成器，使用 MarkDown 进行编写。如果你还不了解 MarkDown，可以通过这里进行学习。

如果你也想编写自己的 blog，可以在 VitePress 官方进行学习使用。vitepress-template 是我已经配置好的一个项目，也可以拿来开箱即用。

🐳 线上地址 ​

🚧 编写规范 ​

首先需要在 docs/components 目录下，新建一个以组件小写名，去掉首字母 F 的 *.md 文件。如：button，而不是 FButton。

## 基本使用
+import{_ as s,c as a,o as e,M as t}from"./chunks/framework.a8ebc9a3.js";const y=JSON.parse('{"title":"Docs","description":"","frontmatter":{},"headers":[],"relativePath":"README.md","filePath":"README.md","lastUpdated":1718865313000}'),n={name:"README.md"},o=t(`
Docs ​
✨ 介绍 ​
Docs 是 fighting design 官方文档目录，使用 VitePress 进行开发。
vitePress 是一个 Vite 和 Vue 支持的静态站点生成器，使用 MarkDown 进行编写。如果你还不了解 MarkDown，可以通过这里进行学习。
如果你也想编写自己的 blog，可以在 VitePress 官方进行学习使用。vitepress-template 是我已经配置好的一个项目，也可以拿来开箱即用。
🐳 线上地址 ​
🚧 编写规范 ​
首先需要在 docs/components 目录下，新建一个以组件小写名，去掉首字母 F 的 *.md 文件。如：button，而不是 FButton。
  • *.md 内，只允许出现一个一级标题 #，后面全部使用二级标题 ##，禁止出现二级标题以下的标题
  • 一级标题为组件的名称 + 中文描述，中间要带有空格。如：Button 按钮、Icon 图标。这里的组件名要以大写开头
  • 接下来每个二级标题用于描述配置信息，配置信息下面要写入简单的描述。如下，取自 button.md：
## 基本使用
 
 \`type\` 属性可以配置不同的按钮类型，展示不同的颜色状态
  • 并不是组件的所有配置项都要带有演示用例，突出主要即可
  • 英文名要用反引号包裹，左右两边要带有空格。如： type 配置按钮的类型
  • 描述信息之后要带有具体的配置例子
  • 需要提供演效果的代码段，代码段使用已经封装好的 ::: demo 语法来展示 demo 和下拉菜单内容，详情配置可参考 plugins.ts 。例：
::: demo
 
diff --git a/assets/README.md.b43e401d.lean.js b/assets/README.md.6165697a.lean.js
similarity index 83%
rename from assets/README.md.b43e401d.lean.js
rename to assets/README.md.6165697a.lean.js
index df3eb0b99..d6373cd15 100644
--- a/assets/README.md.b43e401d.lean.js
+++ b/assets/README.md.6165697a.lean.js
@@ -1 +1 @@
-import{_ as s,c as a,o as e,M as t}from"./chunks/framework.a8ebc9a3.js";const y=JSON.parse('{"title":"Docs","description":"","frontmatter":{},"headers":[],"relativePath":"README.md","filePath":"README.md","lastUpdated":1718865452000}'),n={name:"README.md"},o=t("",39),l=[o];function p(c,r,d,i,h,b){return e(),a("div",null,l)}const u=s(n,[["render",p]]);export{y as __pageData,u as default};
+import{_ as s,c as a,o as e,M as t}from"./chunks/framework.a8ebc9a3.js";const y=JSON.parse('{"title":"Docs","description":"","frontmatter":{},"headers":[],"relativePath":"README.md","filePath":"README.md","lastUpdated":1718865313000}'),n={name:"README.md"},o=t("",39),l=[o];function p(c,r,d,i,h,b){return e(),a("div",null,l)}const u=s(n,[["render",p]]);export{y as __pageData,u as default};
diff --git a/assets/components_alert.md.ae5fccb2.js b/assets/components_alert.md.ae5fccb2.js
new file mode 100644
index 000000000..e66390a12
--- /dev/null
+++ b/assets/components_alert.md.ae5fccb2.js
@@ -0,0 +1,49 @@
+import{d as i,c as b,C as o,y as s,v as a,M as F,A as D,o as v,a as l,b as c,K as f,L as u,_ as h}from"./chunks/framework.a8ebc9a3.js";import{F as p}from"./chunks/index.36ec2e32.js";const e=d=>(f("data-v-5db0ad49"),d=d(),u(),d),E=F('
Alert 警告 ​
用于页面中展示重要的提示信息
基本使用 ​
type 属性可以配置不同的主题类型，展示不同的颜色状态
',5),C=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"default"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"默认提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"warning"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"警告提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"info"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"信息提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),_=e(()=>a("h2",{id:"不同文字大小",tabindex:"-1"},[l("不同文字大小 "),a("a",{class:"header-anchor",href:"#不同文字大小","aria-label":'Permalink to "不同文字大小"'},"​")],-1)),m=e(()=>a("p",null,[a("code",null,"font-size"),l(" 属性可以配置不同大小的 "),a("code",null,"alert")],-1)),A=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"12"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"default"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"默认提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"14"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"16"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"20px"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"24px"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"warning"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"警告提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"27px"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"info"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"信息提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),g=e(()=>a("h2",{id:"是否加粗",tabindex:"-1"},[l("是否加粗 "),a("a",{class:"header-anchor",href:"#是否加粗","aria-label":'Permalink to "是否加粗"'},"​")],-1)),B=e(()=>a("p",null,[l("使用 "),a("code",null,"bold"),l(" 属性可将文字设置为粗体显示")],-1)),k=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"default"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"未加粗的默认提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"bold"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"加粗的主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"bold"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"加粗的成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"bold"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"加粗的危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),x=e(()=>a("h2",{id:"是否居中",tabindex:"-1"},[l("是否居中 "),a("a",{class:"header-anchor",href:"#是否居中","aria-label":'Permalink to "是否居中"'},"​")],-1)),P=e(()=>a("p",null,[l("使用 "),a("code",null,"center"),l(" 属性可将文本显示中间")],-1)),I=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"default"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"未居中的默认提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"center"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"居中的主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"center"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"居中的成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"center"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"居中的危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),z=e(()=>a("h2",{id:"可关闭",tabindex:"-1"},[l("可关闭 "),a("a",{class:"header-anchor",href:"#可关闭","aria-label":'Permalink to "可关闭"'},"​")],-1)),S=e(()=>a("p",null,[l("使用 "),a("code",null,"close"),l(" 属性可以让 "),a("code",null,"alert"),l(" 被关闭")],-1)),q=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"close"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"close"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"close"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),w=e(()=>a("h2",{id:"简约模式",tabindex:"-1"},[l("简约模式 "),a("a",{class:"header-anchor",href:"#简约模式","aria-label":'Permalink to "简约模式"'},"​")],-1)),H=e(()=>a("p",null,[l("使用 "),a("code",null,"simple"),l(" 属性可以配置简约的 "),a("code",null,"alert"),l("，样式依然由 "),a("code",null,"type"),l(" 控制")],-1)),N=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"simple"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"default"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"默认提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"simple"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"simple"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"simple"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"simple"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"warning"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"警告提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"simple"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"info"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"信息提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),L=e(()=>a("h2",{id:"圆角",tabindex:"-1"},[l("圆角 "),a("a",{class:"header-anchor",href:"#圆角","aria-label":'Permalink to "圆角"'},"​")],-1)),V=e(()=>a("p",null,[a("code",null,"round"),l(" 属性可以配置 "),a("code",null,"alert"),l(" 显示为圆角")],-1)),T=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"round"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"round"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"round"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),M=e(()=>a("h2",{id:"背景颜色",tabindex:"-1"},[l("背景颜色 "),a("a",{class:"header-anchor",href:"#背景颜色","aria-label":'Permalink to "背景颜色"'},"​")],-1)),j=e(()=>a("p",null,[l("如果你希望文字带上背景颜色，你可以使用 "),a("code",null,"background"),l(" 属性自定义你的 "),a("code",null,"alert"),l(" 背景颜色")],-1)),G=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"background"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"#58c8de"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"background"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"#e372ff"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"background"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"#e49b33"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),J=e(()=>a("h2",{id:"带有标题",tabindex:"-1"},[l("带有标题 "),a("a",{class:"header-anchor",href:"#带有标题","aria-label":'Permalink to "带有标题"'},"​")],-1)),K=e(()=>a("p",null,[a("code",null,"title"),l(" 可以配置一个标题信息，标题会加粗")],-1)),O=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"title"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"Hello~"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"今天代码写的很愉快！"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"title"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"标题"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"心情很不错"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),U=e(()=>a("h2",{id:"滚动列表",tabindex:"-1"},[l("滚动列表 "),a("a",{class:"header-anchor",href:"#滚动列表","aria-label":'Permalink to "滚动列表"'},"​")],-1)),Q=e(()=>a("p",null,[a("code",null,"alert-list"),l(" 可传入一个数组进行滚动展示")],-1)),R=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}},">")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":alert-list"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"alertList"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"title"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"你知道吗？"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"}),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"script"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"lang"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"ts"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"setup"),a("span",{style:{color:"#89DDFF"}},">")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#C792EA"}},"const"),a("span",{style:{color:"#BABED8"}}," alertList "),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#BABED8"}}," [")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"    "),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"把大象放进冰箱需要几步？"),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#89DDFF"}},",")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"    "),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"第一步：打开冰箱门"),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#89DDFF"}},",")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"    "),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"第二步：把大象装进去"),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#89DDFF"}},",")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"    "),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"第三步：关好冰箱门"),a("span",{style:{color:"#89DDFF"}},"'")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  ]")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),W=e(()=>a("h2",{id:"自定义前缀-icon",tabindex:"-1"},[l("自定义前缀 icon "),a("a",{class:"header-anchor",href:"#自定义前缀-icon","aria-label":'Permalink to "自定义前缀 icon"'},"​")],-1)),X=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}},">")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"default"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":before-icon"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"默认提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":before-icon"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":before-icon"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":before-icon"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"}),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"script"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"lang"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"ts"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"setup"),a("span",{style:{color:"#89DDFF"}},">")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF"}},"{"),a("span",{style:{color:"#F07178"}}," "),a("span",{style:{color:"#BABED8"}},"FIconFaceSmile"),a("span",{style:{color:"#F07178"}}," "),a("span",{style:{color:"#89DDFF"}},"}"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF","font-style":"italic"}},"from"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"@fighting-design/fighting-icon"),a("span",{style:{color:"#89DDFF"}},"'")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),Y=F('
Attributes ​
参数说明类型可选值默认值
type类型FightingTypedefault primary success danger warning infodefault
font-size副标题文字大小string / number————
title-size主标题文字大小string / number————
bold文字是否以粗体显示boolean——false
center是否居中boolean——false
close可关闭boolean——false
simple简约模式boolean——false
title标题string————
round显示为圆角boolean——false
background背景颜色string————
color副标题字体颜色string————
title-color主标题字体颜色string————
fixed是否固定定位boolean——false
alert-list滚动列表array (string[])————
duration滚动列表滚动时间间隔number————
before-icon自定义前缀 iconFightingIcon————
close-icon自定义关闭 iconFightingIcon————
on-close点击关闭之后执行的回调HandleMouse————
Slots ​
名称说明
default自定义副标题的内容
title自定义主标题的内容
closeIcon自定义关闭 icon
beforeIcon自定义前缀 icon
Interface ​
组件导出以下类型定义：
ts
import type { AlertInstance, AlertProps } from 'fighting-design'
样式变量 ​
组件提供了下列 CSS 变量，可用于自定义样式
名称描述
--alert-border-radius圆角大小
--alert-color文字颜色
--alert-background背景色
Contributors ​
',11),Z={href:"https://github.com/Tyh2001",target:"_blank"},$={href:"https://github.com/jardeng",target:"_blank"},aa={href:"https://github.com/HeHasGun",target:"_blank"},la={href:"https://github.com/long-life233",target:"_blank"},sa={href:"https://github.com/w2xi",target:"_blank"},ca=JSON.parse('{"title":"Alert 警告","description":"","frontmatter":{},"headers":[],"relativePath":"components/alert.md","filePath":"components/alert.md","lastUpdated":1718865313000}'),oa={name:"components/alert.md"},ta=i({...oa,setup(d){const y=["把大象放进冰箱需要几步？","第一步：打开冰箱门","第二步：把大象装进去","第三步：关好冰箱门"];return(ea,na)=>{const t=D("f-alert"),n=D("vp-demo"),r=D("f-avatar");return v(),b("div",null,[E,o(n,{source:""},{source:s(()=>[o(t,{type:"default"},{default:s(()=>[l("默认提示信息")]),_:1}),o(t,{type:"primary"},{default:s(()=>[l("主要提示信息")]),_:1}),o(t,{type:"success"},{default:s(()=>[l("成功提示信息")]),_:1}),o(t,{type:"danger"},{default:s(()=>[l("危险提示信息")]),_:1}),o(t,{type:"warning"},{default:s(()=>[l("警告提示信息")]),_:1}),o(t,{type:"info"},{default:s(()=>[l("信息提示信息")]),_:1})]),default:s(()=>[C]),_:1}),_,m,o(n,{source:""},{source:s(()=>[o(t,{"font-size":12,type:"default"},{default:s(()=>[l("默认提示信息")]),_:1}),o(t,{"font-size":14,type:"primary"},{default:s(()=>[l("主要提示信息")]),_:1}),o(t,{"font-size":16,type:"success"},{default:s(()=>[l("成功提示信息")]),_:1}),o(t,{"font-size":"20px",type:"danger"},{default:s(()=>[l("危险提示信息")]),_:1}),o(t,{"font-size":"24px",type:"warning"},{default:s(()=>[l("警告提示信息")]),_:1}),o(t,{"font-size":"27px",type:"info"},{default:s(()=>[l("信息提示信息")]),_:1})]),default:s(()=>[A]),_:1}),g,B,o(n,{source:""},{source:s(()=>[o(t,{type:"default"},{default:s(()=>[l("未加粗的默认提示信息")]),_:1}),o(t,{type:"primary",bold:""},{default:s(()=>[l("加粗的主要提示信息")]),_:1}),o(t,{type:"success",bold:""},{default:s(()=>[l("加粗的成功提示信息")]),_:1}),o(t,{type:"danger",bold:""},{default:s(()=>[l("加粗的危险提示信息")]),_:1})]),default:s(()=>[k]),_:1}),x,P,o(n,{source:""},{source:s(()=>[o(t,{type:"default"},{default:s(()=>[l("未居中的默认提示信息")]),_:1}),o(t,{type:"primary",center:""},{default:s(()=>[l("居中的主要提示信息")]),_:1}),o(t,{type:"success",center:""},{default:s(()=>[l("居中的成功提示信息")]),_:1}),o(t,{type:"danger",center:""},{default:s(()=>[l("居中的危险提示信息")]),_:1})]),default:s(()=>[I]),_:1}),z,S,o(n,{source:""},{source:s(()=>[o(t,{type:"primary",close:""},{default:s(()=>[l("主要提示信息")]),_:1}),o(t,{type:"success",close:""},{default:s(()=>[l("成功提示信息")]),_:1}),o(t,{type:"danger",close:""},{default:s(()=>[l("危险提示信息")]),_:1})]),default:s(()=>[q]),_:1}),w,H,o(n,{source:""},{source:s(()=>[o(t,{simple:"",type:"default"},{default:s(()=>[l("默认提示信息")]),_:1}),o(t,{simple:"",type:"primary"},{default:s(()=>[l("主要提示信息")]),_:1}),o(t,{simple:"",type:"success"},{default:s(()=>[l("成功提示信息")]),_:1}),o(t,{simple:"",type:"danger"},{default:s(()=>[l("危险提示信息")]),_:1}),o(t,{simple:"",type:"warning"},{default:s(()=>[l("警告提示信息")]),_:1}),o(t,{simple:"",type:"info"},{default:s(()=>[l("信息提示信息")]),_:1})]),default:s(()=>[N]),_:1}),L,V,o(n,{source:""},{source:s(()=>[o(t,{type:"primary",round:""},{default:s(()=>[l("主要提示信息")]),_:1}),o(t,{type:"success",round:""},{default:s(()=>[l("成功提示信息")]),_:1}),o(t,{type:"danger",round:""},{default:s(()=>[l("危险提示信息")]),_:1})]),default:s(()=>[T]),_:1}),M,j,o(n,{source:""},{source:s(()=>[o(t,{type:"primary",background:"#58c8de"},{default:s(()=>[l("主要提示信息")]),_:1}),o(t,{type:"success",background:"#e372ff"},{default:s(()=>[l("成功提示信息")]),_:1}),o(t,{type:"danger",background:"#e49b33"},{default:s(()=>[l("危险提示信息")]),_:1})]),default:s(()=>[G]),_:1}),J,K,o(n,{source:""},{source:s(()=>[o(t,{type:"primary",title:"Hello~"},{default:s(()=>[l("今天代码写的很愉快！")]),_:1}),o(t,{type:"success",title:"标题"},{default:s(()=>[l("心情很不错")]),_:1})]),default:s(()=>[O]),_:1}),U,Q,o(n,{source:""},{source:s(()=>[o(t,{"alert-list":y,title:"你知道吗？",type:"primary"})]),default:s(()=>[R]),_:1}),W,o(n,{source:""},{source:s(()=>[o(t,{type:"default","before-icon":c(p)},{default:s(()=>[l("默认提示信息")]),_:1},8,["before-icon"]),o(t,{type:"primary","before-icon":c(p)},{default:s(()=>[l("主要提示信息")]),_:1},8,["before-icon"]),o(t,{type:"success","before-icon":c(p)},{default:s(()=>[l("成功提示信息")]),_:1},8,["before-icon"]),o(t,{type:"danger","before-icon":c(p)},{default:s(()=>[l("危险提示信息")]),_:1},8,["before-icon"])]),default:s(()=>[X]),_:1}),Y,a("a",Z,[o(r,{round:"",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("a",$,[o(r,{round:"",src:"https://avatars.githubusercontent.com/u/19302222?v=4"})]),a("a",aa,[o(r,{round:"",src:"https://avatars.githubusercontent.com/u/66313154?v=4"})]),a("a",la,[o(r,{round:"",src:"https://avatars.githubusercontent.com/u/77321887?v=4"})]),a("a",sa,[o(r,{round:"",src:"https://avatars.githubusercontent.com/u/57785259?v=4"})])])}}});const pa=h(ta,[["__scopeId","data-v-5db0ad49"]]);export{ca as __pageData,pa as default};
diff --git a/assets/components_alert.md.ae5fccb2.lean.js b/assets/components_alert.md.ae5fccb2.lean.js
new file mode 100644
index 000000000..e66390a12
--- /dev/null
+++ b/assets/components_alert.md.ae5fccb2.lean.js
@@ -0,0 +1,49 @@
+import{d as i,c as b,C as o,y as s,v as a,M as F,A as D,o as v,a as l,b as c,K as f,L as u,_ as h}from"./chunks/framework.a8ebc9a3.js";import{F as p}from"./chunks/index.36ec2e32.js";const e=d=>(f("data-v-5db0ad49"),d=d(),u(),d),E=F('
Alert 警告 ​
用于页面中展示重要的提示信息
基本使用 ​
type 属性可以配置不同的主题类型，展示不同的颜色状态
',5),C=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"default"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"默认提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"warning"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"警告提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"info"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"信息提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),_=e(()=>a("h2",{id:"不同文字大小",tabindex:"-1"},[l("不同文字大小 "),a("a",{class:"header-anchor",href:"#不同文字大小","aria-label":'Permalink to "不同文字大小"'},"​")],-1)),m=e(()=>a("p",null,[a("code",null,"font-size"),l(" 属性可以配置不同大小的 "),a("code",null,"alert")],-1)),A=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"12"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"default"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"默认提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"14"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"16"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"20px"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"24px"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"warning"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"警告提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"27px"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"info"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"信息提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),g=e(()=>a("h2",{id:"是否加粗",tabindex:"-1"},[l("是否加粗 "),a("a",{class:"header-anchor",href:"#是否加粗","aria-label":'Permalink to "是否加粗"'},"​")],-1)),B=e(()=>a("p",null,[l("使用 "),a("code",null,"bold"),l(" 属性可将文字设置为粗体显示")],-1)),k=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"default"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"未加粗的默认提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"bold"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"加粗的主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"bold"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"加粗的成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"bold"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"加粗的危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),x=e(()=>a("h2",{id:"是否居中",tabindex:"-1"},[l("是否居中 "),a("a",{class:"header-anchor",href:"#是否居中","aria-label":'Permalink to "是否居中"'},"​")],-1)),P=e(()=>a("p",null,[l("使用 "),a("code",null,"center"),l(" 属性可将文本显示中间")],-1)),I=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"default"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"未居中的默认提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"center"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"居中的主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"center"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"居中的成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"center"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"居中的危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),z=e(()=>a("h2",{id:"可关闭",tabindex:"-1"},[l("可关闭 "),a("a",{class:"header-anchor",href:"#可关闭","aria-label":'Permalink to "可关闭"'},"​")],-1)),S=e(()=>a("p",null,[l("使用 "),a("code",null,"close"),l(" 属性可以让 "),a("code",null,"alert"),l(" 被关闭")],-1)),q=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"close"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"close"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"close"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),w=e(()=>a("h2",{id:"简约模式",tabindex:"-1"},[l("简约模式 "),a("a",{class:"header-anchor",href:"#简约模式","aria-label":'Permalink to "简约模式"'},"​")],-1)),H=e(()=>a("p",null,[l("使用 "),a("code",null,"simple"),l(" 属性可以配置简约的 "),a("code",null,"alert"),l("，样式依然由 "),a("code",null,"type"),l(" 控制")],-1)),N=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"simple"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"default"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"默认提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"simple"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"simple"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"simple"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"simple"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"warning"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"警告提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"simple"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"info"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"信息提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),L=e(()=>a("h2",{id:"圆角",tabindex:"-1"},[l("圆角 "),a("a",{class:"header-anchor",href:"#圆角","aria-label":'Permalink to "圆角"'},"​")],-1)),V=e(()=>a("p",null,[a("code",null,"round"),l(" 属性可以配置 "),a("code",null,"alert"),l(" 显示为圆角")],-1)),T=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"round"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"round"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"round"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),M=e(()=>a("h2",{id:"背景颜色",tabindex:"-1"},[l("背景颜色 "),a("a",{class:"header-anchor",href:"#背景颜色","aria-label":'Permalink to "背景颜色"'},"​")],-1)),j=e(()=>a("p",null,[l("如果你希望文字带上背景颜色，你可以使用 "),a("code",null,"background"),l(" 属性自定义你的 "),a("code",null,"alert"),l(" 背景颜色")],-1)),G=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"background"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"#58c8de"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"background"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"#e372ff"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"background"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"#e49b33"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),J=e(()=>a("h2",{id:"带有标题",tabindex:"-1"},[l("带有标题 "),a("a",{class:"header-anchor",href:"#带有标题","aria-label":'Permalink to "带有标题"'},"​")],-1)),K=e(()=>a("p",null,[a("code",null,"title"),l(" 可以配置一个标题信息，标题会加粗")],-1)),O=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"title"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"Hello~"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"今天代码写的很愉快！"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"title"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"标题"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"心情很不错"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),U=e(()=>a("h2",{id:"滚动列表",tabindex:"-1"},[l("滚动列表 "),a("a",{class:"header-anchor",href:"#滚动列表","aria-label":'Permalink to "滚动列表"'},"​")],-1)),Q=e(()=>a("p",null,[a("code",null,"alert-list"),l(" 可传入一个数组进行滚动展示")],-1)),R=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}},">")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":alert-list"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"alertList"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"title"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"你知道吗？"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"}),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"script"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"lang"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"ts"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"setup"),a("span",{style:{color:"#89DDFF"}},">")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#C792EA"}},"const"),a("span",{style:{color:"#BABED8"}}," alertList "),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#BABED8"}}," [")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"    "),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"把大象放进冰箱需要几步？"),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#89DDFF"}},",")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"    "),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"第一步：打开冰箱门"),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#89DDFF"}},",")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"    "),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"第二步：把大象装进去"),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#89DDFF"}},",")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"    "),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"第三步：关好冰箱门"),a("span",{style:{color:"#89DDFF"}},"'")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  ]")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),W=e(()=>a("h2",{id:"自定义前缀-icon",tabindex:"-1"},[l("自定义前缀 icon "),a("a",{class:"header-anchor",href:"#自定义前缀-icon","aria-label":'Permalink to "自定义前缀 icon"'},"​")],-1)),X=e(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}},">")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"default"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":before-icon"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"默认提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"primary"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":before-icon"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"主要提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"success"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":before-icon"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"成功提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-alert"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":before-icon"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"危险提示信息"),a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")]),l(`
+`),a("span",{class:"line"}),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"script"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"lang"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"ts"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"setup"),a("span",{style:{color:"#89DDFF"}},">")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF"}},"{"),a("span",{style:{color:"#F07178"}}," "),a("span",{style:{color:"#BABED8"}},"FIconFaceSmile"),a("span",{style:{color:"#F07178"}}," "),a("span",{style:{color:"#89DDFF"}},"}"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF","font-style":"italic"}},"from"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"@fighting-design/fighting-icon"),a("span",{style:{color:"#89DDFF"}},"'")]),l(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),Y=F('
Attributes ​
参数说明类型可选值默认值
type类型FightingTypedefault primary success danger warning infodefault
font-size副标题文字大小string / number————
title-size主标题文字大小string / number————
bold文字是否以粗体显示boolean——false
center是否居中boolean——false
close可关闭boolean——false
simple简约模式boolean——false
title标题string————
round显示为圆角boolean——false
background背景颜色string————
color副标题字体颜色string————
title-color主标题字体颜色string————
fixed是否固定定位boolean——false
alert-list滚动列表array (string[])————
duration滚动列表滚动时间间隔number————
before-icon自定义前缀 iconFightingIcon————
close-icon自定义关闭 iconFightingIcon————
on-close点击关闭之后执行的回调HandleMouse————
Slots ​
名称说明
default自定义副标题的内容
title自定义主标题的内容
closeIcon自定义关闭 icon
beforeIcon自定义前缀 icon
Interface ​
组件导出以下类型定义：
ts
import type { AlertInstance, AlertProps } from 'fighting-design'
样式变量 ​
组件提供了下列 CSS 变量，可用于自定义样式
名称描述
--alert-border-radius圆角大小
--alert-color文字颜色
--alert-background背景色
Contributors ​
',11),Z={href:"https://github.com/Tyh2001",target:"_blank"},$={href:"https://github.com/jardeng",target:"_blank"},aa={href:"https://github.com/HeHasGun",target:"_blank"},la={href:"https://github.com/long-life233",target:"_blank"},sa={href:"https://github.com/w2xi",target:"_blank"},ca=JSON.parse('{"title":"Alert 警告","description":"","frontmatter":{},"headers":[],"relativePath":"components/alert.md","filePath":"components/alert.md","lastUpdated":1718865313000}'),oa={name:"components/alert.md"},ta=i({...oa,setup(d){const y=["把大象放进冰箱需要几步？","第一步：打开冰箱门","第二步：把大象装进去","第三步：关好冰箱门"];return(ea,na)=>{const t=D("f-alert"),n=D("vp-demo"),r=D("f-avatar");return v(),b("div",null,[E,o(n,{source:""},{source:s(()=>[o(t,{type:"default"},{default:s(()=>[l("默认提示信息")]),_:1}),o(t,{type:"primary"},{default:s(()=>[l("主要提示信息")]),_:1}),o(t,{type:"success"},{default:s(()=>[l("成功提示信息")]),_:1}),o(t,{type:"danger"},{default:s(()=>[l("危险提示信息")]),_:1}),o(t,{type:"warning"},{default:s(()=>[l("警告提示信息")]),_:1}),o(t,{type:"info"},{default:s(()=>[l("信息提示信息")]),_:1})]),default:s(()=>[C]),_:1}),_,m,o(n,{source:""},{source:s(()=>[o(t,{"font-size":12,type:"default"},{default:s(()=>[l("默认提示信息")]),_:1}),o(t,{"font-size":14,type:"primary"},{default:s(()=>[l("主要提示信息")]),_:1}),o(t,{"font-size":16,type:"success"},{default:s(()=>[l("成功提示信息")]),_:1}),o(t,{"font-size":"20px",type:"danger"},{default:s(()=>[l("危险提示信息")]),_:1}),o(t,{"font-size":"24px",type:"warning"},{default:s(()=>[l("警告提示信息")]),_:1}),o(t,{"font-size":"27px",type:"info"},{default:s(()=>[l("信息提示信息")]),_:1})]),default:s(()=>[A]),_:1}),g,B,o(n,{source:""},{source:s(()=>[o(t,{type:"default"},{default:s(()=>[l("未加粗的默认提示信息")]),_:1}),o(t,{type:"primary",bold:""},{default:s(()=>[l("加粗的主要提示信息")]),_:1}),o(t,{type:"success",bold:""},{default:s(()=>[l("加粗的成功提示信息")]),_:1}),o(t,{type:"danger",bold:""},{default:s(()=>[l("加粗的危险提示信息")]),_:1})]),default:s(()=>[k]),_:1}),x,P,o(n,{source:""},{source:s(()=>[o(t,{type:"default"},{default:s(()=>[l("未居中的默认提示信息")]),_:1}),o(t,{type:"primary",center:""},{default:s(()=>[l("居中的主要提示信息")]),_:1}),o(t,{type:"success",center:""},{default:s(()=>[l("居中的成功提示信息")]),_:1}),o(t,{type:"danger",center:""},{default:s(()=>[l("居中的危险提示信息")]),_:1})]),default:s(()=>[I]),_:1}),z,S,o(n,{source:""},{source:s(()=>[o(t,{type:"primary",close:""},{default:s(()=>[l("主要提示信息")]),_:1}),o(t,{type:"success",close:""},{default:s(()=>[l("成功提示信息")]),_:1}),o(t,{type:"danger",close:""},{default:s(()=>[l("危险提示信息")]),_:1})]),default:s(()=>[q]),_:1}),w,H,o(n,{source:""},{source:s(()=>[o(t,{simple:"",type:"default"},{default:s(()=>[l("默认提示信息")]),_:1}),o(t,{simple:"",type:"primary"},{default:s(()=>[l("主要提示信息")]),_:1}),o(t,{simple:"",type:"success"},{default:s(()=>[l("成功提示信息")]),_:1}),o(t,{simple:"",type:"danger"},{default:s(()=>[l("危险提示信息")]),_:1}),o(t,{simple:"",type:"warning"},{default:s(()=>[l("警告提示信息")]),_:1}),o(t,{simple:"",type:"info"},{default:s(()=>[l("信息提示信息")]),_:1})]),default:s(()=>[N]),_:1}),L,V,o(n,{source:""},{source:s(()=>[o(t,{type:"primary",round:""},{default:s(()=>[l("主要提示信息")]),_:1}),o(t,{type:"success",round:""},{default:s(()=>[l("成功提示信息")]),_:1}),o(t,{type:"danger",round:""},{default:s(()=>[l("危险提示信息")]),_:1})]),default:s(()=>[T]),_:1}),M,j,o(n,{source:""},{source:s(()=>[o(t,{type:"primary",background:"#58c8de"},{default:s(()=>[l("主要提示信息")]),_:1}),o(t,{type:"success",background:"#e372ff"},{default:s(()=>[l("成功提示信息")]),_:1}),o(t,{type:"danger",background:"#e49b33"},{default:s(()=>[l("危险提示信息")]),_:1})]),default:s(()=>[G]),_:1}),J,K,o(n,{source:""},{source:s(()=>[o(t,{type:"primary",title:"Hello~"},{default:s(()=>[l("今天代码写的很愉快！")]),_:1}),o(t,{type:"success",title:"标题"},{default:s(()=>[l("心情很不错")]),_:1})]),default:s(()=>[O]),_:1}),U,Q,o(n,{source:""},{source:s(()=>[o(t,{"alert-list":y,title:"你知道吗？",type:"primary"})]),default:s(()=>[R]),_:1}),W,o(n,{source:""},{source:s(()=>[o(t,{type:"default","before-icon":c(p)},{default:s(()=>[l("默认提示信息")]),_:1},8,["before-icon"]),o(t,{type:"primary","before-icon":c(p)},{default:s(()=>[l("主要提示信息")]),_:1},8,["before-icon"]),o(t,{type:"success","before-icon":c(p)},{default:s(()=>[l("成功提示信息")]),_:1},8,["before-icon"]),o(t,{type:"danger","before-icon":c(p)},{default:s(()=>[l("危险提示信息")]),_:1},8,["before-icon"])]),default:s(()=>[X]),_:1}),Y,a("a",Z,[o(r,{round:"",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("a",$,[o(r,{round:"",src:"https://avatars.githubusercontent.com/u/19302222?v=4"})]),a("a",aa,[o(r,{round:"",src:"https://avatars.githubusercontent.com/u/66313154?v=4"})]),a("a",la,[o(r,{round:"",src:"https://avatars.githubusercontent.com/u/77321887?v=4"})]),a("a",sa,[o(r,{round:"",src:"https://avatars.githubusercontent.com/u/57785259?v=4"})])])}}});const pa=h(ta,[["__scopeId","data-v-5db0ad49"]]);export{ca as __pageData,pa as default};
diff --git a/assets/components_alert.md.b274b202.js b/assets/components_alert.md.b274b202.js
deleted file mode 100644
index fbe90b33b..000000000
--- a/assets/components_alert.md.b274b202.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import{d as f,c as i,C as t,y as o,v as l,M as y,A as F,o as b,a as s,b as p,K as v,L as u,_ as h}from"./chunks/framework.a8ebc9a3.js";import{F as D}from"./chunks/index.36ec2e32.js";const e=c=>(v("data-v-e3f5b8f2"),c=c(),u(),c),E=y('
Alert 警告 ​
用于页面中展示重要的提示信息
基本使用 ​
type 属性可以配置不同的主题类型，展示不同的颜色状态
',5),C=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"default"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"默认提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"warning"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"警告提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"info"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"信息提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),_=e(()=>l("h2",{id:"不同文字大小",tabindex:"-1"},[s("不同文字大小 "),l("a",{class:"header-anchor",href:"#不同文字大小","aria-label":'Permalink to "不同文字大小"'},"​")],-1)),m=e(()=>l("p",null,[l("code",null,"font-size"),s(" 属性可以配置不同大小的 "),l("code",null,"alert")],-1)),A=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":font-size"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"12"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"default"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"默认提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":font-size"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"14"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":font-size"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"16"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"font-size"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"20px"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"font-size"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"24px"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"warning"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"警告提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"font-size"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"27px"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"info"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"信息提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),g=e(()=>l("h2",{id:"是否加粗",tabindex:"-1"},[s("是否加粗 "),l("a",{class:"header-anchor",href:"#是否加粗","aria-label":'Permalink to "是否加粗"'},"​")],-1)),B=e(()=>l("p",null,[s("使用 "),l("code",null,"bold"),s(" 属性可将文字设置为粗体显示")],-1)),k=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"default"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"未加粗的默认提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"bold"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"加粗的主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"bold"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"加粗的成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"bold"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"加粗的危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),x=e(()=>l("h2",{id:"是否居中",tabindex:"-1"},[s("是否居中 "),l("a",{class:"header-anchor",href:"#是否居中","aria-label":'Permalink to "是否居中"'},"​")],-1)),P=e(()=>l("p",null,[s("使用 "),l("code",null,"center"),s(" 属性可将文本显示中间")],-1)),I=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"default"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"未居中的默认提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"center"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"居中的主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"center"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"居中的成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"center"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"居中的危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),z=e(()=>l("h2",{id:"可关闭",tabindex:"-1"},[s("可关闭 "),l("a",{class:"header-anchor",href:"#可关闭","aria-label":'Permalink to "可关闭"'},"​")],-1)),S=e(()=>l("p",null,[s("使用 "),l("code",null,"close"),s(" 属性可以让 "),l("code",null,"alert"),s(" 被关闭")],-1)),q=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"close"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"close"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"close"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),w=e(()=>l("h2",{id:"简约模式",tabindex:"-1"},[s("简约模式 "),l("a",{class:"header-anchor",href:"#简约模式","aria-label":'Permalink to "简约模式"'},"​")],-1)),H=e(()=>l("p",null,[s("使用 "),l("code",null,"simple"),s(" 属性可以配置简约的 "),l("code",null,"alert"),s("，样式依然由 "),l("code",null,"type"),s(" 控制")],-1)),N=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"simple"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"default"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"默认提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"simple"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"simple"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"simple"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"simple"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"warning"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"警告提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"simple"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"info"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"信息提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),L=e(()=>l("h2",{id:"圆角",tabindex:"-1"},[s("圆角 "),l("a",{class:"header-anchor",href:"#圆角","aria-label":'Permalink to "圆角"'},"​")],-1)),V=e(()=>l("p",null,[l("code",null,"round"),s(" 属性可以配置 "),l("code",null,"alert"),s(" 显示为圆角")],-1)),T=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"round"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"round"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"round"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),M=e(()=>l("h2",{id:"背景颜色",tabindex:"-1"},[s("背景颜色 "),l("a",{class:"header-anchor",href:"#背景颜色","aria-label":'Permalink to "背景颜色"'},"​")],-1)),j=e(()=>l("p",null,[s("如果你希望文字带上背景颜色，你可以使用 "),l("code",null,"background"),s(" 属性自定义你的 "),l("code",null,"alert"),s(" 背景颜色")],-1)),G=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"background"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"#58c8de"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"background"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"#e372ff"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"background"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"#e49b33"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),J=e(()=>l("h2",{id:"带有标题",tabindex:"-1"},[s("带有标题 "),l("a",{class:"header-anchor",href:"#带有标题","aria-label":'Permalink to "带有标题"'},"​")],-1)),K=e(()=>l("p",null,[l("code",null,"title"),s(" 可以配置一个标题信息，标题会加粗")],-1)),O=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"title"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"Hello~"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"今天代码写的很愉快！"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"title"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"标题"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"心情很不错"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),U=e(()=>l("h2",{id:"滚动列表",tabindex:"-1"},[s("滚动列表 "),l("a",{class:"header-anchor",href:"#滚动列表","aria-label":'Permalink to "滚动列表"'},"​")],-1)),Q=e(()=>l("p",null,[l("code",null,"alert-list"),s(" 可传入一个数组进行滚动展示")],-1)),R=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"template"),l("span",{style:{color:"#89DDFF"}},">")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":alert-list"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"alertList"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"title"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"你知道吗？"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," />")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"}),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"script"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"lang"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"ts"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"setup"),l("span",{style:{color:"#89DDFF"}},">")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#C792EA"}},"const"),l("span",{style:{color:"#BABED8"}}," alertList "),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#BABED8"}}," [")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"    "),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#C3E88D"}},"把大象放进冰箱需要几步？"),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#89DDFF"}},",")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"    "),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#C3E88D"}},"第一步：打开冰箱门"),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#89DDFF"}},",")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"    "),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#C3E88D"}},"第二步：把大象装进去"),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#89DDFF"}},",")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"    "),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#C3E88D"}},"第三步：关好冰箱门"),l("span",{style:{color:"#89DDFF"}},"'")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  ]")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),W=e(()=>l("h2",{id:"自定义前缀-icon",tabindex:"-1"},[s("自定义前缀 icon "),l("a",{class:"header-anchor",href:"#自定义前缀-icon","aria-label":'Permalink to "自定义前缀 icon"'},"​")],-1)),X=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"template"),l("span",{style:{color:"#89DDFF"}},">")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"default"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":before-icon"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"默认提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":before-icon"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":before-icon"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":before-icon"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"}),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"script"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"lang"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"ts"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"setup"),l("span",{style:{color:"#89DDFF"}},">")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#89DDFF"}},"{"),l("span",{style:{color:"#F07178"}}," "),l("span",{style:{color:"#BABED8"}},"FIconFaceSmile"),l("span",{style:{color:"#F07178"}}," "),l("span",{style:{color:"#89DDFF"}},"}"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#89DDFF","font-style":"italic"}},"from"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#C3E88D"}},"@fighting-design/fighting-icon"),l("span",{style:{color:"#89DDFF"}},"'")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),Y=y('
Attributes ​
参数说明类型可选值默认值
type类型FightingTypedefault primary success danger warning infodefault
font-size副标题文字大小string / number————
title-size主标题文字大小string / number————
bold文字是否以粗体显示boolean——false
center是否居中boolean——false
close可关闭boolean——false
simple简约模式boolean——false
title标题string————
round显示为圆角boolean——false
background背景颜色string————
color副标题字体颜色string————
title-color主标题字体颜色string————
fixed是否固定定位boolean——false
alert-list滚动列表array (string[])————
duration滚动列表滚动时间间隔number————
before-icon自定义前缀 iconFightingIcon————
close-icon自定义关闭 iconFightingIcon————
on-close点击关闭之后执行的回调HandleMouse————
Slots ​
名称说明
default自定义副标题的内容
title自定义主标题的内容
closeIcon自定义关闭 icon
beforeIcon自定义前缀 icon
Interface ​
组件导出以下类型定义：
ts
import type { AlertInstance, AlertProps } from 'fighting-design'
样式变量 ​
组件提供了下列 CSS 变量，可用于自定义样式
名称描述
--alert-border-radius圆角大小
--alert-color文字颜色
--alert-background背景色
Contributors ​
',11),Z={href:"https://github.com/Tyh2001",target:"_blank"},$={href:"https://github.com/jardeng",target:"_blank"},ll={href:"https://github.com/HeHasGun",target:"_blank"},sl={href:"https://github.com/long-life233",target:"_blank"},ol={href:"https://github.com/w2xi",target:"_blank"},pl=JSON.parse('{"title":"Alert 警告","description":"","frontmatter":{},"headers":[],"relativePath":"components/alert.md","filePath":"components/alert.md","lastUpdated":1718865452000}'),tl={name:"components/alert.md"},al=f({...tl,setup(c){const d=["把大象放进冰箱需要几步？","第一步：打开冰箱门","第二步：把大象装进去","第三步：关好冰箱门"];return(el,nl)=>{const a=F("f-alert"),n=F("vp-demo"),r=F("f-avatar");return b(),i("div",null,[E,t(n,{source:""},{source:o(()=>[t(a,{type:"default"},{default:o(()=>[s("默认提示信息")]),_:1}),t(a,{type:"primary"},{default:o(()=>[s("主要提示信息")]),_:1}),t(a,{type:"success"},{default:o(()=>[s("成功提示信息")]),_:1}),t(a,{type:"danger"},{default:o(()=>[s("危险提示信息")]),_:1}),t(a,{type:"warning"},{default:o(()=>[s("警告提示信息")]),_:1}),t(a,{type:"info"},{default:o(()=>[s("信息提示信息")]),_:1})]),default:o(()=>[C]),_:1}),_,m,t(n,{source:""},{source:o(()=>[t(a,{"font-size":12,type:"default"},{default:o(()=>[s("默认提示信息")]),_:1}),t(a,{"font-size":14,type:"primary"},{default:o(()=>[s("主要提示信息")]),_:1}),t(a,{"font-size":16,type:"success"},{default:o(()=>[s("成功提示信息")]),_:1}),t(a,{"font-size":"20px",type:"danger"},{default:o(()=>[s("危险提示信息")]),_:1}),t(a,{"font-size":"24px",type:"warning"},{default:o(()=>[s("警告提示信息")]),_:1}),t(a,{"font-size":"27px",type:"info"},{default:o(()=>[s("信息提示信息")]),_:1})]),default:o(()=>[A]),_:1}),g,B,t(n,{source:""},{source:o(()=>[t(a,{type:"default"},{default:o(()=>[s("未加粗的默认提示信息")]),_:1}),t(a,{type:"primary",bold:""},{default:o(()=>[s("加粗的主要提示信息")]),_:1}),t(a,{type:"success",bold:""},{default:o(()=>[s("加粗的成功提示信息")]),_:1}),t(a,{type:"danger",bold:""},{default:o(()=>[s("加粗的危险提示信息")]),_:1})]),default:o(()=>[k]),_:1}),x,P,t(n,{source:""},{source:o(()=>[t(a,{type:"default"},{default:o(()=>[s("未居中的默认提示信息")]),_:1}),t(a,{type:"primary",center:""},{default:o(()=>[s("居中的主要提示信息")]),_:1}),t(a,{type:"success",center:""},{default:o(()=>[s("居中的成功提示信息")]),_:1}),t(a,{type:"danger",center:""},{default:o(()=>[s("居中的危险提示信息")]),_:1})]),default:o(()=>[I]),_:1}),z,S,t(n,{source:""},{source:o(()=>[t(a,{type:"primary",close:""},{default:o(()=>[s("主要提示信息")]),_:1}),t(a,{type:"success",close:""},{default:o(()=>[s("成功提示信息")]),_:1}),t(a,{type:"danger",close:""},{default:o(()=>[s("危险提示信息")]),_:1})]),default:o(()=>[q]),_:1}),w,H,t(n,{source:""},{source:o(()=>[t(a,{simple:"",type:"default"},{default:o(()=>[s("默认提示信息")]),_:1}),t(a,{simple:"",type:"primary"},{default:o(()=>[s("主要提示信息")]),_:1}),t(a,{simple:"",type:"success"},{default:o(()=>[s("成功提示信息")]),_:1}),t(a,{simple:"",type:"danger"},{default:o(()=>[s("危险提示信息")]),_:1}),t(a,{simple:"",type:"warning"},{default:o(()=>[s("警告提示信息")]),_:1}),t(a,{simple:"",type:"info"},{default:o(()=>[s("信息提示信息")]),_:1})]),default:o(()=>[N]),_:1}),L,V,t(n,{source:""},{source:o(()=>[t(a,{type:"primary",round:""},{default:o(()=>[s("主要提示信息")]),_:1}),t(a,{type:"success",round:""},{default:o(()=>[s("成功提示信息")]),_:1}),t(a,{type:"danger",round:""},{default:o(()=>[s("危险提示信息")]),_:1})]),default:o(()=>[T]),_:1}),M,j,t(n,{source:""},{source:o(()=>[t(a,{type:"primary",background:"#58c8de"},{default:o(()=>[s("主要提示信息")]),_:1}),t(a,{type:"success",background:"#e372ff"},{default:o(()=>[s("成功提示信息")]),_:1}),t(a,{type:"danger",background:"#e49b33"},{default:o(()=>[s("危险提示信息")]),_:1})]),default:o(()=>[G]),_:1}),J,K,t(n,{source:""},{source:o(()=>[t(a,{type:"primary",title:"Hello~"},{default:o(()=>[s("今天代码写的很愉快！")]),_:1}),t(a,{type:"success",title:"标题"},{default:o(()=>[s("心情很不错")]),_:1})]),default:o(()=>[O]),_:1}),U,Q,t(n,{source:""},{source:o(()=>[t(a,{"alert-list":d,title:"你知道吗？",type:"primary"})]),default:o(()=>[R]),_:1}),W,t(n,{source:""},{source:o(()=>[t(a,{type:"default","before-icon":p(D)},{default:o(()=>[s("默认提示信息")]),_:1},8,["before-icon"]),t(a,{type:"primary","before-icon":p(D)},{default:o(()=>[s("主要提示信息")]),_:1},8,["before-icon"]),t(a,{type:"success","before-icon":p(D)},{default:o(()=>[s("成功提示信息")]),_:1},8,["before-icon"]),t(a,{type:"danger","before-icon":p(D)},{default:o(()=>[s("危险提示信息")]),_:1},8,["before-icon"])]),default:o(()=>[X]),_:1}),Y,l("a",Z,[t(r,{round:"",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),l("a",$,[t(r,{round:"",src:"https://avatars.githubusercontent.com/u/19302222?v=4"})]),l("a",ll,[t(r,{round:"",src:"https://avatars.githubusercontent.com/u/66313154?v=4"})]),l("a",sl,[t(r,{round:"",src:"https://avatars.githubusercontent.com/u/77321887?v=4"})]),l("a",ol,[t(r,{round:"",src:"https://avatars.githubusercontent.com/u/57785259?v=4"})])])}}});const Dl=h(al,[["__scopeId","data-v-e3f5b8f2"]]);export{pl as __pageData,Dl as default};
diff --git a/assets/components_alert.md.b274b202.lean.js b/assets/components_alert.md.b274b202.lean.js
deleted file mode 100644
index fbe90b33b..000000000
--- a/assets/components_alert.md.b274b202.lean.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import{d as f,c as i,C as t,y as o,v as l,M as y,A as F,o as b,a as s,b as p,K as v,L as u,_ as h}from"./chunks/framework.a8ebc9a3.js";import{F as D}from"./chunks/index.36ec2e32.js";const e=c=>(v("data-v-e3f5b8f2"),c=c(),u(),c),E=y('
Alert 警告 ​
用于页面中展示重要的提示信息
基本使用 ​
type 属性可以配置不同的主题类型，展示不同的颜色状态
',5),C=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"default"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"默认提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"warning"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"警告提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"info"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"信息提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),_=e(()=>l("h2",{id:"不同文字大小",tabindex:"-1"},[s("不同文字大小 "),l("a",{class:"header-anchor",href:"#不同文字大小","aria-label":'Permalink to "不同文字大小"'},"​")],-1)),m=e(()=>l("p",null,[l("code",null,"font-size"),s(" 属性可以配置不同大小的 "),l("code",null,"alert")],-1)),A=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":font-size"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"12"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"default"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"默认提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":font-size"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"14"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":font-size"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"16"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"font-size"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"20px"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"font-size"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"24px"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"warning"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"警告提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"font-size"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"27px"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"info"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"信息提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),g=e(()=>l("h2",{id:"是否加粗",tabindex:"-1"},[s("是否加粗 "),l("a",{class:"header-anchor",href:"#是否加粗","aria-label":'Permalink to "是否加粗"'},"​")],-1)),B=e(()=>l("p",null,[s("使用 "),l("code",null,"bold"),s(" 属性可将文字设置为粗体显示")],-1)),k=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"default"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"未加粗的默认提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"bold"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"加粗的主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"bold"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"加粗的成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"bold"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"加粗的危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),x=e(()=>l("h2",{id:"是否居中",tabindex:"-1"},[s("是否居中 "),l("a",{class:"header-anchor",href:"#是否居中","aria-label":'Permalink to "是否居中"'},"​")],-1)),P=e(()=>l("p",null,[s("使用 "),l("code",null,"center"),s(" 属性可将文本显示中间")],-1)),I=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"default"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"未居中的默认提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"center"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"居中的主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"center"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"居中的成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"center"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"居中的危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),z=e(()=>l("h2",{id:"可关闭",tabindex:"-1"},[s("可关闭 "),l("a",{class:"header-anchor",href:"#可关闭","aria-label":'Permalink to "可关闭"'},"​")],-1)),S=e(()=>l("p",null,[s("使用 "),l("code",null,"close"),s(" 属性可以让 "),l("code",null,"alert"),s(" 被关闭")],-1)),q=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"close"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"close"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"close"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),w=e(()=>l("h2",{id:"简约模式",tabindex:"-1"},[s("简约模式 "),l("a",{class:"header-anchor",href:"#简约模式","aria-label":'Permalink to "简约模式"'},"​")],-1)),H=e(()=>l("p",null,[s("使用 "),l("code",null,"simple"),s(" 属性可以配置简约的 "),l("code",null,"alert"),s("，样式依然由 "),l("code",null,"type"),s(" 控制")],-1)),N=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"simple"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"default"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"默认提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"simple"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"simple"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"simple"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"simple"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"warning"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"警告提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"simple"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"info"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"信息提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),L=e(()=>l("h2",{id:"圆角",tabindex:"-1"},[s("圆角 "),l("a",{class:"header-anchor",href:"#圆角","aria-label":'Permalink to "圆角"'},"​")],-1)),V=e(()=>l("p",null,[l("code",null,"round"),s(" 属性可以配置 "),l("code",null,"alert"),s(" 显示为圆角")],-1)),T=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"round"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"round"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"round"),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),M=e(()=>l("h2",{id:"背景颜色",tabindex:"-1"},[s("背景颜色 "),l("a",{class:"header-anchor",href:"#背景颜色","aria-label":'Permalink to "背景颜色"'},"​")],-1)),j=e(()=>l("p",null,[s("如果你希望文字带上背景颜色，你可以使用 "),l("code",null,"background"),s(" 属性自定义你的 "),l("code",null,"alert"),s(" 背景颜色")],-1)),G=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"background"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"#58c8de"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"background"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"#e372ff"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"background"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"#e49b33"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),J=e(()=>l("h2",{id:"带有标题",tabindex:"-1"},[s("带有标题 "),l("a",{class:"header-anchor",href:"#带有标题","aria-label":'Permalink to "带有标题"'},"​")],-1)),K=e(()=>l("p",null,[l("code",null,"title"),s(" 可以配置一个标题信息，标题会加粗")],-1)),O=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"title"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"Hello~"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"今天代码写的很愉快！"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"title"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"标题"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"心情很不错"),l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),U=e(()=>l("h2",{id:"滚动列表",tabindex:"-1"},[s("滚动列表 "),l("a",{class:"header-anchor",href:"#滚动列表","aria-label":'Permalink to "滚动列表"'},"​")],-1)),Q=e(()=>l("p",null,[l("code",null,"alert-list"),s(" 可传入一个数组进行滚动展示")],-1)),R=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"template"),l("span",{style:{color:"#89DDFF"}},">")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":alert-list"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"alertList"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"title"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"你知道吗？"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," />")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"}),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"script"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"lang"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"ts"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"setup"),l("span",{style:{color:"#89DDFF"}},">")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#C792EA"}},"const"),l("span",{style:{color:"#BABED8"}}," alertList "),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#BABED8"}}," [")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"    "),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#C3E88D"}},"把大象放进冰箱需要几步？"),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#89DDFF"}},",")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"    "),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#C3E88D"}},"第一步：打开冰箱门"),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#89DDFF"}},",")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"    "),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#C3E88D"}},"第二步：把大象装进去"),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#89DDFF"}},",")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"    "),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#C3E88D"}},"第三步：关好冰箱门"),l("span",{style:{color:"#89DDFF"}},"'")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  ]")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),W=e(()=>l("h2",{id:"自定义前缀-icon",tabindex:"-1"},[s("自定义前缀 icon "),l("a",{class:"header-anchor",href:"#自定义前缀-icon","aria-label":'Permalink to "自定义前缀 icon"'},"​")],-1)),X=e(()=>l("div",{class:"language-html"},[l("button",{title:"Copy Code",class:"copy"}),l("span",{class:"lang"},"html"),l("pre",{class:"shiki material-theme-palenight"},[l("code",null,[l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"template"),l("span",{style:{color:"#89DDFF"}},">")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"default"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":before-icon"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"默认提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"primary"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":before-icon"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"主要提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"success"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":before-icon"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"成功提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"f-alert"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"type"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"danger"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},":before-icon"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}},">"),l("span",{style:{color:"#BABED8"}},"危险提示信息"),l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"")]),s(`
-`),l("span",{class:"line"}),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"<"),l("span",{style:{color:"#F07178"}},"script"),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"lang"),l("span",{style:{color:"#89DDFF"}},"="),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#C3E88D"}},"ts"),l("span",{style:{color:"#89DDFF"}},'"'),l("span",{style:{color:"#89DDFF"}}," "),l("span",{style:{color:"#C792EA"}},"setup"),l("span",{style:{color:"#89DDFF"}},">")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#BABED8"}},"  "),l("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#89DDFF"}},"{"),l("span",{style:{color:"#F07178"}}," "),l("span",{style:{color:"#BABED8"}},"FIconFaceSmile"),l("span",{style:{color:"#F07178"}}," "),l("span",{style:{color:"#89DDFF"}},"}"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#89DDFF","font-style":"italic"}},"from"),l("span",{style:{color:"#BABED8"}}," "),l("span",{style:{color:"#89DDFF"}},"'"),l("span",{style:{color:"#C3E88D"}},"@fighting-design/fighting-icon"),l("span",{style:{color:"#89DDFF"}},"'")]),s(`
-`),l("span",{class:"line"},[l("span",{style:{color:"#89DDFF"}},"")])])])],-1)),Y=y('
Attributes ​
参数说明类型可选值默认值
type类型FightingTypedefault primary success danger warning infodefault
font-size副标题文字大小string / number————
title-size主标题文字大小string / number————
bold文字是否以粗体显示boolean——false
center是否居中boolean——false
close可关闭boolean——false
simple简约模式boolean——false
title标题string————
round显示为圆角boolean——false
background背景颜色string————
color副标题字体颜色string————
title-color主标题字体颜色string————
fixed是否固定定位boolean——false
alert-list滚动列表array (string[])————
duration滚动列表滚动时间间隔number————
before-icon自定义前缀 iconFightingIcon————
close-icon自定义关闭 iconFightingIcon————
on-close点击关闭之后执行的回调HandleMouse————
Slots ​
名称说明
default自定义副标题的内容
title自定义主标题的内容
closeIcon自定义关闭 icon
beforeIcon自定义前缀 icon
Interface ​
组件导出以下类型定义：
ts
import type { AlertInstance, AlertProps } from 'fighting-design'
样式变量 ​
组件提供了下列 CSS 变量，可用于自定义样式
名称描述
--alert-border-radius圆角大小
--alert-color文字颜色
--alert-background背景色
Contributors ​
',11),Z={href:"https://github.com/Tyh2001",target:"_blank"},$={href:"https://github.com/jardeng",target:"_blank"},ll={href:"https://github.com/HeHasGun",target:"_blank"},sl={href:"https://github.com/long-life233",target:"_blank"},ol={href:"https://github.com/w2xi",target:"_blank"},pl=JSON.parse('{"title":"Alert 警告","description":"","frontmatter":{},"headers":[],"relativePath":"components/alert.md","filePath":"components/alert.md","lastUpdated":1718865452000}'),tl={name:"components/alert.md"},al=f({...tl,setup(c){const d=["把大象放进冰箱需要几步？","第一步：打开冰箱门","第二步：把大象装进去","第三步：关好冰箱门"];return(el,nl)=>{const a=F("f-alert"),n=F("vp-demo"),r=F("f-avatar");return b(),i("div",null,[E,t(n,{source:""},{source:o(()=>[t(a,{type:"default"},{default:o(()=>[s("默认提示信息")]),_:1}),t(a,{type:"primary"},{default:o(()=>[s("主要提示信息")]),_:1}),t(a,{type:"success"},{default:o(()=>[s("成功提示信息")]),_:1}),t(a,{type:"danger"},{default:o(()=>[s("危险提示信息")]),_:1}),t(a,{type:"warning"},{default:o(()=>[s("警告提示信息")]),_:1}),t(a,{type:"info"},{default:o(()=>[s("信息提示信息")]),_:1})]),default:o(()=>[C]),_:1}),_,m,t(n,{source:""},{source:o(()=>[t(a,{"font-size":12,type:"default"},{default:o(()=>[s("默认提示信息")]),_:1}),t(a,{"font-size":14,type:"primary"},{default:o(()=>[s("主要提示信息")]),_:1}),t(a,{"font-size":16,type:"success"},{default:o(()=>[s("成功提示信息")]),_:1}),t(a,{"font-size":"20px",type:"danger"},{default:o(()=>[s("危险提示信息")]),_:1}),t(a,{"font-size":"24px",type:"warning"},{default:o(()=>[s("警告提示信息")]),_:1}),t(a,{"font-size":"27px",type:"info"},{default:o(()=>[s("信息提示信息")]),_:1})]),default:o(()=>[A]),_:1}),g,B,t(n,{source:""},{source:o(()=>[t(a,{type:"default"},{default:o(()=>[s("未加粗的默认提示信息")]),_:1}),t(a,{type:"primary",bold:""},{default:o(()=>[s("加粗的主要提示信息")]),_:1}),t(a,{type:"success",bold:""},{default:o(()=>[s("加粗的成功提示信息")]),_:1}),t(a,{type:"danger",bold:""},{default:o(()=>[s("加粗的危险提示信息")]),_:1})]),default:o(()=>[k]),_:1}),x,P,t(n,{source:""},{source:o(()=>[t(a,{type:"default"},{default:o(()=>[s("未居中的默认提示信息")]),_:1}),t(a,{type:"primary",center:""},{default:o(()=>[s("居中的主要提示信息")]),_:1}),t(a,{type:"success",center:""},{default:o(()=>[s("居中的成功提示信息")]),_:1}),t(a,{type:"danger",center:""},{default:o(()=>[s("居中的危险提示信息")]),_:1})]),default:o(()=>[I]),_:1}),z,S,t(n,{source:""},{source:o(()=>[t(a,{type:"primary",close:""},{default:o(()=>[s("主要提示信息")]),_:1}),t(a,{type:"success",close:""},{default:o(()=>[s("成功提示信息")]),_:1}),t(a,{type:"danger",close:""},{default:o(()=>[s("危险提示信息")]),_:1})]),default:o(()=>[q]),_:1}),w,H,t(n,{source:""},{source:o(()=>[t(a,{simple:"",type:"default"},{default:o(()=>[s("默认提示信息")]),_:1}),t(a,{simple:"",type:"primary"},{default:o(()=>[s("主要提示信息")]),_:1}),t(a,{simple:"",type:"success"},{default:o(()=>[s("成功提示信息")]),_:1}),t(a,{simple:"",type:"danger"},{default:o(()=>[s("危险提示信息")]),_:1}),t(a,{simple:"",type:"warning"},{default:o(()=>[s("警告提示信息")]),_:1}),t(a,{simple:"",type:"info"},{default:o(()=>[s("信息提示信息")]),_:1})]),default:o(()=>[N]),_:1}),L,V,t(n,{source:""},{source:o(()=>[t(a,{type:"primary",round:""},{default:o(()=>[s("主要提示信息")]),_:1}),t(a,{type:"success",round:""},{default:o(()=>[s("成功提示信息")]),_:1}),t(a,{type:"danger",round:""},{default:o(()=>[s("危险提示信息")]),_:1})]),default:o(()=>[T]),_:1}),M,j,t(n,{source:""},{source:o(()=>[t(a,{type:"primary",background:"#58c8de"},{default:o(()=>[s("主要提示信息")]),_:1}),t(a,{type:"success",background:"#e372ff"},{default:o(()=>[s("成功提示信息")]),_:1}),t(a,{type:"danger",background:"#e49b33"},{default:o(()=>[s("危险提示信息")]),_:1})]),default:o(()=>[G]),_:1}),J,K,t(n,{source:""},{source:o(()=>[t(a,{type:"primary",title:"Hello~"},{default:o(()=>[s("今天代码写的很愉快！")]),_:1}),t(a,{type:"success",title:"标题"},{default:o(()=>[s("心情很不错")]),_:1})]),default:o(()=>[O]),_:1}),U,Q,t(n,{source:""},{source:o(()=>[t(a,{"alert-list":d,title:"你知道吗？",type:"primary"})]),default:o(()=>[R]),_:1}),W,t(n,{source:""},{source:o(()=>[t(a,{type:"default","before-icon":p(D)},{default:o(()=>[s("默认提示信息")]),_:1},8,["before-icon"]),t(a,{type:"primary","before-icon":p(D)},{default:o(()=>[s("主要提示信息")]),_:1},8,["before-icon"]),t(a,{type:"success","before-icon":p(D)},{default:o(()=>[s("成功提示信息")]),_:1},8,["before-icon"]),t(a,{type:"danger","before-icon":p(D)},{default:o(()=>[s("危险提示信息")]),_:1},8,["before-icon"])]),default:o(()=>[X]),_:1}),Y,l("a",Z,[t(r,{round:"",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),l("a",$,[t(r,{round:"",src:"https://avatars.githubusercontent.com/u/19302222?v=4"})]),l("a",ll,[t(r,{round:"",src:"https://avatars.githubusercontent.com/u/66313154?v=4"})]),l("a",sl,[t(r,{round:"",src:"https://avatars.githubusercontent.com/u/77321887?v=4"})]),l("a",ol,[t(r,{round:"",src:"https://avatars.githubusercontent.com/u/57785259?v=4"})])])}}});const Dl=h(al,[["__scopeId","data-v-e3f5b8f2"]]);export{pl as __pageData,Dl as default};
diff --git a/assets/components_avatar-group.md.e6bfd375.js b/assets/components_avatar-group.md.c9f23b84.js
similarity index 99%
rename from assets/components_avatar-group.md.e6bfd375.js
rename to assets/components_avatar-group.md.c9f23b84.js
index 1ed93bbfb..bed321cdc 100644
--- a/assets/components_avatar-group.md.e6bfd375.js
+++ b/assets/components_avatar-group.md.c9f23b84.js
@@ -1,4 +1,4 @@
-import{_ as p,c as D,C as t,y as l,v as o,M as c,a as s,A as e,o as F}from"./chunks/framework.a8ebc9a3.js";const x=JSON.parse('{"title":"Avatar Group 头像组","description":"","frontmatter":{},"headers":[],"relativePath":"components/avatar-group.md","filePath":"components/avatar-group.md","lastUpdated":1718865452000}'),y={name:"components/avatar-group.md"},d=c('
Avatar Group 头像组 ​
多个头像的集合
基本使用 ​
在 <f-avatar-group> 组件内部插入 <f-avatar> 组件
',5),i=o("div",{class:"language-html"},[o("button",{title:"Copy Code",class:"copy"}),o("span",{class:"lang"},"html"),o("pre",{class:"shiki material-theme-palenight"},[o("code",null,[o("span",{class:"line"},[o("span",{style:{color:"#89DDFF"}},"<"),o("span",{style:{color:"#F07178"}},"f-avatar-group"),o("span",{style:{color:"#89DDFF"}},">")]),s(`
+import{_ as p,c as D,C as t,y as l,v as o,M as c,a as s,A as e,o as F}from"./chunks/framework.a8ebc9a3.js";const x=JSON.parse('{"title":"Avatar Group 头像组","description":"","frontmatter":{},"headers":[],"relativePath":"components/avatar-group.md","filePath":"components/avatar-group.md","lastUpdated":1718865313000}'),y={name:"components/avatar-group.md"},d=c('
Avatar Group 头像组 ​
多个头像的集合
基本使用 ​
在 <f-avatar-group> 组件内部插入 <f-avatar> 组件
',5),i=o("div",{class:"language-html"},[o("button",{title:"Copy Code",class:"copy"}),o("span",{class:"lang"},"html"),o("pre",{class:"shiki material-theme-palenight"},[o("code",null,[o("span",{class:"line"},[o("span",{style:{color:"#89DDFF"}},"<"),o("span",{style:{color:"#F07178"}},"f-avatar-group"),o("span",{style:{color:"#89DDFF"}},">")]),s(`
 `),o("span",{class:"line"},[o("span",{style:{color:"#BABED8"}},"  "),o("span",{style:{color:"#89DDFF"}},"<"),o("span",{style:{color:"#F07178"}},"f-avatar"),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"text"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"1"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"font-color"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"#fff"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"background"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"orange"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," />")]),s(`
 `),o("span",{class:"line"},[o("span",{style:{color:"#BABED8"}},"  "),o("span",{style:{color:"#89DDFF"}},"<"),o("span",{style:{color:"#F07178"}},"f-avatar"),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"text"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"2"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"font-color"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"#fff"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"background"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"blue"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," />")]),s(`
 `),o("span",{class:"line"},[o("span",{style:{color:"#BABED8"}},"  "),o("span",{style:{color:"#89DDFF"}},"<"),o("span",{style:{color:"#F07178"}},"f-avatar"),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"text"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"3"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"font-color"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"#fff"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"background"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"skyblue"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," />")]),s(`
diff --git a/assets/components_avatar-group.md.e6bfd375.lean.js b/assets/components_avatar-group.md.c9f23b84.lean.js
similarity index 99%
rename from assets/components_avatar-group.md.e6bfd375.lean.js
rename to assets/components_avatar-group.md.c9f23b84.lean.js
index 606df9a48..0ce035e75 100644
--- a/assets/components_avatar-group.md.e6bfd375.lean.js
+++ b/assets/components_avatar-group.md.c9f23b84.lean.js
@@ -1,4 +1,4 @@
-import{_ as p,c as D,C as t,y as l,v as o,M as c,a as s,A as e,o as F}from"./chunks/framework.a8ebc9a3.js";const x=JSON.parse('{"title":"Avatar Group 头像组","description":"","frontmatter":{},"headers":[],"relativePath":"components/avatar-group.md","filePath":"components/avatar-group.md","lastUpdated":1718865452000}'),y={name:"components/avatar-group.md"},d=c("",5),i=o("div",{class:"language-html"},[o("button",{title:"Copy Code",class:"copy"}),o("span",{class:"lang"},"html"),o("pre",{class:"shiki material-theme-palenight"},[o("code",null,[o("span",{class:"line"},[o("span",{style:{color:"#89DDFF"}},"<"),o("span",{style:{color:"#F07178"}},"f-avatar-group"),o("span",{style:{color:"#89DDFF"}},">")]),s(`
+import{_ as p,c as D,C as t,y as l,v as o,M as c,a as s,A as e,o as F}from"./chunks/framework.a8ebc9a3.js";const x=JSON.parse('{"title":"Avatar Group 头像组","description":"","frontmatter":{},"headers":[],"relativePath":"components/avatar-group.md","filePath":"components/avatar-group.md","lastUpdated":1718865313000}'),y={name:"components/avatar-group.md"},d=c("",5),i=o("div",{class:"language-html"},[o("button",{title:"Copy Code",class:"copy"}),o("span",{class:"lang"},"html"),o("pre",{class:"shiki material-theme-palenight"},[o("code",null,[o("span",{class:"line"},[o("span",{style:{color:"#89DDFF"}},"<"),o("span",{style:{color:"#F07178"}},"f-avatar-group"),o("span",{style:{color:"#89DDFF"}},">")]),s(`
 `),o("span",{class:"line"},[o("span",{style:{color:"#BABED8"}},"  "),o("span",{style:{color:"#89DDFF"}},"<"),o("span",{style:{color:"#F07178"}},"f-avatar"),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"text"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"1"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"font-color"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"#fff"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"background"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"orange"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," />")]),s(`
 `),o("span",{class:"line"},[o("span",{style:{color:"#BABED8"}},"  "),o("span",{style:{color:"#89DDFF"}},"<"),o("span",{style:{color:"#F07178"}},"f-avatar"),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"text"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"2"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"font-color"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"#fff"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"background"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"blue"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," />")]),s(`
 `),o("span",{class:"line"},[o("span",{style:{color:"#BABED8"}},"  "),o("span",{style:{color:"#89DDFF"}},"<"),o("span",{style:{color:"#F07178"}},"f-avatar"),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"text"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"3"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"font-color"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"#fff"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," "),o("span",{style:{color:"#C792EA"}},"background"),o("span",{style:{color:"#89DDFF"}},"="),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#C3E88D"}},"skyblue"),o("span",{style:{color:"#89DDFF"}},'"'),o("span",{style:{color:"#89DDFF"}}," />")]),s(`
diff --git a/assets/components_avatar.md.665bcf5a.js b/assets/components_avatar.md.417bd75a.js
similarity index 66%
rename from assets/components_avatar.md.665bcf5a.js
rename to assets/components_avatar.md.417bd75a.js
index d52e0b29b..3d787776b 100644
--- a/assets/components_avatar.md.665bcf5a.js
+++ b/assets/components_avatar.md.417bd75a.js
@@ -1,30 +1,30 @@
-import{_ as v,A as r,o as b,x as g,y as o,v as a,C as s,K as h,L as u,d as _,c as E,M as F,b as D,a as t}from"./chunks/framework.a8ebc9a3.js";import{F as C}from"./chunks/index.3b5750fa.js";import{F as A}from"./chunks/index.36ec2e32.js";const B={},p=e=>(h("data-v-57a98fd4"),e=e(),u(),e),k={class:"avatar-block"},x=p(()=>a("code",null,"fill",-1)),z={class:"avatar-block"},S=p(()=>a("code",null,"contain",-1)),q={class:"avatar-block"},I=p(()=>a("code",null,"cover",-1)),P={class:"avatar-block"},w=p(()=>a("code",null,"none",-1)),j={class:"avatar-block"},N=p(()=>a("code",null,"scale-down",-1));function $(e,y){const d=r("f-avatar"),i=r("f-space");return b(),g(i,{spacing:"mini"},{default:o(()=>[a("div",k,[x,s(d,{fit:"fill",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",z,[S,s(d,{fit:"contain",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",q,[I,s(d,{fit:"cover",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",P,[w,s(d,{fit:"none",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",j,[N,s(d,{fit:"scale-down",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})])]),_:1})}const U=v(B,[["render",$],["__scopeId","data-v-57a98fd4"]]),c=e=>(h("data-v-9dc38bc2"),e=e(),u(),e),L=F('
Avatar 头像 ​
用户的头像展示
基本使用 ​
使用 src 属性设置图片的路径
round 属性可以配置圆角头像
',6),V=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"round"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")])])])],-1)),T=c(()=>a("h2",{id:"使用本地图片",tabindex:"-1"},[t("使用本地图片 "),a("a",{class:"header-anchor",href:"#使用本地图片","aria-label":'Permalink to "使用本地图片"'},"​")],-1)),H=c(()=>a("p",null,[t("如需要使用本地图片，需要使用 "),a("a",{href:"https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url",target:"_blank",rel:"noreferrer"},[t("new URL(url, i"),a("wbr"),t("mport.meta.url)")]),t(" 手动导入图片资源使用：")],-1)),R=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
+import{_ as v,A as d,o as b,x as g,y as o,v as a,C as s,K as h,L as u,d as _,c as E,M as F,b as D,a as t}from"./chunks/framework.a8ebc9a3.js";import{F as C}from"./chunks/index.3b5750fa.js";import{F as A}from"./chunks/index.36ec2e32.js";const B={},p=c=>(h("data-v-57a98fd4"),c=c(),u(),c),k={class:"avatar-block"},x=p(()=>a("code",null,"fill",-1)),z={class:"avatar-block"},S=p(()=>a("code",null,"contain",-1)),q={class:"avatar-block"},I=p(()=>a("code",null,"cover",-1)),P={class:"avatar-block"},w=p(()=>a("code",null,"none",-1)),j={class:"avatar-block"},N=p(()=>a("code",null,"scale-down",-1));function $(c,y){const r=d("f-avatar"),i=d("f-space");return b(),g(i,{spacing:"mini"},{default:o(()=>[a("div",k,[x,s(r,{fit:"fill",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",z,[S,s(r,{fit:"contain",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",q,[I,s(r,{fit:"cover",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",P,[w,s(r,{fit:"none",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",j,[N,s(r,{fit:"scale-down",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})])]),_:1})}const U=v(B,[["render",$],["__scopeId","data-v-57a98fd4"]]),l=c=>(h("data-v-8122bc0a"),c=c(),u(),c),L=F('
Avatar 头像 ​
用户的头像展示
基本使用 ​
使用 src 属性设置图片的路径
round 属性可以配置圆角头像
',6),V=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"round"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")])])])],-1)),T=l(()=>a("h2",{id:"使用本地图片",tabindex:"-1"},[t("使用本地图片 "),a("a",{class:"header-anchor",href:"#使用本地图片","aria-label":'Permalink to "使用本地图片"'},"​")],-1)),H=l(()=>a("p",null,[t("如需要使用本地图片，需要使用 "),a("a",{href:"https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url",target:"_blank",rel:"noreferrer"},[t("new URL(url, i"),a("wbr"),t("mport.meta.url)")]),t(" 手动导入图片资源使用：")],-1)),R=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"url"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")]),t(`
 `),a("span",{class:"line"}),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"script"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"lang"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"ts"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"setup"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#C792EA"}},"const"),a("span",{style:{color:"#BABED8"}}," url "),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF"}},"new"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#82AAFF"}},"URL"),a("span",{style:{color:"#BABED8"}},"("),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"./image/1.jpg"),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#89DDFF"}},","),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),a("span",{style:{color:"#89DDFF"}},"."),a("span",{style:{color:"#BABED8"}},"meta"),a("span",{style:{color:"#89DDFF"}},"."),a("span",{style:{color:"#BABED8"}},"url)"),a("span",{style:{color:"#89DDFF"}},"."),a("span",{style:{color:"#BABED8"}},"href")]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),W=c(()=>a("h2",{id:"适应容器的方式",tabindex:"-1"},[t("适应容器的方式 "),a("a",{class:"header-anchor",href:"#适应容器的方式","aria-label":'Permalink to "适应容器的方式"'},"​")],-1)),M=c(()=>a("p",null,[a("code",null,"fit"),t(" 属性可以配置头像不同适应容器的方式，详见原生 "),a("a",{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#try_it",target:"_blank",rel:"noreferrer"},"object-fit"),t(" 属性")],-1)),J=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"fill"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),W=l(()=>a("h2",{id:"适应容器的方式",tabindex:"-1"},[t("适应容器的方式 "),a("a",{class:"header-anchor",href:"#适应容器的方式","aria-label":'Permalink to "适应容器的方式"'},"​")],-1)),M=l(()=>a("p",null,[a("code",null,"fit"),t(" 属性可以配置头像不同适应容器的方式，详见原生 "),a("a",{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#try_it",target:"_blank",rel:"noreferrer"},"object-fit"),t(" 属性")],-1)),J=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"fill"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"contain"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"cover"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"none"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"scale-down"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")])])])],-1)),K=c(()=>a("h2",{id:"不同大小",tabindex:"-1"},[t("不同大小 "),a("a",{class:"header-anchor",href:"#不同大小","aria-label":'Permalink to "不同大小"'},"​")],-1)),O=c(()=>a("p",null,[a("code",null,"size"),t(" 属性可以配置不同大小的头像，也可以传入指定的数字，会自动转换为 "),a("code",null,"px")],-1)),G=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"85"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"scale-down"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")])])])],-1)),K=l(()=>a("h2",{id:"不同大小",tabindex:"-1"},[t("不同大小 "),a("a",{class:"header-anchor",href:"#不同大小","aria-label":'Permalink to "不同大小"'},"​")],-1)),O=l(()=>a("p",null,[a("code",null,"size"),t(" 属性可以配置不同大小的头像，也可以传入指定的数字，会自动转换为 "),a("code",null,"px")],-1)),G=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"85"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"large"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"middle"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"small"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"mini"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")])])])],-1)),Q=F('
图标头像 ​
icon 属性可以配置带有 icon 的图标头像
background 属性可以配置背景色，font-color 属性可以自定义图标颜色
font-size可以配置图标大小，后面必须要加入单位
',4),X=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"mini"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")])])])],-1)),Q=F('
图标头像 ​
icon 属性可以配置带有 icon 的图标头像
background 属性可以配置背景色，font-color 属性可以自定义图标颜色
font-size可以配置图标大小，后面必须要加入单位
',4),X=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":icon"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"30"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"background"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"skyblue"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"background"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"orange"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"font-color"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"#fff"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":icon"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"FIconBug"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"30"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")]),t(`
 `),a("span",{class:"line"}),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"script"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"lang"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"ts"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"setup"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF"}},"{"),a("span",{style:{color:"#F07178"}}," "),a("span",{style:{color:"#BABED8"}},"FIconFaceSmile"),a("span",{style:{color:"#89DDFF"}},","),a("span",{style:{color:"#F07178"}}," "),a("span",{style:{color:"#BABED8"}},"FIconBug"),a("span",{style:{color:"#F07178"}}," "),a("span",{style:{color:"#89DDFF"}},"}"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF","font-style":"italic"}},"from"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"@fighting-design/fighting-icon"),a("span",{style:{color:"#89DDFF"}},"'")]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),Y=c(()=>a("h2",{id:"懒加载",tabindex:"-1"},[t("懒加载 "),a("a",{class:"header-anchor",href:"#懒加载","aria-label":'Permalink to "懒加载"'},"​")],-1)),Z=c(()=>a("p",null,[a("code",null,"lazy"),t(" 属性可以设置图片懒加载，详情可参考 "),a("code",null,"DevTools"),t(" 的 "),a("code",null,"Network")],-1)),aa=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar")]),t(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),Y=l(()=>a("h2",{id:"懒加载",tabindex:"-1"},[t("懒加载 "),a("a",{class:"header-anchor",href:"#懒加载","aria-label":'Permalink to "懒加载"'},"​")],-1)),Z=l(()=>a("p",null,[a("code",null,"lazy"),t(" 属性可以设置图片懒加载，详情可参考 "),a("code",null,"DevTools"),t(" 的 "),a("code",null,"Network")],-1)),aa=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"  "),a("span",{style:{color:"#C792EA"}},"width"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"200px"),a("span",{style:{color:"#89DDFF"}},'"')]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"  "),a("span",{style:{color:"#C792EA"}},"lazy")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"  "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://github.githubassets.com/images/modules/profile/achievements/yolo-default.png"),a("span",{style:{color:"#89DDFF"}},'"')]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"/>")])])])],-1)),ta=c(()=>a("h2",{id:"加载失败",tabindex:"-1"},[t("加载失败 "),a("a",{class:"header-anchor",href:"#加载失败","aria-label":'Permalink to "加载失败"'},"​")],-1)),sa=c(()=>a("p",null,[t("默认加载失败会显示 "),a("code",null,"加载失败"),t("，当然你也可以使用 "),a("code",null,"alt"),t(" 属性自定义加载失败的提示文字")],-1)),oa=c(()=>a("p",null,[t("或者使用 "),a("code",null,"error"),t(" 插槽展示")],-1)),ca=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://123.cn/images/auto/my.jpg"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"/>")])])])],-1)),ta=l(()=>a("h2",{id:"加载失败",tabindex:"-1"},[t("加载失败 "),a("a",{class:"header-anchor",href:"#加载失败","aria-label":'Permalink to "加载失败"'},"​")],-1)),sa=l(()=>a("p",null,[t("默认加载失败会显示 "),a("code",null,"加载失败"),t("，当然你也可以使用 "),a("code",null,"alt"),t(" 属性自定义加载失败的提示文字")],-1)),oa=l(()=>a("p",null,[t("或者使用 "),a("code",null,"error"),t(" 插槽展示")],-1)),la=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://123.cn/images/auto/my.jpg"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"}),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://123.cn/images/auto/my.jpg"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"alt"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"Err"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"}),t(`
@@ -32,4 +32,4 @@ import{_ as v,A as r,o as b,x as g,y as o,v as a,C as s,K as h,L as u,d as _,c a
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"v-slot:error"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"    "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-text"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"bold"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"失败了"),a("span",{style:{color:"#89DDFF"}},"")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"")]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),la=F('
Attributes ​
参数说明类型可选值默认值
src图片路径string————
err-src加载失败时要显示的地址string————
alt原生 alt 属性string——加载失败
round是否为圆角boolean——false
lazy是否懒加载头像boolean——false
fit如何适应容器，原生 object-fit 属性FightingFitfill contain cover none scale-down——
size图片大小FightingSize / numberlarge middle small minimiddle
background背景色string————
icon图标头像FightingIcon————
font-size字体大小string————
font-color字体的颜色string————
text文字头像string————
root-margin触发懒加载的距离string / number——100px
on-load图片加载成功触发的回调HandleEvent————
on-error图片加载失败触发的回调HandleEvent————
Slots ​
插槽名称说明说明
error自定义加载失败提示
icon自定义 icon 头像
Interface ​
组件导出以下类型定义：
ts
import type { AvatarInstance, AvatarProps } from 'fighting-design'
样式变量 ​
组件提供了下列 CSS 变量，可用于自定义样式
名称描述
--avatar-size尺寸
Contributors ​
',11),ea={href:"https://github.com/Tyh2001",target:"_blank"},Fa=JSON.parse('{"title":"Avatar 头像","description":"","frontmatter":{},"headers":[],"relativePath":"components/avatar.md","filePath":"components/avatar.md","lastUpdated":1718865452000}'),na={name:"components/avatar.md"},da=_({...na,setup(e){const y=new URL("/assets/1.aa9c3858.jpg",self.location).href;return(d,i)=>{const l=r("f-avatar"),n=r("vp-demo"),m=r("f-text"),f=r("f-space");return b(),E("div",null,[L,s(n,{source:""},{source:o(()=>[s(l,{src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(l,{round:"",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),default:o(()=>[V]),_:1}),T,H,s(n,{source:""},{source:o(()=>[s(l,{src:D(y)},null,8,["src"])]),default:o(()=>[R]),_:1}),W,M,s(n,{source:""},{source:o(()=>[s(U)]),default:o(()=>[J]),_:1}),K,O,s(n,{source:""},{source:o(()=>[s(l,{size:85,src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(l,{size:"large",src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(l,{size:"middle",src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(l,{size:"small",src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(l,{size:"mini",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),default:o(()=>[G]),_:1}),Q,s(n,{source:""},{source:o(()=>[s(l,{icon:D(A),background:"skyblue","font-size":30},null,8,["icon"]),s(l,{icon:D(C),background:"orange","font-color":"#fff","font-size":30},null,8,["icon"])]),default:o(()=>[X]),_:1}),Y,Z,s(n,{source:""},{source:o(()=>[s(l,{width:"200px",lazy:"",src:"https://github.githubassets.com/images/modules/profile/achievements/yolo-default.png"})]),default:o(()=>[aa]),_:1}),ta,sa,oa,s(n,{source:""},{source:o(()=>[s(f,null,{default:o(()=>[s(l,{src:"https://123.cn/images/auto/my.jpg"}),s(l,{src:"https://123.cn/images/auto/my.jpg",alt:"Err"}),s(l,{src:"https://123.cn/images/auto/my.jpg"},{error:o(()=>[s(m,{type:"danger",bold:""},{default:o(()=>[t("失败了")]),_:1})]),_:1})]),_:1})]),default:o(()=>[ca]),_:1}),la,a("a",ea,[s(l,{round:"",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})])])}}});const ya=v(da,[["__scopeId","data-v-9dc38bc2"]]);export{Fa as __pageData,ya as default};
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),ea=F('
Attributes ​
参数说明类型可选值默认值
src图片路径string————
err-src加载失败时要显示的地址string————
alt原生 alt 属性string——加载失败
round是否为圆角boolean——false
lazy是否懒加载头像boolean——false
fit如何适应容器，原生 object-fit 属性FightingFitfill contain cover none scale-down——
size图片大小FightingSize / numberlarge middle small minimiddle
background背景色string————
icon图标头像FightingIcon————
font-size字体大小string————
font-color字体的颜色string————
text文字头像string————
root-margin触发懒加载的距离string / number——100px
on-load图片加载成功触发的回调HandleEvent————
on-error图片加载失败触发的回调HandleEvent————
Slots ​
插槽名称说明说明
error自定义加载失败提示
icon自定义 icon 头像
Interface ​
组件导出以下类型定义：
ts
import type { AvatarInstance, AvatarProps } from 'fighting-design'
样式变量 ​
组件提供了下列 CSS 变量，可用于自定义样式
名称描述
--avatar-size尺寸
Contributors ​
',11),ca={href:"https://github.com/Tyh2001",target:"_blank"},Fa=JSON.parse('{"title":"Avatar 头像","description":"","frontmatter":{},"headers":[],"relativePath":"components/avatar.md","filePath":"components/avatar.md","lastUpdated":1718865313000}'),na={name:"components/avatar.md"},ra=_({...na,setup(c){const y=new URL("/assets/1.aa9c3858.jpg",self.location).href;return(r,i)=>{const e=d("f-avatar"),n=d("vp-demo"),m=d("f-text"),f=d("f-space");return b(),E("div",null,[L,s(n,{source:""},{source:o(()=>[s(e,{src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(e,{round:"",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),default:o(()=>[V]),_:1}),T,H,s(n,{source:""},{source:o(()=>[s(e,{src:D(y)},null,8,["src"])]),default:o(()=>[R]),_:1}),W,M,s(n,{source:""},{source:o(()=>[s(U)]),default:o(()=>[J]),_:1}),K,O,s(n,{source:""},{source:o(()=>[s(e,{size:85,src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(e,{size:"large",src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(e,{size:"middle",src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(e,{size:"small",src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(e,{size:"mini",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),default:o(()=>[G]),_:1}),Q,s(n,{source:""},{source:o(()=>[s(e,{icon:D(A),background:"skyblue","font-size":30},null,8,["icon"]),s(e,{icon:D(C),background:"orange","font-color":"#fff","font-size":30},null,8,["icon"])]),default:o(()=>[X]),_:1}),Y,Z,s(n,{source:""},{source:o(()=>[s(e,{width:"200px",lazy:"",src:"https://github.githubassets.com/images/modules/profile/achievements/yolo-default.png"})]),default:o(()=>[aa]),_:1}),ta,sa,oa,s(n,{source:""},{source:o(()=>[s(f,null,{default:o(()=>[s(e,{src:"https://123.cn/images/auto/my.jpg"}),s(e,{src:"https://123.cn/images/auto/my.jpg",alt:"Err"}),s(e,{src:"https://123.cn/images/auto/my.jpg"},{error:o(()=>[s(m,{type:"danger",bold:""},{default:o(()=>[t("失败了")]),_:1})]),_:1})]),_:1})]),default:o(()=>[la]),_:1}),ea,a("a",ca,[s(e,{round:"",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})])])}}});const ya=v(ra,[["__scopeId","data-v-8122bc0a"]]);export{Fa as __pageData,ya as default};
diff --git a/assets/components_avatar.md.665bcf5a.lean.js b/assets/components_avatar.md.417bd75a.lean.js
similarity index 66%
rename from assets/components_avatar.md.665bcf5a.lean.js
rename to assets/components_avatar.md.417bd75a.lean.js
index d52e0b29b..3d787776b 100644
--- a/assets/components_avatar.md.665bcf5a.lean.js
+++ b/assets/components_avatar.md.417bd75a.lean.js
@@ -1,30 +1,30 @@
-import{_ as v,A as r,o as b,x as g,y as o,v as a,C as s,K as h,L as u,d as _,c as E,M as F,b as D,a as t}from"./chunks/framework.a8ebc9a3.js";import{F as C}from"./chunks/index.3b5750fa.js";import{F as A}from"./chunks/index.36ec2e32.js";const B={},p=e=>(h("data-v-57a98fd4"),e=e(),u(),e),k={class:"avatar-block"},x=p(()=>a("code",null,"fill",-1)),z={class:"avatar-block"},S=p(()=>a("code",null,"contain",-1)),q={class:"avatar-block"},I=p(()=>a("code",null,"cover",-1)),P={class:"avatar-block"},w=p(()=>a("code",null,"none",-1)),j={class:"avatar-block"},N=p(()=>a("code",null,"scale-down",-1));function $(e,y){const d=r("f-avatar"),i=r("f-space");return b(),g(i,{spacing:"mini"},{default:o(()=>[a("div",k,[x,s(d,{fit:"fill",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",z,[S,s(d,{fit:"contain",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",q,[I,s(d,{fit:"cover",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",P,[w,s(d,{fit:"none",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",j,[N,s(d,{fit:"scale-down",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})])]),_:1})}const U=v(B,[["render",$],["__scopeId","data-v-57a98fd4"]]),c=e=>(h("data-v-9dc38bc2"),e=e(),u(),e),L=F('
Avatar 头像 ​
用户的头像展示
基本使用 ​
使用 src 属性设置图片的路径
round 属性可以配置圆角头像
',6),V=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"round"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")])])])],-1)),T=c(()=>a("h2",{id:"使用本地图片",tabindex:"-1"},[t("使用本地图片 "),a("a",{class:"header-anchor",href:"#使用本地图片","aria-label":'Permalink to "使用本地图片"'},"​")],-1)),H=c(()=>a("p",null,[t("如需要使用本地图片，需要使用 "),a("a",{href:"https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url",target:"_blank",rel:"noreferrer"},[t("new URL(url, i"),a("wbr"),t("mport.meta.url)")]),t(" 手动导入图片资源使用：")],-1)),R=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
+import{_ as v,A as d,o as b,x as g,y as o,v as a,C as s,K as h,L as u,d as _,c as E,M as F,b as D,a as t}from"./chunks/framework.a8ebc9a3.js";import{F as C}from"./chunks/index.3b5750fa.js";import{F as A}from"./chunks/index.36ec2e32.js";const B={},p=c=>(h("data-v-57a98fd4"),c=c(),u(),c),k={class:"avatar-block"},x=p(()=>a("code",null,"fill",-1)),z={class:"avatar-block"},S=p(()=>a("code",null,"contain",-1)),q={class:"avatar-block"},I=p(()=>a("code",null,"cover",-1)),P={class:"avatar-block"},w=p(()=>a("code",null,"none",-1)),j={class:"avatar-block"},N=p(()=>a("code",null,"scale-down",-1));function $(c,y){const r=d("f-avatar"),i=d("f-space");return b(),g(i,{spacing:"mini"},{default:o(()=>[a("div",k,[x,s(r,{fit:"fill",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",z,[S,s(r,{fit:"contain",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",q,[I,s(r,{fit:"cover",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",P,[w,s(r,{fit:"none",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),a("div",j,[N,s(r,{fit:"scale-down",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})])]),_:1})}const U=v(B,[["render",$],["__scopeId","data-v-57a98fd4"]]),l=c=>(h("data-v-8122bc0a"),c=c(),u(),c),L=F('
Avatar 头像 ​
用户的头像展示
基本使用 ​
使用 src 属性设置图片的路径
round 属性可以配置圆角头像
',6),V=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"round"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")])])])],-1)),T=l(()=>a("h2",{id:"使用本地图片",tabindex:"-1"},[t("使用本地图片 "),a("a",{class:"header-anchor",href:"#使用本地图片","aria-label":'Permalink to "使用本地图片"'},"​")],-1)),H=l(()=>a("p",null,[t("如需要使用本地图片，需要使用 "),a("a",{href:"https://cn.vitejs.dev/guide/assets.html#new-url-url-import-meta-url",target:"_blank",rel:"noreferrer"},[t("new URL(url, i"),a("wbr"),t("mport.meta.url)")]),t(" 手动导入图片资源使用：")],-1)),R=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"url"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")]),t(`
 `),a("span",{class:"line"}),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"script"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"lang"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"ts"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"setup"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#C792EA"}},"const"),a("span",{style:{color:"#BABED8"}}," url "),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF"}},"new"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#82AAFF"}},"URL"),a("span",{style:{color:"#BABED8"}},"("),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"./image/1.jpg"),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#89DDFF"}},","),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),a("span",{style:{color:"#89DDFF"}},"."),a("span",{style:{color:"#BABED8"}},"meta"),a("span",{style:{color:"#89DDFF"}},"."),a("span",{style:{color:"#BABED8"}},"url)"),a("span",{style:{color:"#89DDFF"}},"."),a("span",{style:{color:"#BABED8"}},"href")]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),W=c(()=>a("h2",{id:"适应容器的方式",tabindex:"-1"},[t("适应容器的方式 "),a("a",{class:"header-anchor",href:"#适应容器的方式","aria-label":'Permalink to "适应容器的方式"'},"​")],-1)),M=c(()=>a("p",null,[a("code",null,"fit"),t(" 属性可以配置头像不同适应容器的方式，详见原生 "),a("a",{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#try_it",target:"_blank",rel:"noreferrer"},"object-fit"),t(" 属性")],-1)),J=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"fill"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),W=l(()=>a("h2",{id:"适应容器的方式",tabindex:"-1"},[t("适应容器的方式 "),a("a",{class:"header-anchor",href:"#适应容器的方式","aria-label":'Permalink to "适应容器的方式"'},"​")],-1)),M=l(()=>a("p",null,[a("code",null,"fit"),t(" 属性可以配置头像不同适应容器的方式，详见原生 "),a("a",{href:"https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#try_it",target:"_blank",rel:"noreferrer"},"object-fit"),t(" 属性")],-1)),J=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"fill"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"contain"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"cover"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"none"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"scale-down"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")])])])],-1)),K=c(()=>a("h2",{id:"不同大小",tabindex:"-1"},[t("不同大小 "),a("a",{class:"header-anchor",href:"#不同大小","aria-label":'Permalink to "不同大小"'},"​")],-1)),O=c(()=>a("p",null,[a("code",null,"size"),t(" 属性可以配置不同大小的头像，也可以传入指定的数字，会自动转换为 "),a("code",null,"px")],-1)),G=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"85"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"fit"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"scale-down"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")])])])],-1)),K=l(()=>a("h2",{id:"不同大小",tabindex:"-1"},[t("不同大小 "),a("a",{class:"header-anchor",href:"#不同大小","aria-label":'Permalink to "不同大小"'},"​")],-1)),O=l(()=>a("p",null,[a("code",null,"size"),t(" 属性可以配置不同大小的头像，也可以传入指定的数字，会自动转换为 "),a("code",null,"px")],-1)),G=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"85"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"large"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"middle"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"small"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"mini"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")])])])],-1)),Q=F('
图标头像 ​
icon 属性可以配置带有 icon 的图标头像
background 属性可以配置背景色，font-color 属性可以自定义图标颜色
font-size可以配置图标大小，后面必须要加入单位
',4),X=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"mini"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://avatars.githubusercontent.com/u/73180970?v=4"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")])])])],-1)),Q=F('
图标头像 ​
icon 属性可以配置带有 icon 的图标头像
background 属性可以配置背景色，font-color 属性可以自定义图标颜色
font-size可以配置图标大小，后面必须要加入单位
',4),X=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":icon"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"FIconFaceSmile"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"30"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"background"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"skyblue"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"background"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"orange"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"font-color"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"#fff"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":icon"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"FIconBug"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":font-size"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"30"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")]),t(`
 `),a("span",{class:"line"}),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"script"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"lang"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"ts"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"setup"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF","font-style":"italic"}},"import"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF"}},"{"),a("span",{style:{color:"#F07178"}}," "),a("span",{style:{color:"#BABED8"}},"FIconFaceSmile"),a("span",{style:{color:"#89DDFF"}},","),a("span",{style:{color:"#F07178"}}," "),a("span",{style:{color:"#BABED8"}},"FIconBug"),a("span",{style:{color:"#F07178"}}," "),a("span",{style:{color:"#89DDFF"}},"}"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF","font-style":"italic"}},"from"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#89DDFF"}},"'"),a("span",{style:{color:"#C3E88D"}},"@fighting-design/fighting-icon"),a("span",{style:{color:"#89DDFF"}},"'")]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),Y=c(()=>a("h2",{id:"懒加载",tabindex:"-1"},[t("懒加载 "),a("a",{class:"header-anchor",href:"#懒加载","aria-label":'Permalink to "懒加载"'},"​")],-1)),Z=c(()=>a("p",null,[a("code",null,"lazy"),t(" 属性可以设置图片懒加载，详情可参考 "),a("code",null,"DevTools"),t(" 的 "),a("code",null,"Network")],-1)),aa=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar")]),t(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),Y=l(()=>a("h2",{id:"懒加载",tabindex:"-1"},[t("懒加载 "),a("a",{class:"header-anchor",href:"#懒加载","aria-label":'Permalink to "懒加载"'},"​")],-1)),Z=l(()=>a("p",null,[a("code",null,"lazy"),t(" 属性可以设置图片懒加载，详情可参考 "),a("code",null,"DevTools"),t(" 的 "),a("code",null,"Network")],-1)),aa=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"  "),a("span",{style:{color:"#C792EA"}},"width"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"200px"),a("span",{style:{color:"#89DDFF"}},'"')]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"  "),a("span",{style:{color:"#C792EA"}},"lazy")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"  "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://github.githubassets.com/images/modules/profile/achievements/yolo-default.png"),a("span",{style:{color:"#89DDFF"}},'"')]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"/>")])])])],-1)),ta=c(()=>a("h2",{id:"加载失败",tabindex:"-1"},[t("加载失败 "),a("a",{class:"header-anchor",href:"#加载失败","aria-label":'Permalink to "加载失败"'},"​")],-1)),sa=c(()=>a("p",null,[t("默认加载失败会显示 "),a("code",null,"加载失败"),t("，当然你也可以使用 "),a("code",null,"alt"),t(" 属性自定义加载失败的提示文字")],-1)),oa=c(()=>a("p",null,[t("或者使用 "),a("code",null,"error"),t(" 插槽展示")],-1)),ca=c(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://123.cn/images/auto/my.jpg"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"/>")])])])],-1)),ta=l(()=>a("h2",{id:"加载失败",tabindex:"-1"},[t("加载失败 "),a("a",{class:"header-anchor",href:"#加载失败","aria-label":'Permalink to "加载失败"'},"​")],-1)),sa=l(()=>a("p",null,[t("默认加载失败会显示 "),a("code",null,"加载失败"),t("，当然你也可以使用 "),a("code",null,"alt"),t(" 属性自定义加载失败的提示文字")],-1)),oa=l(()=>a("p",null,[t("或者使用 "),a("code",null,"error"),t(" 插槽展示")],-1)),la=l(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://123.cn/images/auto/my.jpg"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"}),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-avatar"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"src"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"https://123.cn/images/auto/my.jpg"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"alt"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"Err"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"}),t(`
@@ -32,4 +32,4 @@ import{_ as v,A as r,o as b,x as g,y as o,v as a,C as s,K as h,L as u,d as _,c a
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"template"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"v-slot:error"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"    "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-text"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"type"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"danger"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"bold"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"失败了"),a("span",{style:{color:"#89DDFF"}},"")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"")]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),la=F('
Attributes ​
参数说明类型可选值默认值
src图片路径string————
err-src加载失败时要显示的地址string————
alt原生 alt 属性string——加载失败
round是否为圆角boolean——false
lazy是否懒加载头像boolean——false
fit如何适应容器，原生 object-fit 属性FightingFitfill contain cover none scale-down——
size图片大小FightingSize / numberlarge middle small minimiddle
background背景色string————
icon图标头像FightingIcon————
font-size字体大小string————
font-color字体的颜色string————
text文字头像string————
root-margin触发懒加载的距离string / number——100px
on-load图片加载成功触发的回调HandleEvent————
on-error图片加载失败触发的回调HandleEvent————
Slots ​
插槽名称说明说明
error自定义加载失败提示
icon自定义 icon 头像
Interface ​
组件导出以下类型定义：
ts
import type { AvatarInstance, AvatarProps } from 'fighting-design'
样式变量 ​
组件提供了下列 CSS 变量，可用于自定义样式
名称描述
--avatar-size尺寸
Contributors ​
',11),ea={href:"https://github.com/Tyh2001",target:"_blank"},Fa=JSON.parse('{"title":"Avatar 头像","description":"","frontmatter":{},"headers":[],"relativePath":"components/avatar.md","filePath":"components/avatar.md","lastUpdated":1718865452000}'),na={name:"components/avatar.md"},da=_({...na,setup(e){const y=new URL("/assets/1.aa9c3858.jpg",self.location).href;return(d,i)=>{const l=r("f-avatar"),n=r("vp-demo"),m=r("f-text"),f=r("f-space");return b(),E("div",null,[L,s(n,{source:""},{source:o(()=>[s(l,{src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(l,{round:"",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),default:o(()=>[V]),_:1}),T,H,s(n,{source:""},{source:o(()=>[s(l,{src:D(y)},null,8,["src"])]),default:o(()=>[R]),_:1}),W,M,s(n,{source:""},{source:o(()=>[s(U)]),default:o(()=>[J]),_:1}),K,O,s(n,{source:""},{source:o(()=>[s(l,{size:85,src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(l,{size:"large",src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(l,{size:"middle",src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(l,{size:"small",src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(l,{size:"mini",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),default:o(()=>[G]),_:1}),Q,s(n,{source:""},{source:o(()=>[s(l,{icon:D(A),background:"skyblue","font-size":30},null,8,["icon"]),s(l,{icon:D(C),background:"orange","font-color":"#fff","font-size":30},null,8,["icon"])]),default:o(()=>[X]),_:1}),Y,Z,s(n,{source:""},{source:o(()=>[s(l,{width:"200px",lazy:"",src:"https://github.githubassets.com/images/modules/profile/achievements/yolo-default.png"})]),default:o(()=>[aa]),_:1}),ta,sa,oa,s(n,{source:""},{source:o(()=>[s(f,null,{default:o(()=>[s(l,{src:"https://123.cn/images/auto/my.jpg"}),s(l,{src:"https://123.cn/images/auto/my.jpg",alt:"Err"}),s(l,{src:"https://123.cn/images/auto/my.jpg"},{error:o(()=>[s(m,{type:"danger",bold:""},{default:o(()=>[t("失败了")]),_:1})]),_:1})]),_:1})]),default:o(()=>[ca]),_:1}),la,a("a",ea,[s(l,{round:"",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})])])}}});const ya=v(da,[["__scopeId","data-v-9dc38bc2"]]);export{Fa as __pageData,ya as default};
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),ea=F('
Attributes ​
参数说明类型可选值默认值
src图片路径string————
err-src加载失败时要显示的地址string————
alt原生 alt 属性string——加载失败
round是否为圆角boolean——false
lazy是否懒加载头像boolean——false
fit如何适应容器，原生 object-fit 属性FightingFitfill contain cover none scale-down——
size图片大小FightingSize / numberlarge middle small minimiddle
background背景色string————
icon图标头像FightingIcon————
font-size字体大小string————
font-color字体的颜色string————
text文字头像string————
root-margin触发懒加载的距离string / number——100px
on-load图片加载成功触发的回调HandleEvent————
on-error图片加载失败触发的回调HandleEvent————
Slots ​
插槽名称说明说明
error自定义加载失败提示
icon自定义 icon 头像
Interface ​
组件导出以下类型定义：
ts
import type { AvatarInstance, AvatarProps } from 'fighting-design'
样式变量 ​
组件提供了下列 CSS 变量，可用于自定义样式
名称描述
--avatar-size尺寸
Contributors ​
',11),ca={href:"https://github.com/Tyh2001",target:"_blank"},Fa=JSON.parse('{"title":"Avatar 头像","description":"","frontmatter":{},"headers":[],"relativePath":"components/avatar.md","filePath":"components/avatar.md","lastUpdated":1718865313000}'),na={name:"components/avatar.md"},ra=_({...na,setup(c){const y=new URL("/assets/1.aa9c3858.jpg",self.location).href;return(r,i)=>{const e=d("f-avatar"),n=d("vp-demo"),m=d("f-text"),f=d("f-space");return b(),E("div",null,[L,s(n,{source:""},{source:o(()=>[s(e,{src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(e,{round:"",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),default:o(()=>[V]),_:1}),T,H,s(n,{source:""},{source:o(()=>[s(e,{src:D(y)},null,8,["src"])]),default:o(()=>[R]),_:1}),W,M,s(n,{source:""},{source:o(()=>[s(U)]),default:o(()=>[J]),_:1}),K,O,s(n,{source:""},{source:o(()=>[s(e,{size:85,src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(e,{size:"large",src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(e,{size:"middle",src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(e,{size:"small",src:"https://avatars.githubusercontent.com/u/73180970?v=4"}),s(e,{size:"mini",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})]),default:o(()=>[G]),_:1}),Q,s(n,{source:""},{source:o(()=>[s(e,{icon:D(A),background:"skyblue","font-size":30},null,8,["icon"]),s(e,{icon:D(C),background:"orange","font-color":"#fff","font-size":30},null,8,["icon"])]),default:o(()=>[X]),_:1}),Y,Z,s(n,{source:""},{source:o(()=>[s(e,{width:"200px",lazy:"",src:"https://github.githubassets.com/images/modules/profile/achievements/yolo-default.png"})]),default:o(()=>[aa]),_:1}),ta,sa,oa,s(n,{source:""},{source:o(()=>[s(f,null,{default:o(()=>[s(e,{src:"https://123.cn/images/auto/my.jpg"}),s(e,{src:"https://123.cn/images/auto/my.jpg",alt:"Err"}),s(e,{src:"https://123.cn/images/auto/my.jpg"},{error:o(()=>[s(m,{type:"danger",bold:""},{default:o(()=>[t("失败了")]),_:1})]),_:1})]),_:1})]),default:o(()=>[la]),_:1}),ea,a("a",ca,[s(e,{round:"",src:"https://avatars.githubusercontent.com/u/73180970?v=4"})])])}}});const ya=v(ra,[["__scopeId","data-v-8122bc0a"]]);export{Fa as __pageData,ya as default};
diff --git a/assets/components_back-top.md.74cd8508.js b/assets/components_back-top.md.e05089e1.js
similarity index 65%
rename from assets/components_back-top.md.74cd8508.js
rename to assets/components_back-top.md.e05089e1.js
index ba4929875..bd1dcf2b4 100644
--- a/assets/components_back-top.md.74cd8508.js
+++ b/assets/components_back-top.md.e05089e1.js
@@ -1,4 +1,4 @@
-import{F as v}from"./chunks/index.30bc576b.js";import{F as h}from"./chunks/index.bd178b65.js";import{d as u,c as D,C as o,y as l,v as a,M as y,A as p,o as F,a as t,b,F as B,J as m,K as f,L as g,t as _,_ as k}from"./chunks/framework.a8ebc9a3.js";const s=n=>(f("data-v-474c0b82"),n=n(),g(),n),E=y('
BackTop 返回顶部 ​
可返回网页的顶部
基本使用 ​
BackTop 的基本使用
',5),C=s(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-back-top"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"返回顶部"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),A=s(()=>a("h2",{id:"不同滚动模式",tabindex:"-1"},[t("不同滚动模式 "),a("a",{class:"header-anchor",href:"#不同滚动模式","aria-label":'Permalink to "不同滚动模式"'},"​")],-1)),x=s(()=>a("p",null,[a("code",null,"behavior"),t(" 属性可以配置不同的滚动模式")],-1)),I=s(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-back-top"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"bottom"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"90px"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"behavior"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"auto"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"auto 模式"),a("span",{style:{color:"#89DDFF"}},"")]),t(`
+import{F as f}from"./chunks/index.30bc576b.js";import{F as v}from"./chunks/index.bd178b65.js";import{d as h,c as D,C as o,y as l,v as a,M as y,A as n,o as F,a as t,b,F as u,J as B,K as m,L as g,t as _,_ as k}from"./chunks/framework.a8ebc9a3.js";const s=d=>(m("data-v-c288db7f"),d=d(),g(),d),E=y('
BackTop 返回顶部 ​
可返回网页的顶部
基本使用 ​
BackTop 的基本使用
',5),C=s(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-back-top"),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"返回顶部"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),A=s(()=>a("h2",{id:"不同滚动模式",tabindex:"-1"},[t("不同滚动模式 "),a("a",{class:"header-anchor",href:"#不同滚动模式","aria-label":'Permalink to "不同滚动模式"'},"​")],-1)),x=s(()=>a("p",null,[a("code",null,"behavior"),t(" 属性可以配置不同的滚动模式")],-1)),I=s(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-back-top"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"bottom"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"90px"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"behavior"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"auto"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"auto 模式"),a("span",{style:{color:"#89DDFF"}},"")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-back-top"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"bottom"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"140px"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"behavior"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"smooth"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}},">"),a("span",{style:{color:"#BABED8"}},"smooth 模式"),a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),S=s(()=>a("h2",{id:"圆形的",tabindex:"-1"},[t("圆形的 "),a("a",{class:"header-anchor",href:"#圆形的","aria-label":'Permalink to "圆形的"'},"​")],-1)),q=s(()=>a("p",null,[a("code",null,"round"),t(" 属性可以配置圆形的样式")],-1)),P=s(()=>a("div",{class:"language-html"},[a("button",{title:"Copy Code",class:"copy"}),a("span",{class:"lang"},"html"),a("pre",{class:"shiki material-theme-palenight"},[a("code",null,[a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-back-top"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"bottom"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"190px"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},"round"),a("span",{style:{color:"#89DDFF"}},">")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"<"),a("span",{style:{color:"#F07178"}},"f-svg-icon"),a("span",{style:{color:"#89DDFF"}}," "),a("span",{style:{color:"#C792EA"}},":icon"),a("span",{style:{color:"#89DDFF"}},"="),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#C3E88D"}},"FIconSnowflake"),a("span",{style:{color:"#89DDFF"}},'"'),a("span",{style:{color:"#89DDFF"}}," />")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")]),t(`
@@ -25,21 +25,21 @@ import{F as v}from"./chunks/index.30bc576b.js";import{F as h}from"./chunks/index
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"    "),a("span",{style:{color:"#B2CCD6"}},"border"),a("span",{style:{color:"#89DDFF"}},":"),a("span",{style:{color:"#BABED8"}}," "),a("span",{style:{color:"#F78C6C"}},"4px"),a("span",{style:{color:"#BABED8"}}," solid skyblue"),a("span",{style:{color:"#89DDFF"}},";")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"    "),a("span",{style:{color:"#B2CCD6"}},"overflow"),a("span",{style:{color:"#89DDFF"}},":"),a("span",{style:{color:"#BABED8"}}," auto"),a("span",{style:{color:"#89DDFF"}},";")]),t(`
 `),a("span",{class:"line"},[a("span",{style:{color:"#BABED8"}},"  "),a("span",{style:{color:"#89DDFF"}},"}")]),t(`
-`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),J=y('
Attractive ​
参数说明类型可选值默认值
round是否为圆角boolean——false
behavior滚动模式BackTopBehaviorsmooth autosmooth
visible-height滚动超出多少距离展示number——200
right距离右侧的距离string——40
bottom距离底部的距离string——40
z-index原生 z-indexnumber——200
top点击返回距离顶部的距离number——0
listen-el监视指定元素，需要传入指定的 class 或 id，如：.box #appstring————
background背景色string————
color文字颜色string————
Slots ​
名称说明
default默认内容
Interface ​
组件导出以下类型定义：
ts
import type { BackTopInstance, BackTopProps, BackTopBehavior } from 'fighting-design'
BackTopBehavior ​
ts
type BackTopBehavior = 'smooth' | 'auto'
样式变量 ​
组件提供了下列 CSS 变量，可用于自定义样式
名称描述
--back-top-right距离右侧距离
--back-top-bottom距离底部距离
--back-top-z-index层级
--back-top-color文字颜色
--back-top-background背景颜色
Contributors ​
',13),K={href:"https://github.com/Tyh2001",target:"_blank"},M={href:"https://github.com/XiaoLi-sach",target:"_blank"},R=JSON.parse('{"title":"BackTop 返回顶部","description":"","frontmatter":{},"headers":[],"relativePath":"components/back-top.md","filePath":"components/back-top.md","lastUpdated":1718865452000}'),O={name:"components/back-top.md"},W=u({...O,setup(n){return(X,j)=>{const c=p("f-back-top"),e=p("vp-demo"),r=p("f-svg-icon"),d=p("f-avatar");return F(),D("div",null,[E,o(c,null,{default:l(()=>[t("返回顶部")]),_:1}),o(e,{source:`返回顶部
+`),a("span",{class:"line"},[a("span",{style:{color:"#89DDFF"}},"")])])])],-1)),J=y('
Attractive ​
参数说明类型可选值默认值
round是否为圆角boolean——false
behavior滚动模式BackTopBehaviorsmooth autosmooth
visible-height滚动超出多少距离展示number——200
right距离右侧的距离string——40
bottom距离底部的距离string——40
z-index原生 z-indexnumber——200
top点击返回距离顶部的距离number——0
listen-el监视指定元素，需要传入指定的 class 或 id，如：.box #appstring————
background背景色string————
color文字颜色string————
Slots ​
名称说明
default默认内容
Interface ​
组件导出以下类型定义：
ts
import type { BackTopInstance, BackTopProps, BackTopBehavior } from 'fighting-design'
BackTopBehavior ​
ts
type BackTopBehavior = 'smooth' | 'auto'
样式变量 ​
组件提供了下列 CSS 变量，可用于自定义样式
名称描述
--back-top-right距离右侧距离
--back-top-bottom距离底部距离
--back-top-z-index层级
--back-top-color文字颜色
--back-top-background背景颜色
Contributors ​
',13),K={href:"https://github.com/Tyh2001",target:"_blank"},M={href:"https://github.com/XiaoLi-sach",target:"_blank"},R=JSON.parse('{"title":"BackTop 返回顶部","description":"","frontmatter":{},"headers":[],"relativePath":"components/back-top.md","filePath":"components/back-top.md","lastUpdated":1718865313000}'),O={name:"components/back-top.md"},W=h({...O,setup(d){return(X,j)=>{const c=n("f-back-top"),e=n("vp-demo"),p=n("f-svg-icon"),r=n("f-avatar");return F(),D("div",null,[E,o(c,null,{default:l(()=>[t("返回顶部")]),_:1}),o(e,{source:`返回顶部
 `},{default:l(()=>[C]),_:1}),A,x,o(c,{bottom:"90px",behavior:"auto"},{default:l(()=>[t("auto 模式")]),_:1}),o(c,{bottom:"140px",behavior:"smooth"},{default:l(()=>[t("smooth 模式")]),_:1}),o(e,{source:`auto 模式
 smooth 模式
-`},{default:l(()=>[I]),_:1}),S,q,o(c,{bottom:"190px",round:""},{default:l(()=>[o(r,{icon:b(v)},null,8,["icon"])]),_:1}),o(e,{source:`
+`},{default:l(()=>[I]),_:1}),S,q,o(c,{bottom:"190px",round:""},{default:l(()=>[o(p,{icon:b(f)},null,8,["icon"])]),_:1}),o(e,{source:`
   
 
 
 
     
   
@@ -18,7 +18,7 @@
   
   
   
-  
+  
   
   
   
@@ -31,56 +31,56 @@
   
   
   
-    
Fighting Design
Appearance
On this page
Alert 警告 ​
用于页面中展示重要的提示信息
基本使用 ​
type 属性可以配置不同的主题类型，展示不同的颜色状态
开启
不同文字大小 ​
font-size 属性可以配置不同大小的 alert
开启
是否加粗 ​
使用 bold 属性可将文字设置为粗体显示
开启
是否居中 ​
使用 center 属性可将文本显示中间
开启
可关闭 ​
使用 close 属性可以让 alert 被关闭
开启
简约模式 ​
使用 simple 属性可以配置简约的 alert，样式依然由 type 控制
开启
圆角 ​
round 属性可以配置 alert 显示为圆角
开启
背景颜色 ​
如果你希望文字带上背景颜色，你可以使用 background 属性自定义你的 alert 背景颜色
开启
带有标题 ​
title 可以配置一个标题信息，标题会加粗
开启
滚动列表 ​
alert-list 可传入一个数组进行滚动展示
开启
自定义前缀 icon ​
开启
Attributes ​
参数说明类型可选值默认值
type类型FightingTypedefault primary success danger warning infodefault
font-size副标题文字大小string / number————
title-size主标题文字大小string / number————
bold文字是否以粗体显示boolean——false
center是否居中boolean——false
close可关闭boolean——false
simple简约模式boolean——false
title标题string————
round显示为圆角boolean——false
background背景颜色string————
color副标题字体颜色string————
title-color主标题字体颜色string————
fixed是否固定定位boolean——false
alert-list滚动列表array (string[])————
duration滚动列表滚动时间间隔number————
before-icon自定义前缀 iconFightingIcon————
close-icon自定义关闭 iconFightingIcon————
on-close点击关闭之后执行的回调HandleMouse————
Slots ​
名称说明
default自定义副标题的内容
title自定义主标题的内容
closeIcon自定义关闭 icon
beforeIcon自定义前缀 icon
Interface ​
组件导出以下类型定义：
ts
import type { AlertInstance, AlertProps } from 'fighting-design'
样式变量 ​
组件提供了下列 CSS 变量，可用于自定义样式
名称描述
--alert-border-radius圆角大小
--alert-color文字颜色
--alert-background背景色
Contributors ​

-    
     
   
diff --git a/components/avatar-group.html b/components/avatar-group.html
index 3300ce871..453f38510 100644
--- a/components/avatar-group.html
+++ b/components/avatar-group.html
@@ -5,7 +5,7 @@
     
     Avatar Group 头像组 | Fighting Design
     
-    
+    
     
     
   
@@ -17,7 +17,7 @@
   
   
   
-  
+  
   
   
   
@@ -41,8 +41,8 @@
   <f-avatar src="https://avatars.githubusercontent.com/u/117809217?v=4" />
   <f-avatar src="https://avatars.githubusercontent.com/u/73180970?v=4" />
   <f-avatar src="https://avatars.githubusercontent.com/u/117809217?v=4" />
-</f-avatar-group>
开启

Attributes ​

参数说明类型可选值默认值
position-size偏移量string / number————
round是否为圆角boolean——false
fit如何适应容器，原生 object-fit 属性FightingFitfill contain cover none scale-down——
size图片大小FightingSize / numberlarge middle small minimiddle
lazy是否懒加载头像boolean——false

Slots ​

插槽名称说明说明
default默认插槽

Interface ​

组件导出以下类型定义：

ts
import type { AvatarGroupInstance } from 'fighting-design'

Contributors ​

- diff --git a/components/avatar.html b/components/avatar.html index ebde393d2..13b6dc9e0 100644 --- a/components/avatar.html +++ b/components/avatar.html @@ -5,7 +5,7 @@ Avatar 头像 | Fighting Design - + @@ -19,7 +19,7 @@ - + @@ -32,42 +32,42 @@ -
Fighting Design

Appearance

On this page

Avatar 头像 ​

用户的头像展示

基本使用 ​

使用 src 属性设置图片的路径

round 属性可以配置圆角头像

开启

使用本地图片 ​

如需要使用本地图片，需要使用 new URL(url, import.meta.url) 手动导入图片资源使用：

开启

适应容器的方式 ​

fit 属性可以配置头像不同适应容器的方式，详见原生 object-fit 属性

fill
contain
cover
none
scale-down
开启

不同大小 ​

size 属性可以配置不同大小的头像，也可以传入指定的数字，会自动转换为 px

开启

图标头像 ​

icon 属性可以配置带有 icon 的图标头像

background 属性可以配置背景色，font-color 属性可以自定义图标颜色

font-size可以配置图标大小，后面必须要加入单位

开启

懒加载 ​

lazy 属性可以设置图片懒加载，详情可参考 DevTools 的 Network

开启

加载失败 ​

默认加载失败会显示 加载失败，当然你也可以使用 alt 属性自定义加载失败的提示文字

或者使用 error 插槽展示

开启

Attributes ​

参数说明类型可选值默认值
src图片路径string————
err-src加载失败时要显示的地址string————
alt原生 alt 属性string——加载失败
round是否为圆角boolean——false
lazy是否懒加载头像boolean——false
fit如何适应容器，原生 object-fit 属性FightingFitfill contain cover none scale-down——
size图片大小FightingSize / numberlarge middle small minimiddle
background背景色string————
icon图标头像FightingIcon————
font-size字体大小string————
font-color字体的颜色string————
text文字头像string————
root-margin触发懒加载的距离string / number——100px
on-load图片加载成功触发的回调HandleEvent————
on-error图片加载失败触发的回调HandleEvent————

Slots ​

插槽名称说明说明
error自定义加载失败提示
icon自定义 icon 头像

Interface ​

组件导出以下类型定义：

ts
import type { AvatarInstance, AvatarProps } from 'fighting-design'

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式

名称描述
--avatar-size尺寸

Contributors ​

- diff --git a/components/back-top.html b/components/back-top.html index 19d138372..04c1d39a4 100644 --- a/components/back-top.html +++ b/components/back-top.html @@ -5,7 +5,7 @@ BackTop 返回顶部 | Fighting Design - + @@ -19,7 +19,7 @@ - + @@ -32,52 +32,52 @@ -
Fighting Design

Appearance

On this page

BackTop 返回顶部 ​

可返回网页的顶部

基本使用 ​

BackTop 的基本使用

开启

不同滚动模式 ​

behavior 属性可以配置不同的滚动模式

Fighting Design

Appearance

On this page

BackTop 返回顶部 ​

可返回网页的顶部

基本使用 ​

BackTop 的基本使用

开启

不同滚动模式 ​

behavior 属性可以配置不同的滚动模式

开启

圆形的 ​

round 属性可以配置圆形的样式

开启

圆形的 ​

round 属性可以配置圆形的样式

开启

自定义样式 ​

你也可以自定义 back-top 的样式和位置

开启

自定义样式 ​

你也可以自定义 back-top 的样式和位置

开启

监听目标 ​

可以使用 listen-el 来监视一个指定的节点，传入 class 或 id，例如 .box 或 #app

这是一段文字2

这是一段文字3

这是一段文字4

这是一段文字5

这是一段文字6

这是一段文字7

这是一段文字8

这是一段文字9

这是一段文字10

这是一段文字11

这是一段文字12

这是一段文字13

这是一段文字14

这是一段文字15

这是一段文字16

这是一段文字17

这是一段文字18

这是一段文字19

这是一段文字20

这是一段文字21

开启

Attractive ​

参数说明类型可选值默认值
round是否为圆角boolean——false
behavior滚动模式BackTopBehaviorsmooth autosmooth
visible-height滚动超出多少距离展示number——200
right距离右侧的距离string——40
bottom距离底部的距离string——40
z-index原生 z-indexnumber——200
top点击返回距离顶部的距离number——0
listen-el监视指定元素，需要传入指定的 class 或 id，如：.box #appstring————
background背景色string————
color文字颜色string————

Slots ​

名称说明
default默认内容

Interface ​

组件导出以下类型定义：

ts
import type { BackTopInstance, BackTopProps, BackTopBehavior } from 'fighting-design'

BackTopBehavior ​

ts
type BackTopBehavior = 'smooth' | 'auto'

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式

名称描述
--back-top-right距离右侧距离
--back-top-bottom距离底部距离
--back-top-z-index层级
--back-top-color文字颜色
--back-top-background背景颜色

Contributors ​

- diff --git a/components/badge.html b/components/badge.html index e0ad3fac2..0635512f3 100644 --- a/components/badge.html +++ b/components/badge.html @@ -5,7 +5,7 @@ Badge 角标 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,81 +30,81 @@ -
Fighting Design

Appearance

On this page

Badge 角标 ​

用于展示角标提示信息

基本使用 ​

type 属性可以配置角标的主题

10
11
12
13
14
15
开启

最大值 ​

max 属性可以配置角标的最大值，该值仅在 value 的值是 Number 时生效


20
20
开启

小红点 ​

设置 dot 属性，展示为一个点

消息
开启

自定义文字 ​

value 除了 Number 类型，还可以是 String，自定义内容

hot
new
开启

自定义颜色 ​

你也可以自定义 badge 的颜色

99+
开启

是否展示 ​

show 属性可控制展示状态


20
20
开启

Attributes ​

参数说明类型可选值默认值
value显示值string / number————
maxvalue 为数字时的最大值，超出显示为 value+number——99
dot展示为一个点boolean——false
show是否显示boolean——true
type样式主题FightingTypedefault primary success danger warning infodanger
background自定义背景颜色string————
color自定义文字颜色string————

Interface ​

组件导出以下类型定义：

ts
import type { BadgeInstance, BadgeProps } from 'fighting-design'

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式

名称描述
--badge-border-radius圆角大小
--badge-color文字颜色
--badge-background背景颜色

Contributors ​

- diff --git a/components/box.html b/components/box.html index c3c800cd2..321f6dba9 100644 --- a/components/box.html +++ b/components/box.html @@ -5,7 +5,7 @@ Box 盒子 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,8 +30,8 @@ -
Fighting Design

Appearance

On this page

Box 盒子 ​

万能的盒子元素

基本使用 ​

可以直接将它当做 div 来使用，它支持一些原生的常用属性配置

hello
开启

Attributes ​

参数说明类型可选值默认值
role原生属性 Rolesstring————
padding内边距string / number————
width宽度string / number————
height高度string / number————
background自定义背景色string————
display原生属性string————

Interface ​

组件导出以下类型定义：

ts
import type { BoxInstance, BoxProps } from 'fighting-design'

Contributors ​

- diff --git a/components/breadcrumb.html b/components/breadcrumb.html index 6a0542e73..5eea92737 100644 --- a/components/breadcrumb.html +++ b/components/breadcrumb.html @@ -5,7 +5,7 @@ Breadcrumb 面包屑 | Fighting Design - + @@ -18,7 +18,7 @@ - + @@ -74,8 +74,8 @@ } from 'fighting-design'
ts
interface BreadcrumbItemTo {
   name: string
   query?: Object
-}

Contributors ​

- diff --git a/components/button.html b/components/button.html index 25ceaeb2f..175e02cbb 100644 --- a/components/button.html +++ b/components/button.html @@ -5,7 +5,7 @@ Button 按钮 | Fighting Design - + @@ -19,7 +19,7 @@ - + @@ -32,103 +32,103 @@ -
Fighting Design

Appearance

On this page

Button 按钮 ​

这个按钮可不简单

基本使用 ​

type 属性可以配置不同的按钮类型，展示不同的颜色状态

simple 属性可以配置简约的按钮，样式依然由 type 控制


开启

圆角按钮 ​

round 属性可以将按钮变成圆角风格的按钮


开启

圆形按钮 ​

circle 属性可以将按钮变成圆形按钮

开启

带有 Icon ​

before-icon 或者 after-icon 可配置内容前后的 icon，当然你也可以直接通过插槽插入

开启

禁用状态 ​

disabled 属性可以将按钮变成禁用状态

loading 属性可以将按钮变成 loading 状态


开启

不同尺寸 ​

size 属性可以配置不同尺寸的按钮

开启

文字按钮 ​

text 属性可以将按钮设置成文字按钮


开启

带有阴影 ​

可以自定义按钮的阴影样式，可传入一个原生 box-shadow 属性值

或者也可以通过 Neumorphism 自己手动调节阴影样式

开启

涟漪效果 ​

ripples 可以配置是否展示点击涟漪效果，也可以通过 ripples-color 自定义涟漪背景色

开启

扩散效果 ​

spread 可以配置是否展示点击扩散效果

开启

按钮组 ​

使用 f-button-group 组件包裹按钮组件可以实现按钮组效果

vertical 属性可以配置纵向排列的按钮组



开启

自定义颜色 ​

color 属性可以自定义按钮的颜色，使用自定义颜色之后，simple 和 text 将不会再继续工作，不过自定义颜色仅支持 hex 格式的色号

使用自定义颜色之后 Fighting Design 会自动推断 hover 和 active 的效果，那么需要使用 font-color 来自定义文字的颜色

开启

Button Attributes ​

参数说明类型可选值默认值
bold按钮文字是否加粗boolean——false
circle是否为圆形按钮boolean——false
round是否为圆角按钮boolean——false
font-size文字字体大小string / number————
font-color文字字体颜色string————
size按钮尺寸FightingSizelarge middle small minimiddle
block是否为块级元素boolean——false
href链接按钮的地址string————
target原生 target 属性，在 link="true" 时生效FightingTarget_blank _self _parent _top_self
loading是否展示 loading 状态boolean——false
disabled是否禁用按钮boolean——false
before-icon之前的 iconFightingIcon————
after-icon之后的 iconFightingIcon————
loading-iconloading 状态下的 iconFightingIcon————
type按钮的类型 （不同类型对应不同的背景和字体颜色，非自定义按钮颜色时有效）FightingTypedefault primary success danger warning info——
autofocus是否自动获取焦点boolean——false
spread是否带有点击扩散效果boolean——false
name按钮的名字string——f-button
shadow按钮的阴影string————
text是否为文字按钮 （非自定义按钮颜色时有效）boolean——false
simple是否为简约按钮 （非自定义按钮颜色时有效）boolean——false
ripples是否启用点击涟漪效果boolean——false
ripples-color涟漪背景色string————
native-type按钮的原生类型ButtonNativebutton submit resetbutton
color自定义按钮的背景颜色，仅支持 hex 格式的色号。如果未指定font-color，则字体颜色默认为白色string————
on-click点击执行的回调HandleMouse————

ButtonGroup Attributes ​

参数说明类型可选值默认值
size按钮尺寸FightingSizelarge middle small minimiddle
direction排列方式ButtonGroupDirectionhorizontal verticalhorizontal

Button Slots ​

名称说明
default默认按钮的内容

ButtonGroup Slots ​

名称说明
default默认按钮组的内容

Interface ​

组件导出以下类型定义：

ts
import type {
-  ButtonInstance,
-  ButtonProps,
-  ButtonNative,
-  ButtonGroupInstance,
-  ButtonGroupProps,
-  ButtonGroupDirection
-} from 'fighting-design'

ButtonNative ​

ts
type ButtonNative = 'submit' | 'reset' | 'button'

ButtonGroupDirection ​

ts
type ButtonGroupDirection = 'horizontal' | 'vertical'

ButtonClick ​

ts
type ButtonClick = (evt: MouseEvent) => void

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式

名称描述
--button-color文字颜色
--button-background背景色
--button-hoverhover 状态背景色
--button-activeactive 状态背景色
--button-height高度
--button-padding内边距
--button-font-size文字大小
--button-border-radius圆角大小

Contributors ​

- diff --git a/components/calendar.html b/components/calendar.html index a62a405b9..014afdadd 100644 --- a/components/calendar.html +++ b/components/calendar.html @@ -5,7 +5,7 @@ Calendar 日历 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -54,8 +54,8 @@ <script lang="ts" setup> const date = new Date() -</script>
开启

Attributes ​

参数说明类型可选值默认值
v-model:date绑定日期date——new Date
lunar是否显示农历或节日，仅支持 1900 ~ 2100boolean——false
show-header是否显示头部boolean——true
border是否显示边框boolean——false
border-color自定义边框颜色string————
day-cell-height日期单元格高度string / number————
week-cell-height星期单元格高度string / number————
on-change日期和月份任何变时触发的回调CalendarChange————
on-change-month月份改变时触发的回调CalendarChange————
on-change-date日期改变时触发的回调CalendarChange————

Slots ​

名称说明
last-change自定义上个月切换按钮
now-change自定义今天切换按钮
next-change自定义下个月切换按钮

Interface ​

组件导出以下类型定义：

ts
import type { CalendarInstance, CalendarProps, CalendarChange } from 'fighting-design'

CalendarChange ​

ts
type CalendarChange = (year: number, month: number, date: number) => void

Contributors ​

- diff --git a/components/card.html b/components/card.html index b7d2a0d37..e681f13bf 100644 --- a/components/card.html +++ b/components/card.html @@ -5,7 +5,7 @@ Card 卡片 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,17 +30,17 @@ -
Fighting Design

Appearance

On this page

Card 卡片 ​

放入你想展示的内容

基本使用 ​

title 属性可以配置卡片的标题

卡片标题
Card 卡片
开启

圆角卡片 ​

round 是否为圆角卡片

圆角的
Card 卡片
开启

不同状态 ​

shadow 属性可以配置阴影样式

从不显示
Hover 显示
总是显示
开启

自定义样式 ​

多种配置项可自定义卡片的样式

卡片标题
Card 卡片
开启

可关闭的 ​

close 可配置带有关闭按钮的卡片

卡片标题
Card 卡片
开启

Attributes ​

参数说明类型可选值默认值
title卡片标题string————
round是否为圆角卡片boolean——false
padding卡片内边距string————
shadow阴影样式CardShadowhover always——
border-color自定义边框颜色string————
background自定义背景颜色string————
title-color自定义 title 颜色string————
title-boldtitle 是否加粗boolean——false
close是否可关闭boolean——false
on-close是否可关闭CardClose————

Slots ​

名称说明
default默认内容
header自定义头部

Interface ​

组件导出以下类型定义：

ts
import type { CardInstance, CardProps, CardShadow, CardClose } from 'fighting-design'

CardShadow ​

ts
type CardShadow = 'hover' | 'always'

CardClose ​

ts
type CardClose = (target: boolean) => void

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式

名称描述
--card-border-color边框颜色
--card-background背景颜色
--card-padding内边距
--card-title-color标题颜色

Contributors ​

- diff --git a/components/checkbox.html b/components/checkbox.html index 4b53a2a64..e63082e30 100644 --- a/components/checkbox.html +++ b/components/checkbox.html @@ -5,7 +5,7 @@ Checkbox 复选框 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -109,8 +109,8 @@ CheckboxGroupInstance, CheckboxGroupProps, CheckboxGroupChange -} from 'fighting-design'

CheckboxModelValue ​

ts
type CheckboxModelValue = boolean | 'true' | 'false'

CheckboxLabel ​

ts
type CheckboxLabel = string | number | boolean

CheckboxChange ​

ts
type CheckboxChange = (val: CheckboxLabelType) => void

CheckboxGroupChange ​

ts
type CheckboxGroupChange = (val: string[]) => void

Contributors ​

- diff --git a/components/close-btn.html b/components/close-btn.html index 2f3032d02..4d7dfba0e 100644 --- a/components/close-btn.html +++ b/components/close-btn.html @@ -5,7 +5,7 @@ Close Btn 关闭按钮 | Fighting Design - + @@ -18,7 +18,7 @@ - + @@ -43,8 +43,8 @@ <template> <f-close-btn disabled :icon="FIconCross" /> -</template>
开启

Attributes ​

参数说明类型可选值默认值
size自定义尺寸string / number————
round是否为圆角的boolean——false
disabled是否禁用boolean——false
color自定义颜色string————
hover-color鼠标移入的颜色string————
icon自定义 iconFightingIcon————
on-click点击之后执行的回调HandleMouse————

Slots ​

名称说明
default默认插槽，自定义关闭按钮

Interface ​

组件导出以下类型定义：

ts
import type { CloseBtnInstance, CloseBtnProps } from 'fighting-design'

Contributors ​

- diff --git a/components/collapse-animation.html b/components/collapse-animation.html index 0dcbeaba4..aba5d27b5 100644 --- a/components/collapse-animation.html +++ b/components/collapse-animation.html @@ -5,7 +5,7 @@ Collapse Animation 折叠动画 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -61,8 +61,8 @@ import { ref } from 'vue' const isOpen2 = ref(true) -</script>
开启

Attributes ​

参数说明类型可选值默认值
opened是否打开boolean——false
disabled是否禁用boolean——false
height-animation是否高度自适应boolean——true
width-animation是否宽度自适应boolean——false
animation-time动画时间number——0.747
on-open打开动画开始的回调DialogCallback————
on-open-end打开动画结束的回调DialogCallback————
on-close关闭动画开始的回调DialogCallback————
on-close-end关闭动画结束的回调DialogCallback————

Slots ​

名称说明
default默认插入内容

Interface ​

组件导出以下类型定义：

ts
import type { CollapseAnimationInstance, CollapseAnimationProps } from 'fighting-design'

Contributors ​

- diff --git a/components/color.html b/components/color.html index 3636ca2f5..61f523f6f 100644 --- a/components/color.html +++ b/components/color.html @@ -5,7 +5,7 @@ Color 色彩 | Fighting Design - + @@ -18,7 +18,7 @@ - + @@ -31,8 +31,8 @@ -
Fighting Design

Appearance

On this page

Color 色彩 ​

好看的颜色可以让人神情愉悦

内部颜色 ​

下面提供 Fighting Design 内部的一些主要色号：

点击即可复制色号

#2d5af1

#6c8bf5

#819cf6

#96acf8

#abbdf9

#c0cdfa

#d5defc

#e9eefd

#52b35e

#85c98e

#97d19e

#a8d9ae

#b9e0be

#cbe8ce

#dcefde

#edf7ee

#ff0200

#ff4d4c

#ff6766

#ff807f

#ff9999

#ffb3b2

#ffcccc

#ffe5e5

#fcc202

#fcd44d

#fdda67

#fde080

#fde699

#feecb3

#fef2cc

#fef8e5

其它推荐 ​

下面提供一些外部的一些较好看的颜色提供使用：

Contributors ​

- diff --git a/components/confirm-box.html b/components/confirm-box.html index 36b9bae57..aa0615421 100644 --- a/components/confirm-box.html +++ b/components/confirm-box.html @@ -5,7 +5,7 @@ Confirm Box 确认框 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -82,8 +82,8 @@ } }) } -</script>
开启

Attributes ​

参数说明类型可选值默认值
title标题string————
content提示内容string————
confirm-text确认按钮文字string / number————
z-index层级，原生 z-index 属性number——1000
cancel-text取消按钮文字string / number————
on-confirm点击确定执行的回调方法HandleMouse————
on-cancel点击取消执行的回调方法HandleMouse————
on-open开启之后执行的回调方法HandleChange————
on-close关闭之后执行的回调方法HandleChange————

Contributors ​

- diff --git a/components/count-down.html b/components/count-down.html index 32c107f46..968c32504 100644 --- a/components/count-down.html +++ b/components/count-down.html @@ -5,7 +5,7 @@ Count Down 倒计时 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -79,8 +79,8 @@ background-color: #087ed3; border-radius: 4px * 2; } -</style>
开启

Attributes ​

参数说明类型可选值默认值
time倒计时时长，单位毫秒string / number————
interval倒计时渲染间隔，单位毫秒（开启millisecond则此项无效）number——1000
format时间格式string——HH:mm:ss
auto-start是否自动开始倒计时boolean——true
millisecond是否开始毫秒级渲染boolean——false
on-finish倒计时结束后触发的回调CountDownFinish————

Methods ​

参数说明参数
start开始倒计时——
pause暂停倒计时——
on-reset重设倒计时，若 autostart 为 true，重设后会自动开始倒计时total-time 倒计时长

Slots ​

名称说明参数
default自定义内容currentTime:CurrentTime

Interface ​

组件导出以下类型定义：

ts
import type { CountDownInstance, CountDownProps, CountDownFinish } from 'fighting-design'

CountDownFinish ​

ts
type CountDownFinish = () => void

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式。

名称描述
--count-down-font-size字体大小
--count-down-font-color字体颜色

Contributors ​

- diff --git a/components/date-picker.html b/components/date-picker.html index f9d1e59d0..d59dcd7bb 100644 --- a/components/date-picker.html +++ b/components/date-picker.html @@ -5,7 +5,7 @@ Date Picker 日期选择器 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -38,8 +38,8 @@ import { ref } from 'vue' const value1 = ref('') -</script>
开启

Attributes ​

参数说明类型可选值默认值
v-model:date绑定值string————
disabled是否禁用boolean——false
clear是否可清空boolean——false
format时间格式string——YYYY/MM/DD
placeholder占位符string————
size尺寸FightingSizelarge middle small minimiddle
add-zero不满 10 的是否前面加 0boolean——false

Interface ​

组件导出以下类型定义：

ts
import type { DatePickerInstance, DatePickerProps } from 'fighting-design'

Contributors ​

- diff --git a/components/dialog.html b/components/dialog.html index e3e868696..49f2b72ed 100644 --- a/components/dialog.html +++ b/components/dialog.html @@ -5,7 +5,7 @@ Dialog 对话框 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -102,8 +102,8 @@ const close = () => FMessage('关闭动画开始') const closeEnd = () => FMessage('关闭动画结束') -</script>
开启

Attributes ​

参数说明类型可选值默认值
v-model:visible绑定值，控制是否展示boolean——false
title标题文字内容string————
append-to-body是否追加到 bodyboolean——false
width自定义宽度string / number————
fullscreen是否全屏展示boolean——false
show-mask是否展示遮罩层boolean——true
show-header是否展示头部boolean——true
mask-close是否点击遮罩层关闭boolean——true
mask-opacity遮罩层透明度number————
mask-background遮罩层背景色string————
modal-blur是否模糊遮罩层boolean——false
close-icon自定义关闭按钮 iconFightingIcon————
show-close-icon是否展示关闭图标boolean——true
z-index层级，原生 z-index 属性number——1999
on-open打开动画开始的回调DialogCallback————
on-open-end打开动画结束的回调DialogCallback————
on-close关闭动画开始的回调DialogCallback————
on-close-end关闭动画结束的回调DialogCallback————

Slots ​

名称说明
default默认内容
header自定义顶部内容
footer自定义底部内容
closeIcon自定义关闭按钮图标

Interface ​

组件导出以下类型定义：

ts
import type { DialogInstance, DialogProps, DialogCallback } from 'fighting-design'

DialogCallback ​

ts
type DialogCallback = (node: Element) => void

Contributors ​

- diff --git a/components/divider.html b/components/divider.html index e7c6e6f91..319bbe424 100644 --- a/components/divider.html +++ b/components/divider.html @@ -5,7 +5,7 @@ Divider 分隔线 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -45,8 +45,8 @@ DividerProps, DividerPosition, DividerType -} from 'fighting-design'

DividerType ​

ts
type DividerType = 'dashed' | 'dotted' | 'double' | 'solid'

DividerPosition ​

ts
type DividerPosition = 'left' | 'center' | 'right'

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式

名称描述
--divider-type线的类型
--divider-color线条颜色
--divider-background背景颜色
--divider-font-color文字颜色
--divider-margin边距
--divider-height高度

Contributors ​

- diff --git a/components/drawer.html b/components/drawer.html index 3bdc7db9a..70ce99421 100644 --- a/components/drawer.html +++ b/components/drawer.html @@ -5,7 +5,7 @@ Drawer 抽屉 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -80,8 +80,8 @@ const visible2 = ref(false) const visible3 = ref(false) -</script>
开启

Attributes ​

参数说明类型可选值默认值
v-model:visible绑定值，控制是否展示boolean——false
append-to-body是否追加到 bodyboolean——false
direction弹出方向DrawerDirectiontop left bottom rightright
title标题文字内容string————
show-mask是否展示遮罩层boolean——true
show-header是否展示头部boolean——true
mask-close点击遮罩层是否可关闭boolean——true
mask-opacity遮罩层透明度number————
mask-background遮罩层背景色string————
modal-blur是否模糊遮罩层boolean——false
close-icon自定义关闭按钮 iconFightingIcon————
show-close-icon是否展示关闭按钮boolean——true
z-index层级，原生 z-index 属性number————
on-open打开动画开始的回调DialogCallback————
on-open-end打开动画结束的回调DialogCallback————
on-close关闭动画开始的回调DialogCallback————
on-close-end关闭动画结束的回调DialogCallback————

Slots ​

名称说明
default默认内容
header自定义顶部内容
footer自定义底部内容
closeIcon自定义关闭按钮图标

Interface ​

组件导出以下类型定义：

ts
import type { DrawerInstance, DrawerProps, DrawerDirection } from 'fighting-design'

DrawerDirection ​

ts
type DrawerDirection = 'left' | 'top' | 'right' | 'bottom'

Contributors ​

- diff --git a/components/dropdown.html b/components/dropdown.html index 72edc2764..2cc764bd5 100644 --- a/components/dropdown.html +++ b/components/dropdown.html @@ -5,7 +5,7 @@ Dropdown 下拉菜单 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -64,8 +64,8 @@ DropdownProps, DropdownItemInstance, DropdownItemProps -} from 'fighting-design'

Contributors ​

- diff --git a/components/empty.html b/components/empty.html index 592981fcb..0ca951220 100644 --- a/components/empty.html +++ b/components/empty.html @@ -5,7 +5,7 @@ Empty 空状态 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,13 +30,13 @@ -
Fighting Design

Appearance

On this page

Empty 空状态 ​

在展示空状态时的占位提示

基本使用 ​

content 属性可以配置展示的内容

在这里，后续提供更多服务
开启

内容文字大小 ​

content-size 属性可以配置 empty 内容的字体大小

暂无数据
开启

内容文字颜色 ​

content-color 属性可以配置 empty 内容文字的颜色

暂无数据
开启

自定义图片 ​

image-src 属性可以配置 empty 展示数据状态的图片

image-size 属性可以配置自定义的图片大小

暂无数据
开启

自定义背景色 ​

background 属性可以配置 empty 的背景颜色

暂无数据
开启

自定义页脚 ​

footer 插槽可自定义页脚

暂无数据
我的数据哪去了？
开启

Attributes ​

参数说明类型可选值默认值
content展示的内容string——暂无数据
content-size内容文字大小string————
content-color内容文字颜色string————
image-src自定义图片地址string————
image-size自定义图片尺寸string————
icon-size自定义 icon 尺寸string——30
background自定义背景色string————

Slots ​

名称说明
default自定义插入内容
footer自定义页脚内容

Interface ​

组件导出以下类型定义：

ts
import type { EmptyInstance, EmptyProps } from 'fighting-design'

Contributors ​

- diff --git a/components/expand-card.html b/components/expand-card.html index f64072e71..cacbc9244 100644 --- a/components/expand-card.html +++ b/components/expand-card.html @@ -5,7 +5,7 @@ Expand Card 折叠动效 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -91,8 +91,8 @@ evt: MouseEvent, index: number, item: ExpandCardImageListItem -) => void

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式

名称描述
--expand-card-height高度
--expand-card-width宽度
--expand-card-color文字颜色

Contributors ​

- diff --git a/components/fighting-global.html b/components/fighting-global.html index 39e30f4dd..7724d29a7 100644 --- a/components/fighting-global.html +++ b/components/fighting-global.html @@ -5,7 +5,7 @@ Fighting Global 全局配置 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -68,8 +68,8 @@ <f-fighting-global lang="en-US"> <f-empty /> -</f-fighting-global>
开启

Attributes ​

参数说明类型可选值默认值
type子组件的类型FightingTypedefault primary
success danger warning		——
size子组件的尺寸FightingSizelarge middle small mini——
lang子组件的语言FightingLangen-US zh-CNzh-CN

Slots ​

名称说明
default默认内容

Interface ​

组件导出以下类型定义：

ts
import type { FightingGlobalProps } from 'fighting-design'

Contributors ​

- diff --git a/components/form.html b/components/form.html index 7bbd2cd35..fa3e2b493 100644 --- a/components/form.html +++ b/components/form.html @@ -5,7 +5,7 @@ Form 表单 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -193,8 +193,8 @@ max?: number regExp?: RegExp validator?: () => boolean -}

FormItemRules ​

ts
type FormItemRules = FormItemRulesItem[]

LabelPosition ​

ts
type LabelPosition = 'left' | 'top'

Contributors ​

- diff --git a/components/image-preview.html b/components/image-preview.html index 00993d238..24a942619 100644 --- a/components/image-preview.html +++ b/components/image-preview.html @@ -5,7 +5,7 @@ Image Preview 图片预览 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -60,8 +60,8 @@ 'https://raw.githubusercontent.com/Tyh2001/images/master/fighting-design/2.jpg', 'https://raw.githubusercontent.com/Tyh2001/images/master/fighting-design/3.jpg' ] -</script>
开启

Attributes ​

参数说明类型可选值默认值
v-model:visible是否展示预览框boolean——false
append-to-body是否追加到 bodyboolean——false
img-list图片集合array——[]
modal-close是否点击遮罩层关闭预览窗boolean——true
is-close-btn是否展示关闭按钮boolean——true
show-index图片预览展示的首张图的索引，从 0 开始number——0
z-index图片预览展示的 z-indexnumber————
is-option是否展示图片预览下面的操作栏boolean——true
round预览图的圆角，传入一个单位string————
on-close关闭之后触发的回调HandleMouse————

Interface ​

组件导出以下类型定义：

ts
import type { ImagePreviewInstance, ImagePreviewProps } from 'fighting-design'

Contributors ​

- diff --git a/components/image.html b/components/image.html index e420962a0..af95adbb4 100644 --- a/components/image.html +++ b/components/image.html @@ -5,7 +5,7 @@ Image 图片 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -86,8 +86,8 @@ src="https://abc.com/1.png" err-src="https://abc.com/1.png" alt="error" -/>
开启

Attributes ​

参数说明类型可选值默认值
src图片路径string————
err-srcsrc 加载失败时加载的地址string————
alt原生 alt 属性string————
draggable是否可以拖动boolean——true
lazy是否懒加载图片boolean——false
root-margin触发懒加载的距离string / number——100px
width图片的宽度string / number————
height图片的高度string / number————
block是否为块级元素boolean——false
fit如何适应容器，原生 object-fit 属性FightingFitfill contain cover none
scale-down		——
select是否禁止选择boolean——false
referrer-policy原生 referrerPolicy 属性string————
round配置圆角，传入一个数值string / number————
titleimg 的 titlestring————
on-load图片加载成功触发的回调HandleEvent————
on-error图片加载失败触发的回调HandleEvent————

Slots ​

插槽名称说明说明
error自定义加载失败提示

Interface ​

组件导出以下类型定义：

ts
import type { ImageInstance, ImageProps, ImageFit } from 'fighting-design'

Contributors ​

- diff --git a/components/infinite-scrolling.html b/components/infinite-scrolling.html index 093d81395..ca3e611a1 100644 --- a/components/infinite-scrolling.html +++ b/components/infinite-scrolling.html @@ -5,7 +5,7 @@ Infinite Scrolling 无限滚动 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -64,8 +64,8 @@ text-align: center; line-height: 40px; } -</style>
开启

Attributes ​

参数说明类型可选值默认值
distance触发距离number / string——0
on-scroll-when滚动时触发的回调ScrollCallback————

Interface ​

组件导出以下类型定义：

ts
import type { InfiniteScrollingProps, ScrollCallback } from 'fighting-design'

ScrollCallback ​

ts
type ScrollCallback = () => void

Contributors ​

- diff --git a/components/input-number.html b/components/input-number.html index 53a516cac..fb60c045e 100644 --- a/components/input-number.html +++ b/components/input-number.html @@ -5,7 +5,7 @@ Input Number 数字输入框 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,38 +30,38 @@ -
Fighting Design

Appearance

On this page

Input Number 数字输入框 ​

这个文本框只能输入数字哦

基本使用 ​

使用 v-model 绑定一个值，model 可配置不同的模式

开启

不同尺寸 ​

size 属性可配置不同尺寸

开启

Attributes ​

参数说明类型可选值默认值
v-model绑定值number——1
model不同模式InputNumberModeldefault button switchdefault
precision数值精度number——0
step步长number——1
size尺寸FightingSizelarge middle small minimiddle
button-type按钮的类型FightingTypedefault primary success danger warning——
disabled是否禁用boolean——false
max最大值number————
min最小值number————
max-length最大输入长度number————
autofocus是否自动聚焦boolean——false
name原生 name 属性string——f-input-number
placeholder占位符string————
clear是否可清空boolean——false
readonly是否只读boolean——false
on-blur失去焦点触发的回调HandleEvent————
on-focus获取焦点触发的回调HandleEvent————
on-input原生 input 事件回调HandleEvent————
on-change绑定值发生变化时触发的回调InputChange————

Interface ​

组件导出以下类型定义：

ts
import type {
-  InputNumberInstance,
-  InputNumberProps,
-  InputNumberModel
-} from 'fighting-design'

InputNumberModel ​

ts
type InputNumberModel = 'default' | 'button' | 'switch'

Contributors ​

- diff --git a/components/input.html b/components/input.html index 9da046189..27ed3415b 100644 --- a/components/input.html +++ b/components/input.html @@ -5,7 +5,7 @@ Input 输入框 | Fighting Design - + @@ -18,7 +18,7 @@ - + @@ -100,8 +100,8 @@ import { ref } from 'vue' const value8 = ref('点我试试吧') -</script>
开启

Attributes ​

参数说明类型可选值默认值
v-model绑定值string————
type类型InputTypetext password numbertext
size尺寸FightingSizelarge middle small minimiddle
disabled是否禁用boolean——false
max最大值number————
min最小值number————
max-length最大输入长度上限number————
width自定义宽度string / number————
height自定义高度string / number————
autofocus是否自动获取焦点boolean——false
name原生 name 属性string——f-input
placeholder占位符string————
placeholder-color自定义占位符颜色string————
text-color自定义文字颜色string————
font-size自定义字体大小string / number————
autocomplete是否开启自动填充特性提示string——off
clear是否可清空boolean——false
search是否为搜索框boolean——false
readonly是否只读boolean——false
show-password是否展示显示密码图标boolean——false
enter-search是否按下回车触发搜索boolean——false
icon自定义前缀 iconFightingIcon————
on-blur失去焦点触发的回调HandleEvent————
on-focus获取焦点触发的回调HandleEvent————
on-search点击搜索触发的回调HandleEvent————
on-change绑定值发生变化时触发的回调HandleEvent————
on-input原生 input 事件回调HandleEvent————
on-enter按下回车触发的回调InputEnter————

Slots ​

插槽名称说明说明
searchBtn自定义搜索按钮
before前缀内容
after后缀内容

Interface ​

组件导出以下类型定义：

ts
import type { InputInstance, InputProps, InputType, InputEnter } from 'fighting-design'

InputType ​

ts
type InputType = 'text' | 'password' | 'number'

InputEnter ​

ts
type InputEnter = (value: string, evt: KeyboardEvent) => void

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式

名称描述
--input-background默认背景色
--input-active-background选中状态背景色
--input-text-color文字颜色
--input-active-border-color选中状态边框背景色
--input-height高度
--input-width宽度
--input-font-size文字大小

Contributors ​

- diff --git a/components/interface.html b/components/interface.html index 05c24fcc0..6fe74575a 100644 --- a/components/interface.html +++ b/components/interface.html @@ -5,7 +5,7 @@ Interface 接口类型 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -32,8 +32,8 @@
Fighting Design

Appearance

On this page

Interface 接口类型 ​

Fighting Design 内部导出的一些类型接口

ClassList ​

用于类名列表集合类型

ts
type ClassList = readonly (string | Record<string, unknown>)[]

FightingType ​

用于定于组件的类型，不同的类型将会展示不同的样式，主要用于 f-alert f-button f-fighting-global f-link FMessage FNotification f-ripple f-tag f-text 组件

ts
type FightingType = 'primary' | 'success' | 'danger' | 'warning' | 'default' | 'info'

FightingSize ​

用于定于组件的尺寸。主要用于 f-avatar f-button f-checkbox f-fighting-global f-input-number f-input f-list f-radio f-skeleton f-space f-switch f-tag f-toolbar 组件

ts
type FightingSize = 'large' | 'middle' | 'small' | 'mini'

FightingIcon ​

主要用于 f-svg-icon 组件的参数类型

ts
import type { VNode, Component } from 'vue'
 
-type FightingIcon = VNode | Component

FightingTarget ​

该来下指定在何处显示链接的资源，详情参考 target。主要用于 f-link f-button

ts
type FightingTarget = '_blank' | '_self' | '_parent' | '_top'

HandleMouse ​

针对一些点击事件的类型接口，用于 f-button f-link f-svg-icon 组件

ts
type HandleMouse = (evt: MouseEvent) => void

HandleEvent ​

用于一些基础的事件类型接口，用于 f-image

ts
type HandleEvent = (evt: vent) => void

HandleChange ​

用于改变状态的事件类型接口，用于 f-switch

ts
type HandleChange = (target: boolean) => void

FightingLang ​

ts
type FightingLang = 'en-US' | 'zh-CN'

InputChange ​

ts
type InputChange = (value: string) => void

FightingFit ​

适应容器的方式类型，原生 object-fit 属性，用于 f-avatar f-image 组件

ts
type FightingFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
- diff --git a/components/layout.html b/components/layout.html index a23cc1d5c..6b2f12d40 100644 --- a/components/layout.html +++ b/components/layout.html @@ -5,7 +5,7 @@ Layout 布局 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,111 +30,111 @@ -
Fighting Design

Appearance

On this page

Layout 布局 ​

处理常见的一些网页布局，实现快速搭建

基本使用 ​

  • f-layout 外层容器, 可以实现垂直、水平、嵌套布局
  • f-main 主体容器
  • f-header 头部容器
  • f-aside 侧栏容器
  • f-footer 底栏容器

基本布局 ​

下面是由 Fighting Design 提供的几种常见的页面布局演示

Main


Main
Footer


Main


Main


Main


Main


Main
Footer


Main


Main
Footer
开启

layout Attributes ​

参数说明类型可选值默认值
direction排列方向LayoutDirectionhorizontal vertical——

Header Attributes ​

参数说明类型可选值默认值
height高度string / number————
padding内边距string / number————

Main Attributes ​

参数说明类型可选值默认值
padding内边距string / number————

Aside Attributes ​

参数说明类型可选值默认值
width宽度string / number————
padding内边距string / number————
参数说明类型可选值默认值
height高度string / number————
padding内边距string / number————

Interface ​

组件导出以下类型定义：

ts
import type {
-  AsideProps,
-  AsideInstance,
-  FooterInstance,
-  FooterProps,
-  HeaderInstance,
-  HeaderProps,
-  LayoutInstance,
-  LayoutProps,
-  LayoutDirection,
-  MainInstance,
-  MainProps
-} from 'fighting-design'

LayoutDirection ​

ts
type LayoutDirection = 'horizontal' | 'vertical'

Contributors ​

- diff --git a/components/link.html b/components/link.html index cc8398630..8b5b1d218 100644 --- a/components/link.html +++ b/components/link.html @@ -5,7 +5,7 @@ Link 链接 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,23 +30,23 @@ -
Fighting Design

Appearance

On this page

Link 链接 ​

一个超链接

基本使用 ​

type 属性可以配置不同的链接类型，展示不同的颜色状态

默认链接
主要链接
成功链接
危险链接
警告链接
信息链接
开启

不同大小 ​

size 属性可以配置不同大小的 link

默认链接
主要链接
成功链接
危险链接
警告链接
信息链接
开启

不同状态 ​

state 可以配置 link 的不同移入状态

带有下划线
hover 一下试试
开启

自定义颜色 ​

如果你不喜欢 type 属性带了的不同颜色，你也可以使用 color 属性自定义你的 link 颜色

看我颜色好看吗
链接
还有我
开启

禁用状态 ​

disabled 可以让按钮处于禁用状态

不许点我
不许点我
不许点我
开启

禁止跳转 ​

你甚至可以拿 link 当作一个按钮来使用，那么要取消点击刷新和跳转的默认行为，使用 no-link 属性可以实现

拿我当按钮使用
开启

Attributes ​

参数说明类型可选值默认值
type不同类型FightingTypedefault primary success danger warning——
href链接的地址string————
size文字大小string / number————
state鼠标移入的样式状态LinkStateline background——
disabled是否禁用boolean——false
target原生 target 属性FightingTarget_self _blank _parent _top——
color自定义 link 颜色string————
no-copy是否禁止 copyboolean——false
no-link是否禁止链接跳转及重新加载（取消默认事件）boolean——false
after-icon之前的 iconFightingIcon————
before-icon之后的 iconFightingIcon————
on-click点击执行的回调HandleMouse————

Slots ​

名称说明
default默认内容

Interface ​

组件导出以下类型定义：

ts
import type { LinkInstance, LinkProps, LinkState } from 'fighting-design'

LinkState ​

ts
type LinkState = 'line' | 'background'

Contributors ​

- diff --git a/components/list.html b/components/list.html index a1ee3cc4b..5c7cb4a50 100644 --- a/components/list.html +++ b/components/list.html @@ -5,7 +5,7 @@ List 列表 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -71,8 +71,8 @@ ListProps, ListItemInstance, ListItemProps -} from 'fighting-design'

Contributors ​

- diff --git a/components/loading.html b/components/loading.html index 54f4104a4..d895428dc 100644 --- a/components/loading.html +++ b/components/loading.html @@ -5,7 +5,7 @@ Loading 加载 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -152,8 +152,8 @@ LoadingInstance, LoadingPropsType, LoadingElInterface -} from 'fighting-design'

Contributors ​

- diff --git a/components/menu.html b/components/menu.html index cb217dc00..8b834090f 100644 --- a/components/menu.html +++ b/components/menu.html @@ -5,7 +5,7 @@ Menu 导航菜单 | Fighting Design - + @@ -20,7 +20,7 @@ - + @@ -167,8 +167,8 @@ MenuItemGroupProps, SubmenuInstance, SubmenuProps -} from 'fighting-design'
ts
type MenuMode = 'horizontal' | 'vertical' | 'inline'
ts
type MenuItemClick = (name: string, evt: MouseEvent) => void
ts
type SubmenuClick = (target: boolean, evt: MouseEvent) => void

Contributors ​

- diff --git a/components/message.html b/components/message.html index 2fce41c53..3adc6b12a 100644 --- a/components/message.html +++ b/components/message.html @@ -5,7 +5,7 @@ Message 消息提示 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -150,8 +150,8 @@ | 'top-right' | 'bottom' | 'bottom-left' - | 'bottom-right'

MessageClose ​

ts
type MessageClose = (evt?: MouseEvent) => void

Contributors ​

- diff --git a/components/notification.html b/components/notification.html index ad7b33699..f16a610c2 100644 --- a/components/notification.html +++ b/components/notification.html @@ -5,7 +5,7 @@ Notification 通知 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -160,8 +160,8 @@ NotificationInstance, NotificationProps, NotificationPlacement -} from 'fighting-design'

NotificationPlacement ​

ts
type NotificationPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'

Contributors ​

- diff --git a/components/number-animate.html b/components/number-animate.html index aa007257e..724254f02 100644 --- a/components/number-animate.html +++ b/components/number-animate.html @@ -5,7 +5,7 @@ Number Animate 数字动画 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -48,8 +48,8 @@ NumberAnimateInstance, NumberAnimateProps, AnimationEnd -} from 'fighting-design'

AnimationEnd ​

ts
type AnimationEnd = (elapsed: number) => void

Contributors ​

- diff --git a/components/page-header.html b/components/page-header.html index 93c41b997..225301016 100644 --- a/components/page-header.html +++ b/components/page-header.html @@ -5,7 +5,7 @@ Page Header 页头 | Fighting Design - + @@ -18,7 +18,7 @@ - + @@ -49,8 +49,8 @@ import { FIconReply } from '@fighting-design/fighting-icon' </script>
开启

副标题 ​

subtitle 可以配置带有副标题

返回
标题
副标题
开启

Attributes ​

属性说明类型可选值默认值
icon返回图标FightingIcon————
icon-size返回图标大小string / number——16px
back-text返回文本string————
title标题文本string————
title-bold标题是否粗体boolean——false
title-center标题是否居中boolean——false
title-color标题颜色string——false
subtitle副标题文本string————
on-back点击左侧区域触发HandleMouse————

Slots ​

插槽名说明
icon自定义返回图标
title自定义标题内容
subtitle自定义副标题内容

Interface ​

组件导出以下类型定义：

ts
import type { PageHeaderInstance, PageHeaderProps } from 'fighting-design'

Contributors ​

- diff --git a/components/pagination.html b/components/pagination.html index 209a69695..609c09c9e 100644 --- a/components/pagination.html +++ b/components/pagination.html @@ -5,7 +5,7 @@ Pagination 分页器 | Fighting Design - + @@ -19,7 +19,7 @@ - + @@ -105,8 +105,8 @@ PaginationInstance, PaginationProps, PaginationEvent -} from 'fighting-design'

PaginationEvent ​

ts
type PaginationEvent = (current: number, pageSize: number, evt: MouseEvent) => void

Contributors ​

- diff --git a/components/progress.html b/components/progress.html index ed1faf320..4ed6699b7 100644 --- a/components/progress.html +++ b/components/progress.html @@ -5,7 +5,7 @@ Progress 进度条 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,71 +30,71 @@ -
Fighting Design

Appearance

On this page

Progress 进度条 ​

据说进度条都是假的

基本使用 ​

percentage 属性表示进度条对应的百分比，取值范围在 0-100 范围内。

type 属性可以配置不同的进度条样式，展示不同的颜色状态

10%
10%
10%
10%
10%
10%
开启

显示百分比 ​

show-text 属性用来展示进度条百分比

outside-text 属性可配置在外部显示百分比

10%
70%
开启

自定义高度 ​

height 属性可配置进度条的高度

10%
40%
开启

自定义颜色 ​

可以通过 color 属性设置进度条的颜色，会覆盖 type 属性对应的颜色

background 属性来设置进度条背景色

70%
40%
开启

条纹状态 ​

stripe 可以配置条纹样式

10%
10%
10%
10%
10%
10%
开启

Attributes ​

参数说明类型可选值默认值
percentage百分比number0 ~ 1000
type类型FightingTypedefault primary success danger warning infoprimary
height自定义高度string / number————
show-text是否显示百分比文字内容boolean——false
outside-text是否在外部显示文本boolean——false
text-color百分比文字的颜色string————
color进度条颜色string————
background进度条背景色string————
stripe是否开启条纹效果boolean——false

Interface ​

组件导出以下类型定义：

ts
import type { ProgressInstance, ProgressProps } from 'fighting-design'

Contributors ​

- diff --git a/components/radio.html b/components/radio.html index 67c818f90..2ab0e69bf 100644 --- a/components/radio.html +++ b/components/radio.html @@ -5,7 +5,7 @@ Radio 单选框 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -127,8 +127,8 @@ RadioGroundProps, RadioModelValue, RadioChange -} from 'fighting-design'

RadioModelValue ​

ts
type RadioModelValue = string | number | boolean

RadioChange ​

ts
type RadioChange = (value: RadioModelValue) => void

Contributors ​

- diff --git a/components/rate.html b/components/rate.html index ff91f4997..02f7d8518 100644 --- a/components/rate.html +++ b/components/rate.html @@ -5,7 +5,7 @@ Rate 评分 | Fighting Design - + @@ -18,7 +18,7 @@ - + @@ -64,8 +64,8 @@ import { ref } from 'vue' const value4 = ref(4) -</script>
开启

Attributes ​

参数说明类型可选值默认值
v-model绑定值number————
max最大分值，展示的星星数量number——5
effect-color选中颜色string——#fcc202
invalid-color 未选中的颜色string——#eef
readonly是否只读boolean——false
icon自定义 iconFightingIcon————
size图标尺寸string / number25
text-show是否展示辅助文字boolean——false
text-color辅助文字颜色string————
text-arr辅助文字数组array——['极差', '失望', '一般', '不错', '很棒']
text-size辅助文字尺寸string / number————
on-change当分数发生改变时触发的回调RateChange————

Interface ​

组件导出以下类型定义：

ts
import type { RateInstance, RateProps, RateChange } from 'fighting-design'

RateChange ​

ts
type RateChange = (value: number) => number

Contributors ​

- diff --git a/components/ripple.html b/components/ripple.html index 2cc1c3718..decf27730 100644 --- a/components/ripple.html +++ b/components/ripple.html @@ -5,7 +5,7 @@ Ripple 涟漪 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,99 +30,99 @@ -
Fighting Design

Appearance

On this page

Ripple 涟漪 ​

点击就会产生涟漪的组件

基本使用 ​

type 属性可以配置不同的按钮类型，展示不同的颜色状态

default 涟漪

primary 涟漪

success 涟漪

danger 涟漪

warning 涟漪

开启

自定义涟漪颜色 ​

ripples-color 属性可以自定义涟漪颜色

自定义涟漪颜色

自定义涟漪颜色

自定义涟漪颜色

开启

禁用状态 ​

disabled 可以禁用涟漪效果

禁止使用

可以使用

开启

自定义透明度 ​

start-opacity 和 end-opacity自定义涟漪开始和结束时候的透明度

自定义涟漪透明度

开启

Attributes ​

参数说明类型可选值默认值
type涟漪类型FightingTypedefault primary success danger warning——
ripples-color自定义涟漪颜色string————
duration移除涟漪节点的时间number——400
disabled是否禁用boolean——false
start-opacity涟漪动画开始的透明度number——0.5
end-opacity涟漪动画结束的透明度number——0

Slots ​

名称说明
default默认插入的内容

Interface ​

组件导出以下类型定义：

ts
import type { RippleInstance, RippleProps } from 'fighting-design'

Contributors ​

- diff --git a/components/select.html b/components/select.html index ea1c53e74..66cb8c92f 100644 --- a/components/select.html +++ b/components/select.html @@ -5,7 +5,7 @@ Select 选择器 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -185,8 +185,8 @@ ) => void

SelectBeforeChange ​

ts
type SelectBeforeChange = (
   value: SelectModelValue,
   label: SelectModelValue
-) => Promise<boolean>

Contributors ​

- diff --git a/components/skeleton.html b/components/skeleton.html index 1cda3ee33..a2a22e2a9 100644 --- a/components/skeleton.html +++ b/components/skeleton.html @@ -5,7 +5,7 @@ Skeleton 骨架屏 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -62,8 +62,8 @@ loading.value = false }, 3000) } -</script>
开启

Attributes ​

参数说明类型可选值默认值
round是否带圆角的boolean——false
animated是否展示波浪动画boolean——false
rows渲染多行占位图number——1
difference首位是否有长度差异boolean——false
row-gap自定义间距尺寸number / string————
loading为 true 时，显示占位图。false 展示子组件boolean——false
size自定义尺寸FightingSizelarge middle small minimiddle

Slots ​

名称说明
defaultloading 结束待渲染组件

Interface ​

组件导出以下类型定义：

ts
import type { SkeletonInstance, SkeletonProps } from 'fighting-design'

Contributors ​

- diff --git a/components/slider.html b/components/slider.html index 1566e16e2..8d88d1914 100644 --- a/components/slider.html +++ b/components/slider.html @@ -5,7 +5,7 @@ Slider 滑动输入条 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -65,8 +65,8 @@ import { ref } from 'vue' const value4 = ref(70) -</script>
开启

Attributes ​

参数说明类型可选值默认值
v-model / model-value绑定值number / array——0
step步长number——1
min最小值number——0
max最大值number——100
disabled是否禁用boolean——false
range是否可范围性取值boolean——false
bg-color自定义滑块背景色string————

Interface ​

组件导出以下类型定义：

ts
import type { SliderInstance, SliderProps } from 'fighting-design'

Contributors ​

- diff --git a/components/space.html b/components/space.html index 906635c30..d75aa39a8 100644 --- a/components/space.html +++ b/components/space.html @@ -5,7 +5,7 @@ Space 间距 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -64,8 +64,8 @@ <f-button type="primary">主要按钮</f-button> <f-button type="success">成功按钮</f-button> <f-button type="danger">危险按钮</f-button> -</f-space>
开启

Attributes ​

参数说明类型可选值默认值
spacing间距尺寸FightingSizelarge middle small minimiddle
vertical是否竖直排列boolean——false
nowrap是否禁止换行boolean——false
row-gap自定义纵向间距string————
column-gap自定义横向间距string————

Interface ​

组件导出以下类型定义：

ts
import type { SpaceInstance, SpaceProps } from 'fighting-design'

Contributors ​

- diff --git a/components/sticky-card.html b/components/sticky-card.html index dd31e6c6b..a32b5b90c 100644 --- a/components/sticky-card.html +++ b/components/sticky-card.html @@ -5,7 +5,7 @@ StickyCard 粘性卡片 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -70,8 +70,8 @@ import { ref } from 'vue' const open2 = ref(false) -</script>
开启

Attributes ​

参数说明类型可选值默认值
open是否展开boolean——false
open-text操作栏展开时的文字string——关闭
close-text操作栏关闭时的文字string——开启
border-color自定义边框颜色string————
on-open打开时的回调HandleChange————
on-close关闭时的回调HandleChange————

Slots ​

名称说明
default默认折叠内容
source来源内容

Interface ​

组件导出以下类型定义：

ts
import type { StickyCardInstance, StickyCardProps } from 'fighting-design'

Contributors ​

- diff --git a/components/svg-icon.html b/components/svg-icon.html index 9142614f0..66647e1ff 100644 --- a/components/svg-icon.html +++ b/components/svg-icon.html @@ -5,7 +5,7 @@ Svg Icon 图标 | Fighting Design - + @@ -32,7 +32,7 @@ - + @@ -66,8 +66,8 @@ <script lang="ts" setup> import { FIconApps, FIconBluetooth, FIconBook } from '@fighting-design/fighting-icon' -</script>
开启

集合 ​

svg-icon 集合，点击即可直接复制，共收入 266 个图标

FIconAnchor
FIconApps
FIconAppsMinus
FIconAppsPlus
FIconArchive
FIconArrowDown
FIconArrowDownLeft
FIconArrowDownRight
FIconArrowLeft
FIconArrowRight
FIconArrowUp
FIconArrowUpLeft
FIconArrowUpRight
FIconAtSign
FIconAtom
FIconBell
FIconBellSlash
FIconBin
FIconBinary
FIconBlock
FIconBluetooth
FIconBluetoothConnected
FIconBluetoothSearching
FIconBluetoothSlash
FIconBook
FIconBookOpen
FIconBookmark
FIconBriefcase
FIconBug
FIconCalendar
FIconCamera
FIconCameraVideo
FIconCameraVideoSlash
FIconCandy
FIconCards
FIconCast
FIconCertificate
FIconChartBar
FIconChartLine
FIconChevronDown
FIconChevronLeft
FIconChevronRight
FIconChevronUp
FIconChevronsDown
FIconChevronsLeft
FIconChevronsRight
FIconChevronsUp
FIconChevronsUpDown
FIconChip
FIconCircle
FIconCircleCross
FIconCircleMinus
FIconCircleTick
FIconCircleWarning
FIconClipboard
FIconClipboardTick
FIconClock
FIconClockAlarm
FIconClockTime
FIconCloud
FIconClover
FIconCode
FIconCoffee
FIconCog
FIconCompass
FIconConicalFlask
FIconContainer
FIconCopy
FIconCopyleft
FIconCopyright
FIconCreditcard
FIconCrop
FIconCross
FIconCrosshair
FIconCube
FIconDatabase
FIconDiamond
FIconDiff
FIconDisc
FIconDownload
FIconDroplet
FIconEraser
FIconExtensions
FIconEye
FIconEyeOffOutline
FIconEyeOutline
FIconEyeSlash
FIconFaceFrown
FIconFaceNeutral
FIconFaceSmile
FIconFile
FIconFileBinary
FIconFileCode
FIconFileSymlink
FIconFiles
FIconFilter
FIconFlag
FIconFlame
FIconFloppyDisk
FIconFolder
FIconFolderSymlink
FIconFolders
FIconForward
FIconFullSharp
FIconGamepad
FIconGem
FIconGift
FIconGitBranch
FIconGitCherryPick
FIconGitCompare
FIconGitFork
FIconGitMerge
FIconGitRequest
FIconGitRequestCross
FIconGitRequestDraft
FIconGitcommit
FIconGithub
FIconGitlab
FIconGlobe
FIconGrabHorizontal
FIconGrabVertical
FIconGraduateCap
FIconHash
FIconHeadphones
FIconHeart
FIconHelp
FIconHexagon
FIconHome
FIconHourglass
FIconId
FIconImage
FIconInbox
FIconInfinity
FIconInfo
FIconKey
FIconLaptop
FIconLayoutColumns
FIconLayoutDashboard
FIconLayoutGrid
FIconLayoutList
FIconLayoutRows
FIconLayoutSidebar
FIconLayoutStackH
FIconLayoutStackV
FIconLightbulb
FIconLightningBolt
FIconLink
FIconLinkExternal
FIconLinkSlash
FIconLoadingA
FIconMail
FIconMap
FIconMapOin
FIconMediaBack
FIconMediaEject
FIconMediaFastForward
FIconMediaPause
FIconMediaPlay
FIconMediaRewind
FIconMediaSkip
FIconMenuHamburger
FIconMenuKebab
FIconMenuMeatball
FIconMessage
FIconMessages
FIconMicrophone
FIconMinus
FIconMobile
FIconMonitor
FIconMonitorArrow
FIconMonitorCross
FIconMoon
FIconMusic
FIconNewspaper
FIconNorthStar
FIconNotes
FIconNotesCross
FIconNotesTick
FIconNut
FIconOctagon
FIconOctagonWarning
FIconOrganization
FIconPackage
FIconPadlock
FIconPaperPlane
FIconPaperclip
FIconPencil
FIconPeople
FIconPerson
FIconPhone
FIconPhoneCall
FIconPhoneCross
FIconPhoneForward
FIconPhoneIncoming
FIconPhoneOutgoing
FIconPin
FIconPlantPot
FIconPlus
FIconPower
FIconPrinter
FIconPulse
FIconRefresh
FIconReply
FIconRobot
FIconRocket
FIconRotateAntiClockwise
FIconRotateClockwise
FIconScales
FIconScreenMaxiMise
FIconScreenMiniMise
FIconSearch
FIconServer
FIconShare
FIconShield
FIconShieldCross
FIconShieldKeyhole
FIconShieldTick
FIconShieldWarning
FIconShoppingBag
FIconSignIn
FIconSignOut
FIconSignpost
FIconSkull
FIconSmileLine
FIconSnowflake
FIconSoundDown
FIconSoundMute
FIconSoundUp
FIconSpeaker
FIconSquare
FIconSquareCross
FIconSquareTick
FIconStack
FIconStackPop
FIconStackPush
FIconStar
FIconStarB
FIconStickyNote
FIconSun
FIconSwapHorizontal
FIconSwapVertical
FIconSword
FIconSwords
FIconTablet
FIconTag
FIconTelescope
FIconTent
FIconTerminal
FIconThumbDown
FIconThumbUp
FIconTick
FIconTickDouble
FIconTicket
FIconTreeFir
FIconTriangle
FIconTrophy
FIconUmbrella
FIconUpload
FIconWarning
FIconWifi
FIconWifiFair
FIconWifiPoor
FIconWifiSlash
FIconWifiWarning
FIconZoomIn
FIconZoomOut

Attributes ​

参数说明类型可选值默认值
coloricon 颜色string————
sizeicon 大小string / number————
iconicon 内容FightingIcon————
on-click点击触发的回调HandleMouse————

Slots ​

名称说明
defaulticon 的内容

Interface ​

组件导出以下类型定义：

ts
import type { SvgIconInstance, SvgIconProps } from 'fighting-design'

Contributors ​

- diff --git a/components/swap.html b/components/swap.html index ffd6c9e31..1d0aa27da 100644 --- a/components/swap.html +++ b/components/swap.html @@ -5,7 +5,7 @@ Swap 切换 | Fighting Design - + @@ -19,7 +19,7 @@ - + @@ -32,65 +32,65 @@ -
Fighting Design

Appearance

On this page

Swap 切换 ​

精致的切换组件

基本使用 ​

需要使用 v-model 绑定一个值

icon-on 和 icon-off 分别控制切换的不同图标

开启

不同尺寸 ​

size 属性可配置不同的尺寸

开启

不同动画 ​

type 属性可以配置不同的动画类型

开启

Attributes ​

参数说明类型可选值默认值
v-model绑定值boolean——false
size组件尺寸string / number——40
type动画类型SwapTypesound swap——
icon-on打开展示的图标FightingIcon————
icon-off关闭展示的图标FightingIcon————
on-change当绑定值发生改变时触发的回调SwapChange————

Interface ​

组件导出以下类型定义：

ts
import type { SwapInstance, SwapProps, SwapType, SwapChange } from 'fighting-design'

SwapType ​

ts
type SwapType = 'sound' | 'swap'

SwapChange ​

ts
type SwapChange = (value: boolean, evt: MouseEvent) => void

Contributors ​

- diff --git a/components/switch.html b/components/switch.html index 5007d0977..225602690 100644 --- a/components/switch.html +++ b/components/switch.html @@ -5,7 +5,7 @@ Switch 开关 | Fighting Design - + @@ -18,7 +18,7 @@ - + @@ -31,82 +31,82 @@ -
Fighting Design

Appearance

On this page

Switch 开关 ​

这不是 switch 游戏机，而是个开关

基本使用 ​

switch 的基本使用，需要使用 v-model 绑定一个值


开启

不同大小 ​

size 属性可以配置不同大小的 switch

开启

禁用状态 ​

disabled 属性可以禁用 switch

开启

加载状态 ​

loading 属性可以加载 switch

开启

方形的 ​

square 属性可以将 switch 设置为方形样式

开启

自定义颜色 ​

close-color 和 active-color 可以自定义开关的颜色

开启

描述文字 ​

close-text 和 active-text 可以自定义开关左右的描述文字

关闭
开启
开启

带有 icon ​

icon 可以让 switch 上带有 icon

开启

Attributes ​

参数说明类型可选值默认值
modelValue / v-model绑定值string——false
size组件尺寸FightingSizelarge middle small minimiddle
disabled是否禁用boolean——false
loading是否为加载状态boolean——false
icon自定义 iconFightingIcon————
close-color自定义关闭状态背景色string————
active-color自定义开启状态背景色string————
active-text自定义右侧的文字描述string————
close-text自定义左侧的文字描述string————
square是否为方形开关boolean——false
icon-size自定义 icon 大小string / number————
on-change绑定值发生改变时触发的回调HandleChange————

Interface ​

组件导出以下类型定义：

ts
import type { SwitchInstance, SwitchProps } from 'fighting-design'

Contributors ​

- diff --git a/components/table.html b/components/table.html index 4bfe150f8..574fed08e 100644 --- a/components/table.html +++ b/components/table.html @@ -5,7 +5,7 @@ Table 表格 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -599,8 +599,8 @@ row: Record<string, any>, column: TableColumns, index: number -) => TableRenderReturn

TableSelect ​

ts
type TableSelect = (value: TableData) => void

Contributors ​

- diff --git a/components/tabs.html b/components/tabs.html index d212bf2b2..cecd36f7e 100644 --- a/components/tabs.html +++ b/components/tabs.html @@ -5,7 +5,7 @@ Tabs 标签页 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -202,8 +202,8 @@ | 'flex-end' | 'space-between' | 'space-around' - | 'space-evenly'

TabsTrigger ​

ts
type TabsTrigger = 'hover' | 'click'

Tabs Methods ​

参数说明
activeName当前选中的值

Contributors ​

- diff --git a/components/tag.html b/components/tag.html index 26c2eee2f..e3ca48c53 100644 --- a/components/tag.html +++ b/components/tag.html @@ -5,7 +5,7 @@ Tag 标签 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,32 +30,32 @@ -
Fighting Design

Appearance

On this page

Tag 标签 ​

一个标签

基本使用 ​

type 属性可以配置不同的按钮类型，展示不同的颜色状态

开启

简约的 ​

simple 属性可以配置简约的提示，样式依然由 type 控制

开启

线性的 ​

line 属性可以配置线性的提示，样式依然由 type 控制

开启

自定义颜色 ​

background 和 color 可以自定义标签颜色，将覆盖原有的 type

开启

标签大小 ​

size 自定义标签大小

开启

块级元素 ​

通过 block 属性可以将标签设置为块级元素。

开启

可关闭的 ​

close 可配置可以关闭的

开启

Attributes ​

参数说明类型可选值默认值
type标签类型FightingTypedefault success danger warning primary——
close是否可关闭boolean——false
line线性的boolean——false
round圆角boolean——false
background自定义背景色string————
color自定义文字颜色string————
before-icon左侧 iconFightingIcon————
after-icon右侧 iconFightingIcon————
size标签大小FightingSizelarge middle small minismall
simple是否为简约模式boolean——false
block是否为块级元素boolean——false
on-close点击关闭按钮触发的回调HandleMouse————
on-click点击执行的回调HandleMouse————

Slots ​

名称说明
defaulttag 的内容

Interface ​

组件导出以下类型定义：

ts
import type { TagInstance, TagProps } from 'fighting-design'

Contributors ​

- diff --git a/components/text.html b/components/text.html index 6ba1fcdee..0e20745f8 100644 --- a/components/text.html +++ b/components/text.html @@ -5,7 +5,7 @@ Text 文字 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,35 +30,35 @@ -
Fighting Design

Appearance

On this page

Text 文字 ​

让文字活起来

基本使用 ​

type 属性可以配置不同的文字类型，展示不同的颜色状态

普通文字

主要文字

成功文字

危险文字

警告文字

开启

不同大小 ​

size 属性可以配置不同大小的 text

主要文字

成功文字

危险文字

警告文字

开启

自定义颜色 ​

如果你不喜欢 type 属性带了的不同颜色，你也可以使用 color 属性自定义你的 text 颜色

hello

自定义颜色的字体

开启

背景颜色 ​

如果你希望文字带上背景颜色，你可以使用 background 属性自定义背景颜色

背景颜色

背景颜色

背景颜色

开启

文字独占一行 ​

使用 block 属性可将文字显示为块状元素，独占一行

文字

文字

文字

开启

字间距 ​

使用 spacing 属性自定义字间距

小间距

中等间距

大间距

开启

缩进量 ​

使用 indent 属性规定文字块中首行文字的缩进

文字

文字

文字

开启

是否加粗 ​

使用 bold 属性可将文字设置为粗体显示

未加粗文字

加粗的主要文字

加粗的成功文字

加粗的危险文字

开启

文字修饰 ​

使用 decoration 属性规定添加到文字的修饰，例如：上划线（overline）、中划线（line-through）、下划线（underline）等

标准文字

上划线

中划线

下划线

开启

内边距 ​

使用 padding 属性可定义元素边框与元素内容之间的空间，即上下左右的内边距

上下左右相同的简写

上下、左右分别相同

分别定义上下左右

开启

省略文本 ​

ellipsis 属性可以配置是否省略文本，需配合 width 属性使用，超出显示省略号

省略文字省略文字省略文字省略文字

开启

Attributes ​

参数说明类型可选值默认值
type类型FightingTypedefault primary success danger warningdefault
size文字大小string / number————
color文字颜色string————
background背景颜色string————
block是否独占一行boolean——false
spacing文字间距string / number————
line-height行高string / number————
indent首字符缩进量string / number————
bold文字是否以粗体显示boolean——false
decoration文字的修饰TextDecorationoverline line-through underline——
padding内边距string / number————
width宽度string / number————
ellipsis是否省略文本，需配合 width 宽度使用boolean————
center是否居中boolean——false

Slots ​

名称说明
defaulttext 的内容

Interface ​

组件导出以下类型定义：

ts
import type { TextInstance, TextProps, TextDecoration } from 'fighting-design'

TextDecoration ​

ts
type TextDecoration = 'overline' | 'line-through' | 'underline'

Contributors ​

- diff --git a/components/textarea.html b/components/textarea.html index e75dc4659..696794b24 100644 --- a/components/textarea.html +++ b/components/textarea.html @@ -5,7 +5,7 @@ Textarea 文本域 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -76,8 +76,8 @@ const value6 = ref('both 随意拉伸') const value7 = ref('horizontal 水平拉伸') const value8 = ref('vertical 垂直拉伸') -</script>
开启

Attributes ​

参数说明类型可选值默认值
v-model绑定值string————
rows元素的输入文本的行数string / number——3
disabled是否禁用boolean——false
max-length最大输入长度上限number————
auto-height是否自适应高度boolean——false
autofocus是否自动获取焦点boolean——false
font-size自定义字体大小string / number————
name原生 name 属性string——f-input
placeholder占位符string————
readonly是否只读boolean——false
clear是否可清空boolean——false
resize拉伸方式TextareaResizenone both
horizontal vertical		——
on-blur失去焦点触发的回调HandleEvent————
on-focus获取焦点触发的回调HandleEvent————
on-change绑定值发生变化时触发的回调InputChange————
on-enter按下回车触发的回调InputEnter————

Interface ​

组件导出以下类型定义：

ts
import type { TextareaInstance, TextareaProps, TextareaResize } from 'fighting-design'

TextareaResize ​

ts
type TextareaResize = 'none' | 'both' | 'horizontal' | 'vertical'

Contributors ​

- diff --git a/components/time-picker.html b/components/time-picker.html index 7f59e8a40..90a284a9a 100644 --- a/components/time-picker.html +++ b/components/time-picker.html @@ -5,7 +5,7 @@ Time Picker 时间选择器 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -29,7 +29,7 @@ - +
Fighting Design

Appearance

On this page

Time Picker 时间选择器 ​

选取你想要的时间

基本使用 ​

使用 v-model:time 绑定一个值

开启

Attributes ​

参数说明类型可选值默认值
v-model:time绑定值string————
disabled是否禁用boolean——false
clear是否可清空boolean——false
placeholder占位符string————
size尺寸FightingSizelarge middle small minimiddle

Interface ​

组件导出以下类型定义：

ts
import type { TimePickerInstance, TimePickerProps } from 'fighting-design'

Contributors ​

- diff --git a/components/toolbar.html b/components/toolbar.html index 0b8f0b324..8a5f03a39 100644 --- a/components/toolbar.html +++ b/components/toolbar.html @@ -5,7 +5,7 @@ Toolbar 工具栏 | Fighting Design - + @@ -20,7 +20,7 @@ - + @@ -33,58 +33,58 @@ -
Fighting Design

Appearance

On this page

Toolbar 工具栏 ​

工具栏就用它

基本使用 ​

工具栏的基本使用，icon 可以配置带有图表的选项

开启

不同大小 ​

size 属性可以配置不同的大小

开启

圆角 ​

round 属性为圆角

开启

背景色 ​

background 可以自定义背景色

text-color 可以自定义文字颜色

开启

点击事件 ​

f-toolbar 采用事件委托，可以给 f-toolbar 添加事件，并给每个 f-toolbar-item 添加唯一的 index，那么在 click 的回调中就可以解构出 key 用于区分

也可以给每个 f-toolbar-item 单独添加点击事件

开启

Toolbar Attributes ​

参数说明类型可选值默认值
size尺寸FightingSizelarge middle small minilarge
round显示为圆角boolean——false
background背景颜色string————
text-color字体颜色string————
fixed是否固定定位boolean——false
width自定义宽度string / number————
height自定义高度string / number————
on-click点击之后触发的回调ToolbarClick————

Toolbar Slots ​

名称说明
default子工具栏选项

Toolbar-Item Attributes ​

参数说明类型可选值默认值
index唯一值string / number————
color自定义文字颜色string————
icon自定义 iconFightingIcon————
icon-size自定义 icon 大小string / number——16
on-click点击之后触发的回调HandleMouse————

Toolbar-Item Slots ​

名称说明
default默认内容

Interface ​

组件导出以下类型定义：

ts
import type {
-  ToolbarInstance,
-  ToolbarProps,
-  ToolbarClick
-  ToolbarItemInstance,
-  ToolbarItemProps,
-} from 'fighting-design'

ToolbarClick ​

ts
type ToolbarClick = (index: string | null, evt: MouseEvent) => void

Contributors ​

- diff --git a/components/tooltip.html b/components/tooltip.html index 2293672d1..98f77cf7e 100644 --- a/components/tooltip.html +++ b/components/tooltip.html @@ -5,7 +5,7 @@ Tooltip 消息提示 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,43 +30,43 @@ -
Fighting Design

Appearance

On this page

Tooltip 消息提示 ​

藏入你的提示内容

基本使用 ​

content 设置弹出的信息内容，position 可以配置不同的弹出方向

开启

不同状态 ​

state 属性可以配置不同的展示状态

开启

没有箭头 ​

no-arrow 可以禁止显示箭头

开启

Attributes ​

参数说明类型可选值默认值
content提示内容string / umber————
position弹出方向TooltipPositiontop bottom right leftbottom
disabled是否禁用boolean——false
state展示状态TooltipStatehover active alwayshover
no-arrow是否显示箭头boolean——false
bold是否加粗文字boolean——false
bright是否使用浅色主题boolean——false
background自定义背景色string————
font-color自定义文字颜色string————

Slots ​

名称说明
default默认插槽

Interface ​

组件导出以下类型定义：

ts
import type {
-  TooltipInstance,
-  TooltipProps,
-  TooltipPosition,
-  TooltipState
-} from 'fighting-design'

TooltipPosition ​

ts
type TooltipPosition = 'top' | 'bottom' | 'right' | 'left'

TooltipState ​

ts
type TooltipState = 'hover' | 'active' | 'always'

Contributors ​

- diff --git a/components/tree.html b/components/tree.html index c28e1d639..abf6ab08d 100644 --- a/components/tree.html +++ b/components/tree.html @@ -5,7 +5,7 @@ Tree 树 | Fighting Design - + @@ -18,7 +18,7 @@ - + @@ -321,8 +321,8 @@ value?: number | string disabled?: boolean children?: TreeItemModel[] -}

Contributors ​

- diff --git a/components/trigger.html b/components/trigger.html index 1ea5c1e68..f20cf299b 100644 --- a/components/trigger.html +++ b/components/trigger.html @@ -5,7 +5,7 @@ Trigger 触发器 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -70,8 +70,8 @@ <template #content> <f-empty content="在这里，后续提供更多服务" /> </template> -</f-trigger>
开启

Attributes ​

参数说明类型可选值默认值
spacing触发器和内容之间的间距string / number————
disabled是否禁用boolean——false
trigger触发方式TriggerTriggerhover clickhover
width自定义宽度string / number————
arrow是否带有箭头boolean——false
enter-duration弹出动画持续时间number————
leave-duration关闭动画持续时间number————
on-change弹窗状态改变时触发的回调HandleChange————
on-open弹窗状态打开时触发的回调HandleChange————
on-close弹窗状态关闭时触发的回调HandleChange————

Slots ​

名称说明
default触发器内容
content弹出内容

Methods ​

参数说明
close关闭触发器

Interface ​

组件导出以下类型定义：

ts
import type { TriggerInstance, TriggerProps, TriggerTrigger } from 'fighting-design'

TriggerTrigger ​

ts
type TriggerTrigger = 'hover' | 'click'

Contributors ​

- diff --git a/components/up-load.html b/components/up-load.html index c14a371b0..9bf0b566c 100644 --- a/components/up-load.html +++ b/components/up-load.html @@ -5,7 +5,7 @@ Up Load 文件上传 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -66,8 +66,8 @@ import { ref } from 'vue' const files4 = ref([]) -</script>
开启

Attributes ​

参数说明类型可选值默认值
v-model:files文件列表array————
accept接受的文件类型string————
name原生 name 属性string————
drag是否可拖拽上传boolean——false
is-remove是否可删除boolean——true
show-list是否展示文件列表boolean——false
multiple是否可多选boolean——false
max-size最大上传尺寸number————
max-length最大上传数量number————
disabled是否禁用boolean——false
on-load上传成功后执行的回调UpLoadCallback————
on-change绑定的文件列表发生改变时触发的回调UpLoadCallback————

Slots ​

名称说明
default自定义上传按钮样式

Interface ​

组件导出以下类型定义：

ts
import type { UpLoadInstance, UpLoadProps, UpLoadCallback } from 'fighting-design'

UpLoadCallback ​

ts
type UpLoadCallback = (files: File[]) => void

Contributors ​

- diff --git a/components/watermark.html b/components/watermark.html index 76b8e8338..8ae29589b 100644 --- a/components/watermark.html +++ b/components/watermark.html @@ -5,7 +5,7 @@ Watermark 水印 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,46 +30,46 @@ -
Fighting Design

Appearance

On this page

Watermark 水印 ​

据说水印容易让人讨厌？

基本使用 ​

content 可以配置想要显示的文字内容

开启

自定义文字样式 ​

font-color 和 font-size 可以自定义你需要的文字大小和颜色

开启

Attributes ​

参数说明类型可选值默认值
content水印内容string————
gap间距number——40
fontSize文字大小number——40
fontColor文字颜色string——#111
zIndex原生 z-index 属性number / string——9999

Slots ​

名称说明
default水印覆盖的内容

Interface ​

组件导出以下类型定义：

ts
import type { WatermarkInstance, WatermarkProps } from 'fighting-design'

Contributors ​

- diff --git a/docs/changelog.html b/docs/changelog.html index 01b728b82..9066fdb45 100644 --- a/docs/changelog.html +++ b/docs/changelog.html @@ -5,7 +5,7 @@ 更新日志 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,8 +30,8 @@ -
Fighting Design

Appearance

On this page

更新日志 ​

中文 | 英文

1.0.0-alpha.9 (2024-06-20) ​

  • 修复 f-select 组件 filter 配置项筛选点击闪烁的问题
  • 修复 f-checkbox-group 组件 row-gap 配置项失效问题
  • 禁止了 f-form 组件的原生表单校验
  • 修复 f-textarea 的 outline 样式不一致性
  • 修复 f-textarea 组件在 resize 不同配置项的情况下输入框错位的问题
  • 优化 f-textarea 组件整体流程度，代码近一步优化
  • f-textarea 组件 Enter 事件默认改为换行，ctrl + Enter 为提交事件，会执行 on-enter 事件
  • 修复 f-select 组件在绑定值为空的时候没有清空输入框的问题
  • 优化 f-up-load 语法 #492
  • 修复 f-select 组件动态变更响应试丢失问题
  • 修复 f-select 组件在筛选之后，直接失去焦点关闭下拉选项再次打开时依然显示过滤的内容问题

1.0.0-alpha.8 (2024-06-12) ​

  • 修复 f-image 和 f-avatar 组件被挤压的问题
  • 修复 f-link 组件 no-link 状态下无法执行事件的问题

1.0.0-alpha.7 (2024-05-24) ​

  • f-select 组件 on-before-change 配置项新增回调参数

1.0.0-alpha.6 (2024-05-23) ​

  • f-select 新增 on-before-change 配置项
  • f-confirm-box 组件新增 z-index 配置项

1.0.0-alpha.5 (2024-05-13) ​

  • 修复 f-select 组件默认值不显示问题

1.0.0-alpha.4 (2024-05-14) ​

  • 修复 f-select 组件默认值不显示问题

1.0.0-alpha.3 (2024-05-11) ​

  • 修复 f-select 组件默认值不显示问题
  • 修复 f-select 组件过滤时无法点击选择的问题

1.0.0-alpha.2 (2024-05-11) ​

修复

  • 修复 f-select 组件 width 配置项失效问题
  • 修复 f-select 组件 filter 配置输入文字不显示问题
  • 修复 f-select 组件交互不友好的问题

样式

  • 优化 f-input 样式细节

1.0.0-alpha.1 (2024-04-30) ​

  • 修复 f-tree 添加元素响应式丢失问题 #469
  • 修复 f-message 参数 close-btn 类型错误问题 #478

0.67.4 (2024-03-21) ​

  • 修复 image 组件参数错误问题

0.67.3 (2024-03-05) ​

  • 修复 f-up-load 组件配置 show-list 之后在特定情况下列表无法清空的问题
  • 修复 f-select 组件配置 filter 绑定值错误的问题

0.67.2 (2024-03-01) ​

  • 新增 f-form-item 对象深层校验
  • 修复 f-form-item 对于数据类型参数无法识别报错的问题

0.67.1 (2024-01-02) ​

  • 修复 package.json 配置问题

0.67.0 (2024-01-02) ​

  • 更新依赖项版本 vue@3.3.0 => vue@3.4.3
  • 修复 package.json 配置问题

0.66.4 (2023-12-24) ​

  • 新增 f-select 组件 filter 配置项

0.66.3 (2023-12-21) ​

  • 修复 f-table 组件 data 参数响应式丢失问题

0.66.2 (2023-12-20) ​

  • 新增 f-tabale 组件 select 和 on-select 配置项

0.66.1 (2023-12-19) ​

  • 修复 f-pagination 组件在 total 小于 page-size 时候显示页码错误的问题
  • 修复 f-pagination 组件在执行 on-prev 和 on-next 回调的时候为执行 on-change 的问题

0.66.0 (2023-12-18) ​

  • 修复 f-table 组件对于英文字母的文字不换行样式的问题
  • 修复 f-table 组件返回类型
  • 修复 f-aside 组件样式被挤压的问题
  • 修复 f-header 组件高度无法自动撑开的问题
  • 修复 f-select 组件选中值的类型判断条件
  • 新增 f-table 组件 noData 插槽

0.65.0 (2023-12-12) ​

  • 更新 f-menu 组件 on-menu-item-click 和 on-submenu-click 方法参数接收顺序
  • 更新 f-swap 组件 on-change 方法参数接收顺序
  • 修复 f-calendar 组件部分回调失效问题
  • 修复 f-date-picker 选择日期失效问题
  • 修复 f-tooltip 组件受到布局影响的样式问题

0.64.1 (2023-12-01) ​

  • 修复 f-submenu 组件折叠动画太慢的问题

0.64.0 (2023-10-07) ​

  • 修复 f-dialog 样式的详细问题
  • 修复 f-watermark 可删除问题

0.63.1 (2023-08-28) ​

  • 修复 f-select 组件多个不会触发滚动到选中元素问题

0.63.0 (2023-08-25) ​

  • 优化 f-dialog 组件样式
  • 新增 f-select 组件展开默认滚动到选中元素效果
  • 优化 f-calendar 组件
  • 修复 f-collapse-animation 组件宽度过渡失效问题

0.62.2 (2023-08-23) ​

  • 修复 f-collapse-animation 组件样式细节

0.62.1 (2023-08-23) ​

  • 修复 f-collapse-animation 组件样式细节

0.62.0 (2023-08-23) ​

  • f-collapse-animation 组件新增 width-animation 配置项

0.61.0 (2023-08-15) ​

  • 优化 f-drawer f-dialog 组件样式
  • 优化 f-radio 和 f-checkbox 样式细节
  • 重构 f-tree 组件
  • 新增 f-confirm-box 组件

0.60.0 (2023-08-04) ​

  • 优化 f-radio 组件样式
  • 废除 f-tabs-pane 组件
  • 新增 f-tabs-item 组件
  • 新增 f-switch 组件 loading 配置项
  • 废除 f-tabs 组件 edit-status on-edit 配置项
  • 废除 f-infinite-scrolling 组件 on-scroll-when 配置项
  • 废除 f-infinite-scrolling 组件 styles 配置项
  • 废除 f-infinite-scrolling 组件 loading 配置项
  • 重构 f-infinite-scrolling 组件
  • 重构 f-tabs 组件
  • 废除 f-infinite-scrolling 组件 on-scroll-end 参数类型修改
  • 修复 f-textarea、f-input、f-dialog、f-drawer、f-date-picker、f-image-preview、f-input-number、f-pagination、f-radio-group、f-swap、f-select、f-switch、f-time-pick、f-up-load、f-rate 组件在双向绑定空值时的警告问题

0.52.0 (2023-07-14) ​

  • 新增 f-avatar-group 组件

0.51.0 (2023-06-26) ​

  • 重构 f-input 组件样式
  • 废除 f-input 组件 background、active-background 、active-border-color 配置项
  • 重构 f-textarea 组件样式

0.50.1 (2023-06-21) ​

修复

  • 修复 defineModel 类型错误问题
  • 修复组件内部警告或错误信息不提示问题
  • 修复 f-back-top 传递错误参数报错问题
  • 修复 f-pagination 组件切换每页大小失效问题
  • 修复 f-pagination 组件 round 对于切换按钮失效问题

改动

  • 组件 f-pagination 参数 page-sizes 改为 page-select

0.50.0 (2023-06-20) ​

新增

  • 新增 f-select 箭头样式
  • 新增 f-trigger 组件 width 配置项
  • 新增 f-dropdown 组件 width 配置项

修复

  • 修复 f-form-item 组件 name 错误导致的报错

其它

  • 优化 f-space 组件样式细节
  • 优化 emit 实现方式
  • f-select 组件 width 默认值改为 190

0.44.0 (2023-06-18) ​

  • 修改 f-tag 关闭逻辑，从内部状态改为数据启动
  • 新增 f-tag 组件 on-click 配置项

0.43.3 (2023-06-18) ​

  • 修复 f-dialog 样式问题

0.43.2 (2023-06-18) ​

  • 优化 f-badge f-tag f-toolbar f-table 组件样式细节

0.43.1 (2023-06-16) ​

  • 修复 f-dialog 组件样式细节

0.42.0 (2023-06-16) ​

修复

  • 修复 f-notification 动画失效问题
  • 修复 f-input 组件 type 响应式丢失问题
  • 修复 f-up-load 继续多选重置之前文件的问题
  • 修复 f-collapse-animation 组件初始展开关闭时动画失效的问题

优化

  • 优化 f-message 组件样式细节
  • 优化 f-notification 组件样式细节
  • 优化 f-text 组件样式细节

废除

  • 废除 f-dialog height 配置项
  • 废除 f-drawer size 配置项
  • 废除 f-popup 组件
  • 重构 f-dialog f-drawer 组件

新增

  • 新增 f-dialog 组件 mask-background mask-opacity show-header 配置项
  • 新增 f-drawer 组件 mask-background mask-opacity show-header 配置项

0.41.0 (2023-06-04) ​

修复

  • 修复 f-popup 层级问题
  • 修复 f-calender 回到当前时间错误的问题
  • 修复 f-dialog 头部样式问题
  • 修复 f-time-picker 组件样式问题

其它

  • f-calender 组件废除 CalendarChangeParams 类型
  • f-calender 组件新增 on-change 回调

0.40.4 (2023-06-04) ​

修复

  • 修复 f-button 组件部分参数响应式丢失问题
  • 修复 f-drawer 组件内容部分超出不显示滚动条问题
  • 修复 f-popup 组件内容部分超出不显示滚动条问题

其它

  • f-popup 组件 z-index 配置项默认值改为 null

0.40.3 (2023-05-22) ​

  • 修复 f-avatar 组件意外的边距展示问题

0.40.2 (2023-05-20) ​

新增

  • f-collapse-animation 组件新增 width-animation animation-time on-open on-close on-open-end on-close-end 配置项

0.40.1 (2023-05-19) ​

更新

  • f-textarea 组件新增 on-enter 配置项
  • f-textarea 组件按下 Enter 不会触发换行，改为 Ctrl + Enter 换行

修复

  • 修复 f-textarea 组件 close 按钮样式错误问题

0.40.0 (2023-05-19) ​

更新

  • f-input 组件 autocomplete 配置项默认值改为 off
  • f-textarea 组件新增 auto-height 配置项

修复

  • 修复 f-input 组件 on-enter 类型

0.39.0 (2023-05-18) ​

  • 修复 f-option 关闭报错问题
  • 修复 f-time-pick 关闭报错问题
  • 修复 f-main 组件名错误问题
  • 修复 f-ripple 组件名错误问题
  • 修复 f-option 点击报错问题

0.38.0 (2023-05-11) ​

修复

  • 修复 f-form 类型错误
  • 修复 f-skeleton 组件样式
  • 修复 f-trigger 组件触发时间错误的问题

0.37.0 (2023-05-10) ​

更新

  • f-skeleton 组件样式细节优化
  • f-skeleton 组件新增 row-gap 和 difference 配置项
  • f-form 组件 on-submit 回调参数类型修改，由一个对象类型，改为四个参数类型
  • f-form-item 组件新增 validator 校验方法
  • 新增部分 hooks 封装

修复

  • 修复 f-form 组件没有传递 rules 和 name 也触发表单校验的问题
  • 修复点击 f-trigger 内容部分也会关闭的问题

0.36.1 (2023-05-08) ​

  • 修复 f-dialog 样式问题
  • f-form 新增 submit 和 validate 方法

0.36.0 (2023-05-08) ​

优化

  • 优化 f-trigger 和 f-dropdown 样式细节
  • 优化部分组件类型
  • 优化部分 hooks 参数

修复

  • 修复 f-trigger 组件 hover 状态移出内容立即隐藏的问题
  • 修复 f-back-top 组件添加事件监听组件卸载未移除的问题

0.35.0 (2023-05-07) ​

优化

  • 优化 f-input 和 f-textarea 样式细节

新增

  • f-input 和 f-textarea 组件新增 font-size 配置项
  • f-dialog 组件新增 height 配置项
  • f-popup 组件新增 fullscreen 配置项

修复

  • 修复 f-radio 组件样式问题
  • 修复 f-checkbox 组件样式问题
  • 废除 f-checkbox 组件 indeterminate 配置项
  • 修复 f-trigger 组件层级关系和缩放位置显示错误问题

0.34.0 (2023-05-05) ​

修复

  • 修复 f-avatar f-image 组件绑定动态 src 图片不变化的问题
  • 修复 f-avatar f-image 组件对齐样式问题
  • 修复 f-dialog f-popup 类型错误

新增

  • 新增 f-count-down 倒计时组件

更改

  • f-dialog 宽高样式修改
  • f-up-load 组件 show-list 默认值改为 false

0.33.2 (2023-05-01) ​

  • 修复 f-avatar 组件 round 对于 text 失效问题

0.33.1 (2023-04-27) ​

  • f-form 组件新增 label-position 配置项
  • 优化 f-form 样式细节

0.33.0 (2023-04-25) ​

  • 废除 f-table 组件 optional 配置项
  • f-table 组件类型优化
  • 优化 f-input f-textarea 组件实现

Fix

  • 修复 f-tooltip 组件部分情况 disabled 无效
  • 修复 utils isFunction 方法，解决部分组件对于 async 函数失效问题

0.32.0 (2023-04-12) ​

  • 修复 FMessage 不同弹出位置错误的问题
  • 修复 FMessage 多弹出偏移量错误问题

0.31.1 (2023-04-10) ​

  • 修复 FMessage 不同弹出位置错误的问题

0.31.0 (2023-04-10) ​

  • FNotification 组件 type 默认值改为 null
  • FNotification 组件 duration 默认值改为 2500
  • FNotification 组件废除 close Events
  • FNotification 组件样式优化
  • FMessage 组件 duration 默认值改为 2500
  • FMessage 组件废除 close Events
  • FMessage 和 FNotification 添加 on-close 回调参数类型
  • f-sticky-card 组件样式细节优化

0.30.0 (2023-04-01) ​

  • 修复 message 组件导出类型

0.28.2 (2023-04-01) ​

  • 修复全局类型错误

0.28.1 (2023-04-01) ​

  • f-progress 组件新增 start 配置项
  • 优化类型配置文件，修复打包目录结构

0.28.0 (2023-03-21) ​

  • f-image 组件 no-select 配置项改为 select
  • 优化 f-image 和 f-avatar 组件
  • f-radio 组件废除 border 配置项
  • f-radio 组件新增 background 配置项
  • f-radio 组件样式重构

0.27.2 (2023-03-13) ​

修复

  • 修复 f-pagination 切换也码数显示错误的问题

0.27.1 (2023-03-10) ​

新增

  • f-input 组件新增 width 和 height 配置项
  • f-input 组件兼容全局配置

优化

  • 优化 f-textarea 样式细节

其它

  • f-textarea 组件 resize 配置项默认值改为 null

0.27.0 (2023-03-08) ​

修复

  • 修复 f-select 组件 width 失效问题
  • 修复 f-box 组件样式问题
  • 修复 f-table 组件样式参数失效问题
  • 修复 f-pagination 组件下拉菜单选择失效问题
  • 修复 f-pagination 点击错位的问题
  • 修复 f-pagination 样式问题

优化

  • 优化 f-toolbar 组件回调参数和类型
  • 优化 f-input 组件回调参数和类型
  • 优化 f-pagination 组件样式细节

新增

  • f-select 组件新增 on-change 配置项

0.26.2 (2023-03-01) ​

修复

  • 修复 f-slider 组件偏移量错误的问题

其它

  • f-select 组件新增 size 配置项
  • 优化 f-pagination 组件

0.26.1 (2023-02-28) ​

修复

  • 修复 f-slider 组件偏移量错误的问题

其它

  • 优化 f-expand-card 组件细节
  • f-expand-card 组件新增 on-change 配置项

0.26.0 (2023-02-24) ​

  • 优化 f-back-top 组件实现
  • f-menu 组件新增 on-menu-item-click on-submenu-click 配置项
  • 修复 f-menu 组件折叠问题
  • 重构 f-collapse-animation 组件

0.25.1 (2023-02-21) ​

  • 修复 f-submenu 组件类名问题

0.25.0 (2023-02-21) ​

  • 优化 f-image-preview 组件弹出动画效果
  • f-image-preview 组件新增 append-to-body 配置项
  • 完善全部组件 ts 类型注释
  • f-expand-card 组件新增 vertical 配置项

0.24.0 (2023-02-17) ​

  • f-progress 组件 type 新增 info 和 default 配置项
  • f-swap 组件 type 废除 default 配置项
  • f-link 组件 state 配置项的 bag 可选值改为 background
  • f-link 组件废除 beforeIcon 和 afterIcon 插槽
  • f-divider 组件新增 height 配置项，优化部分参数配置

0.23.1 (2023-02-16) ​

  • 优化部分 ts 类型错误
  • 添加部分浏览器兼容适配
  • 优化部分 utils 方法的严格性

0.23.0 (2023-02-15) ​

  • f-badge 组件优化细节
  • f-slider 组件废除 range 配置项
  • f-slider 组件新增 background active-color width 配置项
  • f-card 组件新增 border-color background title-color title-bold close on-close 配置项
  • f-input 组件新增 autocomplete 配置项
  • f-input 组件新增 before 插槽
  • f-date-picker 组件新增 placeholder add-zero 配置项
  • 修复 f-date-picker 清空时的警告提示

0.22.1 (2023-02-07) ​

  • f-calendar 组件废除 memorandum 配置项
  • 优化 f-calendar 组件农历描述的优先级展示状态
  • 大幅度优化内部代码实现

0.22.0 (2023-02-03) ​

  • f-button f-alert f-badge f-tag 组件新增 type 为 info 可选项
  • f-alert 组件样式微调
  • f-aside 组件新增 background 配置项
  • f-input 样式微调
  • f-input 组件新增 background text-color active-background active-border-color 配置项

0.21.0 (2023-02-01) ​

  • f-badge 组件 type 新增 default 配置项
  • f-badge 组件 color 配置项改为 background
  • f-badge 组件 font-color 配置项改为 color
  • 所有组件样式优化

0.20.3 (2023-01-31) ​

  • 针对 f-button 组件样式做了较大优化，内部样式实现优化

0.20.2 (2023-01-30) ​

  • 修复 f-switch 在 f-fighting-global 下失效问题

0.20.1 (2023-01-29) ​

  • 修复 FNotification 组件名错误的问题
  • 优化 FMessage 和 FNotification 组件公共方法

0.20.0 (2023-01-17) ​

  • 优化 f-space 样式细节
  • 修复 f-tabs 一些已知问题
  • 废除 f-progress 组件 width、square linear text-inside 配置项
  • 新增 f-progress 组件 outside-text 配置项

0.19.2 (2023-01-16) ​

  • 优化 f-image 和 f-avatar 组件类型
  • 优化 f-up-load 回调类型
  • 完善更多组件的 role

0.19.1 (2023-01-13) ​

  • 优化 f-dropdown-item 样式细节
  • 优化 f-trigger 关闭展示细节处理

0.19.0 (2023-01-12) ​

优化

  • 优化 f-tag 样式细节
  • 优化 f-button 样式细节
  • 优化 f-alert 样式细节

修复

  • 修复 f-ripple 组件响应式失效问题
  • 修复 f-text 组件响应式失效问题
  • 修复 f-button 涟漪失效问题

0.18.0 (2023-01-12) ​

修复

  • 修复 f-tree 类型问题

0.17.3 (2023-01-11) ​

修复

  • 修复 f-button 在 icon 状态下导致的意外边距问题
  • 修复 f-input-number 组件 size 失效问题

新增

  • 新增 f-input-number 组件 button-type 配置项

0.17.2 (2023-01-11) ​

修复

  • 修复 f-alert 滚动失效问题

0.17.1 (2023-01-10) ​

修复

  • 修复 f-alert f-link f-ripple f-tag f-text 响应式失效问题
  • 修复 f-number-animate 返回 NaN 的问题

0.17.0 (2023-01-09) ​

优化

  • 优化部分组件 css
  • 针对 f-tabs 组件做了较大优化
  • 优化 f-tabs 样式

打包

  • 优化了 css 打包，加入 postcss 配置项

0.16.0 (2023-01-05) ​

修复

  • 修复 f-input 在黑暗模式下不显示 placeholder 的问题 issues#330
  • 修复 f-ripple 组件在全局配置下 type 失效问题
  • 修复全局配置组件响应式丢失问题

新增

  • 新增 f-input 组件 placeholder-color 配置项
  • 新增 f-calendar 组件国际化配置
  • 新增 f-page-header 组件国际化配置

其它改动

  • f-avatar 组件 font-size 默认值改为 null
  • f-avatar 组件 font-color 默认值改为 null
  • f-calendar 组件 border-color 默认值改为 null
  • f-calendar 组件 day-cell-height 默认值改为 null
  • f-calendar 组件 week-cell-height 默认值改为 null
  • f-page-header 组件 back-text 默认值改为 null
  • 废除 f-sticky-card 组件 background 配置项

0.15.0 (2023-01-03) ​

修复

  • 修复 f-alert 组件 center 失效问题

新增

  • 新增 f-infinite-scrolling 组件
  • 新增 f-number-animate 组件

0.14.0 (2022-12-30) ​

新增

  • 新增 f-alert 组件 alert-list 配置项

优化

  • 废除 f-alert 组件 overflow 配置项
  • 优化 f-popup 组件弹出状态针对滚动条的处理
  • 优化 f-dialog f-drawer 组件样式细节

修复

  • 修复 f-checkbox 组件 border 状态样式问题
  • 修复 f-input-number 警告错误

0.13.2 (2022-12-29) ​

  • 修复 f-ripple 组件失效问题

0.13.1 (2022-12-29) ​

修复

  • 修复 f-svg-icon 类型
  • 修复 f-rate 类型
  • 修复 f-calendar 组件样式问题 #315

0.13.0 (2022-12-28) ​

新功能

  • 新增 f-box 组件
  • 完善 f-tree 组件

修复

  • 修复 f-button 组件涟漪效果报错问题

0.12.0 (2022-12-20) ​

新功能

  • 新增 f-form 组件
  • 新增 f-form-item 组件

修复

  • 修复 f-space 组件样式细节
  • 修复 f-back-top 组件 z-index 失效问题

其它更新

  • 废除 loading-bar 组件
  • 优化 f-input 组件类型

0.11.2 (2022-12-15) ​

新增

  • 新增 f-button 组件 spread 配置项

修复

  • 修复 f-image-preview 的警告错误
  • 修复 f-button 组件样式细节
  • 修复 f-tag 组件样式细节
  • 修复 f-space 组件样式细节

其它改动

  • f-space 组件废除 wrap 配置项
  • f-space 组件新增 nowrap 配置项
  • f-space 组件 row-gap column-gap 配置项支持 number 类型

0.11.1 (2022-12-13) ​

  • 修复 f-tag 组件 size 失效问题 issues#309
  • 修复一些细节类型问题
  • 优化 f-image 和 f-avatar 组件加载过程中的样式处理优化

0.11.0 (2022-12-13) ​

新功能

  • f-fighting-global 组件新增 lang 配置项
  • f-toolbar 组件 width 和 height 配置项支持 number 类型

其它更新

  • 修复了全局组件的类型

0.10.0 (2022-12-11) ​

修复

  • 修复 f-list 和 f-list-item 组件 bug
  • 修复 f-trigger 组件禁用效果失效问题

新增

  • 新增 f-fighting-global 组件
  • 新增 f-list 组件 zebra-color 配置项
  • 新增 f-list 组件 size 配置项新增 mini 可选项

其它更新

  • f-button 组件样式细节优化
  • f-sticky-card 组件移除 open-height 配置项
  • f-rate 组件 size 配置项默认值改为 25

0.9.0 (2022-12-07) ​

  • 完善 f-menu 组件
  • 优化部分组件 role 属性
  • 优化 f-svg-icon 组件样式细节

0.9.0-alpha.8 (2022-12-06) ​

新功能

  • 新增 f-slider 组件

优化项

  • 优化 f-toolbar 组件点击相关逻辑
  • 优化 f-pagination 组件样式实现
  • 优化 f-tag 组件内部逻辑
  • 优化 f-button 组件实现
  • 优化 f-ripple 组件实现
  • 废除 f-ripple 组件 no-select 配置项

其它改动

  • f-card 组件 padding 配置项默认值修改
  • f-card 组件 shadow 配置项可选参数修改
  • f-pagination 组件 prev-click 配置项改为 on-prev
  • f-pagination 组件 next-click 配置项改为 on-next
  • f-pagination 组件 change 配置项改为 on-change
  • f-tooltip 组件 content 配置项支持 number 类型
  • f-breadcrumb 和 f-breadcrumb-item 组件参数进行了部分改动
  • 全局导出类型较大幅度改动，详情参考文档组件导出类型

0.9.0-alpha.7 (2022-12-01) ​

新增

  • 新增 f-breadcrumb-item 组件 to 配置项
  • 完善更多 f-menu 组件功能

优化

  • 优化 f-switch 细节样式和性能
  • 优化 f-button 样式处理逻辑
  • 优化 f-dropdown-item 样式细节
  • 优化 f-option 样式细节
  • 优化 f-select 样式细节

改动

  • f-link 组件 prohibit 配置项改为 disabled
  • f-switch 组件 open-color 改为 active-color
  • f-switch 组件 open-text 改为 active-text

0.9.0-alpha.6 (2022-11-29) ​

新功能

  • 新增 f-menu 组件
  • 新增 f-menu-item 组件
  • 新增 f-menu-item-group 组件
  • 新增 f-submenu 组件
  • 新增 f-collapse-animation 组件
  • 新增 f-button-group 组件 direction 配置项

修复

  • 修复 f-pagination 组件细节问题
  • 修复 f-button 组件样式细节

其它改动

  • 废除 f-button-group 组件 vertical 配置项
  • 优化 f-sticky-card 组件

0.9.0-alpha.5 (2022-11-25) ​

新功能

  • 新增 f-trigger 组件

其它更新

  • 优化 f-space 组件样式细节
  • f-sticky-card 组件 open-end close-end 回调参数改为 on-open on-close

0.9.0-alpha.4 (2022-11-23) ​

新功能

  • 新增 f-date-picker 组件
  • 新增 f-time-picker 组件
  • 新增 f-input-number 组件
  • 新增 f-input 组件 type 属性 number 类型
  • 新增 f-input 组件 after-icon 配置项
  • 新增 f-input 组件 on-input 配置项
  • 新增 f-input 组件 after 插槽
  • 新增 f-textarea 组件 on-input 配置项
  • 新增 f-input 组件加入查看密码切换动画效果
  • 新增 f-breadcrumb-item 组件 color icon-color separator 配置项
  • 新增 f-tag 组件关闭动画
  • 新增 f-card 组件 padding 实现 number 类型参数

修复 Bug

  • 修复 f-input 组件 on-change 回调错误的问题
  • 修复 f-textarea 组件 on-change 回调错误的问题
  • 修复 f-list-item 单独使用报错的问题

其它更新

  • 优化 f-input 组件查看密码方式
  • 优化 f-dropdown 组件样式细节
  • 优化 f-alert 组件样式细节
  • 优化 f-back-top 组件样式细节
  • 重构 f-calendar 组件头部样式
  • 重构 f-calendar 组件内部细节
  • 重构 f-tag 组件内部细节
  • 废除 f-list 组件 list-style 配置项
  • 重构 f-skeleton 组件 size 配置项
  • 废除 f-skeleton 组件 circled 配置项
  • 废除 f-close-btn 组件 no-hover 配置项
  • f-breadcrumb 组件 separator-color 参数改为 icon-color
  • f-breadcrumb 组件 item-color 参数改为 color
  • f-skeleton 组件 rounded 参数改为 round
  • f-back-top 组件 bottom right background color 参数默认值更新
  • f-toolbar-item 组件 click 参数改为 on-click
  • f-toolbar-item 组件 data-key 参数改为 index
  • f-toolbar-item 组件 icon-size 参数改为默认值 16
  • f-toolbar 组件 click 参数改为 on-click
  • f-image-preview 组件 close 回调改为 on-close
  • f-alert 组件 close-end 回调改为 on-close
  • f-button 组件 click 回调改为 on-click
  • f-avatar 组件 load error 回调改为 on-load on-error
  • f-image 组件 load error 回调改为 on-load on-error
  • f-calendar 组件 change-switch change-date 回调改为 on-change-month on-change-date
  • f-card 组件 padding 参数改为默认值为 20
  • f-checkbox 组件 change 参数改为 on-change
  • f-checkbox-group 组件 change 参数改为 on-change
  • f-close-btn 组件 click 参数改为 on-click
  • f-dialog 组件 open open-end close close-end 改为 on-open on-open-end on-close on-close-end
  • f-drawer 组件 open open-end close close-end 改为 on-open on-open-end on-close on-close-end
  • f-popup 组件 open open-end close close-end 改为 on-open on-open-end on-close on-close-end
  • f-dropdown-item 组件 click 参数改为 on-click
  • f-link 组件 click 参数改为 on-click
  • f-message 组件 close-end 参数改为 on-close
  • f-notification 组件 close-end 参数改为 on-close
  • f-page-header 组件 back 参数改为 on-back
  • f-radio 组件 change 参数改为 on-change
  • f-radio-group 组件 change 参数改为 on-change
  • f-svg-icon 组件 click 参数改为 on-click
  • f-switch 组件 change 参数改为 on-change
  • f-tag 组件 close-end 参数改为 on-close
  • f-up-load 组件 change load 参数改为 on-change on-load

0.9.0-alpha.3 (2022-11-18) ​

  • 更新类型配置文件
  • 修复 f-checkbox-group 类型错误

0.9.0-alpha.2 (2022-11-18) ​

修复 Bug

  • 修复 f-swap 组件样式细节
  • 修复 f-empty 组件样式细节
  • 修复 f-pagination 组件样式细节
  • 修复 f-up-load 组件样式细节
  • 修复 f-switch 组件样式细节
  • 修复 f-card 组件样式细节
  • 修复 f-textarea 组件样式细节
  • 修复 f-checkbox-group 类型错误
  • 更新类型配置文件

0.9.0-alpha.1 (2022-11-17) ​

新功能

  • 新增 f-checkbox 组件 indeterminate 配置项
  • 新增 f-textarea 组件
  • 新增 f-pagination 组件
  • 新增 f-tabs 组件
  • 重构 loading 组件
  • f-empty 组件 content-size 配置项支持 number 类型
  • f-empty 组件新增 icon-size 配置项

修复

  • 修复 f-select 组件在存在绑定值之后不显示 label 的问题
  • 修复 f-radio-group 组件样式细节
  • 修复 f-text 组件样式细节
  • 修复 f-button 组件样式细节

其它

  • f-switch 组件 size 配置项新增 mini 可选择
  • f-switch 组件新增 icon-size 配置项
  • 优化全局组件部分参数默认值

0.8.1-alpha.4 (2022-11-13) ​

  • 新增 f-back-top 组件显示隐藏的动画样式
  • 新增 f-alert 组件显示隐藏的动画样式
  • 优化 f-popup 弹出动画样式
  • 优化 f-dropdown 弹出动画样式

0.8.1-alpha.3 (2022-11-11) ​

新增

  • 新增 f-dropdown 组件
  • 新增 f-dropdown-item 组件
  • 新增 f-option 组件
  • 新增 f-select 组件
  • 新增 f-table 组件 show-head 配置项

修复

  • 修复　f-button 组件样式细节
  • 修复　f-drawer 和 f-dialog 组件回调参数失效问题

0.8.1-alpha.2 (2022-11-08) ​

修复

  • 修复 f-button 组件自定义颜色的样式细节
  • 修复 f-table 组件样式细节

0.8.1-alpha.1 (2022-11-08) ​

新特性

  • f-checkbox 组件新增 show-label 配置项
  • f-checkbox 组件 modelValue 配置项新增 array 类型
  • 新增 f-table 组件

其它

  • 优化了些 f-button 组件的样式细节
  • 优化 f-toolbar 组件的一些内部实现和类型

0.8.0-alpha.6 (2022-11-06) ​

修复 Bug

  • 修复 f-image-preview 图片预览组件操作栏点击失效的问题
  • 优化部分组件类型

0.8.0-alpha.5 (2022-11-04) ​

  • 对于 ts 类型方面，做了进一步的优化
  • 新增 f-up-load 组件

0.8.0-alpha.4 (2022-11-02) ​

  • 主要针对目录结构进行了规范处理
  • 优化一些类型文件的位置

0.8.0-alpha.3 (2022-11-01) ​

修复 Bug

  • 修复 FMessage FNotification 组件的报错问题
  • 修复 f-radio f-radio-group 组件禁用状态的样式问题
  • 修复 f-checkbox f-checkbox-group 组件禁用状态的样式问题
  • 修复 f-alert 关闭按钮样式细节
  • 修复 f-tag 关闭按钮样式细节

改进优化

  • f-image f-avatar 组件废除 error 和 load emit 回调，新增 error 和 load props 可选项
  • f-calendar 组件废除 change-date 和 change-switch emit 回调，新增 change-date 和 change-switch props 可选项
  • f-alert 组件废除 close-end emit 回调，新增 close-end props 可选项
  • f-tag 组件废除 close-end emit 回调，新增 close-end props 可选项
  • f-page-header 组件废除 back emit 回调，新增 back props 可选项
  • f-rate 组件废除 change emit 回调，新增 change props 可选项
  • f-checkbox-group 组件废除 change emit 回调，新增 change props 可选项
  • f-link 组件废除 click emit 回调，新增 click props 可选项
  • f-button 组件废除 click emit 回调，新增 click props 可选项
  • f-toolbar 组件废除 click emit 回调，新增 click props 可选项
  • f-toolbar-item 组件废除 click emit 回调，新增 click props 可选项
  • f-switch 组件废除 change emit 回调，新增 change props 可选项
  • f-close-btn 组件废除 click emit 回调，新增 click props 可选项
  • f-loading 组件废除 close emit 回调，新增 close-end props 可选项
  • f-svg-icon 组件废除 click emit 回调，新增 click props 可选项
  • f-radio 组件废除 change emit 回调，新增 change props 可选项
  • f-radio-group 组件废除 change emit 回调，新增 change props 可选项
  • f-radio 组件在边框状态下样式做了改变
  • f-close-btn 新增 no-hover 配置项

0.8.0-alpha.2 (2022-10-28) ​

  • 修复按需导入组件类型的问题 #232

0.8.0-alpha.1 (2022-10-28) ​

  • 修复一些类型的问题
  • 优化组件代码属性提示
  • 优化构建产物
  • 优化 f-image-preview 组件样式细节 #227

0.7.1-alpha.2 (2022-10-26) ​

  • 优化组件打包后的类型

0.7.1-alpha.1 (2022-10-25) ​

  • 新增 f-swap 组件
  • 修复 f-image-preview 组件预览旋转方向错误的问题
  • 优化 f-image-preview 组件内部性能
  • f-popup 组件 open open-end close close-end 改为 props 参数

0.7.0-beta.2 (2022-10-22) ​

  • 新增 f-input 组件

0.7.0-beta.1 (2022-10-21) ​

重要更新

  • 永久废除 f-icon 组件
  • 更新所有组件的 class 命名规范

新功能

  • 新增 f-close-btn 组件 icon 配置项
  • 新增 f-close-btn 组件 color 属性
  • 新增 f-alert 组件 beforeIcon 和 closeIcon 插槽
  • 新增 f-alert 组件 before-icon 和 close-icon 配置项
  • 新增 f-dialog 组件 closeIcon 插槽
  • 新增 f-dialog 组件 close-icon 配置项
  • 新增 f-drawer 组件 closeIcon 插槽
  • 新增 f-drawer 组件 close-icon 配置项
  • 新增 f-link 组件 beforeIcon afterIcon 插槽
  • 新增 f-avatar 组件 icon 插槽
  • 新增 f-avatar 组件 icon 配置项改为 VNode / Component 类型，默认值修改为 null
  • 新增 f-loading 组件 icon 插槽
  • 新增 f-svg-icon 组件 icon 配置项

其它改动

  • f-link 组件 before-icon after-icon 配置项改为 VNode / Component 类型，默认值修改为 null
  • f-button 组件 before-icon after-icon loading-icon 配置项改为 VNode / Component 类型，默认值修改为 null
  • f-avatar 组件 icon 配置项改为 VNode / Component 类型，默认值修改为 null
  • f-loading 组件 icon 配置项改为 VNode / Component 类型，默认值修改为 null
  • f-page-header 组件 icon-size 支持 number 类型
  • f-page-header 组件 icon 配置项改为 VNode / Component 类型，默认值修改为 null
  • f-rate 组件 icon 改为 VNode / Component 类型，默认值修改为 null
  • f-toolbar-item 组件 icon 改为 VNode / Component 类型，默认值修改为 null
  • f-tag 组件 before-icon after-icon 改为 VNode / Component 类型，默认值修改为 null
  • f-breadcrumb 组件 separator-icon 配置项更名为 separator
  • f-breadcrumb 组件 separator 配置项改为 VNode / Component 类型，默认值修改为 null
  • f-notification 组件 close-btn 参数默认值改为 null
  • f-button 组件 before-icon loading-icon after-icon 配置项改为 VNode / Component 类型，默认值修改为 null
  • f-sticky-card 组件插槽名由 option-left option-right 改为 optionLeft optionRight
  • 更新 f-message 组件 icon 默认值和可选类型
  • 废除 f-calendar 组件 show-footer 配置项
  • 废除 f-alert 组件 icon 属性
  • 废除 f-avatar 组件 load-animation 配置项

0.7.0-alpha.9 (2022-10-19) ​

  • 更新类型入口配置文件

0.7.0-alpha.8 (2022-10-19) ​

  • 主要针对打包类型文件做了优化

0.7.0-alpha.7 (2022-10-17) ​

新功能

  • 新增 f-svg-icon 组件
  • 新增 f-close-btn 组件

修复

  • 修复 f-dialog 组件参数错误问题
  • 修复 f-dialog 组件样式细节

0.7.0-alpha.6 (2022-10-15) ​

重点更新

  • f-mask 组件现已更名为 f-popup
  • 针对 f-popup f-drawer f-dialog 弹出相关组件做了进一步优化封装

修复 Bug

  • 修复 f-popup 组件 z-index 属性丢失问题
  • f-popup 组件新增 mask-background 和 mask-opacity popup-size padding 配置项

0.7.0-alpha.5 (2022-10-13) ​

新增

  • 新增 f-mask 组件

新特性

  • f-drawer 组件 with-header 配置项改为 showHeader
  • f-drawer 组件新增 showCloseBtn 配置项
  • f-drawer 组件新增 modal-blur 配置项
  • f-dialog 组件新增 modal-blur 配置项
  • f-dialog 组件移除 top 配置项
  • f-dialog 组件新增 show-close-icon 配置项
  • f-dialog 组件 width height 配置项支持 number 类型
  • f-dialog 组件的 open、open-end、close、close-end 回调参数由 emit 传递改为 props 传递
  • f-loading 组件新增 icon-color 属性
  • f-dialog 组件废除 height 组件

修复 Bug

  • 修复 message f-dialog f-switch 组件 props 校验器的拼写错误

0.7.0-alpha.4 (2022-10-11) ​

  • 新增 f-checkbox 组件
  • 新增 f-rate 组件
  • 废除 f-radio-group 组件 circle 配置项
  • 修复 f-radio 组件 border 状态禁用样式细节
  • 优化部分组件语义化属性

0.7.0-alpha.3 (2022-10-06) ​

  • 更新 umd 打包入口
  • 优化 f-icon 组件样式实现
  • f-link 组件类名规范优化
  • 优化 f-link 组件内部实现
  • 优化 f-text 组件内部实现
  • f-text 组件 size spacing line-height text-indent padding width 属性支持 number 类型参数
  • f-text 组件 text-indent 属性改为 indent
  • f-text 内部导出新类型 TextDecorationType

0.7.0-alpha.2 (2022-09-29) ​

  • 修复部分组件类型规范问题

0.7.0-alpha.1 (2022-09-27) ​

fix

  • 修复 f-button 组件 font-color 默认值
  • 修复 f-button 组件 font-size 默认值

feat

  • f-back-top 组件 right bottom 配置项支持 number 类型
  • f-image 组件 round 配置项支持 number 类型
  • f-image 组件废除 caption 和 caption-color 配置项
  • f-watermark 组件 font-size 配置项支持 number 类型参数
  • f-progress 组件 width height 配置项支持 number 类型参数
  • f-alert 组件废除 fixed-style 配置项
  • f-alert 组件 font-size 配置项支持 number 类型参数
  • f-alert 组件 type 默认值改为 default
  • f-alert 组件 font-size 默认值改为 15px
  • f-alert 组件新增 title-size 和 title-color 属性
  • f-alert 组件 overflow 配置项移除 ellipsis 选项
  • f-footer 组件 height padding 配置项添加默认值
  • f-header 组件 height padding 配置项添加默认值
  • f-main 组件 padding 配置项添加默认值
  • f-toolbar 组件废除 fixed-style 配置项

perf

  • 优化了组件的 props 提示
  • 新增类型导出
  • 优化 f-avatar 组件部分样式的实现，减少代码开销
  • 优化 f-back-top 组件部分样式的实现，减少代码开销
  • 优化 f-back-top 组件部分 props 默认值
  • 优化 f-badge 组件样式实现

0.6.5-alpha.5 (2022-09-25) ​

feat

  • 新增 sticky-card 组件
  • f-list 组件新增 header 和 footer 插槽
  • 优化 f-button 组件性能

fix

  • 修复 f-calendar 组件的一些日期显示错误的问题

0.6.5-alpha.4 (2022-09-23) ​

fix

  • 修复 f-image-preview 和 f-calendar 组件内容按需引入问题

0.6.5-alpha.3 (2022-09-22) ​

feat

  • f-header 组件新增 padding 类型
  • f-header 组件的 height 属性支持 number 类型
  • f-footer 组件新增 padding 配置项
  • f-footer 组件的 height 属性支持 number 类型
  • f-main 组件的 padding 属性支持 number 类型
  • f-aside 组件的 width 属性支持 number 类型
  • f-aside 组件新增 padding 配置项

fix

  • 修复组件 name 导致的打包类型报错问题

0.6.5-alpha.2 (2022-09-21) ​

  • 新增 f-calendar 组件
  • f-text 组件的 size 属性支持 number 类型
  • 新增组件类型导出

0.6.5-alpha.1 (2022-09-16) ​

  • 新增 f-expand-card 组件
  • 优化 f-toolbar-item 和 f-toolbar 组件样式细节
  • f-toolbar-item 新增 data-key icon icon-size 配置项
  • f-toolbar 新增 click 回调参数
  • f-toolbar 针对于苹果 Safari 点击失效做出兼容
  • f-toolbar 组件废除 vague 配置项

0.6.4-alpha.10 (2022-09-14) ​

  • 测试修复按需引入

0.6.4-alpha.9 (2022-09-14) ​

  • 测试修复按需引入

0.6.4-alpha.8 (2022-09-14) ​

  • 测试修复按需引入

0.6.4-alpha.7 (2022-09-14) ​

fix

  • 修复 f-button 组件自定义颜色的 hover 和 disabled 样式
  • 修复 f-page-header 组件样式细节
  • 修复 f-button 组件 text 配置项样式细节
  • 修复 f-image 组件 width 属性的一些问题

feat

  • f-icon 组件的 size 属性支持 number 类型
  • f-button 组件的 font-size 属性支持 number 类型
  • f-image 组件 rootMargin width height 属性支持 number 类型
  • f-avatar 组件 rootMargin 属性支持 number 类型
  • 新增 f-image-preview 组件
  • f-image 组件新增 click 回调

other

  • 废除 f-page-header 的 titleClass 和 subtitleClass 配置项
  • f-lint 组件 left-icon right-icon 配置项更名为 before-icon after-icon
  • f-button 组件 left-icon right-icon 配置项更名为 before-icon after-icon
  • f-tag 组件 left-icon right-icon 配置项更名为 before-icon after-icon
  • f-loading 组件的 text-color text-size 配置项更名为 font-color font-size
  • f-empty 组件废除 style-list 配置项
  • 拆分 f-empty 组件
  • 优化 f-avatar 样式细节
  • f-image 组件废除点击大图预览功能，此功能抽离至 f-image-preview 组件
  • f-image 组件废除属性：modal-close show-close-btn preview-list preview-show-index preview-z-index preview-show-option preview-round
  • 测试修复按需引入

0.6.4-alpha.6 (2022-09-11) ​

feat

  • 新增 f-ripple 涟漪组件
  • 新增 f-radio f-radio-group 组件

fix

  • 修复 f-button f-loading 动画样式问题
  • 修复 f-list-item 换行高度不自适应的问题

0.6.4-alpha.5 (2022-09-06) ​

  • 测试修复副作用组件注册

0.6.4-alpha.4 (2022-09-06) ​

  • 测试修复副作用组件注册

0.6.4-alpha.3 (2022-09-05) ​

  • 测试修复副作用组件注册

0.6.4-alpha.2 (2022-09-05) ​

  • 测试修复副作用组件注册

0.6.4-alpha.1 (2022-09-03) ​

  • 修复类型

0.6.3-alpha.3 (2022-09-03) ​

  • 修复了部分组件类型
  • 修复了按需引入仍然全部打包的问题

0.6.3-alpha.2 (2022-09-02) ​

  • 修复的配置文件
  • 一件修复在 vitepress 的错误

0.6.3-alpha.1 (2022-09-02) ​

  • 已修复打包引入相关的问题
  • 但是在 vitepress 中仍存在问题，在正常项目中可以正常使用

0.6.2-alpha.10 (2022-09-02) ​

  • 测试修复打包引入问题

0.6.2-alpha.9 (2022-09-02) ​

  • 测试修复打包引入问题

0.6.2-alpha.8 (2022-09-02) ​

  • 测试修复打包引入问题

0.6.2-alpha.7 (2022-09-02) ​

  • 测试修复打包引入问题

0.6.2-alpha.6 (2022-08-31) ​

  • 修复已知的一些引入相关配置问题

0.6.2-alpha.5 (2022-08-30) ​

feat

  • 新增 f-loading-bar 组件
  • 新增 notification 组件

fix

  • 修复按钮组件样式
  • 更新 f-card 组件 shadow 参数默认值。现改为 never

0.6.2-alpha.4 (2022-08-29) ​

feat

  • f-image 组件新增 title 配置项

fix

  • 修复 f-card 组件样式细节
  • 修复 f-skeleton 的一些样式相关细节

0.6.2-alpha.3 (2022-08-28) ​

  • 新增 f-skeleton 骨架屏组件
  • 优化 f-button f-alert 组件圆角样式
  • 优化 f-alert 样式细节
  • 优化 f-alert 组件 overflow 配置项
  • 移除 f-alert 组件 overflow 配置项的 roll 可选参数
  • 移除 f-novel-coronavirus 组件
  • 修复 Load 图片加载类加载死循环的问题
  • 优化 f-image 组件加载过程中是撕裂样式

0.6.2-alpha.2 (2022-08-20) ​

  • 修复已知打包问题

0.6.2-alpha.1 (2022-08-20) ​

  • 修复按钮涟漪效果类
  • 修复已知打包问题

0.6.1 (2022-08-19) ​

  • 优化 f-list 组件
  • 修复 f-card 组件样式细节
  • 更新 success 和 warning 的色号细节
  • 新增 f-empty 空状态组件
  • 优化按钮自定义颜色配置项的 hover 和 active 的实现方式
  • f-tooltip 组件新增 background 和 font-color 配置项
  • 优化图片加载类
  • f-avatar 增加错误处理插槽，增加错误处理提示信息
  • 优化 f-avatar 加载细节处理
  • f-avatar 组件新增 load-animation 配置项
  • 优化掉 f-drawer 部分导致文档打包报错的逻辑
  • 增加了 hooks 对部分类和函数的参数抽离，性能优化了 f-image f-avatar f-button f-watermark 组件
  • f-button 对于涟漪效果做了单例模式的优化

0.6.0-bate.2 (2022-08-11) ​

  • 更新入口文件

0.6.0-bate.1 (2022-08-11) ​

  • 改变样式表的文件名引入方式
  • 修复打包配置项

0.5.1-bate.5 (2022-08-10) ​

  • F-alert 样式引入
  • F-text 细节样式优化
  • 加入版本号导出
  • 更新 prop 的类型

0.5.1-bate.4 (2022-08-09) ​

  • 测试修复打包引入路径错误的问题

0.5.1-bate.3 (2022-08-09) ​

  • 测试修复打包引入路径错误的问题

0.5.1-bate.2 (2022-08-09) ​

  • 测试修复打包引入路径错误的问题

0.5.1-bate.1 (2022-08-09) ​

  • 修复了打包类型相关的问题

0.5.0-bate.2 (2022-08-08) ​

  • 修复了打包类型相关的问题

0.5.0-bate.1 (2022-08-08) ​

主要修复了打包的相关的配置项，在上一个版本中，如果需要按需引入组件，那么会有很多异常的错误信息，这个版本主要是针对打包做了很大的优化，已经修复了按需引入导致的致命错误。

对于目录结构也做了很大程度的优化，之前是将 utils 目录是单独抽离出来，但是现在也和组件是同级关系，只为了能够更好的打包。

0.4.2-bate.9 (2022-07-04) ​

feat

  • Alert 组件新增 fixed fixed-style 配置项
  • 新增 f-list 组件
  • 新增 f-list-item 组件
  • 新增 message 组件
  • f-text 组件新增 center 配置项
  • 新增 f-watermark 组件

fix

  • 修复 f-tag 组件样式细节
  • 优化 f-card 组件细节样式

0.4.2-bate.8 (2022-07-23) ​

feat

  • Tag 组件新增 text 配置项，实现文字标签
  • Tag 组件改变了部分样式细节，加入边框
  • Avatar 组件新增 font-size、font-color、text、root-margin 配置项
  • Avatar 组件将 size 属性改为可配置 number 类型参数
  • 新增了样式按需引入

0.4.1-bate.7 (2022-07-19) ​

  • 主要修复了引入样式的报错配置

0.4.0-bate.6 (2022-07-18) ​

feat

  • f-progress 组件新增 textInside 配置项
  • 新增 f-novel-coronavirus 组件
  • 新增 cjs 和 umd 打包模式

0.3.2-bate.5 (2022-07-17) ​

feat

  • f-tooltip 组件移除部分配置项
  • 重做 f-tooltip 组件

fix

  • 修复 f-tag 组件不展示的问题
  • 修复 f-alert 组件的展示状态和关闭回调

0.3.1-bate.4 (2022-07-15) ​

  • f-link 组件新增 default 配置 type
  • f-button 组件 ripples 默认值改为 false

0.3.0-bate.3 (2022-07-13) ​

feat

  • 新增 f-progress 组件配置项
  • 新增 f-alert 组件

fix

  • 修复 f-progress 组件百分百展示状态
  • 修复 f-text 组件样式细节
  • 修复 f-button 组件样式细节
  • 修改 f-button 组件文字按钮的样式
  • 移除 f-tag 组件 info 属性，改为 default

0.2.0-bate.2 (2022-07-08) ​

feat

  • 新增 f-drawer 组件
  • 新增 f-page-header 组件

fix

  • 修复 f-tag 基础样式
  • 修复 f-switch 基础样式

0.1.0-bate.1 (2022-07-05) ​

feat

  • 新增 dialog 组件
  • 新增 space 组件
  • 新增 progress 组件
  • 新增 captcha 组件 （bate）
  • 新增 tooltip 组件 （bate）

fix

  • 修复 f-back-top 组件的监听目标报错问题

0.0.12-alpha.12 (2022-06-29) ​

fix

  • 修复 back-top 组件的功能

feat

  • back-top 组件新增 z-index、top、listen-el、background、color 配置项
  • 新增 breadcrumb 组件

0.0.11-alpha.11 (2022-06-26) ​

fix

  • 修复打包路径错误问题

0.0.10-alpha.10 (2022-06-26) ​

feat

  • 新增 f-text 组件
  • 新增 f-avatar 组件
  • 新增 f-loading 组件

fix

  • f-button 组件 blob 配置项改为 bold，用于文字加粗

0.0.9-alpha.9 (2022-06-14) ​

feat

  • f-layout 新增 direction 配置项

fix

  • f-container 组件改名为 f-layout

0.0.8-alpha.8 (2022-06-12) ​

feat

  • 新增 f-tag 组件
  • 新增 f-divider 组件
  • 新增 f-badge 组件
  • 新增 f-container 组件
  • 新增 f-switch 组件
  • 新增 f-button 组件 color 配置项

fix

  • f-button 组件 f-link 属性改为 href
  • 重构 f-button 组件
  • 废除 f-button 的 info 类型
  • 废除 f-button 的 border 属性
  • 废除 f-button 的 long 属性
  • 废除 f-ink 的 info 类型
  • 废除 f-con 的 opacity 属性

0.0.7-alpha.7 (2022-06-04) ​

feat

  • 新增 FCard 组件
  • 新增 f-button 组件点击的涟漪效果

fix

  • 修复 f-button 组件的圆角度数
  • 修复 f-button-group 类型

0.0.6-alpha.6 (2022-05-31) ​

fix

  • 修复 f-mage 组件旋转方向一致的问题
  • 修复 f-con 组件预览窗操作点击失效问题，处理点击焦点位置
  • 修复 f-con、f-button 组件的类型问题
  • f-mage 组件的 select 属性改为 no-select 用于禁止选择

feat

  • 新增 f-mage 组件预览窗图片预加载功能
  • 新增 f-mage 组件预览窗渐入动画效果
  • 新增 f-mage 组件预览窗点击遮罩层隐藏功能，可通过 modal-close 配置项来配置
  • 新增 f-mage 组件预览窗图标样式优化了一些细节
  • 新增 f-mage 组件预览图左右按钮切换加入图片长度识别，是否展示效果
  • 新增 f-mage 组件 show-close-btn 配置项可配置是否展示预览窗的关闭按钮
  • 新增 f-mage 组件可通过鼠标滚轮放大缩小图片功能
  • 新增 f-mage 组件 preview-round 配置项，可配置预览图的圆角

0.0.5-alpha.5 (2022-05-27) ​

  • 新增 f-mage 组件
  • 增加新的 icon

0.0.4-alpha.4 (2022-05-23) ​

  • 新增 f-ink 组件
  • 取消 f-button 固定高度
  • 废除 f-button 组件的 icon 和 icon-position 属性
  • 新增 f-button 组件的 left-icon 和 right-icon 属性

0.0.3-alpha.3 (2022-05-18) ​

  • 修复按钮组件一些显示问题的样式
  • 删除了一个不显示的 icon
  • 取消组件默认导出
  • 压缩组件代码

0.0.2-alpha.2 (2022-05-17) ​

  • 更新配置文件
  • 新增打包文件

0.0.1-alpha.1 (2022-05-17) ​

  • 新增 f-button、f-button-group、f-con 组件
- diff --git a/docs/contributing.html b/docs/contributing.html index 3204a785d..74b0d8605 100644 --- a/docs/contributing.html +++ b/docs/contributing.html @@ -5,7 +5,7 @@ 贡献指南 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -48,8 +48,8 @@ # 使用插件的提示来设置提交信息 pnpm commit -git push

✏️ 关于 PR ​

在你提交 PR 之前，请务必保证你 fork 的仓库是当前最新的代码，以免发生冲突。

如果你并不了解如何提交 PR，可以参考我这篇文章 Github 如何提交 PR？

🔑 财务贡献 ​

开发不易，欢迎大家赞助！

💌 非常感谢 ​

感谢所有已经为 fighting-design 做出贡献的人！

- diff --git a/docs/import.html b/docs/import.html index 9fd8aaa56..a063c9ff2 100644 --- a/docs/import.html +++ b/docs/import.html @@ -5,7 +5,7 @@ 快速上手 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -92,8 +92,8 @@ app.use(FightingDesign.default) app.mount('#app') </script> -</body> - diff --git a/docs/install.html b/docs/install.html index a744e5e98..572ff9479 100644 --- a/docs/install.html +++ b/docs/install.html @@ -5,7 +5,7 @@ 安装 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,8 +30,8 @@ -
Fighting Design

Appearance

On this page

安装 ​

pnpm ​

使用快速的，节省磁盘空间的包管理工具 pnpm 进行安装

shell
pnpm add --save-dev fighting-design

npm ​

使用 npm 进行安装

shell
npm install --save-dev fighting-design

yarn ​

或者使用 yarn 进行安装

shell
yarn add --save-dev fighting-design
- diff --git a/docs/introduce.html b/docs/introduce.html index c5ea48526..8085bb650 100644 --- a/docs/introduce.html +++ b/docs/introduce.html @@ -5,7 +5,7 @@ Fighting Design | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,8 +30,8 @@ -
Fighting Design

Appearance

On this page

Fighting Design ​

🌈 Fighting Design 可在 vue3 应用程序中快速构建交互界面，看起来还不错。

中文 | English

✨ 特性 ​

  • 🪐 60+ 常用组件
  • 💪 使用 Vue.js 最新特性开发
  • 🐆 全面基于 Vite，速度够快
  • 🤟 极致的开发体验
  • 🥇 超详细的 JSDoc 注释
  • 🦩 零第三方依赖
  • ✂️ 完善的代码提示
  • 🪐 不同打包模式，兼容不同项目
  • 🏆 支持完整引入和按需引入
  • ✅ 使用 TypeScript + Template 编写
  • 🖍️ 严格的 TypeScript 类型
  • ✔️ 配置简单，上手容易
  • 🚩 单元测试
  • 👍 社区团队维护
  • ❤️ 根据实际需求开发
  • 📃 优质详细的文档
  • ☝️ 提出需求，不断完善
  • 🌍 更多配置项，灵活组件
  • 🛠 更多特性开发中

💌 特别感谢 ​

感谢所有已经为 Fighting Design 做出贡献的人！

💬 执照 ​

MIT

📈 下载量 ​

fighting-design npm trends

- diff --git a/docs/join.html b/docs/join.html index ec7733536..686afdc3b 100644 --- a/docs/join.html +++ b/docs/join.html @@ -5,7 +5,7 @@ 加入我们 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,8 +30,8 @@ -
Fighting Design

Appearance

On this page

加入我们 ​

微信 ​

添加微信请备注 Github 用户名

加微信邀请入 Fighting Design 社区讨论 群

社区组织 ​

- diff --git a/docs/milepost.html b/docs/milepost.html index 05a2d1b2d..ef7052385 100644 --- a/docs/milepost.html +++ b/docs/milepost.html @@ -5,7 +5,7 @@ 里程碑 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,8 +30,8 @@ -
Fighting Design

Appearance

On this page

里程碑 ​

2024-04-30 ​

最近 w2xi 帮忙完善了很多单元测试，单元测试覆盖率逐渐增加。

近期可以开始进入 alpha 版本了

2022-10-19 ​

优化了一下打包的配置文件，使打包快了不少，打包从原来的 32s 提升了 16s

不过对于类型的打包，还有很多的问题，目前只是解决了一部分，只能说是不影响使用，但是还可以更好。

2022-10-04 ​

最近 Fighting Design 被选入了阮一峰老师的科技爱好者周刊（第 225 期）：NPC 演员也是一种职业，马上 200 star 了~

2022-09-24 ​

2022-04-24 ~ 2022-09-24 五个月时间

1474 次 commit 终于获得了 100 Star

感谢各位支持，继续加油~

2022-09-16 ​

按需引入也解决了，问题出在了 import * as components from './components' 这句代码上，又新建了一个新的入口文件就解决了这个问题。

现在基础的组件都写的差不多了，现在开始向表单的方向上发展，目前 input 和 select 准备进行中，配件都写好了之后，就差不多可以写表单了~

最近的 Star 增加了不少，也得到了不少人的认可，继续加油~😊😊😊

2022-08-20 ​

在 0.6.2-alpha.2 的版本中，已经将目前已知的打包问题全部解决了。

打包这个东西，真的是一步一个坎坷。

2022-08-08 ​

最近我们新增了很多新组件，感觉还不错，今天我将项目整体大幅度改动了很多，修复了之前的一些打包的问题，这次的打包个人感觉还是比较满意的，详情可以查看 0.5.0-bate.1。

2022-06-12 ​

最近陆续的增加了 Badge 角标、Divider 分隔线、FContainer布局容器 组件，目前组件开发一直还算是非常顺利，只不过打包就没那么顺利了。

之前一直是使用 rollup 打包，但是会报出类型的错误，现在也在尝试使用 vite 打包，但是会有一些路径不对的问题，裂开。。。。

2022-06-07 ​

这两天将 FButton 组件重构了一波，将样式从 445 行缩减到了 145 行，而且样式变得更优了，细节处理更好了

2022-06-04 ​

接下来的组件开发计划，暂时是一些比较简单的组件：

  • Tag 标签
  • Division 分割线
  • Avatar 头像
  • Container 布局容器
  • Crumbs 面包屑

2022-05-31 ​

Fighting Design 并不仅仅会推出一些列的基础组件，还会推出一些趣味组件。

另外，在 Fighting Design 的计划中，还有一种全新的设计思想叫 联合组件！都会在不久的将来进行推出。

敬请期待！

2022-04-24 ​

仓库第一次 commit，就在这一天 Fighting Design 诞生！

- diff --git a/hashmap.json b/hashmap.json index da7c5d5b3..5df54d3b4 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"readme.md":"b43e401d","components_box.md":"7135bfc3","components_back-top.md":"74cd8508","components_breadcrumb.md":"18a9e4f1","components_avatar-group.md":"e6bfd375","components_textarea.md":"fc40893b","components_collapse-animation.md":"4736bc1a","components_divider.md":"d827f55e","components_count-down.md":"eba9ddbb","components_image.md":"07af6ee2","components_date-picker.md":"e59d4b15","components_trigger.md":"329759fd","components_badge.md":"d81626d6","components_avatar.md":"665bcf5a","components_drawer.md":"e4a55c73","components_close-btn.md":"5635d1cd","components_fighting-global.md":"2de14482","components_infinite-scrolling.md":"694f16c8","components_interface.md":"dda9fe64","components_input-number.md":"56d0c38a","components_tag.md":"1fc0f686","components_text.md":"3645b2aa","components_time-picker.md":"95de3a63","components_up-load.md":"bb1906f8","docs_changelog.md":"352b3e7f","docs_contributing.md":"627f2ab2","docs_import.md":"e49cdc50","docs_milepost.md":"32824203","components_empty.md":"377e4aa4","components_alert.md":"b274b202","theme_start.md":"72b3d72d","components_tooltip.md":"153f4a0e","components_checkbox.md":"ede4c510","components_calendar.md":"1908d4f2","components_menu.md":"102dc809","components_notification.md":"523e8c97","components_number-animate.md":"e3da13a5","components_page-header.md":"6cbce855","components_toolbar.md":"6cc37262","components_tree.md":"27ff0e96","components_expand-card.md":"8084b883","docs_install.md":"2f0bfcce","components_progress.md":"b45a38a6","docs_join.md":"32578a21","components_link.md":"5a0d0640","components_skeleton.md":"ca72f67c","components_pagination.md":"4c8a1cc8","components_list.md":"51ef2be6","components_radio.md":"c05f5df6","components_dropdown.md":"18c70a5a","components_input.md":"d92b24b4","components_message.md":"530d9bda","components_card.md":"4e32a85a","components_ripple.md":"4c7b9fc1","components_color.md":"ecfa9ec6","docs_introduce.md":"5d5274cb","components_swap.md":"9bf3ec4e","components_switch.md":"e3b7fddc","components_confirm-box.md":"da9d4a18","components_layout.md":"0de9b476","components_svg-icon.md":"f607f1c8","components_rate.md":"2c14a44d","components_sticky-card.md":"1420ce20","components_tabs.md":"267a678b","components_select.md":"ea372860","index.md":"7e371f72","components_dialog.md":"f550bd5f","components_watermark.md":"1a93f88d","components_button.md":"cfb3c6a2","components_slider.md":"0a853f64","components_space.md":"6279683d","components_loading.md":"4929b97f","components_image-preview.md":"230dfe01","components_table.md":"9be30452","components_form.md":"5b52e2a1"} +{"docs_introduce.md":"2cf13bc8","docs_import.md":"ea242004","docs_install.md":"cd8d7c88","components_select.md":"00b0d706","components_skeleton.md":"2fd2eaa7","components_input-number.md":"1e989de2","components_sticky-card.md":"1dd6b16f","components_calendar.md":"a0130b2b","components_card.md":"25a44681","components_checkbox.md":"0416c283","components_avatar.md":"417bd75a","components_dropdown.md":"d4a4a4f4","components_empty.md":"968b0a2f","components_expand-card.md":"a8058d0c","components_fighting-global.md":"7ef12f87","components_image-preview.md":"65c23ed2","components_back-top.md":"e05089e1","components_image.md":"8af02afc","components_infinite-scrolling.md":"218a223e","components_form.md":"a6d04fe0","components_alert.md":"ae5fccb2","components_space.md":"6fb4de1d","components_switch.md":"1171d87e","components_badge.md":"3f230898","components_tabs.md":"86568388","components_tag.md":"056ed660","components_time-picker.md":"206d4a03","components_box.md":"5b968923","docs_milepost.md":"9ea03678","index.md":"7c84e830","components_close-btn.md":"b5362043","components_message.md":"e7e1ebd8","components_notification.md":"07a5de5c","components_color.md":"9b8fde26","components_pagination.md":"9ab423b5","docs_contributing.md":"2d73d3dc","components_progress.md":"050a0aa0","components_interface.md":"c78d7c4e","components_input.md":"164c8fb0","docs_join.md":"2f7ea4cb","components_breadcrumb.md":"5be7d69e","components_count-down.md":"e64ec35e","components_layout.md":"8e5ebc4f","components_button.md":"5f695846","readme.md":"6165697a","components_number-animate.md":"486bada5","theme_start.md":"cd25e016","components_drawer.md":"46d2c682","components_avatar-group.md":"c9f23b84","components_swap.md":"f681af8b","components_watermark.md":"138fae63","components_up-load.md":"ba97b4ee","components_rate.md":"a408f9e0","components_date-picker.md":"72d0a6bd","components_text.md":"521b110d","components_ripple.md":"2130a19f","components_slider.md":"7796a96a","components_dialog.md":"fdde4b8d","components_radio.md":"5b45fd0d","components_collapse-animation.md":"744f860b","components_link.md":"39271e93","components_list.md":"108d7954","components_loading.md":"90a00a31","components_divider.md":"4f4ba086","components_toolbar.md":"bd760421","components_tree.md":"81a4d077","components_tooltip.md":"17961176","components_textarea.md":"bdf0fcc9","components_page-header.md":"1ec697fe","components_trigger.md":"34a2cde6","docs_changelog.md":"c5a9a5e8","components_confirm-box.md":"a2b43640","components_menu.md":"95ffa238","components_svg-icon.md":"4d599919","components_table.md":"ec0f72ae"} diff --git a/index.html b/index.html index 9d8256747..73daaf09e 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ Fighting Design | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -31,7 +31,7 @@
Fighting Design

Appearance

Fighting Design

可在 vue3 应用程序中快速构建交互界面，看起来还不错。

🌈 Fighting Design 是一款灵活、优质的组件库，为开发者准备。希望开发者可以借用其中的设计，在不久的将来，孕育出更高阶的组件库。

开始使用

贡献者

加入其中

FightingDesign | 浙ICP备2021024540号-2

- diff --git a/theme/start.html b/theme/start.html index 7fa47f21d..e52ccdcc6 100644 --- a/theme/start.html +++ b/theme/start.html @@ -5,7 +5,7 @@ 自定义主题 | Fighting Design - + @@ -17,7 +17,7 @@ - + @@ -30,8 +30,8 @@ -
Fighting Design

Appearance

On this page

自定义主题 ​

第一步 ​

文档马上更新……

最后更新时间:

-