第一次提交

.babelrc

@@ -0,0 +1,7 @@
+{
+"presets": [
+"babel-preset-vite",
+    ["@babel/preset-env", { "targets": { "node": "current" } }]
+  ],
+"plugins": [ ]
+}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

README.md

@@ -0,0 +1,57 @@
+<p align="center">
+  <img width="200" src="https://wangibook.github.io/my-baseui/logo.png">
+</p>
+# 镜像地址
+[国内镜像](https://registry.npmmirror.com/)  [npm原镜像](http://www.npmjs.org)
+# my-baseui
+基于 Vue3，Vite2 的轻量级组件库，用于学习研究，欢迎交流
+
+# Docs 
+使用文档1：[my-baseui使用文档](https://wangibook.github.io/my-baseui/#/) 
+<br/>
+使用文档2：[my-baseui使用文档](https://ui.xkxk.tech/#/)
+
+# 组件库说明
+目前只是写了二十来个组件，文档侧边栏切换时可能会卡顿，如果想更好的体验，可以clone下来，在本地查看。
+完成了Layout 布局、Space 间距、Button 按钮、Link 链接、Input 输入框、Textarea 文本域、Radio 单选、Checkbox 多选、Select 下拉框、Switch 开关、InputNumber 计数器、TimePicker 时间选择器、DatePicker 日期选择器、Rate 评分、Badge 徽标、Card 卡片、Tag 标签、Progress 进度条、Table 表格、Pagination 分页、Tree 树形控件、Breadcrumb 面包屑、Dropdown 下拉菜单、Tabs 标签页、Menu 导航菜单、Alert 提示、Dialog 对话框、Message 消息提示、Drawer 抽屉、Loading 加载等组件，参考了Element UI 和 iView源码，并完成使用文档的编写。
+
+## 安装
+使用npm 或 yarn 安装
+
+```
+npm install my-baseui
+yarn add my-baseui
+```
+
+## 引入 my-baseui
+### 完整引入
+#### 需要注意的是 css 样式文件需要单独引入。
+在 main.js 中写入以下内容：
+```js
+import { createApp } from 'vue-demi'
+import App from './App.vue'
+// 导入组件库
+import myBaseui from 'my-baseui'
+import 'my-baseui/dist/style.css';
+
+const app = createApp(App)
+app.use(myBaseui)
+app.mount('#app')
+```
+<br/>
+
+## 愉快开始
+
+#### 至此 my-baseui 就引入完成并且可以使用了。
+
+```html
+<!-- html -->
+<m-button>默认按钮</m-button>
+<m-button type="primary">主要按钮</m-button>
+```
+
+<br/>
+
+## 写在最后
+如果你觉得本项目不错或者对你工作有所帮助，欢迎点个star吧
+(#^.^#)

build/base.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import Vue from '@vitejs/plugin-vue';
+import Markdown from 'vite-plugin-md';
+import { resolve } from "path";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    Vue({
+      include: [/\.vue$/, /\.md$/],
+    }),
+    Markdown()
+  ],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "../src"),
+      "~": resolve(__dirname, "../packages")
+    }
+  },
+})

build/dist.config.js

@@ -0,0 +1,23 @@
+import baseConfig from './base.config';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  ...baseConfig,
+  build: {
+    outDir: 'dist',
+    rollupOptions: {
+      // 请确保外部化那些你的库中不需要的依赖
+      external: ["vue"],
+      output: {
+        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+        globals: {
+          vue: "Vue",
+        }
+      },
+    },
+    lib: {
+      entry: "./packages/index.js",
+      name: "vitevue32",
+    },
+  }
+});

build/docs.config.js

@@ -0,0 +1,27 @@
+import baseConfig from './base.config';
+import { defineConfig } from 'vite';
+import externalGlobals from 'rollup-plugin-external-globals'
+
+export default defineConfig({
+  ...baseConfig,
+  base: './',
+  build: {
+    outDir: 'docs',
+    chunkSizeWarningLimit: 1500,
+    rollupOptions: {
+      external: ['highlight.js'],
+      plugins: [
+        externalGlobals({
+          'highlight.js': 'hljs',
+        }),
+      ],
+      output: {
+        manualChunks(id) {
+          if (id.includes('node_modules')) {
+            return id.toString().split('node_modules/')[1].split('/')[0].toString();
+          }
+        }
+      }
+    }
+  },
+});

config/copyDocs.js

@@ -0,0 +1,15 @@
+let copydir = require('copy-dir')
+
+copydir.sync(
+  process.cwd() + '/packages/components',
+  process.cwd() + '/docs/components',
+  {
+    utimes: true,
+    mode: true,
+    cover: true
+  },
+  function (err) {
+    if (err) throw err
+    console.log('done')
+  }
+)

deploy.sh

@@ -0,0 +1,25 @@
+#!/usr/bin/env sh
+
+# 发生错误时终止
+set -e
+
+# 构建
+npm run build:docs
+
+# 进入构建文件夹
+cd docs
+
+# 如果你要部署到自定义域名
+# echo 'www.example.com' > CNAME
+
+git init
+git add -A
+git commit -m 'deploy'
+
+# 如果你要部署在 https://<USERNAME>.github.io
+# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git main
+
+# 如果你要部署在 https://<USERNAME>.github.io/<REPO>
+git push -f git@github.com:wangibook/my-baseui.git master:gh-pages
+
+cd -

docs/assets/bus.f1893518.js

@@ -0,0 +1 @@
+import{m as t}from"./mitt.550594b0.js";const e=t();export{e};

docs/assets/doc.244cd238.css

@@ -0,0 +1 @@
+.date{margin-left:50px}

docs/assets/doc.46ba7921.css

@@ -0,0 +1 @@
+.demo-progress .m-progress--line[data-v-8d11dbf0],.demo-progress .m-progress--line[data-v-94f16e08],.demo-progress .m-progress--line[data-v-d15fa8e0]{margin-bottom:15px;width:350px}.demo-progress .m-progress--circle[data-v-bf3d1a80]{margin-right:15px}.demo-progress .m-progress--dashboard[data-v-ef54524c]{margin:0 15px 15px 0}

docs/assets/doc.489d476d.css

