├── .gitignore ├── .vscode └── settings.json ├── README.md ├── deploy.sh ├── index.html ├── package.json ├── plugins └── md.ts ├── public └── favicon.ico ├── rollup.config.js ├── src ├── App.vue ├── assets │ ├── homeBack.png │ ├── homeRight.svg │ ├── js │ │ └── iconFont.js │ ├── logo.png │ ├── logo.svg │ └── menu.svg ├── components │ ├── AffixDemo.vue │ ├── AffixDemos │ │ ├── AssignAffix.vue │ │ └── BasicAffix.vue │ ├── ButtonDemo.vue │ ├── ButtonDemos │ │ ├── BtnDisabled.vue │ │ ├── BtnLevel.vue │ │ ├── BtnLoading.vue │ │ ├── BtnSize.vue │ │ └── BtnType.vue │ ├── CarouselDemo.vue │ ├── CarouselDemos │ │ ├── AnimationCarousel.vue │ │ ├── BasicCarousel.vue │ │ ├── Duration.vue │ │ └── SignCarousel.vue │ ├── CascaderDemo.vue │ ├── CascaderDemos │ │ ├── BasicCascader.vue │ │ ├── DisabledCascader.vue │ │ └── Multilayer.vue │ ├── CheckBoxDemo.vue │ ├── CheckBoxDemos │ │ ├── BasicCheckBox.vue │ │ ├── DisabledCheckBox.vue │ │ ├── GroupCheckBox.vue │ │ └── IndeterminateCheckBox.vue │ ├── CollapseDemo.vue │ ├── CollapseDemos │ │ ├── AccordionCollapse.vue │ │ ├── BasicCollapse.vue │ │ └── DisabledCollapse.vue │ ├── Demo.vue │ ├── DialogDemo.vue │ ├── DialogDemos │ │ ├── BasicDialog.vue │ │ └── FooterDialog.vue │ ├── DrawerDemo.vue │ ├── DrawerDemos │ │ ├── BasicDrawer.vue │ │ ├── CustomDrawer.vue │ │ └── PlacementDrawer.vue │ ├── IconDemo.vue │ ├── IconDemos │ │ └── basicIcon.vue │ ├── InputDemo.vue │ ├── InputDemos │ │ ├── BasicInput.vue │ │ ├── ClearableInput.vue │ │ ├── DisabledInput.vue │ │ ├── IconInput.vue │ │ ├── ShowPassword.vue │ │ └── TextareaInput.vue │ ├── LayoutDemo.vue │ ├── LayoutDemos │ │ ├── LayoutDemo1.vue │ │ ├── LayoutDemo2.vue │ │ ├── LayoutDemo3.vue │ │ └── LayoutDemo4.vue │ ├── MessageDemo.vue │ ├── MessageDemos │ │ ├── BasicMessage.vue │ │ ├── CloseMessage.vue │ │ ├── DurationMessage.vue │ │ └── TypeMessage.vue │ ├── Other │ │ ├── Aside.vue │ │ ├── Main.vue │ │ └── Markdown.vue │ ├── PagerDemo.vue │ ├── PagerDemos │ │ ├── BasicPager.vue │ │ ├── MorePager.vue │ │ ├── SimplePager.vue │ │ └── SizePager.vue │ ├── Popover │ │ ├── BasicPopover.vue │ │ ├── DirectionPopover.vue │ │ └── TriggerPopover.vue │ ├── PopoverDemo.vue │ ├── RadioDemo.vue │ ├── RadioDemos │ │ ├── BasicRadio.vue │ │ ├── DisabledRadio.vue │ │ └── RadioGroup.vue │ ├── RateDemo.vue │ ├── RateDemos │ │ ├── BasicRate.vue │ │ ├── ClearRate.vue │ │ ├── DIsableRate.vue │ │ ├── HalfRate.vue │ │ ├── IconRate.vue │ │ └── TextRate.vue │ ├── SpinDemo.vue │ ├── SpinDemos │ │ ├── BasicSpin.vue │ │ ├── SizeSpin.vue │ │ └── TextSpin.vue │ ├── SwitchDemo.vue │ ├── SwitchDemos │ │ ├── DefaultValue.vue │ │ ├── Disabled.vue │ │ ├── Loading.vue │ │ └── Size.vue │ ├── TabsDemo.vue │ └── TabsDemos │ │ ├── BasicDemo.vue │ │ ├── DisabledTabs.vue │ │ └── VerticalTabs.vue ├── lib │ ├── Affix.vue │ ├── Button.vue │ ├── Carousel │ │ ├── Carousel.vue │ │ └── CarouselItem.vue │ ├── Cascader │ │ ├── Cascader.vue │ │ └── CascaderItems.vue │ ├── CheckBox │ │ ├── CheckBox.vue │ │ └── CheckBoxGroup.vue │ ├── Collapse │ │ ├── Collapse.vue │ │ └── CollapseItem.vue │ ├── Dialog.vue │ ├── Drawer.vue │ ├── Icon.vue │ ├── Input.vue │ ├── Layout │ │ ├── Content.vue │ │ ├── Footer.vue │ │ ├── Header.vue │ │ ├── Layout.vue │ │ ├── Side.vue │ │ └── index.ts │ ├── Message │ │ ├── Message.vue │ │ └── index.ts │ ├── Pager.vue │ ├── Popover.vue │ ├── Radio │ │ ├── Radio.vue │ │ └── RadioGroup.vue │ ├── Rate.vue │ ├── Spin.vue │ ├── Switch.vue │ ├── Tab.vue │ ├── Table.vue │ ├── Tabs.vue │ └── index.ts ├── main.ts ├── markdown │ ├── get-started.md │ └── intro.md ├── router.ts ├── shims-vue.d.ts ├── styles │ ├── index.scss │ └── le.scss └── views │ ├── Doc.vue │ ├── Home.vue │ ├── TopNav.vue │ └── svg.vue ├── utils.ts ├── vite.config.ts └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | dist 4 | *.local 5 | .idea/* 6 | /dist -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "vue3snippets.enable-compile-vue-file-on-did-save-code": false 3 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # le-vue-ui 2 | 一套基于Vue3和TypeScript的UI组件库。 3 | > 本组件库旨在学习Vue3新特性以及熟悉TypeScript语法，可以作为学习项目，因此不建议在生产环境中使用。 4 | ## 特性 5 | * 基于最新的Vue3 Composition API 编写 6 | * ES2015+的支持以及严格的使用TypeScript编写 7 | * 采用Rollup配置打包 8 | * 友好的 API ，自由灵活地使用空间 9 | * 源码简单简洁，阅读无障碍 10 | * 细致、漂亮的 UI 11 | 12 | ## 版本 13 | * 0.0.4 beta 14 | 15 | ## 兼容性 16 | * 基于Vue js3.0 17 | * 现代浏览器及IE10+ 18 | * ES2015+ 19 | 20 | ## 相关链接 21 | * [Vuejs官方](https://cn.vuejs.org/index.html) 22 | * [Vite官方](https://github.com/vitejs/vite) 23 | * [Rollup.js](https://www.rollupjs.com/) 24 | * [TypeScript](https://www.typescriptlang.org/) 25 | 26 | ## License 27 | * MIT 28 | -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | rm -rf dist 2 | yarn build 3 | cd dist 4 | git init 5 | git add . 6 | git commit -m "update" 7 | git remote add gitee git@gitee.com:ChenXiaoLaNi/le-ui-docs.git 8 | git remote add origin git@github.com:mywebc/le-vue.git 9 | git push -f -u origin master:docs 10 | git push -f -u gitee master 11 | cd - 12 | echo https://chenxiaolani.com/le-vue/index.html#/ -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "le-vue-ui", 3 | "version": "0.0.4", 4 | "files": [ 5 | "dist/lib/*" 6 | ], 7 | "main": "dist/lib/leUI.js", 8 | "module": "dist/lib/leUI.esm.js", 9 | "scripts": { 10 | "dev": "vite", 11 | "build": "vite build" 12 | }, 13 | "resolutions": { 14 | "node-sass": "npm:sass@^1.26.11" 15 | }, 16 | "dependencies": { 17 | "github-markdown-css": "^4.0.0", 18 | "marked": "^1.1.1", 19 | "prismjs": "^1.21.0", 20 | "vue": "^3.0.0", 21 | "vue-router": "4.0.0-beta.3" 22 | }, 23 | "devDependencies": { 24 | "@vue/compiler-sfc": "^3.0.0", 25 | "rollup-plugin-esbuild": "^2.5.0", 26 | "rollup-plugin-scss": "^2.6.0", 27 | "rollup-plugin-terser": "^7.0.2", 28 | "rollup-plugin-vue": "^6.0.0-beta.10", 29 | "sass": "^1.26.11", 30 | "vite": "^1.0.0-rc.1" 31 | } 32 | } -------------------------------------------------------------------------------- /plugins/md.ts: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | import path from 'path' 3 | import fs from 'fs' 4 | import marked from 'marked' 5 | 6 | const mdToJs = str => { 7 | const content = JSON.stringify(marked(str)) 8 | return `export default ${content}` 9 | } 10 | 11 | export function md() { 12 | return { 13 | configureServer: [ // 用于开发 14 | async ({ app }) => { 15 | app.use(async (ctx, next) => { // koa 16 | if (ctx.path.endsWith('.md')) { 17 | ctx.type = 'js' 18 | const filePath = path.join(process.cwd(), ctx.path) 19 | ctx.body = mdToJs(fs.readFileSync(filePath).toString()) 20 | } else { 21 | await next() 22 | } 23 | }) 24 | }, 25 | ], 26 | transforms: [{ // 用于 rollup // 插件 27 | test: context => context.path.endsWith('.md'), 28 | transform: ({ code }) => mdToJs(code) 29 | }] 30 | } 31 | } -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mywebc/le-vue/9c9ae8773b56aa3edb12bd56d1d317ba4112624e/public/favicon.ico -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import esbuild from 'rollup-plugin-esbuild' 2 | import vue from 'rollup-plugin-vue' 3 | import scss from 'rollup-plugin-scss' 4 | import dartSass from 'sass'; 5 | import { terser } from "rollup-plugin-terser" 6 | 7 | export default { 8 | input: 'src/lib/index.ts', 9 | output: [{ 10 | globals: { 11 | vue: 'Vue' 12 | }, 13 | name: 'leUI', 14 | file: 'dist/lib/leUI.js', 15 | format: 'umd', 16 | plugins: [terser()] 17 | }, { 18 | name: 'leUI', 19 | file: 'dist/lib/leUI.esm.js', 20 | format: 'es', 21 | plugins: [terser()] 22 | }], 23 | plugins: [ 24 | scss({ include: /\.scss$/, sass: dartSass }), 25 | esbuild({ 26 | include: /\.[jt]s$/, 27 | minify: process.env.NODE_ENV === 'production', 28 | target: 'es2015' 29 | }), 30 | vue({ 31 | include: /\.vue$/, 32 | }) 33 | ], 34 | } -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /src/assets/homeBack.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mywebc/le-vue/9c9ae8773b56aa3edb12bd56d1d317ba4112624e/src/assets/homeBack.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mywebc/le-vue/9c9ae8773b56aa3edb12bd56d1d317ba4112624e/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 11 | 12 | 13 | 14 | 15 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/assets/menu.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/AffixDemo.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 57 | 58 | 63 | -------------------------------------------------------------------------------- /src/components/AffixDemos/AssignAffix.vue: -------------------------------------------------------------------------------- 1 | 2 | 指定距离 3 | 4 | 5 | 10 | 11 | 19 | -------------------------------------------------------------------------------- /src/components/AffixDemos/BasicAffix.vue: -------------------------------------------------------------------------------- 1 | 2 | 基础用法 3 | 4 | 5 | 10 | 11 | 19 | -------------------------------------------------------------------------------- /src/components/ButtonDemo.vue: -------------------------------------------------------------------------------- 1 | 2 | 14 | 95 | 96 | -------------------------------------------------------------------------------- /src/components/ButtonDemos/BtnDisabled.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 禁用状态 4 | 5 | 6 | 12 | 13 | -------------------------------------------------------------------------------- /src/components/ButtonDemos/BtnLevel.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 设置等级 4 | 5 | 6 | 15 | 16 | -------------------------------------------------------------------------------- /src/components/ButtonDemos/BtnLoading.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 加载状态 4 | 5 | 6 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/ButtonDemos/BtnSize.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 尺寸大小 4 | 5 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/ButtonDemos/BtnType.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 基础用法 4 | 5 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /src/components/CarouselDemo.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | 78 | 79 | 84 | -------------------------------------------------------------------------------- /src/components/CarouselDemos/AnimationCarousel.vue: -------------------------------------------------------------------------------- 1 | 2 | 可关闭动画 3 | 4 | 20 | 21 | 28 | 29 | 40 | -------------------------------------------------------------------------------- /src/components/CarouselDemos/BasicCarousel.vue: -------------------------------------------------------------------------------- 1 | 2 | 基础用法 3 | 4 | 20 | 21 | 28 | 29 | 40 | -------------------------------------------------------------------------------- /src/components/CarouselDemos/Duration.vue: -------------------------------------------------------------------------------- 1 | 2 | 自定义动画时间 3 | 4 | 20 | 21 | 28 | 29 | 40 | -------------------------------------------------------------------------------- /src/components/CarouselDemos/SignCarousel.vue: -------------------------------------------------------------------------------- 1 | 2 | 指示器的控制 3 | 4 | 20 | 21 | 28 | 29 | 40 | -------------------------------------------------------------------------------- /src/components/CascaderDemo.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 80 | 81 | 86 | -------------------------------------------------------------------------------- /src/components/CascaderDemos/BasicCascader.vue: -------------------------------------------------------------------------------- 1 | 2 | 基本用法 3 | 4 | 11 | 12 | 53 | -------------------------------------------------------------------------------- /src/components/CascaderDemos/DisabledCascader.vue: -------------------------------------------------------------------------------- 1 | 2 | 禁用状态 3 | 4 | 7 | 8 | 50 | -------------------------------------------------------------------------------- /src/components/CascaderDemos/Multilayer.vue: -------------------------------------------------------------------------------- 1 | 2 | 多层嵌套 3 | 4 | 7 | 8 | 48 | -------------------------------------------------------------------------------- /src/components/CheckBoxDemo.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 56 | 57 | 62 | -------------------------------------------------------------------------------- /src/components/CheckBoxDemos/BasicCheckBox.vue: -------------------------------------------------------------------------------- 1 | 2 | 基本用法 3 | 4 | 5 | 8 | 9 | 22 | -------------------------------------------------------------------------------- /src/components/CheckBoxDemos/DisabledCheckBox.vue: -------------------------------------------------------------------------------- 1 | 2 | 禁用状态 3 | 4 | 5 | 9 | 25 | -------------------------------------------------------------------------------- /src/components/CheckBoxDemos/GroupCheckBox.vue: -------------------------------------------------------------------------------- 1 | 2 | 多选框组 3 | 4 | 13 | 14 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/CheckBoxDemos/IndeterminateCheckBox.vue: -------------------------------------------------------------------------------- 1 | 2 | 全选 3 | 4 | 5 | 14 | 66 | -------------------------------------------------------------------------------- /src/components/CollapseDemo.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 71 | 76 | -------------------------------------------------------------------------------- /src/components/CollapseDemos/AccordionCollapse.vue: -------------------------------------------------------------------------------- 1 | 2 | 手风琴模式 3 | 4 | 50 | 51 | 58 | -------------------------------------------------------------------------------- /src/components/CollapseDemos/BasicCollapse.vue: -------------------------------------------------------------------------------- 1 | 2 | 基本用法 3 | 4 | 50 | 51 | 63 | -------------------------------------------------------------------------------- /src/components/CollapseDemos/DisabledCollapse.vue: -------------------------------------------------------------------------------- 1 | 2 | 禁用状态 3 | 4 | 50 | 51 | 58 | -------------------------------------------------------------------------------- /src/components/Demo.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 50 | 51 | -------------------------------------------------------------------------------- /src/components/DialogDemo.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 105 | 106 | 111 | -------------------------------------------------------------------------------- /src/components/DialogDemos/BasicDialog.vue: -------------------------------------------------------------------------------- 1 | 2 | 基本用法 3 | 4 | 5 | 22 | 23 | 47 | -------------------------------------------------------------------------------- /src/components/DialogDemos/FooterDialog.vue: -------------------------------------------------------------------------------- 1 | 2 | 自定义页脚 3 | 4 | 5 | 32 | 33 | 64 | -------------------------------------------------------------------------------- /src/components/DrawerDemo.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 97 | 98 | 103 | -------------------------------------------------------------------------------- /src/components/DrawerDemos/BasicDrawer.vue: -------------------------------------------------------------------------------- 1 | 2 | 基本用法 3 | 4 | 20 | 21 | 39 | -------------------------------------------------------------------------------- /src/components/DrawerDemos/CustomDrawer.vue: -------------------------------------------------------------------------------- 1 | 2 | 自定义内容 3 | 4 | 15 | 16 | 34 | -------------------------------------------------------------------------------- /src/components/DrawerDemos/PlacementDrawer.vue: -------------------------------------------------------------------------------- 1 | 2 | 不同位置 3 | 4 | 23 | 24 | 61 | -------------------------------------------------------------------------------- /src/components/IconDemo.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 30 | 31 | 36 | -------------------------------------------------------------------------------- /src/components/IconDemos/basicIcon.vue: -------------------------------------------------------------------------------- 1 | 2 | 基本用法 3 | 4 | 5 | 17 | 18 | 26 | 27 | 33 | -------------------------------------------------------------------------------- /src/components/InputDemo.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 154 | 155 | 160 | -------------------------------------------------------------------------------- /src/components/InputDemos/BasicInput.vue: -------------------------------------------------------------------------------- 1 | 2 | 基本用法 3 | 4 | 5 | 8 | 9 | 27 | -------------------------------------------------------------------------------- /src/components/InputDemos/ClearableInput.vue: -------------------------------------------------------------------------------- 1 | 2 | 可清空 3 | 4 | 5 | 8 | 9 | 25 | 26 | -------------------------------------------------------------------------------- /src/components/InputDemos/DisabledInput.vue: -------------------------------------------------------------------------------- 1 | 2 | 禁用状态 3 | 4 | 5 | 8 | 9 | 25 | 26 | -------------------------------------------------------------------------------- /src/components/InputDemos/IconInput.vue: -------------------------------------------------------------------------------- 1 | 2 | 带 icon 的输入框 3 | 4 | 5 | 9 | 10 | 30 | -------------------------------------------------------------------------------- /src/components/InputDemos/ShowPassword.vue: -------------------------------------------------------------------------------- 1 | 2 | 密码框 3 | 4 | 5 | 8 | 9 | 24 | 25 | -------------------------------------------------------------------------------- /src/components/InputDemos/TextareaInput.vue: -------------------------------------------------------------------------------- 1 | 2 | 文本域 3 | 4 | 5 | 8 | 9 | 24 | 25 | -------------------------------------------------------------------------------- /src/components/LayoutDemo.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 43 | 44 | 64 | -------------------------------------------------------------------------------- /src/components/LayoutDemos/LayoutDemo1.vue: -------------------------------------------------------------------------------- 1 | 2 | 布局一 3 | 4 | 5 | 12 | 13 | 30 | 31 | 52 | -------------------------------------------------------------------------------- /src/components/LayoutDemos/LayoutDemo2.vue: -------------------------------------------------------------------------------- 1 | 2 | 布局二 3 | 4 | 5 | 15 | 16 | 35 | 36 | 65 | -------------------------------------------------------------------------------- /src/components/LayoutDemos/LayoutDemo3.vue: -------------------------------------------------------------------------------- 1 | 2 | 布局三 3 | 4 | 5 | 15 | 16 | 35 | 36 | 65 | -------------------------------------------------------------------------------- /src/components/LayoutDemos/LayoutDemo4.vue: -------------------------------------------------------------------------------- 1 | 2 | 布局四 3 | 4 | 5 | 15 | 16 | 35 | 36 | 65 | -------------------------------------------------------------------------------- /src/components/MessageDemo.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 107 | 108 | 113 | -------------------------------------------------------------------------------- /src/components/MessageDemos/BasicMessage.vue: -------------------------------------------------------------------------------- 1 | 2 | 基本用法 3 | 4 | 7 | 8 | 27 | -------------------------------------------------------------------------------- /src/components/MessageDemos/CloseMessage.vue: -------------------------------------------------------------------------------- 1 | 2 | 可关闭 3 | 4 | 10 | 11 | 32 | -------------------------------------------------------------------------------- /src/components/MessageDemos/DurationMessage.vue: -------------------------------------------------------------------------------- 1 | 2 | 自定义时长 3 | 4 | 8 | 9 | 36 | -------------------------------------------------------------------------------- /src/components/MessageDemos/TypeMessage.vue: -------------------------------------------------------------------------------- 1 | 2 | 不同的提示类型 3 | 4 | 10 | 11 | 31 | -------------------------------------------------------------------------------- /src/components/Other/Aside.vue: -------------------------------------------------------------------------------- 1 | 88 | 89 | 92 | 93 | 142 | -------------------------------------------------------------------------------- /src/components/Other/Main.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | 13 | 27 | -------------------------------------------------------------------------------- /src/components/Other/Markdown.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 19 | 20 | -------------------------------------------------------------------------------- /src/components/PagerDemo.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 110 | 111 | 116 | -------------------------------------------------------------------------------- /src/components/PagerDemos/BasicPager.vue: -------------------------------------------------------------------------------- 1 | 2 | 基本用法 3 | 4 | 7 | 8 | 27 | -------------------------------------------------------------------------------- /src/components/PagerDemos/MorePager.vue: -------------------------------------------------------------------------------- 1 | 2 | 更多 3 | 4 | 7 | 8 | 23 | -------------------------------------------------------------------------------- /src/components/PagerDemos/SimplePager.vue: -------------------------------------------------------------------------------- 1 | 2 | 简洁模式 3 | 4 | 7 | 8 | 23 | -------------------------------------------------------------------------------- /src/components/PagerDemos/SizePager.vue: -------------------------------------------------------------------------------- 1 | 2 | 迷你模式 3 | 4 | 7 | 8 | 23 | -------------------------------------------------------------------------------- /src/components/Popover/BasicPopover.vue: -------------------------------------------------------------------------------- 1 | 2 | 基本用法 3 | 4 | 5 | 13 | 14 | 23 | -------------------------------------------------------------------------------- /src/components/Popover/DirectionPopover.vue: -------------------------------------------------------------------------------- 1 | 2 | 不同方向 3 | 4 | 5 | 34 | 35 | 44 | 45 | 50 | -------------------------------------------------------------------------------- /src/components/Popover/TriggerPopover.vue: -------------------------------------------------------------------------------- 1 | 2 | 触发方式 3 | 4 | 5 | 34 | 35 | 44 | 45 | 50 | -------------------------------------------------------------------------------- /src/components/PopoverDemo.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 66 | 67 | 72 | -------------------------------------------------------------------------------- /src/components/RadioDemo.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 53 | 54 | 59 | -------------------------------------------------------------------------------- /src/components/RadioDemos/BasicRadio.vue: -------------------------------------------------------------------------------- 1 | 2 | 基本用法 3 | 4 | 5 | 9 | 10 | 24 | -------------------------------------------------------------------------------- /src/components/RadioDemos/DisabledRadio.vue: -------------------------------------------------------------------------------- 1 | 2 | 禁用 3 | 4 | 5 | 9 | 10 | 24 | -------------------------------------------------------------------------------- /src/components/RadioDemos/RadioGroup.vue: -------------------------------------------------------------------------------- 1 | 2 | 单选框组 3 | 4 | 11 | 12 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/components/RateDemo.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 124 | 125 | 128 | -------------------------------------------------------------------------------- /src/components/RateDemos/BasicRate.vue: -------------------------------------------------------------------------------- 1 | 2 | 基本用法 3 | 4 | 5 | 8 | 9 | 30 | -------------------------------------------------------------------------------- /src/components/RateDemos/ClearRate.vue: -------------------------------------------------------------------------------- 1 | 2 | 可清除 3 | 4 | 5 | 8 | 9 | 26 | -------------------------------------------------------------------------------- /src/components/RateDemos/DIsableRate.vue: -------------------------------------------------------------------------------- 1 | 2 | 只读 3 | 4 | 5 | 8 | 9 | 26 | -------------------------------------------------------------------------------- /src/components/RateDemos/HalfRate.vue: -------------------------------------------------------------------------------- 1 | 2 | 支持半选 3 | 4 | 5 | 8 | 9 | 26 | -------------------------------------------------------------------------------- /src/components/RateDemos/IconRate.vue: -------------------------------------------------------------------------------- 1 | 2 | 替换icon 3 | 4 | 5 | 8 | 9 | 26 | -------------------------------------------------------------------------------- /src/components/RateDemos/TextRate.vue: -------------------------------------------------------------------------------- 1 | 2 | 辅助文字 3 | 4 | 5 | 8 | 9 | 26 | -------------------------------------------------------------------------------- /src/components/SpinDemo.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 46 | 47 | 52 | -------------------------------------------------------------------------------- /src/components/SpinDemos/BasicSpin.vue: -------------------------------------------------------------------------------- 1 | 2 | 基础用法 3 | 4 | 5 | 8 | 9 | 15 | -------------------------------------------------------------------------------- /src/components/SpinDemos/SizeSpin.vue: -------------------------------------------------------------------------------- 1 | 2 | 各种大小 3 | 4 | 5 | 10 | 11 | 18 | -------------------------------------------------------------------------------- /src/components/SpinDemos/TextSpin.vue: -------------------------------------------------------------------------------- 1 | 2 | 自定义描述文案 3 | 4 | 5 | 9 | 10 | 16 | -------------------------------------------------------------------------------- /src/components/SwitchDemo.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 101 | 102 | 140 | -------------------------------------------------------------------------------- /src/components/SwitchDemos/DefaultValue.vue: -------------------------------------------------------------------------------- 1 | 2 | 基础用法 3 | 4 | 5 | 9 | 10 | 22 | -------------------------------------------------------------------------------- /src/components/SwitchDemos/Disabled.vue: -------------------------------------------------------------------------------- 1 | 2 | 禁用状态 3 | 4 | 5 | 9 | 10 | 22 | -------------------------------------------------------------------------------- /src/components/SwitchDemos/Loading.vue: -------------------------------------------------------------------------------- 1 | 2 | 加载状态 3 | 4 | 5 | 8 | 9 | 22 | -------------------------------------------------------------------------------- /src/components/SwitchDemos/Size.vue: -------------------------------------------------------------------------------- 1 | 2 | 尺寸大小 3 | 4 | 5 | 10 | 11 | 24 | -------------------------------------------------------------------------------- /src/components/TabsDemo.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 68 | 69 | 74 | -------------------------------------------------------------------------------- /src/components/TabsDemos/BasicDemo.vue: -------------------------------------------------------------------------------- 1 | 2 | 基础用法 3 | 4 | 5 | 12 | 13 | 26 | -------------------------------------------------------------------------------- /src/components/TabsDemos/DisabledTabs.vue: -------------------------------------------------------------------------------- 1 | 2 | 禁用 3 | 4 | 5 | 12 | 13 | 26 | -------------------------------------------------------------------------------- /src/components/TabsDemos/VerticalTabs.vue: -------------------------------------------------------------------------------- 1 | 2 | 纵向 3 | 4 | 5 | 12 | 13 | 26 | -------------------------------------------------------------------------------- /src/lib/Affix.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 61 | 62 | 67 | -------------------------------------------------------------------------------- /src/lib/Button.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 50 | 51 | -------------------------------------------------------------------------------- /src/lib/Carousel/CarouselItem.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 62 | 63 | 92 | -------------------------------------------------------------------------------- /src/lib/Cascader/Cascader.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 101 | 102 | 136 | -------------------------------------------------------------------------------- /src/lib/Cascader/CascaderItems.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 104 | 105 | 153 | -------------------------------------------------------------------------------- /src/lib/CheckBox/CheckBox.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 48 | 49 | 75 | -------------------------------------------------------------------------------- /src/lib/CheckBox/CheckBoxGroup.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /src/lib/Collapse/Collapse.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 76 | 83 | -------------------------------------------------------------------------------- /src/lib/Collapse/CollapseItem.vue: -------------------------------------------------------------------------------- 1 | 35 | 36 | 98 | 99 | 157 | -------------------------------------------------------------------------------- /src/lib/Dialog.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 60 | 61 | 137 | -------------------------------------------------------------------------------- /src/lib/Drawer.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 74 | 75 | 233 | -------------------------------------------------------------------------------- /src/lib/Icon.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 18 | 19 | 28 | -------------------------------------------------------------------------------- /src/lib/Input.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 135 | 136 | 199 | -------------------------------------------------------------------------------- /src/lib/Layout/Content.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /src/lib/Layout/Footer.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/lib/Layout/Header.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | -------------------------------------------------------------------------------- /src/lib/Layout/Layout.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 29 | 30 | 40 | -------------------------------------------------------------------------------- /src/lib/Layout/Side.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | -------------------------------------------------------------------------------- /src/lib/Layout/index.ts: -------------------------------------------------------------------------------- 1 | export { default as Content } from "./Content.vue"; 2 | export { default as Footer } from "./Footer.vue"; 3 | export { default as Header } from "./Header.vue"; 4 | export { default as Layout } from "./Layout.vue"; 5 | export { default as Side } from "./Side.vue"; 6 | 7 | -------------------------------------------------------------------------------- /src/lib/Message/Message.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 78 | 79 | 169 | -------------------------------------------------------------------------------- /src/lib/Message/index.ts: -------------------------------------------------------------------------------- 1 | import { default as MessageCom } from "./Message.vue"; 2 | import { createApp, h } from "vue"; 3 | export const Message = (options) => { 4 | const { message, type, duration, showClose, onClose } = options; 5 | const div = document.createElement("div"); 6 | document.body.appendChild(div); 7 | const close = () => { 8 | app.unmount(div); 9 | div.remove(); 10 | }; 11 | const app = createApp({ 12 | render() { 13 | return h( 14 | MessageCom, 15 | { 16 | visible: true, 17 | duration, 18 | message, 19 | type, 20 | showClose, 21 | onClose, 22 | "onUpdate:visible": (newVisible) => { 23 | if (newVisible === false) { 24 | close(); 25 | } 26 | }, 27 | }, 28 | { 29 | } 30 | ); 31 | }, 32 | }); 33 | app.mount(div); 34 | }; 35 | -------------------------------------------------------------------------------- /src/lib/Pager.vue: -------------------------------------------------------------------------------- 1 | 29 | 116 | 208 | -------------------------------------------------------------------------------- /src/lib/Radio/Radio.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 51 | 52 | 78 | -------------------------------------------------------------------------------- /src/lib/Radio/RadioGroup.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | -------------------------------------------------------------------------------- /src/lib/Rate.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 123 | 124 | 233 | -------------------------------------------------------------------------------- /src/lib/Spin.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 33 | 34 | 71 | 72 | -------------------------------------------------------------------------------- /src/lib/Switch.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 36 | 37 | -------------------------------------------------------------------------------- /src/lib/Tab.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 21 | -------------------------------------------------------------------------------- /src/lib/Table.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 31 | 32 | 67 | -------------------------------------------------------------------------------- /src/lib/Tabs.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 113 | 114 | 183 | -------------------------------------------------------------------------------- /src/lib/index.ts: -------------------------------------------------------------------------------- 1 | export {default as Switch } from "./Switch.vue"; 2 | export {default as Button } from "./Button.vue"; 3 | export {default as Table } from "./Table.vue"; 4 | export {default as Tabs } from "./Tabs.vue"; 5 | export {default as Tab } from "./Tab.vue"; 6 | export {default as Dialog } from "./Dialog.vue"; 7 | export {default as Icon } from "./Icon.vue"; 8 | export {default as Input} from "./Input.vue"; 9 | export {default as Rate} from "./Rate.vue"; 10 | export {Content, Footer, Header, Layout, Side} from "./Layout"; 11 | export {default as Spin} from "./Spin.vue"; 12 | export {default as Radio} from "./Radio/Radio.vue"; 13 | export {default as RadioGroup} from "./Radio/RadioGroup.vue"; 14 | export {default as CheckBox} from "./CheckBox/CheckBox.vue"; 15 | export {default as CheckBoxGroup} from "./CheckBox/CheckBoxGroup.vue"; 16 | export {default as Carousel} from "./Carousel/Carousel.vue"; 17 | export {default as CarouselItem} from "./Carousel/CarouselItem.vue"; 18 | export {default as Cascader} from "./Cascader/Cascader.vue"; 19 | export {default as CascaderItems} from "./Cascader/CascaderItems.vue"; 20 | export {default as Collapse} from "./Collapse/Collapse.vue"; 21 | export {default as CollapseItem} from "./Collapse/CollapseItem.vue"; 22 | export { Message } from "./Message/index"; 23 | export {default as Affix} from "./Affix.vue"; 24 | export {default as Drawer} from "./Drawer.vue"; 25 | export {default as Pager} from "./Pager.vue"; 26 | export {default as Popover} from "./Popover.vue"; 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import "./styles/le.scss"; 2 | import "./styles/index.scss"; 3 | // @ts-ignore 4 | import { createApp } from "vue"; 5 | // @ts-ignore 6 | import App from "./App.vue"; 7 | // @ts-ignore 8 | import { router } from "./router"; 9 | 10 | import "github-markdown-css"; 11 | 12 | const app = createApp(App); 13 | app.use(router); 14 | app.mount("#app"); -------------------------------------------------------------------------------- /src/markdown/get-started.md: -------------------------------------------------------------------------------- 1 | ## 安装 2 | 3 | 打开终端运行下列命令： 4 | 5 | ```js 6 | npm install le-vue-ui 7 | // 或者 8 | yarn add le-vue-ui 9 | ``` 10 | 11 | ## 引入组件 12 | 13 | ```js 14 | import { Button, Switch, Radio } from "le-vue-ui" 15 | import "le-vue-ui/dist/lib/leUI.esm.css" 16 | ``` 17 | 18 | ## Vue 单文件组件 19 | 20 | ```html 21 | 26 | 32 | ``` -------------------------------------------------------------------------------- /src/markdown/intro.md: -------------------------------------------------------------------------------- 1 | ## Le-UI 2 | 3 | > Le-Vue-UI是一款基于 Vue 3.0 和 TypeScript 编写的 UI 组件库。 4 | 5 | 本组件库旨在学习Vue3新特性以及熟悉TypeScript语法，可以作为学习项目，因此不建议在生产环境中使用。 6 | 7 | ## 特性 8 | * 基于最新的Vue3 Composition API 编写 9 | * ES2015+的支持以及严格的使用TypeScript编写 10 | * 采用Rollup配置打包 11 | * 友好的 API ，自由灵活地使用空间 12 | * 源码简单简洁，阅读无障碍 13 | * 细致、漂亮的 UI 14 | 15 | ## 版本 16 | * 0.0.4 beta 17 | 18 | ## 兼容性 19 | * 基于Vue js3.0 20 | * 现代浏览器及IE10+ 21 | * ES2015+ 22 | 23 | ## 相关链接 24 | * [Vuejs官方](https://cn.vuejs.org/index.html) 25 | * [Vite官方](https://github.com/vitejs/vite) 26 | * [Rollup.js](https://www.rollupjs.com/) 27 | * [TypeScript](https://www.typescriptlang.org/) 28 | -------------------------------------------------------------------------------- /src/router.ts: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import { createRouter, createWebHashHistory } from 'vue-router' 3 | import Home from './views/Home.vue'; 4 | import Doc from './views/Doc.vue'; 5 | import Switch from './components/SwitchDemo.vue'; 6 | import Input from './components/InputDemo.vue'; 7 | import Button from "./components/ButtonDemo.vue"; 8 | import Dialog from "./components/DialogDemo.vue"; 9 | import Tabs from "./components/TabsDemo.vue"; 10 | import Icon from "./components/IconDemo.vue"; 11 | import Rate from "./components/RateDemo.vue"; 12 | import Layout from "./components/LayoutDemo.vue"; 13 | import Spin from "./components/SpinDemo.vue"; 14 | import Radio from "./components/RadioDemo.vue"; 15 | import CheckBox from "./components/CheckBoxDemo.vue"; 16 | import Collapse from "./components/CollapseDemo.vue"; 17 | import Affix from "./components/AffixDemo.vue"; 18 | import Drawer from "./components/DrawerDemo.vue" 19 | import Message from "./components/MessageDemo.vue" 20 | import Carousel from "./components/CarouselDemo.vue" 21 | import Pager from "./components/PagerDemo.vue" 22 | import Popover from "./components/PopoverDemo.vue" 23 | // import DatePicker from "./components/DatePickerDemo.vue" 24 | import Cascader from "./components/CascaderDemo.vue" 25 | 26 | import intro from "./markdown/intro.md"; 27 | import getStarted from "./markdown/get-started.md" 28 | 29 | import { h } from 'vue'; 30 | import Markdown from './components/Other/Markdown.vue'; 31 | 32 | const routerHistory = createWebHashHistory() 33 | const md = filename => h(Markdown, { content: filename, key: filename }) 34 | export const router = createRouter({ 35 | history: routerHistory, 36 | linkActiveClass: 'active', 37 | routes: [{ 38 | path: '/', 39 | component: Home 40 | }, 41 | { 42 | path: '/doc', 43 | component: Doc, 44 | children: [ 45 | { path: "", redirect: '/doc/intro' }, 46 | { 47 | path: "intro", 48 | component: md(intro) 49 | }, 50 | { 51 | path: "get-started", 52 | component: md(getStarted) 53 | }, 54 | { 55 | path: "switch", 56 | component: Switch 57 | }, 58 | { 59 | path: "switch", 60 | component: Switch 61 | }, 62 | { 63 | path: "input", 64 | component: Input 65 | }, 66 | { 67 | path: "button", 68 | component: Button 69 | }, 70 | { 71 | path: "dialog", 72 | component: Dialog 73 | }, 74 | { 75 | path: "tabs", 76 | component: Tabs 77 | }, 78 | { 79 | path: "icon", 80 | component: Icon 81 | }, 82 | { 83 | path: "rate", 84 | component: Rate 85 | }, 86 | { 87 | path: "layout", 88 | component: Layout 89 | }, 90 | { 91 | path: "spin", 92 | component: Spin 93 | }, 94 | { 95 | path: "radio", 96 | component: Radio 97 | }, 98 | { 99 | path: "checkBox", 100 | component: CheckBox 101 | }, 102 | { 103 | path: "collapse", 104 | component: Collapse 105 | }, 106 | { 107 | path: "affix", 108 | component: Affix 109 | }, 110 | { 111 | path: "drawer", 112 | component: Drawer 113 | }, 114 | { 115 | path: "message", 116 | component: Message 117 | }, 118 | { 119 | path: "carousel", 120 | component: Carousel 121 | }, 122 | { 123 | path: 'pager', 124 | component: Pager 125 | }, 126 | { 127 | path: 'popover', 128 | component: Popover 129 | }, 130 | // { 131 | // path: 'datePicker', 132 | // component: DatePicker 133 | // }, 134 | { 135 | path: 'cascader', 136 | component: Cascader 137 | } 138 | ] 139 | } 140 | ] 141 | }) 142 | 143 | router.afterEach((to, from) => { 144 | if (to.fullPath === '/doc/get-started') { 145 | // if(location.href.indexOf("#reloaded")==-1){ 146 | // location.href=location.href+"#reloaded"; 147 | // location.reload(); 148 | // } 149 | } 150 | }) 151 | -------------------------------------------------------------------------------- /src/shims-vue.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | //@ts-ignore 3 | import { ComponentOptions } from 'vue' 4 | const componentOptions: ComponentOptions 5 | export default componentOptions 6 | } 7 | 8 | declare module '*.md' { 9 | const str:string 10 | export default str 11 | } -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | h1, 8 | h2, 9 | h3, 10 | h4, 11 | h5, 12 | h6 { 13 | font-weight: normal; 14 | } 15 | 16 | a { 17 | text-decoration: none; 18 | } 19 | 20 | body { 21 | font-size: 16px; 22 | font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, 23 | "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", 24 | "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", 25 | "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", 26 | SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; 27 | } 28 | -------------------------------------------------------------------------------- /src/styles/le.scss: -------------------------------------------------------------------------------- 1 | [class^="le-"], 2 | [class*=" le-"] { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | font-size: 16px; 7 | // font-family -> https://github.com/zenozeng/fonts.css/ 8 | font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, 9 | "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", 10 | "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", 11 | "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", 12 | SimHei, "WenQuanYi Zen Hei Sharp", sans-serif; 13 | } 14 | 15 | @keyframes le-spin { 16 | 0% { 17 | transform: rotate(0deg); 18 | } 19 | 20 | 100% { 21 | transform: rotate(360deg); 22 | } 23 | } 24 | .markdown-body { 25 | width: 90%; 26 | pre { 27 | background-color: #2d2d2d !important; 28 | } 29 | } 30 | 31 | 32 | // 全局scss变量 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/views/Doc.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 61 | 62 | -------------------------------------------------------------------------------- /src/views/Home.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 33 | 34 | -------------------------------------------------------------------------------- /src/views/TopNav.vue: -------------------------------------------------------------------------------- 1 | 20 | 38 | 39 | -------------------------------------------------------------------------------- /utils.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * 判断两个字符串数组是否相等 3 | */ 4 | export const isSameStringArr = (arr1:string[], arr2:string[]) => { 5 | let hash = JSON.parse(JSON.stringify(arr2)) 6 | if (arr1.length === arr2.length) { 7 | for(let i = 0; i < arr1.length;i++) { 8 | const index = hash.indexOf(arr1[i]); 9 | if (index > -1) { 10 | hash.splice(index, 1); 11 | } else { 12 | return false; 13 | } 14 | } 15 | return true; 16 | } 17 | return false; 18 | } -------------------------------------------------------------------------------- /vite.config.ts: -------------------------------------------------------------------------------- 1 | // @ts-nocheck 2 | import { md } from "./plugins/md"; 3 | import fs from 'fs' 4 | import {baseParse} from '@vue/compiler-core' 5 | 6 | export default { 7 | base: "./", 8 | assetsDir: "", 9 | plugins: [md()], 10 | vueCustomBlockTransforms: { 11 | demo: (options) => { 12 | const { code, path } = options 13 | const file = fs.readFileSync(path).toString() 14 | const parsed = baseParse(file).children.find(n => n.tag === 'demo') 15 | const title = parsed.children[0].content 16 | const main = file.split(parsed.loc.source).join('').trim() 17 | return `export default function (Component) { 18 | Component.__sourceCode = ${ 19 | JSON.stringify(main) 20 | } 21 | Component.__sourceCodeTitle = ${JSON.stringify(title)} 22 | }`.trim() 23 | } 24 | } 25 | }; --------------------------------------------------------------------------------