@@ -0,0 +1 @@
+.box-card{width:480px}.card-header{display:flex;justify-content:space-between;align-items:center}.item{font-size:14px;margin-bottom:18px}.box-card[data-v-5d14f16c]{width:480px}.item[data-v-5d14f16c]{font-size:14px;margin-bottom:18px}.bottom{margin-top:13px;line-height:12px;display:flex;justify-content:space-between;align-items:center}

docs/assets/doc.4e35bf4b.css

@@ -0,0 +1 @@
+.item{margin-right:40px}

docs/assets/doc.5de24ff3.css

@@ -0,0 +1 @@
+.mt-50[data-v-277b83a8]{margin-top:50px}.title[data-v-277b83a8]{border-top:1px solid #ddd;padding:5px 0}.custom-tree__item{display:flex;flex:1;justify-content:space-between}

docs/assets/doc.5e872a64.js

@@ -0,0 +1 @@
+import{o as s,g as e,l as t}from"./@vue.e84e1286.js";const n={class:"markdown-body"},_=t("h1",null,"\u5BFC\u822A",-1),c=t("p",null,"\u5BFC\u822A\u53EF\u4EE5\u89E3\u51B3\u7528\u6237\u5728\u8BBF\u95EE\u9875\u9762\u65F6\uFF1A\u5728\u54EA\u91CC\uFF0C\u53BB\u54EA\u91CC\uFF0C\u600E\u6837\u53BB\u7684\u95EE\u9898\u3002 \u4E00\u822C\u5BFC\u822A\u4F1A\u6709\u300C\u4FA7\u680F\u5BFC\u822A\u300D\u548C\u300C\u9876\u90E8\u5BFC\u822A\u300D2 \u79CD\u7C7B\u578B\u3002",-1),l=t("h2",null,"\u4FA7\u680F\u5BFC\u822A",-1),a=t("p",null,"\u53EF\u5C06\u5BFC\u822A\u680F\u56FA\u5B9A\u5728\u5DE6\u4FA7\uFF0C\u63D0\u9AD8\u5BFC\u822A\u53EF\u89C1\u6027\uFF0C\u65B9\u4FBF\u9875\u9762\u4E4B\u95F4\u5207\u6362\uFF1B \u9876\u90E8\u53EF\u653E\u7F6E\u5E38\u7528\u5DE5\u5177\uFF0C\u5982\u641C\u7D22\u6761\u3001\u5E2E\u52A9\u6309\u94AE\u3001\u901A\u77E5\u6309\u94AE\u7B49\u3002 \u9002\u7528\u4E8E\u4E2D\u540E\u53F0\u7684\u7BA1\u7406\u578B\u3001\u5DE5\u5177\u578B\u7F51\u7AD9\u3002",-1),r=t("h2",null,"\u9876\u90E8\u5BFC\u822A",-1),d=t("p",null,"\u987A\u5E94\u4E86\u4ECE\u4E0A\u81F3\u4E0B\u7684\u6B63\u5E38\u6D4F\u89C8\u987A\u5E8F\uFF0C\u65B9\u4FBF\u6D4F\u89C8\u4FE1\u606F\uFF1B \u9876\u90E8\u5BBD\u5EA6\u9650\u5236\u4E86\u5BFC\u822A\u7684\u6570\u91CF\u548C\u6587\u672C\u957F\u5EA6\u3002",-1),h=[_,c,l,a,r,d],k={__name:"doc",setup(i,{expose:o}){return o({frontmatter:{}}),(p,m)=>(s(),e("div",n,h))}};export{k as default};

docs/assets/doc.94bfd1b6.css

@@ -0,0 +1 @@
+.time{margin-left:30px}

docs/assets/doc.96791ac3.js

@@ -0,0 +1,19 @@
+import{o as e,g as a,X as o}from"./@vue.e84e1286.js";const p={class:"markdown-body"},n=o(`<h1>\u5B89\u88C5\u4F7F\u7528</h1><p>\u672C\u8282\u5C06\u4ECB\u7ECD\u5982\u4F55\u5728\u9879\u76EE\u4E2D\u4F7F\u7528 my-baseui</p><h2>\u5B89\u88C5</h2><p>\u4F7F\u7528npm \u6216 yarn \u5B89\u88C5</p><pre><code>npm install my-baseui
+yarn add my-baseui
+</code></pre><h2>\u5F15\u5165 my-baseui</h2><h3>\u5B8C\u6574\u5F15\u5165</h3><h4>\u9700\u8981\u6CE8\u610F\u7684\u662F css \u6837\u5F0F\u6587\u4EF6\u9700\u8981\u5355\u72EC\u5F15\u5165\u3002</h4><p>\u5728 main.js \u4E2D\u5199\u5165\u4EE5\u4E0B\u5185\u5BB9\uFF1A</p><pre><code class="language-javascript">import { createApp } from &#39;vue-demi&#39;
+import App from &#39;./App.vue&#39;
+// \u5BFC\u5165\u7EC4\u4EF6\u5E93
+import myBaseui from &#39;my-baseui&#39;
+import &#39;my-baseui/dist/style.css&#39;;
+
+const app = createApp(App)
+app.use(myBaseui)
+app.mount(&#39;#app&#39;)
+</code></pre><br><h2>\u6109\u5FEB\u5F00\u59CB</h2><h4>\u81F3\u6B64 my-baseui \u5C31\u5F15\u5165\u5B8C\u6210\u5E76\u4E14\u53EF\u4EE5\u4F7F\u7528\u4E86\u3002</h4><pre><code class="language-html">&lt;!-- html --&gt;
+&lt;m-button&gt;\u9ED8\u8BA4\u6309\u94AE&lt;/m-button&gt;
+&lt;m-button type=&quot;primary&quot;&gt;\u4E3B\u8981\u6309\u94AE&lt;/m-button&gt;
+</code></pre><h2>\u6309\u9700\u5F15\u7528</h2><h4>\u60A8\u53EF\u4EE5\u6839\u636E\u4E2A\u4EBA\u9700\u8981\u4F7F\u7528\u6309\u9700\u5F15\u7528\u7EC4\u4EF6\uFF0C\u6309\u9700\u5F15\u7528\u65F6\u4E0D\u9700\u8981\u4F7F\u7528 <code>app.use()</code> \u65B9\u6CD5\u6CE8\u518C\u3002</h4><pre><code class="language-javascript">/*js*/
+import { mButton } from &#39;my-baseui&#39;;
+</code></pre><pre><code class="language-html">&lt;!-- html --&gt;
+&lt;m-button&gt;\u70B9\u51FB&lt;/m-button&gt;
+</code></pre><br>`,19),s=[n],l={__name:"doc",setup(m,{expose:t}){return t({frontmatter:{}}),(c,u)=>(e(),a("div",p,s))}};export{l as default};

docs/assets/doc.985182e0.css

@@ -0,0 +1 @@
+.mt-20[data-v-2e5cd2c6]{display:flex;margin-top:20px}.mt-20 span[data-v-2e5cd2c6]{margin-left:10px;font-size:14px}.mt-20[data-v-70a68e58]{display:flex;margin-top:20px}.mt-20 span[data-v-70a68e58]{margin-left:10px;font-size:14px}

docs/assets/doc.bae47b56.css

@@ -0,0 +1 @@
+.icon-list li[data-v-58b6cea8]{list-style:none;width:16.66%;height:120px;float:left;padding:1vw;border-radius:4px;box-sizing:border-box;text-align:center;font-size:13px;transition:all .15s ease;cursor:pointer}.icon-list li i[data-v-58b6cea8]{font-size:36px;color:#555;display:block;margin-top:1vh}.icon-list li span[data-v-58b6cea8]{display:inline-block;color:#555;margin-top:1vh;margin-bottom:1vh}.icon-list li:hover i[data-v-58b6cea8],.icon-list li:hover span[data-v-58b6cea8]{color:#409eff}

docs/assets/doc.bb77fe53.css

@@ -0,0 +1 @@
+.bg-purple-dark[data-v-68f2b7ed]{background:#99a9bf}.col-box[data-v-68f2b7ed]{height:35px;line-height:35px;margin-bottom:10px;text-align:center}.col-box-1[data-v-68f2b7ed]{background-color:#d3dce6;color:#333}.col-box-2[data-v-68f2b7ed]{background-color:#e5e9f2;color:#333}.col-box[data-v-7d659759]{height:35px;line-height:35px;margin-bottom:10px;text-align:center}.col-box-1[data-v-7d659759]{background-color:#d3dce6;color:#333}.col-box-2[data-v-7d659759]{background-color:#e5e9f2;color:#333}.col-box[data-v-342612dd]{height:35px;line-height:35px;margin-bottom:10px;text-align:center}.col-box-1[data-v-342612dd]{background-color:#d3dce6;color:#333}.col-box-2[data-v-342612dd]{background-color:#e5e9f2;color:#333}.col-box[data-v-feeb9da6]{height:35px;line-height:35px;margin-bottom:10px;text-align:center}.col-box-1[data-v-feeb9da6]{background-color:#d3dce6;color:#333}.col-box-2[data-v-feeb9da6]{background-color:#e5e9f2;color:#333}

docs/assets/doc.cea7f33f.css

@@ -0,0 +1 @@
+.theme-style[data-v-640e7a96]{margin-top:20px}.title[data-v-640e7a96]{margin:5px;font-size:14px}.theme-style[data-v-1ec0e326]{margin-top:20px}.title[data-v-1ec0e326]{margin:5px;font-size:14px}.theme-style[data-v-1790e666]{margin-top:20px}.title[data-v-1790e666]{margin:5px;font-size:14px}.mt-50[data-v-1790e666]{margin-top:50px}.theme-style[data-v-18799054]{margin-top:20px}.title[data-v-18799054]{margin:5px;font-size:14px}.theme-style[data-v-88efd2b4]{margin-top:20px}.title[data-v-88efd2b4]{margin:5px;font-size:14px}.mb-20[data-v-88efd2b4]{margin-bottom:20px}

docs/assets/doc.e888efad.css

@@ -0,0 +1 @@
+.mt-40{margin-top:40px}.pb-10{padding-bottom:10px}.m-table .warning-row{background-color:#fdf5e6}.m-table .success-row{background-color:#f0f9eb}.m-table .table-error-column{background-color:#fef0f0}.m-table .table-info-cell-date{background-color:pink}.m-table .table-info-cell-name{background-color:#87ceeb}.m-table .table-info-cell-address{background-color:#deb887}

docs/assets/header.33dd64be.css

@@ -0,0 +1 @@
+header[data-v-10b6df1e]{height:60px;line-height:60px;box-sizing:border-box;box-shadow:0 2px 8px #f0f1f2;padding:0 40px}header .img-logo[data-v-10b6df1e]{width:22px;height:22px;float:left;margin:20px 10px 0 0;cursor:pointer}header .left[data-v-10b6df1e]{float:left;color:#4a5264;font-weight:700;font-size:18px;text-decoration:none}header .toolsBox[data-v-10b6df1e]{float:right}header .toolsBox .tool-item[data-v-10b6df1e]{font-weight:400;font-size:16px;padding:8px 3px;margin-left:50px;border-bottom:2px solid #fff;display:inline-block;float:none;line-height:normal;transition:all .2s ease;cursor:pointer;color:#333}header .toolsBox .active[data-v-10b6df1e]{color:#409eff;border-bottom:2px solid #409eff}

docs/assets/header.8efcad71.js

@@ -0,0 +1 @@
+import{u as d}from"./vue-router.54876e93.js";import{_ as h}from"./index.c8cfbd6c.js";import{a as g,r as v,o as n,g as r,l as a,H as f,I,k as b,x as k,u as x,B as y,C as S}from"./@vue.e84e1286.js";var w="./assets/logo.c4dbfaea.png";const B=e=>(y("data-v-10b6df1e"),e=e(),S(),e),C=B(()=>a("img",{class:"img-logo",src:w,alt:"my-baseui"},null,-1)),H={class:"toolsBox"},V=["onClick"],j={__name:"header",setup(e){const l=d(),c=g(sessionStorage.getItem("nIndex")||"0"),_=v({tools:[{name:"\u9996\u9875",path:"/"},{name:"\u7EC4\u4EF6",path:"/home"},{name:"GitHub",path:"open",url:"https://github.com/wangibook/my-baseui"}]}),{tools:i}=_,u=()=>{l.push("/"),sessionStorage.setItem("nIndex","0")},m=(s,o)=>{s.path=="open"?window.open(s.url):(l.push(s.path),c.value=o),sessionStorage.setItem("nIndex",o)};return(s,o)=>(n(),r("header",null,[C,a("a",{class:"left",href:"javascript:;",onClick:u},"my-baseui"),a("div",H,[a("ul",null,[(n(!0),r(f,null,I(x(i),(p,t)=>(n(),r("li",{class:b(["tool-item",{active:c.value==t}]),key:t,onClick:z=>m(p,t)},k(p.name),11,V))),128))])])]))}};var G=h(j,[["__scopeId","data-v-10b6df1e"]]);export{G as H,w as _};

docs/assets/index.0aa32976.js

@@ -0,0 +1 @@
+import{H as d,_ as u}from"./header.8efcad71.js";import{f as r,g as p,F as t,l as o,G as a,H as m,e as h,o as f,B as v,C as g,D as c}from"./@vue.e84e1286.js";import{u as x}from"./vue-router.54876e93.js";import{_ as I}from"./index.c8cfbd6c.js";const s=e=>(v("data-v-40fcfaf4"),e=e(),g(),e),b={class:"page-container"},y=s(()=>o("div",{class:"imgLogo"},[o("img",{src:u,alt:"my-baseui"})],-1)),C=s(()=>o("h3",null,"\u57FA\u4E8EVue3\u7684\u8F7B\u91CF\u7EA7UI\u7EC4\u4EF6\u5E93",-1)),S={class:"content"},k=s(()=>o("p",null,"\u66F4\u5C0F\u7684\u4F53\u79EF\uFF0C\u66F4\u5FEB\u7684\u54CD\u5E94\uFF0C\u66F4\u5F3A\u7684\u62D3\u5C55\u6027",-1)),w={class:"btGroups"},G=c("\u7ACB\u5373\u4E0A\u624B"),H=c("GitHub"),B=s(()=>o("ul",{class:"cardGroups"},[o("li",null,[o("p",null,"\u66F4\u5C0F\u7684\u4F53\u79EF"),o("div",null,"\u7EC4\u4EF6\u4F53\u79EF\u66F4\u5C0F\uFF0C\u7075\u6D3B\u4F7F\u7528\uFF0C\u6309\u9700\u4F7F\u7528\u3002")]),o("li",null,[o("p",null,"\u66F4\u5FEB\u7684\u54CD\u5E94"),o("div",null,"\u914D\u5408vue3\u7684composition API\uFF0C\u66F4\u5FEB\u7684\u76F8\u5E94\u3002")]),o("li",null,[o("p",null,"\u66F4\u5F3A\u7684\u62D3\u5C55\u6027"),o("div",null,"\u7ED9\u5F00\u53D1\u8005\u51E0\u4E4E\u6240\u6709\u7684\u673A\u4F1A\u6765\u81EA\u5B9A\u4E49\u7EC4\u4EF6\uFF0C\u6EE1\u8DB3\u4E00\u5207\u9879\u76EE\u4F7F\u7528\u573A\u666F\u3002")])],-1)),V={__name:"index",setup(e){const i=x(),_=()=>{i.push("/home"),sessionStorage.setItem("nIndex","1")},l=()=>{window.open("https://github.com/wangibook/my-baseui")};return r(()=>{sessionStorage.setItem("mIndex","0-0"),sessionStorage.setItem("nIndex","0")}),(N,F)=>{const n=h("m-button");return f(),p(m,null,[t(d),o("div",b,[y,C,o("div",S,[k,o("div",w,[t(n,{class:"btn1",type:"primary",round:"",onClick:_},{default:a(()=>[G]),_:1}),t(n,{class:"btn2",round:"",onClick:l},{default:a(()=>[H]),_:1})]),B])])],64)}}};var M=I(V,[["__scopeId","data-v-40fcfaf4"]]);export{M as default};

docs/assets/index.dc4266de.css

@@ -0,0 +1 @@
+.page-container[data-v-40fcfaf4]{height:100%;overflow:hidden;text-align:center}.page-container .imgLogo[data-v-40fcfaf4]{margin:60px auto 0}.page-container .imgLogo img[data-v-40fcfaf4]{width:200px}.page-container h3[data-v-40fcfaf4]{text-align:center;font-size:26px;color:#4a5264;margin:16px 0 0}.page-container .content[data-v-40fcfaf4]{width:70%;margin:0 auto;padding-top:20px}.page-container .content p[data-v-40fcfaf4]{font-size:14px}.page-container .content .btGroups[data-v-40fcfaf4]{margin-top:40px}.page-container .content .btGroups button[data-v-40fcfaf4]{min-width:120px;font-size:16px}.page-container .content .btGroups .btn1[data-v-40fcfaf4]{margin-right:30px;margin-left:0}.page-container .content .btGroups .btn2[data-v-40fcfaf4]{margin-left:30px}.page-container .content .cardGroups[data-v-40fcfaf4]{width:100%;height:auto;margin-top:40px}.page-container .content .cardGroups li[data-v-40fcfaf4]{width:25%;padding:0 5px 25px;margin-right:20px;display:inline-block;vertical-align:top;transition:all .3s ease-in-out;cursor:pointer}.page-container .content .cardGroups li[data-v-40fcfaf4]:last-child{margin-right:0}.page-container .content .cardGroups li[data-v-40fcfaf4]:hover{background:#ECF5FF}.page-container .content .cardGroups li p[data-v-40fcfaf4]{font-size:18px;color:#1f2f3d;font-weight:400;padding:15px}.page-container .content .cardGroups li div[data-v-40fcfaf4]{font-size:14px;color:#919cac;padding:0;line-height:20px}

docs/assets/mitt.550594b0.js

@@ -0,0 +1 @@
+function n(t){return{all:t=t||new Map,on:function(e,c){var i=t.get(e);i?i.push(c):t.set(e,[c])},off:function(e,c){var i=t.get(e);i&&(c?i.splice(i.indexOf(c)>>>0,1):t.set(e,[]))},emit:function(e,c){var i=t.get(e);i&&i.slice().map(function(f){f(c)}),(i=t.get("*"))&&i.slice().map(function(f){f(e,c)})}}}export{n as m};

docs/assets/preview.2bfe2f00.js

@@ -0,0 +1,2 @@
+import{a as r,c as h,f as v,Y as f,o as i,g as c,F as g,G as w,y as C,l as o,x as n,j as x,T as N,k as y,u as k,D as l}from"./@vue.e84e1286.js";import{e as D}from"./bus.f1893518.js";/* empty css                                                            */import{_ as S}from"./index.c8cfbd6c.js";const V={class:"pre-code-box"},B={key:0,class:"language-html"},T=l("        "),b={class:"language-html"},q=l(`\r
+      `),$={__name:"preview",props:{compName:{type:String,default:"",require:!0},demoName:{type:String,default:"",require:!0}},setup(d){const t=d,e=r(!1),s=r(""),u=h(()=>["iconfont",e.value?"icon-arrow-up-filling":"icon-arrow-down-filling"]),m=()=>{D.emit("previewChange","ok"),e.value=!e.value},p=async()=>{s.value=await fetch(`/my-baseui/components/${t.compName}/doc/${t.demoName}.vue`).then(a=>a.text())};return v(()=>{p()}),(a,j)=>{const _=f("highlight");return i(),c("div",V,[g(N,{name:"slide-fade"},{default:w(()=>[e.value?C((i(),c("pre",B,[T,o("code",b,n(s.value),1),q])),[[_]]):x("",!0)]),_:1}),o("div",{class:"showCode",onClick:m},[o("i",{class:y(k(u))},null,2),o("span",null,n(e.value?"\u9690\u85CF\u4EE3\u7801":"\u663E\u793A\u4EE3\u7801"),1)])])}}};var I=S($,[["__scopeId","data-v-478df7e9"]]);export{I as p};

docs/assets/preview.vue_vue_type_style_index_0_scoped_true_lang.b8c45f59.css

@@ -0,0 +1 @@
+.slide-fade-enter-active[data-v-478df7e9]{transition:all .1s ease-out}.slide-fade-leave-active[data-v-478df7e9]{transition:all .1s cubic-bezier(1,.5,.8,1)}.slide-fade-enter-from[data-v-478df7e9],.slide-fade-leave-to[data-v-478df7e9]{transform:translateY(-10px);opacity:.5}.pre-code-box[data-v-478df7e9]{width:100%;height:auto;overflow:hidden;border-top:0;position:relative;transition:all .15s ease-out}.pre-code-box[data-v-478df7e9]:hover{box-shadow:0 16px 15px -16px #0000001a}.pre-code-box pre[data-v-478df7e9]{margin-top:-15px;margin-bottom:0}.pre-code-box .showCode[data-v-478df7e9]{width:100%;line-height:40px;font-size:14px;text-align:center;background:#f9f9f9;box-shadow:0 16px 15px -16px #0000001a;color:#666;display:flex;justify-content:center;align-items:center;cursor:pointer}.pre-code-box .showCode[data-v-478df7e9]:hover{background:#f9f9f9;color:#0e80eb}.pre-code-box .showCode span[data-v-478df7e9]{margin-left:10px}

docs/assets/vue-demi.b17ab05a.js

@@ -0,0 +1 @@
+

docs/assets/vue.f8638657.js

@@ -0,0 +1 @@
+

docs/components/alert/doc/content.json

@@ -0,0 +1,22 @@
+[
+    {
+        "title": "基本用法",
+        "active": true
+    }, {
+        "title": "主题"
+    }, {
+        "title": "自定义关闭按钮"
+    }, {
+        "title": "带有 icon"
+    }, {
+        "title": "文字居中"
+    }, {
+        "title": "文字描述"
+    }, {
+        "title": "带图标和描述"
+    }, {
+        "title": "Attributes"
+    }, {
+        "title": "Events"
+    }
+]

docs/components/alert/doc/demo1.vue

@@ -0,0 +1,6 @@
+<template>
+  <m-alert title="成功提示的文案" type="success"></m-alert>
+  <m-alert title="消息提示的文案" type="info"></m-alert>
+  <m-alert title="警告提示的文案" type="warning"></m-alert>
+  <m-alert title="错误提示的文案" type="error"></m-alert>
+</template>

docs/components/alert/doc/demo2.vue

@@ -0,0 +1,6 @@
+<template>
+  <m-alert title="成功提示的文案" type="success" effect="dark"></m-alert>
+  <m-alert title="消息提示的文案" type="info" effect="dark"></m-alert>
+  <m-alert title="警告提示的文案" type="warning" effect="dark"></m-alert>
+  <m-alert title="错误提示的文案" type="error" effect="dark"></m-alert>
+</template>

docs/components/alert/doc/demo3.vue

@@ -0,0 +1,11 @@
+<template>
+  <m-alert title="不可关闭的 alert" type="success" :closable="false"></m-alert>
+  <m-alert title="自定义 close-text" type="info" close-text="关闭"></m-alert>
+  <m-alert title="警告提示的文案" type="warning" @close="alertClose"></m-alert>
+</template>
+
+<script setup>
+const alertClose = () => {
+  console.log('点击了关闭');
+}
+</script>

docs/components/alert/doc/demo4.vue

@@ -0,0 +1,6 @@
+<template>
+  <m-alert title="成功提示的文案" type="success" show-icon></m-alert>
+  <m-alert title="消息提示的文案" type="info" show-icon></m-alert>
+  <m-alert title="警告提示的文案" type="warning" show-icon></m-alert>
+  <m-alert title="错误提示的文案" type="error" show-icon></m-alert>
+</template>

docs/components/alert/doc/demo5.vue

@@ -0,0 +1,6 @@
+<template>
+  <m-alert title="成功提示的文案" type="success" show-icon center></m-alert>
+  <m-alert title="消息提示的文案" type="info" show-icon center></m-alert>
+  <m-alert title="警告提示的文案" type="warning" show-icon center></m-alert>
+  <m-alert title="错误提示的文案" type="error" show-icon center></m-alert>
+</template>

docs/components/alert/doc/demo6.vue

@@ -0,0 +1,12 @@
+<template>
+  <m-alert
+    title="带辅助性文字介绍"
+    type="success"
+    description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">
+  </m-alert>
+  <m-alert
+    title="带辅助性文字介绍"
+    type="success">
+    这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……
+  </m-alert>
+</template>

docs/components/alert/doc/demo7.vue

@@ -0,0 +1,26 @@
+<template>
+  <m-alert
+    title="成功提示的文案"
+    type="success"
+    description="文字说明文字说明文字说明文字说明文字说明文字说明"
+    show-icon>
+  </m-alert>
+  <m-alert
+    title="消息提示的文案"
+    type="info"
+    description="文字说明文字说明文字说明文字说明文字说明文字说明"
+    show-icon>
+  </m-alert>
+  <m-alert
+    title="警告提示的文案"
+    type="warning"
+    description="文字说明文字说明文字说明文字说明文字说明文字说明"
+    show-icon>
+  </m-alert>
+  <m-alert
+    title="错误提示的文案"
+    type="error"
+    description="文字说明文字说明文字说明文字说明文字说明文字说明"
+    show-icon>
+  </m-alert>
+</template>

docs/components/alert/doc/doc.md

@@ -0,0 +1,95 @@
+<script setup>
+import demo1 from './demo1.vue';
+import demo2 from './demo2.vue';
+import demo3 from './demo3.vue';
+import demo4 from './demo4.vue';
+import demo5 from './demo5.vue';
+import demo6 from './demo6.vue';
+import demo7 from './demo7.vue';
+import preview from '@/components/preview.vue';
+</script>
+
+# Alert 警告
+
+#### 用于页面中展示重要的提示信息
+
+<br/>
+
+## 基本用法
+#### Alert 组件不属于浮层元素，不会自动消失或关闭。Alert 组件提供四种主题，由type属性指定，默认值为info
+<div class="source">
+  <demo1/>
+</div>
+<preview compName="alert" demoName="demo1"/>
+
+
+## 主题
+#### Alert 组件提供了两个不同的主题：light和dark。通过设置effect属性来改变主题，默认为light
+<div class="source">
+  <demo2/>
+</div>
+<preview compName="alert" demoName="demo2"/>
+
+
+## 自定义关闭按钮
+#### 自定义关闭按钮为文字或其他符号。
+你可以设置 Alert 组件是否为可关闭状态， 关闭按钮的内容以及关闭时的回调函数同样可以定制。 closable 属性决定 Alert 组件是否可关闭， 该属性接受一个 Boolean，默认为 true。 你可以设置 close-text 属性来代替右侧的关闭图标， 需要注意的是 close-text 必须是一个字符串。 当 Alert 组件被关闭时会触发 close 事件。
+<div class="source">
+  <demo3/>
+</div>
+<preview compName="alert" demoName="demo3"/>
+
+
+## 带有 icon
+#### 表示某种状态时提升可读性。通过设置show-icon属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图
+<div class="source">
+  <demo4/>
+</div>
+<preview compName="alert" demoName="demo4"/>
+
+
+## 文字居中
+#### 使用 center 属性让文字水平居中。
+<div class="source">
+  <demo5/>
+</div>
+<preview compName="alert" demoName="demo5"/>
+
+
+## 文字描述
+#### 为 Alert 组件添加一个更加详细的描述来使用户了解更多信息。
+除了必填的 title 属性外，你可以设置 description 属性来帮助你更好地介绍，我们称之为辅助性文字。 辅助性文字只能存放文本内容，当内容超出长度限制时会自动换行显示。
+<div class="source">
+  <demo6/>
+</div>
+<preview compName="alert" demoName="demo6"/>
+
+
+## 带图标和描述
+#### 带有 icon 和辅助性文字介绍
+<div class="source">
+  <demo7/>
+</div>
+<preview compName="alert" demoName="demo7"/>
+
+
+## Attributes
+| 参数      | 说明          | 类型       | 可选值              | 默认值   |
+|---------- |-------------- |---------- |-------------------- |-------- |
+| title     | 标题           | string | — | — |
+| type | 主题 | string | success/warning/info/error | info |
+| description | 辅助性文字。也可通过默认 slot 传入 | string | — | — |
+| closable | 是否可关闭 | boolean | — | true |
+| center | 文字是否居中 | boolean | — | true |
+| close-text | 关闭按钮自定义文本 | string | — | — |
+| show-icon | 是否显示图标 | boolean | — | false |
+| effect | 选择提供的主题 | string | light/dark | light |
+
+<br/>
+
+### Events
+| 事件名称   | 说明    | 回调参数 |
+|---------- |-------- |---------- |
+| close     | 关闭alert时触发的事件 | — |
+
+<br/>

docs/components/alert/index.js

@@ -0,0 +1,7 @@
+import mAlert from './index.vue';
+
+mAlert.install = (Vue) => {
+  Vue.component(mAlert.name,mAlert)
+}
+
+export default mAlert;

docs/components/alert/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="m-alert" :class="typeClass" v-show="visible">
+    <i class="iconfont m-alert__icon" :class="[ iconClass, isBigIcon ]" v-if="showIcon"></i>
+    <div class="m-alert__content">
+      <span class="m-alert__title" :class="isBoldTitle">
+        <slot name="title">{{ title }}</slot>
+      </span>
+      <p class="m-alert__description" v-if="$slots.default && !description"><slot></slot></p>
+      <p class="m-alert__description" v-if="description && !$slots.default">{{ description }}</p>
+      <i class="iconfont m-alert__closebtn" :class="closeIconClass" @click="close" v-show="closable">
+        {{closeText}}
+      </i>
+    </div>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: "mAlert"
+};
+</script>
+
+<script setup>
+import { computed, ref } from 'vue-demi';
+
+const TYPE_CLASSES_MAP = {
+  'success': 'icon-success-filling',
+  'warning': 'icon-warning-filling',
+  'error': 'icon-delete-filling'
+};
+
+const emit = defineEmits(['close'])
+const props = defineProps({
+  title: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'info'
+  },
+  effect: {
+    type: String,
+    default: 'light',
+    validator: function(value) {
+      return ['light', 'dark'].indexOf(value) !== -1;
+    }
+  },
+  closable: {
+    type: Boolean,
+    default: true
+  },
+  closeText: {
+    type: String,
+    default: ''
+  },
+  showIcon: Boolean,
+  center: Boolean,
+  description: {
+    type: String,
+    default: ''
+  },
+})
+
+const visible = ref(true)
+
+const typeClass = computed(() => {
+  return {
+    [`m-alert--${props.type}`]: props.type,
+    [`is-${props.effect}`]:props.effect,
+    'is-center': props.center
+  }
+})
+
+const closeIconClass = computed(() => {
+  return {
+    'icon-close': props.closeText === '',
+    'is-customed': props.closeText !== ''
+  }
+})
+
+const iconClass = computed(() => {
+  return TYPE_CLASSES_MAP[props.type] || 'icon-prompt-filling';
+})
+
+const isBigIcon = computed(() => {
+
+})
+
+const isBoldTitle = computed(() => {
+  return props.description ? 'is-bold' : '';
+})
+
+const close = () => {
+  visible.value = false
+  emit('close')
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/components/alert.scss';
+</style>

docs/components/badge/doc/content.json

@@ -0,0 +1,14 @@
+[
+    {
+        "title": "基础用法",
+        "active": true
+    }, {
+        "title": "最大值"
+    }, {
+        "title": "自定义内容"
+    }, {
+        "title": "小红点"
+    }, {
+        "title": "Attributes"
+    }
+]

docs/components/badge/doc/demo1.vue

@@ -0,0 +1,35 @@
+<template>
+  <m-badge :value="12" class="item">
+    <m-button size="small">评论</m-button>
+  </m-badge>
+  <m-badge :value="5" class="item">
+    <m-button size="small">回复</m-button>
+  </m-badge>
+  <m-badge :value="12" class="item" type="primary">
+    <m-button size="small">评论</m-button>
+  </m-badge>
+  <m-badge :value="12" class="item" type="warning">
+    <m-button size="small">回复</m-button>
+  </m-badge>
+
+  <m-dropdown trigger="click" title="点我查看">
+    <template #dropdown>
+      <m-dropdown-menu>
+        <m-dropdown-item class="clearfix">
+          评论
+          <m-badge :value="12" />
+        </m-dropdown-item>
+        <m-dropdown-item class="clearfix">
+          回复
+          <m-badge :value="5" />
+        </m-dropdown-item>
+      </m-dropdown-menu>
+    </template>
+  </m-dropdown>
+</template>
+
+<style>
+.item {
+  margin-right: 40px;
+}
+</style>

docs/components/badge/doc/demo2.vue

@@ -0,0 +1,29 @@
+<template>
+  <m-badge :value="200" :max="99" class="item">
+    <m-button size="small">评论</m-button>
+  </m-badge>
+  <m-badge :value="200" :max="10" class="item" type="primary">
+    <m-button size="small">回复</m-button>
+  </m-badge>
+
+  <m-dropdown trigger="click" title="点我查看">
+    <template #dropdown>
+      <m-dropdown-menu>
+        <m-dropdown-item class="clearfix">
+          评论
+          <m-badge :value="200" :max="99" />
+        </m-dropdown-item>
+        <m-dropdown-item class="clearfix">
+          回复
+          <m-badge :value="200" :max="10" />
+        </m-dropdown-item>
+      </m-dropdown-menu>
+    </template>
+  </m-dropdown>
+</template>
+
+<style>
+.item {
+  margin-right: 40px;
+}
+</style>

docs/components/badge/doc/demo3.vue

@@ -0,0 +1,14 @@
+<template>
+  <m-badge value="new" class="item">
+    <m-button size="small">评论</m-button>
+  </m-badge>
+  <m-badge value="hot" class="item">
+    <m-button size="small">回复</m-button>
+  </m-badge>
+</template>
+
+<style>
+.item {
+  margin-right: 40px;
+}
+</style>

docs/components/badge/doc/demo4.vue

@@ -0,0 +1,12 @@
+<template>
+  <m-badge is-dot class="item">数据查询</m-badge>
+  <m-badge is-dot class="item">
+    <m-button size="small" type="primary">回复</m-button>
+  </m-badge>
+</template>
+
+<style>
+.item {
+  margin-right: 40px;
+}
+</style>

docs/components/badge/doc/doc.md

@@ -0,0 +1,57 @@
+<script setup>
+import demo1 from './demo1.vue';
+import demo2 from './demo2.vue';
+import demo3 from './demo3.vue';
+import demo4 from './demo4.vue';
+import preview from '@/components/preview.vue';
+</script>
+
+# Badge 徽章
+
+#### 按钮和图标上的数字或状态标记。
+
+<br/>
+
+## 基础用法
+#### 可以用来展示新消息的数量。通过设置 value 来调整标记所展示的内容，支持 Number 或者 String 作为参数
+<div class="source">
+  <demo1/>
+</div>
+<preview compName="badge" demoName="demo1"/>
+
+
+## 最大值
+#### 可自定义最大值。由max属性定义，它接受一个Number， 要注意的是，该值当且仅当在 value 的值也是 Number 时生效。
+<div class="source">
+  <demo2/>
+</div>
+<preview compName="badge" demoName="demo2"/>
+
+
+## 自定义内容
+#### 可以显示数字以外的文本内容。定义value为String类型是时可以用于显示自定义文本。
+<div class="source">
+  <demo3/>
+</div>
+<preview compName="badge" demoName="demo3"/>
+
+
+## 小红点
+#### 通过一个小红点标记来告知用户有新内容。除了数字外，设置is-dot属性 ，它接受一个Boolean 类型作为参数。
+<div class="source">
+  <demo4/>
+</div>
+<preview compName="badge" demoName="demo4"/>
+
+<br/>
+
+## Attributes
+| 参数          | 说明            | 类型            | 可选值                 | 默认值   |
+|------------- |---------------- |---------------- |---------------------- |-------- |
+| value        | 显示值           | string, number  |          —            |    —    |
+| max          | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型    | number  |         —              |     —    |
+| is-dot       | 小圆点           | boolean         |         —             |  false  |
+| hidden       | 隐藏 badge       | boolean         |         —             |  false  |
+| type         | 类型             | string          | primary / success / warning / danger / info |    —    |
+
+<br/>

docs/components/badge/index.js

@@ -0,0 +1,7 @@
+import mBadge from './index.vue';
+
+mBadge.install = (Vue) => {
+  Vue.component(mBadge.name,mBadge)
+}
+
+export default mBadge;

docs/components/badge/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="m-badge">
+    <slot></slot>
+    <sup 
+      class="m-badge__content" 
+      :class="styleClass"
+      v-show="!hidden && (content || content === 0 || isDot)">
+      {{content}}
+    </sup>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "mBadge"
+};
+</script>
+
+<script setup>
+import { computed,useSlots } from 'vue-demi';
+const props = defineProps({
+  value: String | Number,
+  max: Number,
+  type: {
+    type: String,
+    validator(val) {
+      return ['primary', 'success', 'warning', 'info', 'danger'].indexOf(val) > -1;
+    }
+  },
+  isDot: {
+    type: Boolean,
+    default: false
+  },
+  hidden: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const $slots = useSlots()
+const styleClass = computed(() => {
+  return {
+    'is-fixed': $slots.default,
+    [`m-badge--${props.type}`]: props.type,
+    'is-dot': props.isDot
+  }
+})
+
+const content = computed(() => {
+  if (props.isDot) return;
+  const { value,max } = props
+  if (typeof value === 'number' && typeof max === 'number') {
+    return max < value ? `${max}+` : value;
+  }
+
+  return value;
+})
+
+</script>
+
+<style lang="scss" scoped>
+@import '../../styles/components/badge.scss';
+</style>

docs/components/breadcrumb-item/index.js

@@ -0,0 +1,7 @@
+import mBreadcrumbItem from '../breadcrumb/src/breadcrumb-item.vue';
+
+mBreadcrumbItem.install = (Vue) => {
+  Vue.component(mBreadcrumbItem.name,mBreadcrumbItem)
+}
+
+export default mBreadcrumbItem;

docs/components/breadcrumb/doc/content.json

@@ -0,0 +1,14 @@
+[
+    {
+        "title": "基本用法",
+        "active": true
+    }, {
+        "title": "带图标"
+    }, {
+        "title": "分隔符"
+    }, {
+        "title": "Breadcrumb Attributes"
+    }, {
+        "title": "Breadcrumb Item Attributes"
+    }
+]

docs/components/breadcrumb/doc/demo1.vue

@@ -0,0 +1,7 @@
+<template>
+  <m-breadcrumb>
+    <m-breadcrumb-item to="/">首页</m-breadcrumb-item>
+    <m-breadcrumb-item to="/breadcrumb">组件</m-breadcrumb-item>
+    <m-breadcrumb-item>面包屑</m-breadcrumb-item>
+  </m-breadcrumb>
+</template>

docs/components/breadcrumb/doc/demo2.vue

@@ -0,0 +1,13 @@
+<template>
+  <m-breadcrumb>
+    <m-breadcrumb-item to="/" icon="icon-home">
+      <i class="iconfont icon-home"></i>首页
+    </m-breadcrumb-item>
+    <m-breadcrumb-item to="/breadcrumb">
+      <i class="iconfont icon-email"></i>组件
+    </m-breadcrumb-item>
+    <m-breadcrumb-item icon="icon-edit">
+      <i class="iconfont icon-edit"></i>面包屑
+    </m-breadcrumb-item>
+  </m-breadcrumb>
+</template>

docs/components/breadcrumb/doc/demo3.vue

@@ -0,0 +1,12 @@
+<template>
+  <m-breadcrumb separator=">">
+    <m-breadcrumb-item to="/">首页</m-breadcrumb-item>
+    <m-breadcrumb-item to="/breadcrumb">组件</m-breadcrumb-item>
+    <m-breadcrumb-item>面包屑</m-breadcrumb-item>
+  </m-breadcrumb>
+  <m-breadcrumb separator-class="icon-direction-right">
+    <m-breadcrumb-item to="/">首页</m-breadcrumb-item>
+    <m-breadcrumb-item to="/breadcrumb">组件</m-breadcrumb-item>
+    <m-breadcrumb-item>面包屑</m-breadcrumb-item>
+  </m-breadcrumb>
+</template>

docs/components/breadcrumb/doc/doc.md

@@ -0,0 +1,53 @@
+<script setup>
+import demo1 from './demo1.vue'
+import demo2 from './demo2.vue'
+import demo3 from './demo3.vue'
+import preview from '@/components/preview.vue'
+</script>
+
+# Breadcrumb 面包屑
+
+#### 显示当前页面的路径，快速返回之前的任意页面。
+
+<br/>
+
+
+## 基础用法
+<div class="source">
+  <demo1/>
+</div>
+<preview compName="breadcrumb" demoName="demo1"/>
+
+
+## 带图标
+#### 可自定义每项的内容，比如带有一个图标。
+<div class="source">
+  <demo2/>
+</div>
+<preview compName="breadcrumb" demoName="demo2"/>
+
+
+## 分隔符
+#### 通过设置 separator 属性来自定义分隔符，比如>
+#### 也可以通过 separator-class 设置相应的 iconfont 作为分隔符，注意这将使 separator 设置失效
+<div class="source">
+  <demo3/>
+</div>
+<preview compName="breadcrumb" demoName="demo3"/>
+
+<br/>
+
+## Breadcrumb Attributes
+| 参数             | 说明             | 类型        | 可选值            | 默认值  |
+|---------------   |--------------    |----------  |-----------------  |-------- |
+| separator        | 分隔符           |  string     | —                 | 斜杠'/' |
+| separator-class  | 图标分隔符 class | string      | —                 | -       |
+
+<br/>
+
+## Breadcrumb Item Attributes
+| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
+|---------- |-------------- |---------- |--------------------------------  |-------- |
+| to        | 路由跳转对象，同 `vue-router` 的 `to` | string/object | — | — |
+
+<br/>

docs/components/breadcrumb/index.js

@@ -0,0 +1,7 @@
+import mBreadcrumb from './src/index.vue';
+
+mBreadcrumb.install = (Vue) => {
+  Vue.component(mBreadcrumb.name,mBreadcrumb)
+}
+
+export default mBreadcrumb;

docs/components/breadcrumb/src/breadcrumb-item.vue

@@ -0,0 +1,44 @@
+<template>
+  <li class="m-breadcrumb-item">
+    <a class="m-breadcrumb-item__link" :href="to" @click="handleClick" v-if="to">
+      <slot></slot>
+    </a>
+    <span class="m-breadcrumb-item__span" v-else>
+      <slot/>
+    </span>
+    <span>
+      <i class="m-breadcrumb-item__separator iconfont" :class="separatorClass" v-if="separatorClass"></i>
+      <span class="m-breadcrumb-item__separator" v-else> {{ separator }} </span>
+    </span>
+  </li>
+</template>
+
+<script>
+export default {
+  name: "mBreadcrumbItem"
+};
+</script>
+
+<script setup>
+import { inject } from 'vue-demi';
+import { useRouter } from 'vue-router';
+
+const props = defineProps({
+  to: {
+    type: [String, Object],
+  }
+})
+
+const router = useRouter()
+const breadcrumbKey = inject('breadcrumbKey')
+const { separator,separatorClass } = breadcrumbKey
+
+const handleClick = (e) => {
+  event.preventDefault();
+  router.push(props.to)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../../styles/components/breadcrumb.scss';
+</style>