├── .env ├── .gitignore ├── .husky ├── commit-msg └── pre-commit ├── .npmignore ├── .prettierrc.json ├── .vscode ├── extensions.json └── settings.json ├── README.md ├── README.zh-CN.md ├── commitlint.config.js ├── components.d.ts ├── components ├── alert │ ├── Alert.vue │ └── index.ts ├── avatar │ ├── Avatar.vue │ └── index.ts ├── backtop │ ├── BackTop.vue │ └── index.ts ├── badge │ ├── Badge.vue │ └── index.ts ├── breadcrumb │ ├── Breadcrumb.vue │ └── index.ts ├── button │ ├── Button.vue │ └── index.ts ├── calendar │ ├── Calendar.vue │ └── index.ts ├── card │ ├── Card.vue │ └── index.ts ├── carousel │ ├── Carousel.vue │ └── index.ts ├── cascader │ ├── Cascader.vue │ └── index.ts ├── checkbox │ ├── Checkbox.vue │ └── index.ts ├── collapse │ ├── Collapse.vue │ └── index.ts ├── colorpicker │ ├── ColorPicker.vue │ └── index.ts ├── components.ts ├── configprovider │ ├── ConfigProvider.vue │ └── index.ts ├── countdown │ ├── Countdown.vue │ └── index.ts ├── datepicker │ ├── DatePicker.vue │ └── index.ts ├── descriptions │ ├── descriptions │ │ ├── Descriptions.vue │ │ └── index.ts │ ├── descriptionsitem │ │ ├── DescriptionsItem.vue │ │ └── index.ts │ └── index.ts ├── dialog │ ├── Dialog.vue │ └── index.ts ├── divider │ ├── Divider.vue │ └── index.ts ├── drawer │ ├── Drawer.vue │ └── index.ts ├── ellipsis │ ├── Ellipsis.vue │ └── index.ts ├── empty │ ├── Empty.vue │ └── index.ts ├── flex │ ├── Flex.vue │ └── index.ts ├── floatbutton │ ├── FloatButton.vue │ └── index.ts ├── gradienttext │ ├── GradientText.vue │ └── index.ts ├── grid │ ├── col │ │ ├── Col.vue │ │ └── index.ts │ ├── index.ts │ └── row │ │ ├── Row.vue │ │ └── index.ts ├── highlight │ ├── Highlight.vue │ └── index.ts ├── image │ ├── Image.vue │ └── index.ts ├── index.ts ├── input │ ├── Input.vue │ └── index.ts ├── inputnumber │ ├── InputNumber.vue │ └── index.ts ├── inputsearch │ ├── InputSearch.vue │ └── index.ts ├── list │ ├── index.ts │ ├── list │ │ ├── List.vue │ │ └── index.ts │ └── listitem │ │ ├── ListItem.vue │ │ └── index.ts ├── loadingbar │ ├── LoadingBar.vue │ └── index.ts ├── message │ ├── Message.vue │ └── index.ts ├── modal │ ├── Modal.vue │ └── index.ts ├── notification │ ├── Notification.vue │ └── index.ts ├── numberanimation │ ├── NumberAnimation.vue │ └── index.ts ├── pagination │ ├── Pagination.vue │ └── index.ts ├── popconfirm │ ├── Popconfirm.vue │ └── index.ts ├── popover │ ├── Popover.vue │ └── index.ts ├── progress │ ├── Progress.vue │ └── index.ts ├── qrcode │ ├── QRCode.vue │ └── index.ts ├── radio │ ├── Radio.vue │ └── index.ts ├── rate │ ├── Rate.vue │ └── index.ts ├── result │ ├── Result.vue │ └── index.ts ├── scrollbar │ ├── Scrollbar.vue │ └── index.ts ├── segmented │ ├── Segmented.vue │ └── index.ts ├── select │ ├── Select.vue │ └── index.ts ├── skeleton │ ├── Skeleton.vue │ └── index.ts ├── slider │ ├── Slider.vue │ └── index.ts ├── space │ ├── Space.vue │ └── index.ts ├── spin │ ├── Spin.vue │ └── index.ts ├── statistic │ ├── Statistic.vue │ └── index.ts ├── steps │ ├── Steps.vue │ └── index.ts ├── style │ └── global.less ├── swiper │ ├── Swiper.vue │ └── index.ts ├── switch │ ├── Switch.vue │ └── index.ts ├── table │ ├── Table.vue │ └── index.ts ├── tabs │ ├── Tabs.vue │ └── index.ts ├── tag │ ├── Tag.vue │ └── index.ts ├── textarea │ ├── Textarea.vue │ └── index.ts ├── textscroll │ ├── TextScroll.vue │ └── index.ts ├── timeline │ ├── Timeline.vue │ └── index.ts ├── tooltip │ ├── Tooltip.vue │ └── index.ts ├── upload │ ├── Upload.vue │ └── index.ts ├── utils │ ├── index.ts │ ├── resolver.ts │ └── type.ts ├── video │ ├── Video.vue │ └── index.ts ├── waterfall │ ├── Waterfall.vue │ └── index.ts └── watermark │ ├── Watermark.vue │ └── index.ts ├── docs ├── .vitepress │ ├── cache │ │ └── deps │ │ │ ├── @ant-design_colors.js │ │ │ ├── @ant-design_colors.js.map │ │ │ ├── @ant-design_icons-vue.js │ │ │ ├── @ant-design_icons-vue.js.map │ │ │ ├── @ctrl_tinycolor.js │ │ │ ├── @ctrl_tinycolor.js.map │ │ │ ├── @vuepic_vue-datepicker.js │ │ │ ├── @vuepic_vue-datepicker.js.map │ │ │ ├── @vueuse_core.js │ │ │ ├── @vueuse_core.js.map │ │ │ ├── _metadata.json │ │ │ ├── chunk-B3E4SFXA.js │ │ │ ├── chunk-B3E4SFXA.js.map │ │ │ ├── chunk-B4YH5ZTW.js │ │ │ ├── chunk-B4YH5ZTW.js.map │ │ │ ├── chunk-JVWSFFO4.js │ │ │ ├── chunk-JVWSFFO4.js.map │ │ │ ├── chunk-XMV2FRTN.js │ │ │ ├── chunk-XMV2FRTN.js.map │ │ │ ├── date-fns.js │ │ │ ├── date-fns.js.map │ │ │ ├── package.json │ │ │ ├── qrcode.js │ │ │ ├── qrcode.js.map │ │ │ ├── seemly.js │ │ │ ├── seemly.js.map │ │ │ ├── swiper_modules.js │ │ │ ├── swiper_modules.js.map │ │ │ ├── swiper_vue.js │ │ │ ├── swiper_vue.js.map │ │ │ ├── vitepress___@vue_devtools-api.js │ │ │ ├── vitepress___@vue_devtools-api.js.map │ │ │ ├── vitepress___@vueuse_core.js │ │ │ ├── vitepress___@vueuse_core.js.map │ │ │ ├── vue.js │ │ │ └── vue.js.map │ ├── config.ts │ ├── dist │ │ ├── _headers │ │ ├── amazing-icon.svg │ │ └── amazing-logo.svg │ ├── theme │ │ ├── components │ │ │ ├── ArrowDownSVG.vue │ │ │ ├── GlobalElement.vue │ │ │ ├── MailSVG.vue │ │ │ └── VersionDateTag.vue │ │ ├── env.d.ts │ │ ├── global.less │ │ └── index.ts │ └── utils │ │ └── fetchVersion.ts ├── guide │ ├── changelog.md │ ├── components │ │ ├── alert.md │ │ ├── avatar.md │ │ ├── backtop.md │ │ ├── badge.md │ │ ├── breadcrumb.md │ │ ├── button.md │ │ ├── calendar.md │ │ ├── card.md │ │ ├── carousel.md │ │ ├── cascader.md │ │ ├── checkbox.md │ │ ├── collapse.md │ │ ├── colorpicker.md │ │ ├── configprovider.md │ │ ├── countdown.md │ │ ├── datepicker.md │ │ ├── descriptions.md │ │ ├── dialog.md │ │ ├── divider.md │ │ ├── drawer.md │ │ ├── ellipsis.md │ │ ├── empty.md │ │ ├── flex.md │ │ ├── floatbutton.md │ │ ├── gradienttext.md │ │ ├── grid.md │ │ ├── highlight.md │ │ ├── image.md │ │ ├── input.md │ │ ├── inputnumber.md │ │ ├── inputsearch.md │ │ ├── list.md │ │ ├── loadingbar.md │ │ ├── message.md │ │ ├── modal.md │ │ ├── notification.md │ │ ├── numberanimation.md │ │ ├── pagination.md │ │ ├── popconfirm.md │ │ ├── popover.md │ │ ├── progress.md │ │ ├── qrcode.md │ │ ├── radio.md │ │ ├── rate.md │ │ ├── result.md │ │ ├── scrollbar.md │ │ ├── segmented.md │ │ ├── select.md │ │ ├── skeleton.md │ │ ├── slider.md │ │ ├── space.md │ │ ├── spin.md │ │ ├── statistic.md │ │ ├── steps.md │ │ ├── swiper.md │ │ ├── switch.md │ │ ├── table.md │ │ ├── tabs.md │ │ ├── tag.md │ │ ├── textarea.md │ │ ├── textscroll.md │ │ ├── timeline.md │ │ ├── tooltip.md │ │ ├── upload.md │ │ ├── video.md │ │ ├── waterfall.md │ │ └── watermark.md │ ├── customize.md │ ├── features.md │ ├── ondemand.md │ ├── started.md │ └── template.md ├── index.md ├── public │ ├── _headers │ ├── alipay.jpg │ ├── amazing-icon.svg │ ├── amazing-logo.svg │ ├── avatar.png │ ├── avatar_1.jpeg │ ├── avatar_2.jpg │ ├── avatar_3.png │ ├── avatar_4.png │ ├── avatar_5.png │ └── wechat.jpg ├── sponsor │ └── charge.md └── utils │ ├── functions │ ├── add.md │ ├── date-format.md │ ├── debounce.md │ ├── download-file.md │ ├── event-listener.md │ ├── format-number.md │ ├── fps.md │ ├── injection.md │ ├── media-query.md │ ├── mutation-observer.md │ ├── options-supported.md │ ├── raf-timeout.md │ ├── resize-observer.md │ ├── scroll.md │ ├── slots-exist.md │ ├── throttle.md │ └── toggle-dark.md │ └── started.md ├── eslint.config.js ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public ├── amazing-icon.svg └── favicon.ico ├── scripts ├── deploy.sh ├── publish.sh └── push.sh ├── src ├── App.vue ├── assets │ └── less │ │ └── global.less ├── layouts │ └── GlobalLayout.vue ├── main.ts ├── router │ └── index.ts └── views │ ├── alert │ ├── Index.vue │ └── index.ts │ ├── avatar │ ├── Index.vue │ └── index.ts │ ├── backTop │ ├── Index.vue │ └── index.ts │ ├── badge │ ├── Index.vue │ └── index.ts │ ├── breadcrumb │ ├── Index.vue │ └── index.ts │ ├── button │ ├── Index.vue │ └── index.ts │ ├── calendar │ ├── Index.vue │ └── index.ts │ ├── card │ ├── Index.vue │ └── index.ts │ ├── carousel │ ├── Index.vue │ └── index.ts │ ├── cascader │ ├── Index.vue │ └── index.ts │ ├── checkbox │ ├── Index.vue │ └── index.ts │ ├── collapse │ ├── Index.vue │ └── index.ts │ ├── colorPicker │ ├── Index.vue │ └── index.ts │ ├── configProvider │ ├── Index.vue │ └── index.ts │ ├── countdown │ ├── Index.vue │ └── index.ts │ ├── datePicker │ ├── Index.vue │ └── index.ts │ ├── descriptions │ ├── Index.vue │ └── index.ts │ ├── dialog │ ├── Index.vue │ └── index.ts │ ├── divider │ ├── Index.vue │ └── index.ts │ ├── drawer │ ├── Index.vue │ └── index.ts │ ├── ellipsis │ ├── Index.vue │ └── index.ts │ ├── empty │ ├── Index.vue │ └── index.ts │ ├── exception │ ├── Index.vue │ └── index.ts │ ├── flex │ ├── Index.vue │ └── index.ts │ ├── floatButton │ ├── Index.vue │ └── index.ts │ ├── gradientText │ ├── Index.vue │ └── index.ts │ ├── grid │ ├── Index.vue │ └── index.ts │ ├── highlight │ ├── Index.vue │ └── index.ts │ ├── home │ ├── Index.vue │ └── index.ts │ ├── image │ ├── Index.vue │ └── index.ts │ ├── input │ ├── Index.vue │ └── index.ts │ ├── inputNumber │ ├── Index.vue │ └── index.ts │ ├── inputSearch │ ├── Index.vue │ └── index.ts │ ├── layout │ ├── Index.vue │ └── index.ts │ ├── list │ ├── Index.vue │ └── index.ts │ ├── loadingBar │ ├── Index.vue │ └── index.ts │ ├── message │ ├── Index.vue │ └── index.ts │ ├── modal │ ├── Index.vue │ └── index.ts │ ├── notification │ ├── Index.vue │ └── index.ts │ ├── numberAnimation │ ├── Index.vue │ └── index.ts │ ├── pagination │ ├── Index.vue │ └── index.ts │ ├── popconfirm │ ├── Index.vue │ └── index.ts │ ├── popover │ ├── Index.vue │ └── index.ts │ ├── progress │ ├── Index.vue │ └── index.ts │ ├── qrcode │ ├── Index.vue │ └── index.ts │ ├── radio │ ├── Index.vue │ └── index.ts │ ├── rate │ ├── Index.vue │ └── index.ts │ ├── result │ ├── Index.vue │ └── index.ts │ ├── scrollbar │ ├── Index.vue │ └── index.ts │ ├── segmented │ ├── Index.vue │ └── index.ts │ ├── select │ ├── Index.vue │ └── index.ts │ ├── skeleton │ ├── Index.vue │ └── index.ts │ ├── slider │ ├── Index.vue │ └── index.ts │ ├── space │ ├── Index.vue │ └── index.ts │ ├── spin │ ├── Index.vue │ └── index.ts │ ├── statistic │ ├── Index.vue │ └── index.ts │ ├── steps │ ├── Index.vue │ └── index.ts │ ├── swiper │ ├── Index.vue │ └── index.ts │ ├── switch │ ├── Index.vue │ └── index.ts │ ├── table │ ├── Index.vue │ └── index.ts │ ├── tabs │ ├── Index.vue │ └── index.ts │ ├── tag │ ├── Index.vue │ └── index.ts │ ├── textScroll │ ├── Index.vue │ └── index.ts │ ├── textarea │ ├── Index.vue │ └── index.ts │ ├── timeline │ ├── Index.vue │ └── index.ts │ ├── timepicker │ ├── Index.vue │ └── index.ts │ ├── tooltip │ ├── Index.vue │ └── index.ts │ ├── upload │ ├── Index.vue │ ├── index.ts │ ├── sliceFile.ts │ └── worker.ts │ ├── video │ ├── Index.vue │ └── index.ts │ ├── waterfall │ ├── Index.vue │ └── index.ts │ └── watermark │ ├── Index.vue │ └── index.ts ├── stats.html ├── tsconfig.app.json ├── tsconfig.dts.json ├── tsconfig.json ├── tsconfig.node.json ├── types └── env.d.ts └── vite.config.ts /.env: -------------------------------------------------------------------------------- 1 | # spa-title 2 | VITE_GLOB_APP_TITLE = Vue Amazing UI 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | # components 13 | dist 14 | es 15 | lib 16 | *.mp4 17 | dist-ssr 18 | coverage 19 | *.local 20 | .npmrc 21 | 22 | /cypress/videos/ 23 | /cypress/screenshots/ 24 | 25 | # Editor directories and files 26 | .vscode/* 27 | !.vscode/extensions.json 28 | !.vscode/settings.json 29 | .idea 30 | *.suo 31 | *.ntvs* 32 | *.njsproj 33 | *.sln 34 | *.sw? 35 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | # 在用户输入提交信息后触发，用于校验提交信息的格式，并显式指定配置路径 2 | npx --no-install commitlint --config commitlint.config.js --edit "$1" 3 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | # 在 git commit 命令执行前，但在用户输入提交信息后触发 2 | npx lint-staged 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # 只有编译后的 dist 目录、package.json、README.md是需要被发布的 2 | # 忽略目录 3 | .vite/ 4 | .DS_Store 5 | .vscode/ 6 | components/ 7 | docs/ 8 | node_modules 9 | public/ 10 | scripts/ 11 | src/ 12 | 13 | # 忽略指定文件 14 | .eslintrc.cjs 15 | .gitignore 16 | .npmignore 17 | .npmrc 18 | .prettierrc.json 19 | components.d.ts 20 | env.d.ts 21 | index.html 22 | pnpm-lock.yaml 23 | stats.html 24 | tsconfig.config.json 25 | tsconfig.json 26 | vite.config.ts 27 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/prettierrc", 3 | "singleQuote": true, 4 | "semi": false, 5 | "tabWidth": 2, 6 | "trailingComma": "none", 7 | "endOfLine": "auto", 8 | "printWidth": 120, 9 | "proseWrap": "never", 10 | "arrowParens": "always", 11 | "htmlWhitespaceSensitivity": "strict", 12 | "embeddedLanguageFormatting": "auto" 13 | } 14 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"] 3 | } 4 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "editor.cursorBlinking": "expand" // 光标闪烁 3 | } -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | // commitlint.config.js 2 | import { resolve } from 'path' 3 | import { readFileSync } from 'fs' 4 | 5 | // 动态获取 package.json 的 type 字段 6 | const pkg = JSON.parse(readFileSync(resolve(process.cwd(), 'package.json'), 'utf-8')) 7 | 8 | export default { 9 | extends: ['@commitlint/config-conventional'], 10 | rules: { 11 | 'type-enum': [2, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore', 'revert', 'perf']], 12 | 'header-max-length': [0, 'always', 120] 13 | }, 14 | // ESM 兼容配置 15 | parserPreset: { 16 | parserOpts: { 17 | // 解决 ESM 下的路径问题 18 | ...(pkg.type === 'module' ? { sourceType: 'module' } : {}) 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /components.d.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | // @ts-nocheck 3 | // Generated by unplugin-vue-components 4 | // Read more: https://github.com/vuejs/core/pull/3399 5 | // biome-ignore lint: disable 6 | export {} 7 | 8 | /* prettier-ignore */ 9 | declare module 'vue' { 10 | export interface GlobalComponents { 11 | AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider'] 12 | AMenu: typeof import('ant-design-vue/es')['Menu'] 13 | AMenuItem: typeof import('ant-design-vue/es')['MenuItem'] 14 | RouterLink: typeof import('vue-router')['RouterLink'] 15 | RouterView: typeof import('vue-router')['RouterView'] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/alert/index.ts: -------------------------------------------------------------------------------- 1 | import Alert from './Alert.vue' 2 | export type { Props } from './Alert.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Alert) 6 | -------------------------------------------------------------------------------- /components/avatar/index.ts: -------------------------------------------------------------------------------- 1 | import Avatar from './Avatar.vue' 2 | export type { Props, Responsive } from './Avatar.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Avatar) 6 | -------------------------------------------------------------------------------- /components/backtop/index.ts: -------------------------------------------------------------------------------- 1 | import BackTop from './BackTop.vue' 2 | export type { Props } from './BackTop.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(BackTop) 6 | -------------------------------------------------------------------------------- /components/badge/index.ts: -------------------------------------------------------------------------------- 1 | import Badge from './Badge.vue' 2 | export type { Props, PresetColor, Status } from './Badge.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Badge) 6 | -------------------------------------------------------------------------------- /components/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | import Breadcrumb from './Breadcrumb.vue' 2 | export type { Props, Route, Query } from './Breadcrumb.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Breadcrumb) 6 | -------------------------------------------------------------------------------- /components/button/index.ts: -------------------------------------------------------------------------------- 1 | import Button from './Button.vue' 2 | export type { Props } from './Button.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Button) 6 | -------------------------------------------------------------------------------- /components/calendar/index.ts: -------------------------------------------------------------------------------- 1 | import Calendar from './Calendar.vue' 2 | export type { Props, DayOfWeek, DefaultWeek, DateItem, MonthItem } from './Calendar.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Calendar) 6 | -------------------------------------------------------------------------------- /components/card/index.ts: -------------------------------------------------------------------------------- 1 | import Card from './Card.vue' 2 | export type { Props } from './Card.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Card) 6 | -------------------------------------------------------------------------------- /components/carousel/index.ts: -------------------------------------------------------------------------------- 1 | import Carousel from './Carousel.vue' 2 | export type { Props, Image } from './Carousel.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Carousel) 6 | -------------------------------------------------------------------------------- /components/cascader/index.ts: -------------------------------------------------------------------------------- 1 | import Cascader from './Cascader.vue' 2 | export type { Props, Option } from './Cascader.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Cascader) 6 | -------------------------------------------------------------------------------- /components/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | import Checkbox from './Checkbox.vue' 2 | export type { Props, Option } from './Checkbox.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Checkbox) 6 | -------------------------------------------------------------------------------- /components/collapse/index.ts: -------------------------------------------------------------------------------- 1 | import Collapse from './Collapse.vue' 2 | export type { Props, Item } from './Collapse.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Collapse) 6 | -------------------------------------------------------------------------------- /components/colorpicker/index.ts: -------------------------------------------------------------------------------- 1 | import ColorPicker from './ColorPicker.vue' 2 | export type { Props, ColorPickerMode, ColorPickerAction } from './ColorPicker.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(ColorPicker) 6 | -------------------------------------------------------------------------------- /components/configprovider/index.ts: -------------------------------------------------------------------------------- 1 | import ConfigProvider from './ConfigProvider.vue' 2 | export type { Props, Theme } from './ConfigProvider.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(ConfigProvider) 6 | -------------------------------------------------------------------------------- /components/countdown/index.ts: -------------------------------------------------------------------------------- 1 | import Countdown from './Countdown.vue' 2 | export type { Props } from './Countdown.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Countdown) 6 | -------------------------------------------------------------------------------- /components/datepicker/index.ts: -------------------------------------------------------------------------------- 1 | import DatePicker from './DatePicker.vue' 2 | export type { Props } from './DatePicker.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(DatePicker) 6 | -------------------------------------------------------------------------------- /components/descriptions/descriptions/index.ts: -------------------------------------------------------------------------------- 1 | import Descriptions from './Descriptions.vue' 2 | export type { Props as DescriptionsProps, Responsive } from './Descriptions.vue' 3 | import { withInstall } from '../../utils/type' 4 | 5 | export default withInstall(Descriptions) 6 | -------------------------------------------------------------------------------- /components/descriptions/descriptionsitem/DescriptionsItem.vue: -------------------------------------------------------------------------------- 1 | 16 | 34 | 64 | -------------------------------------------------------------------------------- /components/descriptions/descriptionsitem/index.ts: -------------------------------------------------------------------------------- 1 | import DescriptionsItem from './DescriptionsItem.vue' 2 | export type { Props as DescriptionsItemProps } from './DescriptionsItem.vue' 3 | import { withInstall } from '../../utils/type' 4 | 5 | export default withInstall(DescriptionsItem) 6 | -------------------------------------------------------------------------------- /components/descriptions/index.ts: -------------------------------------------------------------------------------- 1 | import Descriptions from './descriptions' 2 | import DescriptionsItem from './descriptionsitem' 3 | 4 | export type { DescriptionsProps, Responsive } from './descriptions' 5 | export type { DescriptionsItemProps } from './descriptionsitem' 6 | 7 | export { Descriptions, DescriptionsItem } 8 | -------------------------------------------------------------------------------- /components/dialog/index.ts: -------------------------------------------------------------------------------- 1 | import Dialog from './Dialog.vue' 2 | export type { Props } from './Dialog.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Dialog) 6 | -------------------------------------------------------------------------------- /components/divider/index.ts: -------------------------------------------------------------------------------- 1 | import Divider from './Divider.vue' 2 | export type { Props } from './Divider.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Divider) 6 | -------------------------------------------------------------------------------- /components/drawer/index.ts: -------------------------------------------------------------------------------- 1 | import Drawer from './Drawer.vue' 2 | export type { Props } from './Drawer.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Drawer) 6 | -------------------------------------------------------------------------------- /components/ellipsis/index.ts: -------------------------------------------------------------------------------- 1 | import Ellipsis from './Ellipsis.vue' 2 | export type { Props } from './Ellipsis.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Ellipsis) 6 | -------------------------------------------------------------------------------- /components/empty/index.ts: -------------------------------------------------------------------------------- 1 | import Empty from './Empty.vue' 2 | export type { Props } from './Empty.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Empty) 6 | -------------------------------------------------------------------------------- /components/flex/Flex.vue: -------------------------------------------------------------------------------- 1 | 45 | 61 | 75 | -------------------------------------------------------------------------------- /components/flex/index.ts: -------------------------------------------------------------------------------- 1 | import Flex from './Flex.vue' 2 | export type { Props } from './Flex.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Flex) 6 | -------------------------------------------------------------------------------- /components/floatbutton/index.ts: -------------------------------------------------------------------------------- 1 | import FloatButton from './FloatButton.vue' 2 | export type { Props } from './FloatButton.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(FloatButton) 6 | -------------------------------------------------------------------------------- /components/gradienttext/GradientText.vue: -------------------------------------------------------------------------------- 1 | 74 | 85 | 99 | -------------------------------------------------------------------------------- /components/gradienttext/index.ts: -------------------------------------------------------------------------------- 1 | import GradientText from './GradientText.vue' 2 | export type { Props, Gradient } from './GradientText.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(GradientText) 6 | -------------------------------------------------------------------------------- /components/grid/col/index.ts: -------------------------------------------------------------------------------- 1 | import Col from './Col.vue' 2 | export type { Props as ColProps } from './Col.vue' 3 | import { withInstall } from '../../utils/type' 4 | 5 | export default withInstall(Col) 6 | -------------------------------------------------------------------------------- /components/grid/index.ts: -------------------------------------------------------------------------------- 1 | import Row from './row' 2 | import Col from './col' 3 | 4 | export type { RowProps, Responsive } from './row' 5 | export type { ColProps } from './col' 6 | 7 | export { Row, Col } 8 | -------------------------------------------------------------------------------- /components/grid/row/Row.vue: -------------------------------------------------------------------------------- 1 | 90 | 99 | 111 | -------------------------------------------------------------------------------- /components/grid/row/index.ts: -------------------------------------------------------------------------------- 1 | import Row from './Row.vue' 2 | export type { Props as RowProps, Responsive } from './Row.vue' 3 | import { withInstall } from '../../utils/type' 4 | 5 | export default withInstall(Row) 6 | -------------------------------------------------------------------------------- /components/highlight/Highlight.vue: -------------------------------------------------------------------------------- 1 | 78 | 86 | -------------------------------------------------------------------------------- /components/highlight/index.ts: -------------------------------------------------------------------------------- 1 | import Highlight from './Highlight.vue' 2 | export type { Props } from './Highlight.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Highlight) 6 | -------------------------------------------------------------------------------- /components/image/index.ts: -------------------------------------------------------------------------------- 1 | import Image from './Image.vue' 2 | export type { Props, Image } from './Image.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Image) 6 | -------------------------------------------------------------------------------- /components/index.ts: -------------------------------------------------------------------------------- 1 | import './style/global.less' 2 | import type { App, Plugin } from 'vue' 3 | import * as components from './components' 4 | export * from './components' 5 | export { 6 | dateFormat, 7 | formatNumber, 8 | rafTimeout, 9 | cancelRaf, 10 | throttle, 11 | debounce, 12 | add, 13 | downloadFile, 14 | toggleDark, 15 | useEventListener, 16 | useMutationObserver, 17 | useScroll, 18 | useFps, 19 | useMediaQuery, 20 | useResizeObserver, 21 | useSlotsExist, 22 | useInject, 23 | useOptionsSupported 24 | } from './utils' 25 | export { VueAmazingUIResolver } from './utils/resolver' 26 | export type { VueAmazingUIResolverOptions } from './utils/resolver' 27 | 28 | export const install = function (app: App) { 29 | Object.values(components).forEach((component) => { 30 | if (component.install) { 31 | app.use(component as unknown as Plugin) 32 | } 33 | }) 34 | return app // 用于支持链式调用，例如: app.use(A).use(B) 35 | } 36 | 37 | export default { 38 | install 39 | } 40 | -------------------------------------------------------------------------------- /components/input/index.ts: -------------------------------------------------------------------------------- 1 | import Input from './Input.vue' 2 | export type { Props } from './Input.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Input) 6 | -------------------------------------------------------------------------------- /components/inputnumber/index.ts: -------------------------------------------------------------------------------- 1 | import InputNumber from './InputNumber.vue' 2 | export type { Props } from './InputNumber.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(InputNumber) 6 | -------------------------------------------------------------------------------- /components/inputsearch/index.ts: -------------------------------------------------------------------------------- 1 | import InputSearch from './InputSearch.vue' 2 | export type { Props } from './InputSearch.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(InputSearch) 6 | -------------------------------------------------------------------------------- /components/list/index.ts: -------------------------------------------------------------------------------- 1 | import List from './list' 2 | import ListItem from './listitem' 3 | 4 | export type { ListProps } from './list' 5 | export type { ListItemProps } from './listitem' 6 | 7 | export { List, ListItem } 8 | -------------------------------------------------------------------------------- /components/list/list/index.ts: -------------------------------------------------------------------------------- 1 | import List from './List.vue' 2 | export type { Props as ListProps } from './List.vue' 3 | import { withInstall } from '../../utils/type' 4 | 5 | export default withInstall(List) 6 | -------------------------------------------------------------------------------- /components/list/listitem/index.ts: -------------------------------------------------------------------------------- 1 | import ListItem from './ListItem.vue' 2 | export type { Props as ListItemProps } from './ListItem.vue' 3 | import { withInstall } from '../../utils/type' 4 | 5 | export default withInstall(ListItem) 6 | -------------------------------------------------------------------------------- /components/loadingbar/index.ts: -------------------------------------------------------------------------------- 1 | import LoadingBar from './LoadingBar.vue' 2 | export type { Props } from './LoadingBar.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(LoadingBar) 6 | -------------------------------------------------------------------------------- /components/message/index.ts: -------------------------------------------------------------------------------- 1 | import Message from './Message.vue' 2 | export type { Props, Message } from './Message.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Message) 6 | -------------------------------------------------------------------------------- /components/modal/index.ts: -------------------------------------------------------------------------------- 1 | import Modal from './Modal.vue' 2 | export type { Props, Modal } from './Modal.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Modal) 6 | -------------------------------------------------------------------------------- /components/notification/index.ts: -------------------------------------------------------------------------------- 1 | import Notification from './Notification.vue' 2 | export type { Props, Notification } from './Notification.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Notification) 6 | -------------------------------------------------------------------------------- /components/numberanimation/NumberAnimation.vue: -------------------------------------------------------------------------------- 1 | 93 | 98 | -------------------------------------------------------------------------------- /components/numberanimation/index.ts: -------------------------------------------------------------------------------- 1 | import NumberAnimation from './NumberAnimation.vue' 2 | export type { Props, TransitionFunc } from './NumberAnimation.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(NumberAnimation) 6 | -------------------------------------------------------------------------------- /components/pagination/index.ts: -------------------------------------------------------------------------------- 1 | import Pagination from './Pagination.vue' 2 | export type { Props } from './Pagination.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Pagination) 6 | -------------------------------------------------------------------------------- /components/popconfirm/index.ts: -------------------------------------------------------------------------------- 1 | import Popconfirm from './Popconfirm.vue' 2 | export type { Props } from './Popconfirm.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Popconfirm) 6 | -------------------------------------------------------------------------------- /components/popover/Popover.vue: -------------------------------------------------------------------------------- 1 | 30 | 54 | 67 | -------------------------------------------------------------------------------- /components/popover/index.ts: -------------------------------------------------------------------------------- 1 | import Popover from './Popover.vue' 2 | export type { Props } from './Popover.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Popover) 6 | -------------------------------------------------------------------------------- /components/progress/index.ts: -------------------------------------------------------------------------------- 1 | import Progress from './Progress.vue' 2 | export type { Props, Gradient } from './Progress.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Progress) 6 | -------------------------------------------------------------------------------- /components/qrcode/index.ts: -------------------------------------------------------------------------------- 1 | import QRCode from './QRCode.vue' 2 | export type { Props } from './QRCode.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(QRCode) 6 | -------------------------------------------------------------------------------- /components/radio/index.ts: -------------------------------------------------------------------------------- 1 | import Radio from './Radio.vue' 2 | export type { Props, Option } from './Radio.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Radio) 6 | -------------------------------------------------------------------------------- /components/rate/index.ts: -------------------------------------------------------------------------------- 1 | import Rate from './Rate.vue' 2 | export type { Props } from './Rate.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Rate) 6 | -------------------------------------------------------------------------------- /components/result/index.ts: -------------------------------------------------------------------------------- 1 | import Result from './Result.vue' 2 | export type { Props } from './Result.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Result) 6 | -------------------------------------------------------------------------------- /components/scrollbar/index.ts: -------------------------------------------------------------------------------- 1 | import Scrollbar from './Scrollbar.vue' 2 | export type { Props } from './Scrollbar.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Scrollbar) 6 | -------------------------------------------------------------------------------- /components/segmented/index.ts: -------------------------------------------------------------------------------- 1 | import Segmented from './Segmented.vue' 2 | export type { Props, Option } from './Segmented.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Segmented) 6 | -------------------------------------------------------------------------------- /components/select/index.ts: -------------------------------------------------------------------------------- 1 | import Select from './Select.vue' 2 | export type { Props, Option } from './Select.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Select) 6 | -------------------------------------------------------------------------------- /components/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | import Skeleton from './Skeleton.vue' 2 | export type { 3 | Props, 4 | SkeletonParagraphProps, 5 | SkeletonTitleProps, 6 | SkeletonInputProps, 7 | SkeletonAvatarProps, 8 | SkeletonButtonProps 9 | } from './Skeleton.vue' 10 | import { withInstall } from '../utils/type' 11 | 12 | export default withInstall(Skeleton) 13 | -------------------------------------------------------------------------------- /components/slider/index.ts: -------------------------------------------------------------------------------- 1 | import Slider from './Slider.vue' 2 | export type { Props } from './Slider.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Slider) 6 | -------------------------------------------------------------------------------- /components/space/Space.vue: -------------------------------------------------------------------------------- 1 | 40 | 49 | 79 | -------------------------------------------------------------------------------- /components/space/index.ts: -------------------------------------------------------------------------------- 1 | import Space from './Space.vue' 2 | export type { Props } from './Space.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Space) 6 | -------------------------------------------------------------------------------- /components/spin/index.ts: -------------------------------------------------------------------------------- 1 | import Spin from './Spin.vue' 2 | export type { Props } from './Spin.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Spin) 6 | -------------------------------------------------------------------------------- /components/statistic/Statistic.vue: -------------------------------------------------------------------------------- 1 | 39 | 57 | 91 | -------------------------------------------------------------------------------- /components/statistic/index.ts: -------------------------------------------------------------------------------- 1 | import Statistic from './Statistic.vue' 2 | export type { Props } from './Statistic.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Statistic) 6 | -------------------------------------------------------------------------------- /components/steps/index.ts: -------------------------------------------------------------------------------- 1 | import Steps from './Steps.vue' 2 | export type { Props, Item } from './Steps.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Steps) 6 | -------------------------------------------------------------------------------- /components/style/global.less: -------------------------------------------------------------------------------- 1 | // 组件库全局样式定义 2 | *, 3 | *::before, 4 | *::after { 5 | box-sizing: border-box; 6 | margin: 0; 7 | padding: 0; 8 | caret-color: transparent; // 消除 win 系统点击后出现插入光标闪烁的问题 9 | } 10 | :root { 11 | --primary-color: #1677ff; 12 | --primary-color-hover: #4096ff; 13 | } 14 | body { 15 | font-family: 16 | Inter, 17 | -apple-system, 18 | BlinkMacSystemFont, 19 | 'Segoe UI', 20 | Roboto, 21 | Oxygen, 22 | Ubuntu, 23 | Cantarell, 24 | 'Fira Sans', 25 | 'Droid Sans', 26 | 'Helvetica Neue', 27 | sans-serif; 28 | } 29 | input, 30 | textarea { 31 | caret-color: auto; 32 | } 33 | a { 34 | color: var(--primary-color); 35 | text-decoration: none; 36 | background-color: transparent; 37 | -webkit-tap-highlight-color: transparent; 38 | outline: none; 39 | cursor: pointer; 40 | transition: color 0.3s ease; 41 | &:hover { 42 | color: var(--primary-color-hover); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /components/swiper/index.ts: -------------------------------------------------------------------------------- 1 | import Swiper from './Swiper.vue' 2 | export type { Props, Image } from './Swiper.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Swiper) 6 | -------------------------------------------------------------------------------- /components/switch/index.ts: -------------------------------------------------------------------------------- 1 | import Switch from './Switch.vue' 2 | export type { Props } from './Switch.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Switch) 6 | -------------------------------------------------------------------------------- /components/table/index.ts: -------------------------------------------------------------------------------- 1 | import Table from './Table.vue' 2 | export type { Props, Column, Selection, ScrollOption } from './Table.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Table) 6 | -------------------------------------------------------------------------------- /components/tabs/index.ts: -------------------------------------------------------------------------------- 1 | import Tabs from './Tabs.vue' 2 | export type { Props, Item } from './Tabs.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Tabs) 6 | -------------------------------------------------------------------------------- /components/tag/index.ts: -------------------------------------------------------------------------------- 1 | import Tag from './Tag.vue' 2 | export type { Props, Item } from './Tag.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Tag) 6 | -------------------------------------------------------------------------------- /components/textarea/index.ts: -------------------------------------------------------------------------------- 1 | import Textarea from './Textarea.vue' 2 | export type { Props } from './Textarea.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Textarea) 6 | -------------------------------------------------------------------------------- /components/textscroll/index.ts: -------------------------------------------------------------------------------- 1 | import TextScroll from './TextScroll.vue' 2 | export type { Props, Item } from './TextScroll.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(TextScroll) 6 | -------------------------------------------------------------------------------- /components/timeline/index.ts: -------------------------------------------------------------------------------- 1 | import Timeline from './Timeline.vue' 2 | export type { Props, Item } from './Timeline.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Timeline) 6 | -------------------------------------------------------------------------------- /components/tooltip/index.ts: -------------------------------------------------------------------------------- 1 | import Tooltip from './Tooltip.vue' 2 | export type { Props } from './Tooltip.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Tooltip) 6 | -------------------------------------------------------------------------------- /components/upload/index.ts: -------------------------------------------------------------------------------- 1 | import Upload from './Upload.vue' 2 | export type { Props, MessageType, FileType } from './Upload.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Upload) 6 | -------------------------------------------------------------------------------- /components/utils/type.ts: -------------------------------------------------------------------------------- 1 | import type { App, Plugin, Component } from 'vue' 2 | export const withInstall = (comp: T) => { 3 | const c = comp as any 4 | c.install = function (app: App) { 5 | app.component(c.__name, comp) 6 | } 7 | return comp as T & Plugin 8 | } 9 | -------------------------------------------------------------------------------- /components/video/index.ts: -------------------------------------------------------------------------------- 1 | import Video from './Video.vue' 2 | export type { Props } from './Video.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Video) 6 | -------------------------------------------------------------------------------- /components/waterfall/index.ts: -------------------------------------------------------------------------------- 1 | import Waterfall from './Waterfall.vue' 2 | export type { Props, Image } from './Waterfall.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Waterfall) 6 | -------------------------------------------------------------------------------- /components/watermark/index.ts: -------------------------------------------------------------------------------- 1 | import Watermark from './Watermark.vue' 2 | export type { Props, Font } from './Watermark.vue' 3 | import { withInstall } from '../utils/type' 4 | 5 | export default withInstall(Watermark) 6 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/chunk-JVWSFFO4.js: -------------------------------------------------------------------------------- 1 | var __defProp = Object.defineProperty 2 | var __getOwnPropNames = Object.getOwnPropertyNames 3 | var __defNormalProp = (obj, key, value) => 4 | key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : (obj[key] = value) 5 | var __commonJS = (cb, mod) => 6 | function __require() { 7 | return (mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports) 8 | } 9 | var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== 'symbol' ? key + '' : key, value) 10 | 11 | export { __commonJS, __publicField } 12 | //# sourceMappingURL=chunk-JVWSFFO4.js.map 13 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/chunk-JVWSFFO4.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/date-fns.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "type": "module" 3 | } 4 | -------------------------------------------------------------------------------- /docs/.vitepress/cache/deps/vue.js.map: -------------------------------------------------------------------------------- 1 | { 2 | "version": 3, 3 | "sources": [], 4 | "sourcesContent": [], 5 | "mappings": "", 6 | "names": [] 7 | } 8 | -------------------------------------------------------------------------------- /docs/.vitepress/dist/_headers: -------------------------------------------------------------------------------- 1 | /assets/* 2 | cache-control: max-age=31536000 3 | cache-control: immutable 4 | 5 | /*.svg 6 | cache-control: max-age=604800 7 | cache-control: immutable 8 | 9 | /*.png 10 | cache-control: max-age=604800 11 | cache-control: immutable 12 | -------------------------------------------------------------------------------- /docs/.vitepress/dist/amazing-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/ArrowDownSVG.vue: -------------------------------------------------------------------------------- 1 | 27 | 34 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/GlobalElement.vue: -------------------------------------------------------------------------------- 1 | 16 | 74 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/MailSVG.vue: -------------------------------------------------------------------------------- 1 | 18 | 25 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/components/VersionDateTag.vue: -------------------------------------------------------------------------------- 1 | 11 | 20 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | declare module '*.vue' { 3 | import type { DefineComponent } from 'vue' 4 | const vueComponent: DefineComponent<{}, {}, any> 5 | export default vueComponent 6 | } 7 | -------------------------------------------------------------------------------- /docs/.vitepress/theme/index.ts: -------------------------------------------------------------------------------- 1 | import DefaultTheme from 'vitepress/theme' 2 | import './global.less' // global less 3 | import GlobalElement from './components/GlobalElement.vue' 4 | import VersionDateTag from './components/VersionDateTag.vue' 5 | // import VueAmazingUI from 'vue-amazing-ui' 6 | // import 'vue-amazing-ui/css' 7 | import VueAmazingUI from '../../../dist/index' 8 | import '../../../dist/style.css' 9 | 10 | export default { 11 | extends: DefaultTheme, // or ...DefaultTheme 12 | enhanceApp({ app }) { 13 | app.component('GlobalElement', GlobalElement) 14 | app.component('VersionDateTag', VersionDateTag) 15 | app.use(VueAmazingUI) 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /docs/.vitepress/utils/fetchVersion.ts: -------------------------------------------------------------------------------- 1 | /* 2 | 远程读取 github 仓库中 package.json 文件中的 version 版本号 3 | 方式一： 4 | 读取规则：https://api.github.com/repos///contents/?ref= 5 | return fetch('https://api.github.com/repos/themusecatcher/vue-amazing-ui/contents/package.json?ref=main', { 6 | headers: { 7 | // See https://docs.github.com/en/rest/overview/media-types 8 | Accept: 'application/vnd.github.v3.raw', 9 | // See https://docs.github.com/en/rest/guides/getting-started-with-the-rest-api#authentication 10 | // Authorization: 'token ${GITHUB_TOKEN}', 11 | } 12 | }) 13 | 方式二： 14 | 读取规则：https://raw.githubusercontent.com//// 15 | return fetch('https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/main/package.json') 16 | */ 17 | export function fetchVersion() { 18 | return fetch('https://api.github.com/repos/themusecatcher/vue-amazing-ui/contents/package.json?ref=main', { 19 | headers: { 20 | // See https://docs.github.com/en/rest/overview/media-types 21 | Accept: 'application/vnd.github.v3.raw' 22 | // See https://docs.github.com/en/rest/guides/getting-started-with-the-rest-api#authentication 23 | // Authorization: 'token ${GITHUB_TOKEN}', 24 | } 25 | }) 26 | .then((res) => res.json()) 27 | .then((json) => json.version ?? '') 28 | .then((version) => { 29 | if (!version) return 30 | setLabel(version) 31 | }) 32 | } 33 | export function setLabel(version: string) { 34 | const tagLineParagragh = document.querySelector('div.VPHero.has-image.VPHomeHero > div > div.main > p.tagline') 35 | const docsVersionSpan = document.createElement('samp') 36 | docsVersionSpan.classList.add('tag-version') 37 | docsVersionSpan.innerText = version 38 | tagLineParagragh?.appendChild(docsVersionSpan) 39 | } -------------------------------------------------------------------------------- /docs/guide/components/highlight.md: -------------------------------------------------------------------------------- 1 | # 高亮文本 Highlight 2 | 3 | 4 | 5 | *用过搜索引擎的都知道我是做什么的* 6 | 7 | ## 何时使用 8 | 9 | - 需要对搜索结果中指定文本高亮时 10 | 11 | 16 | 17 | ## 基本使用 18 | 19 | 20 | 21 | ::: details Show Code 22 | 23 | ```vue 24 | 31 | 34 | ``` 35 | 36 | ::: 37 | 38 | ## 样式 39 | 40 | 52 | 53 | ::: details Show Code 54 | 55 | ```vue 56 | 70 | ``` 71 | 72 | ::: 73 | 74 | ## 区分大小写 75 | 76 | 81 | 82 | ::: details Show Code 83 | 84 | ```vue 85 | 92 | ``` 93 | 94 | ::: 95 | 96 | ## 高亮标签 97 | 98 | 104 | 105 | ::: details Show Code 106 | 107 | ```vue 108 | 115 | 123 | ``` 124 | 125 | ::: 126 | 127 | ## APIs 128 | 129 | ### Highlight 130 | 131 | 参数 | 说明 | 类型 | 默认值 132 | :-- | :-- | :-- | :-- 133 | text | 文本 | string | undefined 134 | patterns | 需要高亮的文本内容 | string[] | [] 135 | autoEscape | 自动转义。默认情况下，`patterns` 中的元素会被转化为正则表达式进行匹配，这个过程中需要进行自动转义，正则表达式最终匹配的是元素的字面内容，例如 `\(` 匹配的就是 `\(`。如果你需要 `Highlight` 组件去匹配使用 `patterns` 中元素本身构造的正则表达式，例如 `\(` 匹配的是 `(`，则可以设为 `false`。如果你看不懂这些，不要改这个设置。 | boolean | true 136 | caseSensitive | 区分大小写 | boolean | false 137 | highlightTag | 高亮内容的 `HTML` 元素类型 | string | 'mark' 138 | highlightClass | 高亮内容的类名 | string | undefined 139 | highlightStyle | 高亮内容的样式 | [CSSProperties](https://cn.vuejs.org/api/utility-types.html#cssproperties) | {} 140 | -------------------------------------------------------------------------------- /docs/guide/customize.md: -------------------------------------------------------------------------------- 1 | # 定制主题 2 | 3 | 4 | 5 | `Vue Amazing UI` 通过使用 `ConfigProvider` 调整主题，默认情况下主题色为 #1677ff，无需任何配置 6 | 7 | 更多关于 `ConfigProvider` 的使用，参见 [全局化配置 ConfigProvider](/guide/components/configprovider.html) 8 | 9 | ## 动态切换主题 10 | 11 | *配置的全局主题色会注入后代组件，如果要动态切换主题色，只需要修改 `theme` 对象即可* 12 | 13 | ```vue 14 | 15 | 24 | 29 | 30 | ``` 31 | 32 | ## 定制组件主题 33 | 34 | *组件主题配置方法同全局主题配置方法，并且组件主题色会覆盖全局主题色* 35 | 36 | ```vue 37 | 38 | 53 | 58 | 59 | ``` 60 | -------------------------------------------------------------------------------- /docs/guide/features.md: -------------------------------------------------------------------------------- 1 | # 特性 2 | 3 | 4 | 5 | 6 | 9 |

Join Me

10 | 51 | 52 | 53 | ## 简要介绍 54 | 55 | - 组件库采用 `Vue@{{ getVersion('vue') }}` + `TypeScript@{{ getVersion('typescript') }}` + `Vite@{{ getVersion('vite') }}` + `Less@{{ getVersion('less') }}` 实现！ 56 | - 目前共包含 `67` 个基础 `UI` 组件以及 `18` 个工具函数，并且持续探索更新中... 57 | - 主题可调，你只需提供一个主题色，剩下的都交给我 58 | - 顺便一提，它们全都可以 `treeshaking` 59 | - `Vue Amazing UI` 全量使用 `TypeScript` 编写，和你的 `TypeScript` 项目无缝衔接 60 | - 全部组件均采用单文件组件 `SFC`，可独立使用 61 | - 部分组件样式尚未完美适配文档主题的 `dark` 暗黑模式，可切换 `light` 模式查看 62 | - 开箱即用，不墨迹 63 | 64 | ## 使用方式 65 | 66 | - 全局引入注册所有组件 67 | - 全局引入注册部分组件 68 | - 局部引入注册部分组件 69 | - 无需任何安装引入，直接使用单文件组件 `SFC` 70 | 71 | ## 全局默认样式 72 | 73 | _使用单文件组件 `SFC` 时，请按需要引入如下所示组件库全局默认样式：_ 74 | 75 | ```less 76 | // 组件库全局样式定义 77 | *, 78 | *::before, 79 | *::after { 80 | box-sizing: border-box; 81 | margin: 0; 82 | padding: 0; 83 | caret-color: transparent; // 消除 win 系统点击后出现插入光标闪烁的问题 84 | } 85 | :root { 86 | --primary-color: #1677ff; 87 | --primary-color-hover: #4096ff; 88 | } 89 | body { 90 | font-family: 91 | Inter, 92 | -apple-system, 93 | BlinkMacSystemFont, 94 | 'Segoe UI', 95 | Roboto, 96 | Oxygen, 97 | Ubuntu, 98 | Cantarell, 99 | 'Fira Sans', 100 | 'Droid Sans', 101 | 'Helvetica Neue', 102 | sans-serif; 103 | } 104 | input, 105 | textarea { 106 | caret-color: auto; 107 | } 108 | a { 109 | color: var(--primary-color); 110 | text-decoration: none; 111 | background-color: transparent; 112 | -webkit-tap-highlight-color: transparent; 113 | outline: none; 114 | cursor: pointer; 115 | transition: color 0.3s ease; 116 | &:hover { 117 | color: var(--primary-color-hover); 118 | } 119 | } 120 | ``` 121 | 122 | 142 | -------------------------------------------------------------------------------- /docs/guide/ondemand.md: -------------------------------------------------------------------------------- 1 | # 按需引入（Tree Shaking） 2 | 3 | `vue-amazing-ui` 默认支持基于 `ES modules` 的 `tree shaking` 4 | 5 | 6 | 7 | ## 手动引入（不推荐） 8 | 9 | ```vue 10 | 15 | 19 | ``` 20 | 21 | ## 自动按需引入（强烈推荐） 22 | 23 | 使用 [`unplugin-vue-components`](https://github.com/unplugin/unplugin-vue-components) 插件来按需自动加载组件，插件会自动解析模板中的使用到的组件，并导入组件和样式 24 | 25 | ::: code-group 26 | 27 | ```sh [pnpm] 28 | $ pnpm add unplugin-vue-components -D 29 | ``` 30 | 31 | ```sh [npm] 32 | $ npm install unplugin-vue-components -D 33 | ``` 34 | 35 | ```sh [yarn] 36 | $ yarn add unplugin-vue-components -D 37 | ``` 38 | 39 | ```sh [bun] 40 | $ bun add unplugin-vue-components -D 41 | ``` 42 | 43 | ::: 44 | 45 | ```ts 46 | // vite.config.ts 47 | import { defineConfig } from 'vite' 48 | import vue from '@vitejs/plugin-vue' 49 | import Components from 'unplugin-vue-components/vite' 50 | // vue-amazing-ui 按需引入 51 | import { VueAmazingUIResolver } from 'vue-amazing-ui' 52 | 53 | // https://vitejs.dev/config/ 54 | export default defineConfig({ 55 | plugins: [ 56 | vue(), 57 | Components({ 58 | resolvers: [ 59 | // auto import components from VueAmazingUI 60 | VueAmazingUIResolver({ 61 | cjs: false // whether use commonjs build, default false 62 | }) 63 | ] 64 | }) 65 | ] 66 | }) 67 | ``` 68 | 69 | 然后，你可以在代码中直接使用 `vue-amazing-ui` 的所有组件 70 | 71 | ```vue 72 | 76 | ``` 77 | 78 | ## 按需全局引入组件（手动） 79 | 80 | ```ts 81 | // main.ts 82 | import { createApp } from 'vue' 83 | import App from './App.vue' 84 | import { Button, Tag } from 'vue-amazing-ui' 85 | import 'vue-amazing-ui/es/button/Button.css' 86 | import 'vue-amazing-ui/es/tag/Tag.css' 87 | 88 | const app = createApp(App) 89 | app.use(Button).use(Tag) 90 | app.mount('#app') 91 | ``` 92 | 93 | 安装后，你可以直接在代码中使用安装的组件 94 | 95 | ```vue 96 | 100 | ``` 101 | -------------------------------------------------------------------------------- /docs/guide/started.md: -------------------------------------------------------------------------------- 1 | # 快速上手 2 | 3 | 4 | 5 | ## 安装 6 | 7 | ::: code-group 8 | 9 | ```sh [pnpm] 10 | $ pnpm add vue-amazing-ui 11 | ``` 12 | 13 | ```sh [npm] 14 | $ npm install vue-amazing-ui 15 | ``` 16 | 17 | ```sh [yarn] 18 | $ yarn add vue-amazing-ui 19 | ``` 20 | 21 | ```sh [bun] 22 | $ bun add vue-amazing-ui 23 | ``` 24 | 25 | ::: 26 | 27 | ## 使用组件 28 | 29 | > **全局完整注册（不推荐）** 30 | 31 | *失去 `tree-shaking` 的能力，打包后有冗余代码* 32 | 33 | ```ts 34 | import { createApp } from 'vue' 35 | import App from './App.vue' 36 | import VueAmazingUI from 'vue-amazing-ui' 37 | import 'vue-amazing-ui/css' 38 | 39 | const app = createApp(App) 40 | app.use(VueAmazingUI) 41 | app.mount('#app') 42 | ``` 43 | 44 | > **全局部分注册** 45 | 46 | *全局或局部引入部分组件，都只有导入的组件才会被打包* 47 | 48 | ```ts 49 | import { createApp } from 'vue' 50 | import App from './App.vue' 51 | import { Button, Tag } from 'vue-amazing-ui' 52 | import 'vue-amazing-ui/es/button/Button.css' 53 | import 'vue-amazing-ui/es/tag/Tag.css' 54 | 55 | const app = createApp(App) 56 | app.use(Button).use(Tag) 57 | app.mount('#app') 58 | ``` 59 | 60 | > **局部注册组件** 61 | 62 | *这种情况下，也只有导入的组件才会被打包* 63 | 64 | ```vue 65 | 70 | 74 | ``` 75 | 76 | > **全局部分注册和局部注册组件，都需手动引入组件库全局默认样式（推荐使用[自动按需引入](/guide/ondemand#自动按需引入-强烈推荐)）** 77 | 78 | ```ts 79 | import { createApp } from 'vue' 80 | import App from './App.vue' 81 | import 'vue-amazing-ui/es/style/global.css' // 引入全局默认样式 82 | 83 | const app = createApp(App) 84 | app.mount('#app') 85 | ``` 86 | 87 | ## 使用类型 88 | 89 | *所有类型均可直接从 `vue-amazing-ui` 中引入使用，无需任何额外安装* 90 | 91 | ```vue 92 | 97 | 100 | ``` 101 | 102 | ## 使用工具函数 103 | 104 | ```vue 105 | 127 | ``` 128 | -------------------------------------------------------------------------------- /docs/guide/template.md: -------------------------------------------------------------------------------- 1 | # 模板 Template 2 | 3 | 4 | 5 | *模板文件* 6 | 7 | ## 何时使用 8 | 9 | - 当需要添加新组件时 10 | 11 | 13 | 14 | ## 基本使用 15 | 16 | ::: details Show Code 17 | 18 | ```vue 19 | 21 | 23 | ``` 24 | 25 | ::: 26 | 27 | ## APIs 28 | 29 | ### Template 30 | 31 | 参数 | 说明 | 类型 | 默认值 32 | :-- | :-- | :-- | :-- 33 | 34 | ## Slots 35 | 36 | 名称 | 说明 | 类型 37 | :-- | :-- | :-- 38 | 39 | ## Methods 40 | 41 | 名称 | 说明 | 类型 42 | :-- | :-- | :-- 43 | 44 | ## Events 45 | 46 | 名称 | 说明 | 类型 47 | :-- | :-- | :-- 48 | -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: home 3 | 4 | title: Vue Amazing UI 5 | titleTemplate: Amazing UI Components Library 6 | 7 | hero: 8 | name: Vue Amazing UI 9 | text: Amazing UI 组件库 10 | tagline: 基于 Vue3 + TypeScript + Vite 开发 11 | image: 12 | src: /amazing-logo.svg 13 | alt: Vue Amazing UI 14 | actions: 15 | - theme: brand 16 | text: 开始使用 17 | link: /guide/features 18 | - theme: alt 19 | text: 成为赞助者 ✨ 20 | link: https://themusecatcher.github.io/vue-amazing-ui/sponsor/charge.html 21 | features: 22 | - icon: 💡 23 | title: 最新技术 24 | details: '基于 Vue@3.5.22、TypeScript@5.9.3、Vite@7.1.10 等最新技术栈开发' 25 | - icon: 🚀 26 | title: 开箱即用 27 | details: 目前共包含 67 个基础 UI 组件以及 18 个工具函数，持续探索更新中 28 | - icon: 😉 29 | title: 有点意思 30 | details: '主题可调，全量使用 TypeScript 和 SFC，支持 tree shaking' 31 | --- 32 | 33 | 34 | 35 | 66 | -------------------------------------------------------------------------------- /docs/public/_headers: -------------------------------------------------------------------------------- 1 | /assets/* 2 | cache-control: max-age=31536000 3 | cache-control: immutable 4 | 5 | /*.svg 6 | cache-control: max-age=604800 7 | cache-control: immutable 8 | 9 | /*.png 10 | cache-control: max-age=604800 11 | cache-control: immutable 12 | -------------------------------------------------------------------------------- /docs/public/alipay.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/f7160984e69a414abc12e677e256bad56331ad58/docs/public/alipay.jpg -------------------------------------------------------------------------------- /docs/public/amazing-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /docs/public/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/f7160984e69a414abc12e677e256bad56331ad58/docs/public/avatar.png -------------------------------------------------------------------------------- /docs/public/avatar_1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/f7160984e69a414abc12e677e256bad56331ad58/docs/public/avatar_1.jpeg -------------------------------------------------------------------------------- /docs/public/avatar_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/f7160984e69a414abc12e677e256bad56331ad58/docs/public/avatar_2.jpg -------------------------------------------------------------------------------- /docs/public/avatar_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/f7160984e69a414abc12e677e256bad56331ad58/docs/public/avatar_3.png -------------------------------------------------------------------------------- /docs/public/avatar_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/f7160984e69a414abc12e677e256bad56331ad58/docs/public/avatar_4.png -------------------------------------------------------------------------------- /docs/public/avatar_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/f7160984e69a414abc12e677e256bad56331ad58/docs/public/avatar_5.png -------------------------------------------------------------------------------- /docs/public/wechat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/f7160984e69a414abc12e677e256bad56331ad58/docs/public/wechat.jpg -------------------------------------------------------------------------------- /docs/utils/functions/add.md: -------------------------------------------------------------------------------- 1 | # 加法 add 2 | 3 | 4 | 5 | _消除 `js` 加减精度问题的工具函数_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 消除 js 加减精度问题的加法函数 12 | * 13 | * 该函数旨在添加两个数字，考虑到它们可能是整数或小数；对于整数，直接返回它们的和 14 | * 对于小数，为了确保精确计算，将小数转换为相同长度的字符串进行处理，然后将结果转换回小数 15 | * 16 | * @param {number} num1 第一个数字 17 | * @param {number} num2 第二个数字 18 | * @returns {number} 返回两个数字的和 19 | */ 20 | export function add(num1: number, num2: number): number { 21 | // 验证输入是否为有效的数字 22 | // Number.isNaN() 不会尝试将参数转换为数字；全局 isNaN() 函数会将参数强制转换为数字 23 | if (Number.isNaN(num1) || Number.isNaN(num2)) { 24 | throw new Error('Both num1 and num2 must be valid numbers.') 25 | } 26 | // 检查输入是否为小数 27 | const isDecimalNum1 = num1 % 1 !== 0 28 | const isDecimalNum2 = num2 % 1 !== 0 29 | if (!isDecimalNum1 && !isDecimalNum2) { 30 | return num1 + num2 // 如果两个数字都是整数，则直接返回它们的和 31 | } 32 | const num1DeciStr = String(num1).split('.')[1] ?? '' 33 | const num2DeciStr = String(num2).split('.')[1] ?? '' 34 | const maxLen = Math.max(num1DeciStr.length, num2DeciStr.length) 35 | const factor = Math.pow(10, maxLen) 36 | const num1Str = num1.toFixed(maxLen) 37 | const num2Str = num2.toFixed(maxLen) 38 | // 将小数点移除并转换为整数相加 39 | const result = (+num1Str.replace('.', '') + +num2Str.replace('.', '')) / factor 40 | return result 41 | } 42 | ``` 43 | 44 | ::: 45 | 46 | ## 基本使用 47 | 48 | ```vue 49 | 54 | ``` 55 | 56 | ## Params 57 | 58 | | 参数 | 说明 | 类型 | 默认值 | 59 | | ---- | ----- | ------ | --------- | 60 | | num1 | 加数1 | number | undefined | 61 | | num2 | 加数2 | number | undefined | 62 | -------------------------------------------------------------------------------- /docs/utils/functions/debounce.md: -------------------------------------------------------------------------------- 1 | # 防抖 debounce 2 | 3 | 4 | 5 | _对于短时间内连续触发的事件，防抖就是让某个时间 `delay` 期限内，事件处理函数只执行一次_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 防抖函数 debounce 12 | * 13 | * 主要用于限制函数调用的频率，当频繁触发某个函数时，实际上只需要在最后一次触发后的一段时间内执行一次即可 14 | * 这对于诸如输入事件处理函数、窗口大小调整事件处理函数等可能会频繁触发的函数非常有用 15 | * 16 | * @param {Function} fn 要执行的函数 17 | * @param {number} [delay = 300] 防抖的时间期限，单位 ms，默认为 300ms 18 | * @returns {Function} 返回一个新的防抖的函数 19 | */ 20 | export function debounce(fn: Function, delay: number = 300): Function { 21 | let timer: any = null // 使用闭包保存定时器的引用 22 | return function (...args: any[]) { 23 | // 返回一个包装函数 24 | if (timer) { 25 | // 如果定时器存在，则清除之前的定时器 26 | clearTimeout(timer) 27 | } 28 | // 设置新的定时器，延迟执行原函数 29 | timer = setTimeout(() => { 30 | fn(...args) 31 | }, delay) 32 | } 33 | } 34 | ``` 35 | 36 | ::: 37 | 38 | ## 何时使用 39 | 40 | - 对于短时间内连续触发的事件，在 `delay` `ms` 内函数只执行最后一次 41 | 42 | 52 | 53 | ## 基本使用 54 | 55 |

滚动条位置：{{ scrollTop }}

56 | 57 | ```vue 58 | 67 | ``` 68 | 69 | ## Params 70 | 71 | | 参数 | 说明 | 类型 | 默认值 | 72 | | ----- | ------------------------- | -------- | --------- | 73 | | fn | 要执行的函数 | Function | undefined | 74 | | delay | 防抖的时间期限，单位 `ms` | number | 300 | 75 | -------------------------------------------------------------------------------- /docs/utils/functions/download-file.md: -------------------------------------------------------------------------------- 1 | # 下载文件 downloadFile 2 | 3 | 4 | 5 | _下载文件并自定义文件名的工具函数_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 下载文件并自定义文件名 12 | * 13 | * @param {string} url 文件的 URL，支持网络路径或本地路径 14 | * @param {string} fileName 文件名；文件的命名，如果未提供，则从 URL 中尝试提取 15 | */ 16 | export function downloadFile(url: string, fileName?: string): void { 17 | if (!url) { 18 | console.error('无效的 url') 19 | return 20 | } 21 | // 获取文件名，如果未提供，则从URL中获取或使用默认值 22 | const name = fileName ? fileName : url.split('?')[0].split('/').pop() || 'download' 23 | try { 24 | // 使用 fetch API 从指定 URL 请求文件 25 | fetch(url).then((response) => { 26 | // 检查响应状态是否成功 27 | if (response.ok) { 28 | // 将响应转换为 Blob 对象 29 | response.blob().then((blob) => { 30 | const blobUrl = URL.createObjectURL(blob) // 创建 Blob URL 31 | const a = document.createElement('a') // 创建超链接元素 32 | a.href = blobUrl // 设置超链接的 href 属性为 Blob URL 33 | a.download = name // 设置超链接的 download 属性为自定义的文件名 34 | // 将超链接元素添加到文档中并触发点击事件 35 | document.body.appendChild(a) 36 | a.click() // 点击超链接，触发下载事件 37 | document.body.removeChild(a) 38 | URL.revokeObjectURL(blobUrl) // 释放 Blob URL 所占的内存 39 | }) 40 | } else { 41 | console.error('请求文件失败，状态码:', response.status) 42 | } 43 | }) 44 | } catch (error) { 45 | // 处理下载过程中出现的异常情况 46 | console.error('文件下载失败:', error) 47 | } 48 | } 49 | ``` 50 | 51 | ::: 52 | 53 | ## 基本使用 54 | 55 | ```vue 56 | 60 | ``` 61 | 62 | ## Params 63 | 64 | | 参数 | 说明 | 类型 | 默认值 | 65 | | --------- | --------------------------------------------- | ------ | --------- | 66 | | url | 文件的 `URL`，支持网络路径或本地路径 | string | undefined | 67 | | fileName? | 文件的命名，如果未提供，则从 `URL` 中尝试提取 | string | undefined | 68 | -------------------------------------------------------------------------------- /docs/utils/functions/event-listener.md: -------------------------------------------------------------------------------- 1 | # 事件监听 useEventListener 2 | 3 | 4 | 5 | _添加和清除 `DOM` 事件监听器的组合式函数_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 组合式函数 12 | * 使用 Vue 的生命周期钩子添加和移除事件监听器 13 | * 14 | * 该函数旨在提供一种优雅的方式来管理事件监听器，避免在组件卸载后仍保留事件监听器， 15 | * 从而可能导致内存泄漏的问题；通过结合 Vue 的 onMounted 和 onUnmounted 钩子， 16 | * 在组件挂载时添加事件监听器，并在组件卸载时移除它 17 | * 18 | * @param {HTMLElement | Window | Document} target 目标元素或对象；可以是 DOM 元素或其他支持 addEventListener 的对象 19 | * @param {string} event 要监听的事件名称 20 | * @param {Function} callback 事件被触发时执行的回调函数 21 | */ 22 | import { onMounted, onUnmounted } from 'vue' 23 | import type { Ref } from 'vue' 24 | export function useEventListener(target: HTMLElement | Window | Document, event: string, callback: Function): void { 25 | // 也可以用字符串形式的 CSS 选择器来寻找目标 DOM 元素 26 | onMounted(() => target.addEventListener(event, callback as EventListenerOrEventListenerObject)) 27 | onUnmounted(() => target.removeEventListener(event, callback as EventListenerOrEventListenerObject)) 28 | } 29 | ``` 30 | 31 | ::: 32 | 33 | 49 | 50 | ## 基本使用 51 | 52 |

滚动方向：{{ scrollDown ? '向下':'向上' }}

53 | 54 | ```vue 55 | 71 | ``` 72 | 73 | ## Params 74 | 75 | | 参数 | 说明 | 类型 | 默认值 | 76 | | -------- | ---------------------------- | ----------------------------------------- | --------- | 77 | | target | 要添加监听事件的目标元素 | HTMLElement | Window | Document | undefined | 78 | | event | 监听的事件类型（大小写敏感） | string | undefined | 79 | | callback | 监听事件触发时的回调函数 | Function | undefined | 80 | -------------------------------------------------------------------------------- /docs/utils/functions/format-number.md: -------------------------------------------------------------------------------- 1 | # 数字格式化 formatNumber 2 | 3 | 4 | 5 | _格式化数字为指定格式的工具函数_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 数字格式化函数 12 | * 13 | * 该函数提供了一种灵活的方式将数字格式化为字符串，包括设置精度、千位分隔符、小数点字符、前缀和后缀 14 | * 15 | * @param {number | string} value 要格式化的数字或数字字符串 16 | * @param {number} [precision = 2] 小数点后的位数，默认为 2 17 | * @param {string} [separator = ','] 千分位分隔符，默认为 ',' 18 | * @param {string} [decimal = '.'] 小数点字符，默认为 '.' 19 | * @param {string} prefix 数字前的字符串，默认为 undefined 20 | * @param {string} suffix 数字后的字符串，默认为 undefined 21 | * @returns {string} 格式化后的字符串；如果输入值不是数字或字符串，则抛出类型错误 22 | */ 23 | export function formatNumber( 24 | value: number | string, 25 | precision: number = 2, 26 | separator: string = ',', 27 | decimal: string = '.', 28 | prefix?: string, 29 | suffix?: string 30 | ): string { 31 | // 类型检查 32 | if (typeof value !== 'number' && typeof value !== 'string') { 33 | console.warn('Expected value to be of type number or string') 34 | } 35 | if (typeof precision !== 'number') { 36 | console.warn('Expected precision to be of type number') 37 | } 38 | // 处理非数值或NaN的情况 39 | const numValue = Number(value) 40 | if (isNaN(numValue) || !isFinite(numValue)) { 41 | return '' 42 | } 43 | if (numValue === 0) { 44 | return numValue.toFixed(precision) 45 | } 46 | let formatValue = numValue.toFixed(precision) 47 | // 如果 separator 是数值而非字符串，会导致错误，此处进行检查 48 | if (typeof separator === 'string' && separator !== '') { 49 | const [integerPart, decimalPart] = formatValue.split('.') 50 | formatValue = 51 | integerPart.replace(/(\d)(?=(\d{3})+$)/g, '$1' + separator) + (decimalPart ? decimal + decimalPart : '') 52 | } 53 | return (prefix || '') + formatValue + (suffix || '') 54 | } 55 | ``` 56 | 57 | ::: 58 | 59 | 62 | 63 | ## 基本使用 64 | 65 | **自定义保留 `precision` 位小数，并使用 `separator` 分隔符进行数字格式化** 66 | 67 |

{{ formatNumber(123456789.87654321, 2, ',') }}

68 | 69 | ```vue 70 | 74 | ``` 75 | 76 | ## Params 77 | 78 | | 参数 | 说明 | 类型 | 默认值 | 79 | | --------- | -------------------------- | -------------------- | --------- | 80 | | value | 要格式化的数字或数字字符串 | number | string | undefined | 81 | | precision | 小数点后的位数 | number | 2 | 82 | | separator | 千分位分隔符 | string | ',' | 83 | | decimal | 小数点字符 | string | '.' | 84 | | prefix? | 数字前的字符串 | string | undefined | 85 | | suffix? | 数字后的字符串 | string | undefined | 86 | -------------------------------------------------------------------------------- /docs/utils/functions/fps.md: -------------------------------------------------------------------------------- 1 | # 刷新率 useFps 2 | 3 | 4 | 5 | _实时监测浏览器刷新率 `FPS` 的组合式函数_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 组合式函数 12 | * 实时监测浏览器刷新率FPS 13 | * 14 | * FPS值可以帮助开发者识别性能瓶颈，以优化应用的性能 15 | * 16 | * @returns {{ fps: Ref }} 返回一个包含 FPS 值的 ref 对象 17 | */ 18 | import { ref } from 'vue' 19 | import type { Ref } from 'vue' 20 | export function useFps(): { fps: Ref } { 21 | const fps = ref(0) 22 | const frameCount = ref(0) 23 | let lastTime = performance.now() 24 | const every = 10 25 | const calculateFrameRate = (currentTime: number) => { 26 | frameCount.value++ 27 | if (frameCount.value >= every) { 28 | // 每 every 帧进行一次 FPS 计算 29 | const timeDiff = currentTime - lastTime 30 | fps.value = Math.round(1000 / (timeDiff / every)) 31 | lastTime = currentTime 32 | frameCount.value = 0 33 | } 34 | requestAnimationFrame(calculateFrameRate) 35 | } 36 | requestAnimationFrame(calculateFrameRate) 37 | // 返回帧率状态 38 | return { fps } 39 | } 40 | ``` 41 | 42 | ::: 43 | 44 | 49 | 50 | ## 基本使用 51 | 52 |

帧率：{{ fps }}

53 | 54 | ```vue 55 | 60 | 63 | ``` 64 | -------------------------------------------------------------------------------- /docs/utils/functions/injection.md: -------------------------------------------------------------------------------- 1 | # 获取依赖注入 useInject 2 | 3 | 4 | 5 | _使用依赖注入的自定义函数_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | import { TinyColor } from '@ctrl/tinycolor' 11 | import { generate } from '@ant-design/colors' 12 | import { inject, reactive, toRefs } from 'vue' 13 | import type { Ref } from 'vue' 14 | /** 15 | * 使用依赖注入的函数 16 | * 用于获取颜色调色板和阴影颜色 17 | * 如果在组件中使用，则会尝试从组件的依赖注入中获取颜色配置 18 | * 如果未找到，则回退到全局的默认颜色配置 19 | * 20 | * @param {string} key 组件名，用于在组件的依赖注入中查找颜色配置 21 | * @returns {{ colorPalettes: Ref, shadowColor: Ref }} 返回包含颜色调色板和阴影颜色的主题对象 22 | */ 23 | export function useInject(key: string): { colorPalettes: Ref; shadowColor: Ref } { 24 | // 获取默认的颜色调色板 25 | const colorPalettes = getColorPalettes('#1677ff') 26 | // 获取 common 的依赖注入 27 | const commonInjectValue = inject('common', reactive({ colorPalettes, shadowColor: getAlphaColor(colorPalettes[0]) })) 28 | // 获取组件的依赖注入 29 | const componentsInjectValue = inject('components', null) as Record< 30 | string, 31 | { colorPalettes: string[]; shadowColor: string } 32 | > | null 33 | if ( 34 | componentsInjectValue !== null && 35 | key in componentsInjectValue && 36 | componentsInjectValue[key].colorPalettes.length 37 | ) { 38 | return toRefs(componentsInjectValue[key]) 39 | } 40 | return toRefs(commonInjectValue) 41 | } 42 | /** 43 | * 获取颜色调色板 44 | * 45 | * @param {string} primaryColor 主色 46 | * @returns {string[]} 返回颜色调色板 47 | */ 48 | function getColorPalettes(primaryColor: string): string[] { 49 | return generate(primaryColor) 50 | } 51 | /** 52 | * 是否为可靠的颜色值 53 | * 54 | * @param {number} color 颜色值 55 | * @returns {boolean} 返回颜色值是否可靠 56 | */ 57 | function isStableColor(color: number): boolean { 58 | return color >= 0 && color <= 255 59 | } 60 | /** 61 | * 获取透明度颜色，一般用作阴影色 62 | * 63 | * @param {string} frontColor 前景色 64 | * @param {string} [backgroundColor = '#ffffff'] 背景色 65 | * @returns {string} 返回透明度颜色 66 | */ 67 | function getAlphaColor(frontColor: string, backgroundColor: string = '#ffffff'): string { 68 | const { r: fR, g: fG, b: fB, a: originAlpha } = new TinyColor(frontColor).toRgb() 69 | if (originAlpha < 1) return frontColor 70 | const { r: bR, g: bG, b: bB } = new TinyColor(backgroundColor).toRgb() 71 | for (let fA = 0.01; fA <= 1; fA += 0.01) { 72 | const r = Math.round((fR - bR * (1 - fA)) / fA) 73 | const g = Math.round((fG - bG * (1 - fA)) / fA) 74 | const b = Math.round((fB - bB * (1 - fA)) / fA) 75 | if (isStableColor(r) && isStableColor(g) && isStableColor(b)) { 76 | return new TinyColor({ r, g, b, a: Math.round(fA * 100) / 100 }).toRgbString() 77 | } 78 | } 79 | return new TinyColor({ r: fR, g: fG, b: fB, a: 1 }).toRgbString() 80 | } 81 | ``` 82 | 83 | ::: 84 | 85 | ## 基本使用 86 | 87 | ```vue 88 | 95 | ``` 96 | 97 | ## Params 98 | 99 | | 参数 | 说明 | 类型 | 默认值 | 100 | | ---- | ------ | ------ | --------- | 101 | | key | 组件名 | string | undefined | 102 | -------------------------------------------------------------------------------- /docs/utils/functions/media-query.md: -------------------------------------------------------------------------------- 1 | # 媒体查询 useMediaQuery 2 | 3 | 4 | 5 | _根据 `CSS media query` 的不同结果动态地更新：是桌面端还是移动端_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 组合式函数 12 | * 使用媒体查询来判断当前环境是否符合指定的媒体查询条件 13 | * 14 | * 该函数提供了一个响应式的媒体查询机制，根据查询的不同结果动态更新响应式变量 15 | * 16 | * @param {string} mediaQuery 媒体查询字符串，用于定义要查询的媒体条件 17 | * @returns {{ match: Ref }} 返回一个对象，其中包含一个名为 match 的 ref 对象，表示当前是否为移动设备视口 18 | */ 19 | import { ref, onMounted, onBeforeUnmount } from 'vue' 20 | import type { Ref } from 'vue' 21 | export function useMediaQuery(mediaQuery: string): { match: Ref } { 22 | // 检查传入的mediaQuery参数是否为空或非法 23 | if (!mediaQuery || typeof mediaQuery !== 'string' || mediaQuery.trim() === '') { 24 | throw new Error('Invalid mediaQuery parameter. It must be a non-empty string.') 25 | } 26 | const match = ref(window && window.matchMedia(mediaQuery).matches) 27 | const mediaQueryList = window.matchMedia(mediaQuery) 28 | // 处理媒体查询状态改变的事件 29 | const updateChange = (e: MediaQueryListEvent) => { 30 | match.value = e.matches // 一个布尔值，如果当前 document 与媒体查询列表相匹配，则返回 true，否则返回 false 31 | } 32 | onMounted(() => { 33 | mediaQueryList.addEventListener('change', updateChange) 34 | }) 35 | onBeforeUnmount(() => { 36 | mediaQueryList.removeEventListener('change', updateChange) 37 | }) 38 | return { match } 39 | } 40 | ``` 41 | 42 | ::: 43 | 44 | ## 参考文档 45 | 46 | - [Window.matchMedia()](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia) 47 | 48 | 52 | 53 | ## 基本使用 54 | 55 | _请缩放浏览器查看效果_ 56 | 57 |

{{ isMobile ? '移动端' : '桌面端' }}

58 | 59 | ```vue 60 | 64 | 67 | ``` 68 | 69 | ## Params 70 | 71 | | 参数 | 说明 | 类型 | 默认值 | 72 | | ---------- | ---------------------------------------- | ------ | --------- | 73 | | mediaQuery | 媒体查询字符串，用于定义要查询的媒体条件 | string | undefined | 74 | -------------------------------------------------------------------------------- /docs/utils/functions/options-supported.md: -------------------------------------------------------------------------------- 1 | # 否支持事件监听器选项 useOptionsSupported 2 | 3 | 4 | 5 | *检查浏览器是否支持给定的事件监听器选项* 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 检查浏览器是否支持给定的事件监听器选项 12 | * 13 | * @param prop 一个表示要检查的事件监听器属性的字符串，可选 'capture'、'once'、'passive' 或 'signal' 14 | * @returns 返回一个对象，包含一个 Ref 对象，其值指示浏览器是否支持给定的选项 15 | */ 16 | import { ref } from 'vue' 17 | import type { Ref } from 'vue' 18 | export function useOptionsSupported(prop: 'capture' | 'once' | 'passive' | 'signal'): { isSupported: Ref } { 19 | // 兼容旧版本的浏览器（以及一些相对不算古老的）仍然假定 addEventListener 第三个参数是布尔值的情况 20 | const isSupported = ref(false) // 浏览器是否支持 options 参数 21 | try { 22 | const options = { 23 | get [prop]() { 24 | // 该函数会在浏览器尝试访问 [prop] 值时被调用 25 | isSupported.value = true 26 | return false 27 | } 28 | } 29 | window.addEventListener('test', () => null, options) 30 | window.removeEventListener('test', () => null, options) 31 | } catch (err) { 32 | isSupported.value = false 33 | } 34 | return { isSupported } 35 | } 36 | ``` 37 | 38 | ::: 39 | 40 | 57 | 58 | ## 基本使用 59 | 60 | 61 | 62 | {{ captureSupported }} 63 | 64 | 65 | {{ onceSupported }} 66 | 67 | 68 | {{ passiveSupported }} 69 | 70 | 71 | {{ signalSupported }} 72 | 73 | 74 | 75 | ```vue 76 | 93 | ``` 94 | 95 | ## Params 96 | 97 | 参数 | 说明 | 类型 | 默认值 98 | -- | -- | -- | -- 99 | prop | 事件监听器选项的属性 | 'capture' | 'once' | 'passive' | 'signal' | undefined 100 | -------------------------------------------------------------------------------- /docs/utils/functions/slots-exist.md: -------------------------------------------------------------------------------- 1 | # 监听插槽存在 useSlotsExist 2 | 3 | 4 | 5 | _监听给定名称或名称数组的插槽是否存在，支持监听单个插槽或一组插槽的存在_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 组合式函数 12 | * 监听给定名称或名称数组的插槽是否存在，支持监听单个插槽或一组插槽的存在 13 | * 14 | * @param slotsName - 插槽的名称或名称数组，默认为 'default' 15 | * @returns 如果是单个插槽名称，则返回一个计算属性，表示该插槽是否存在 16 | * 如果是插槽名称数组，则返回一个 reactive 对象，其中的每个属性对应该插槽是否存在 17 | */ 18 | import { useSlots, reactive, computed, Comment, Text } from 'vue' 19 | import type { ComputedRef, Reactive, VNode } from 'vue' 20 | type SlotsExistResult = T extends string 21 | ? ComputedRef 22 | : Reactive>> 23 | export function useSlotsExist(slotsName: T): SlotsExistResult { 24 | const slots = useSlots() // 获取当前组件的所有插槽 25 | // 检查特定名称的插槽是否存在且不为空 26 | const checkSlotsExist = (slotName: string): boolean => { 27 | const slotsContent = slots[slotName]?.() 28 | const checkExist = (slotContent: VNode) => { 29 | if (slotContent.type === Comment) { 30 | return false 31 | } 32 | if (Array.isArray(slotContent.children) && !slotContent.children.length) { 33 | return false 34 | } 35 | if (slotContent.type !== Text) { 36 | return true 37 | } 38 | if (typeof slotContent.children === 'string') { 39 | return slotContent.children.trim() !== '' 40 | } 41 | } 42 | if (slotsContent && slotsContent?.length) { 43 | const result = slotsContent.some((slotContent: VNode) => { 44 | return checkExist(slotContent) 45 | }) 46 | return result 47 | } 48 | return false 49 | } 50 | if (Array.isArray(slotsName)) { 51 | const slotsExist = reactive>>({}) 52 | slotsName.forEach((slotName: string) => { 53 | const exist = computed(() => checkSlotsExist(slotName)) 54 | slotsExist[slotName] = exist // 将一个 ref 赋值给一个 reactive 属性时，该 ref 会自动解包 55 | }) 56 | return slotsExist as SlotsExistResult 57 | } else { 58 | return computed(() => checkSlotsExist(slotsName)) as SlotsExistResult 59 | } 60 | } 61 | ``` 62 | 63 | ::: 64 | 65 | ## 基本使用 66 | 67 | ```vue 68 | 85 | 91 | ``` 92 | 93 | ## Params 94 | 95 | | 参数 | 说明 | 类型 | 默认值 | 96 | | --------- | -------------------- | ---------------------- | --------- | 97 | | slotsName | 插槽的名称或名称数组 | string | string[] | 'default' | 98 | -------------------------------------------------------------------------------- /docs/utils/functions/throttle.md: -------------------------------------------------------------------------------- 1 | # 节流 throttle 2 | 3 | 4 | 5 | _如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间 `delay` 期限内不再工作，直至过了这段时间才重新生效_ 6 | 7 | ::: details Show Source Code 8 | 9 | ```ts 10 | /** 11 | * 节流函数 throttle 12 | * 13 | * 该函数用于生成一个节流函数，用于控制某个函数在给定时间间隔内只能被执行一次 14 | * 主要用于性能优化，例如限制事件处理函数的触发频率 15 | * 16 | * @param {Function} fn 要被节流的函数 17 | * @param {number} [delay = 300] 节流的时间间隔，单位 ms，默认为 300ms 18 | * @returns {Function} 返回一个新的节流的函数 19 | */ 20 | export function throttle(fn: Function, delay: number = 300): Function { 21 | let valid = true // 用于标记函数是否可以执行 22 | return function (...args: any[]) { 23 | if (!valid) return false // 返回 false，表示当前不执行函数 24 | // 返回一个新的函数，该函数负责执行节流逻辑 25 | if (valid) { 26 | fn(...args) // 执行原函数 27 | valid = false // 将函数置为无效 28 | setTimeout(() => { 29 | valid = true 30 | }, delay) 31 | } 32 | } 33 | } 34 | ``` 35 | 36 | ::: 37 | 38 | ## 何时使用 39 | 40 | - 短时间内大量触发同一事件时，每 `delay` `ms` 内函数只执行一次 41 | 42 | 51 | 52 | ## 基本使用 53 | 54 |

滚动条位置：{{ scrollTop }}

55 | 56 | ```vue 57 | 66 | ``` 67 | 68 | ## Params 69 | 70 | | 参数 | 说明 | 类型 | 默认值 | 71 | | ----- | ------------------------- | -------- | --------- | 72 | | fn | 要被节流的函数 | Function | undefined | 73 | | delay | 节流的时间间隔，单位 `ms` | number | 300 | 74 | -------------------------------------------------------------------------------- /docs/utils/started.md: -------------------------------------------------------------------------------- 1 | # 快速上手 2 | 3 | 4 | 5 | ## 介绍 6 | 7 | 功能丰富，简单易用！ 8 | 9 | ## 使用 10 | 11 | ```vue 12 | 34 | ``` 35 | 36 | ## 说明 37 | 38 | | Name | Description | Type | 39 | | :-- | :-- | :-- | 40 | | dateFormat | 格式化日期时间字符串函数 | (value: number | string | Date = Date.now(), format: string = 'YYYY-MM-DD HH:mm:ss') => string | 41 | | formatNumber | 数字格式化函数 | (value: number | string, precision: number = 2, separator: string = ',', decimal: string = '.', prefix?: string, suffix?: string) => string | 42 | | rafTimeout | 使用 `requestAnimationFrame` 实现的延迟 `setTimeout` 或间隔 `setInterval` 调用函数 | (fn: Function, delay: number = 0, interval: boolean = false) => \{ id: number } | 43 | | cancelRaf | 用于取消 `rafTimeout` 函数 | (raf: { id: number }) => void | 44 | | throttle | 节流函数 | (fn: Function, delay: number = 300) => Function | 45 | | debounce | 防抖函数 | (fn: Function, delay: number = 300) => Function | 46 | | add | 消除 `js` 加减精度问题的加法函数 | (num1: number, num2: number) => number | 47 | | downloadFile | 下载文件并自定义文件名，未传 `fileName` 时，从文件地址中自动提取文件名称 | (url: string, fileName?: string) => void | 48 | | toggleDark | 一键切换暗黑模式函数 | () => void | 49 | | useEventListener | 使用 `Vue` 的生命周期钩子添加和移除事件监听器 | (target: HTMLElement | Window | Document, event: string, callback: Function) => void | 50 | | useMutationObserver | 使用 `MutationObserver` 观察 `DOM` 元素的变化 | (target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: MutationCallback, options: object = {}) => { start: \() => void, stop: \() => void } | 51 | | useScroll | 实时监测目标元素滚动位置及状态 | (target: Ref | HTMLElement | Window | Document = window, throttleDelay: number = 0, onScroll?: (e: Event) => void, onStop?: (e: Event) => void) => { x: Ref\, xScrollMax: Ref\, y: Ref\, yScrollMax: Ref\, isScrolling: Ref\, left: Ref\, right: Ref\, top: Ref\, bottom: Ref\ } | 52 | | useFps | 实时监测浏览器刷新率FPS | () => { fps: Ref\ } | 53 | | useMediaQuery | 使用媒体查询来判断当前环境是否符合指定的媒体查询条件 | (mediaQuery: string) => { match: Ref\ } | 54 | | useResizeObserver | 使用 `ResizeObserver` 观察 `DOM` 元素尺寸变化 | (target: Ref | Ref[] | HTMLElement | HTMLElement[], callback: ResizeObserverCallback, options: object = {}) => { start: \() => void, stop: \() => void } | 55 | | useSlotsExist | 监听给定名称或名称数组的插槽是否存在，支持监听单个插槽或一组插槽的存在 | (slotsName: T) => T extends string ? ComputedRef\ : Reactive\>> | 56 | | useInject | 使用依赖注入的函数，用于获取颜色调色板和阴影颜色 | (key: string) => { colorPalettes: Ref\, shadowColor: Ref\ } | 57 | | useOptionsSupported | 检查浏览器是否支持给定的事件监听器选项 | (prop: 'capture' | 'once' | 'passive' | 'signal') => { isSupported: Ref\ } | 58 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import pluginVue from 'eslint-plugin-vue' 2 | import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript' 3 | import skipFormatting from '@vue/eslint-config-prettier/skip-formatting' 4 | 5 | // To allow more languages other than `ts` in `.vue` files, uncomment the following lines: 6 | // import { configureVueProject } from '@vue/eslint-config-typescript' 7 | // configureVueProject({ scriptLangs: ['ts', 'tsx'] }) 8 | // More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup 9 | 10 | export default defineConfigWithVueTs( 11 | { 12 | name: 'app/files-to-lint', 13 | files: ['**/*.{ts,mts,tsx,vue}'] 14 | }, 15 | 16 | { 17 | name: 'app/files-to-ignore', 18 | ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**', 'docs/.vitepress/**'] 19 | }, 20 | 21 | pluginVue.configs['flat/essential'], 22 | vueTsConfigs.recommended, 23 | skipFormatting, 24 | 25 | // 添加自定义规则 26 | { 27 | name: 'custom-eslint-rules', 28 | rules: { 29 | '@typescript-eslint/no-explicit-any': 'off', 30 | '@typescript-eslint/no-unused-vars': 'off', 31 | '@typescript-eslint/no-unused-expressions': 'off', 32 | '@typescript-eslint/no-duplicate-enum-values': 'off', 33 | '@typescript-eslint/no-unsafe-function-type': 'off', 34 | 'vue/multi-word-component-names': 'off', 35 | 'vue/no-unused-vars': 'off', 36 | 'vue/return-in-computed-property': 'off', 37 | 'vue/require-toggle-inside-transition': 'off' 38 | } 39 | } 40 | ) 41 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Amazing UI 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/themusecatcher/vue-amazing-ui/f7160984e69a414abc12e677e256bad56331ad58/public/favicon.ico -------------------------------------------------------------------------------- /scripts/deploy.sh: -------------------------------------------------------------------------------- 1 | # /bin/bash 2 | 3 | # 确保脚本抛出遇到的错误 4 | set -e 5 | 6 | commitDesc=$1 7 | 8 | # 重新打包组件库 9 | pnpm build 10 | 11 | # 打包生成静态文件 12 | pnpm docs:build 13 | 14 | # 进入待发布的 dist/ 目录 15 | cd docs/.vitepress/dist 16 | 17 | # 提交打包静态网站到 github-pages 分支 18 | git init 19 | git branch -M main 20 | git add . 21 | git commit -m 'deploy' 22 | 23 | # 部署到 https://.github.io/ 24 | git push -f git@github.com:themusecatcher/vue-amazing-ui.git main:gh-pages 25 | 26 | # 提交所有代码到 github 27 | cd ../../../ 28 | git add . 29 | 30 | if [ -z "$commitDesc" ]; then 31 | git commit -m 'feat: update components library' 32 | else 33 | git commit -m "$commitDesc" 34 | fi 35 | 36 | git push 37 | 38 | echo ⏰ "$(date '+%Y-%m-%d %H:%M:%S')" 39 | -------------------------------------------------------------------------------- /scripts/publish.sh: -------------------------------------------------------------------------------- 1 | # /bin/bash 2 | 3 | # 确保脚本抛出遇到的错误 4 | set -e 5 | 6 | commitDesc=$1 7 | 8 | # 读取 package.json 中的 version 9 | version=$(jq -r .version package.json) 10 | 11 | # 打包构建 12 | pnpm build 13 | 14 | git add . 15 | 16 | if [ -z "$commitDesc" ]; then 17 | git commit -m 'feat: update components library' 18 | else 19 | git commit -m "$commitDesc" 20 | fi 21 | 22 | git push 23 | 24 | # 发布到 npm 25 | npm publish 26 | 27 | # 升级 vue-amazing-ui 依赖版本 28 | pnpm up vue-amazing-ui@$version 29 | 30 | # 提交版本更新代码到 github 31 | git add . 32 | git commit -m "feat: update $version" 33 | git push 34 | 35 | # 重新部署文档 36 | pnpm docs:deploy "$commitDesc" 37 | -------------------------------------------------------------------------------- /scripts/push.sh: -------------------------------------------------------------------------------- 1 | # /bin/bash 2 | 3 | # 确保脚本抛出遇到的错误 4 | set -e 5 | 6 | # 提交修改到 github 7 | 8 | commitDesc=$1 9 | 10 | git add . 11 | 12 | if [ -z "$commitDesc" ]; then 13 | git commit -m 'feat: update components library' 14 | else 15 | git commit -m "$commitDesc" 16 | fi 17 | 18 | git push 19 | 20 | echo ⏰ "$(date '+%Y-%m-%d %H:%M:%S')" 21 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 19 | 28 | -------------------------------------------------------------------------------- /src/assets/less/global.less: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | html { 9 | transition: filter 0.3s ease-in-out; 10 | } 11 | /* 12 | invert(): 反转输入图像，1表示完全反转 13 | hue-rotate(): 在输入图像上应用色相旋转 14 | */ 15 | html.dark { 16 | // 网站暗黑模式 17 | filter: invert(1) hue-rotate(180deg); 18 | img, 19 | video { 20 | // 将图片和视频再次反转以恢复原本的颜色 21 | filter: invert(1) hue-rotate(180deg); 22 | } 23 | .watermark, 24 | .ant-menu, 25 | .m-switch-wrap { 26 | filter: invert(1) hue-rotate(180deg); 27 | } 28 | } 29 | // sepia(): 将图像转换为深褐色 30 | html.cafe { 31 | filter: sepia(0.9) hue-rotate(315deg) brightness(0.9); 32 | } 33 | html.contrast { 34 | filter: contrast(2); // 调整颜色对比度 35 | } 36 | body { 37 | min-height: 100vh; 38 | background: #fff; 39 | color: rgba(0, 0, 0, 0.88); 40 | font-family: 41 | Inter, 42 | -apple-system, 43 | BlinkMacSystemFont, 44 | 'Segoe UI', 45 | Roboto, 46 | Oxygen, 47 | Ubuntu, 48 | Cantarell, 49 | 'Fira Sans', 50 | 'Droid Sans', 51 | 'Helvetica Neue', 52 | sans-serif; 53 | } 54 | h1 { 55 | // h1 标签渐变色文本 56 | display: inline-block; 57 | -webkit-background-clip: text; 58 | background-clip: text; 59 | color: #0000; 60 | white-space: nowrap; 61 | background-image: linear-gradient(to right, #09c8ce, #eb2f96); 62 | } 63 | .mt10 { 64 | margin-top: 10px; 65 | } 66 | .mt30 { 67 | margin-top: 30px; 68 | } 69 | .mt150 { 70 | margin-top: 150px; 71 | } 72 | .mb10 { 73 | margin-bottom: 10px; 74 | } 75 | .mb30 { 76 | margin-bottom: 30px; 77 | } 78 | .ml20 { 79 | margin-left: 20px; 80 | } 81 | .ml60 { 82 | margin-left: 60px; 83 | } 84 | .ml120 { 85 | margin-left: 120px; 86 | } 87 | .mr20 { 88 | margin-right: 20px; 89 | } 90 | .mr30 { 91 | margin-right: 30px; 92 | } 93 | .m-list { 94 | margin-top: 10px; 95 | margin-left: 16px; 96 | font-size: 20px; 97 | } 98 | .u-file { 99 | font-size: 18px; 100 | cursor: pointer; 101 | } 102 | .u-tip { 103 | font-size: 18px; 104 | color: #333; 105 | } 106 | .u-intro { 107 | font-size: 16px; 108 | color: #333; 109 | margin-top: 5px; 110 | margin-bottom: 10px; 111 | } 112 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import 'less/global.less' 5 | 6 | import VueAmazingUI from 'components/index' 7 | // import VueAmazingUI from 'vue-amazing-ui' 8 | // import 'vue-amazing-ui/css' 9 | 10 | const app = createApp(App) 11 | // window.rafTimeout = rafTimeout // 挂载到window上，全局可用，无需引入 12 | app.use(router) 13 | app.use(VueAmazingUI) 14 | app.mount('#app') 15 | -------------------------------------------------------------------------------- /src/views/alert/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '警告提示' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/avatar/Index.vue: -------------------------------------------------------------------------------- 1 | 6 | 122 | -------------------------------------------------------------------------------- /src/views/avatar/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '头像' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/backTop/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '回到顶部' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/badge/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '徽标' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/breadcrumb/Index.vue: -------------------------------------------------------------------------------- 1 | 42 | 107 | 133 | -------------------------------------------------------------------------------- /src/views/breadcrumb/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '面包屑' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/button/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '按钮' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/calendar/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '日历' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/card/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '卡片' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/carousel/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '轮播图' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/cascader/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '级联选择' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '复选框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/collapse/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '折叠面板' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/colorPicker/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '颜色选择器' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/configProvider/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '全局化配置' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/countdown/Index.vue: -------------------------------------------------------------------------------- 1 | 13 | 80 | -------------------------------------------------------------------------------- /src/views/countdown/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '倒计时' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/datePicker/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '日期选择' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/descriptions/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '描述列表' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/dialog/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '对话框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/divider/Index.vue: -------------------------------------------------------------------------------- 1 | 41 | -------------------------------------------------------------------------------- /src/views/divider/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '分割线' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/drawer/Index.vue: -------------------------------------------------------------------------------- 1 | 36 | 105 | -------------------------------------------------------------------------------- /src/views/drawer/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '抽屉' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/ellipsis/Index.vue: -------------------------------------------------------------------------------- 1 | 6 | 85 | -------------------------------------------------------------------------------- /src/views/ellipsis/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '文本省略' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/empty/Index.vue: -------------------------------------------------------------------------------- 1 | 47 | 57 | -------------------------------------------------------------------------------- /src/views/empty/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '空状态' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/exception/Index.vue: -------------------------------------------------------------------------------- 1 | 8 | -------------------------------------------------------------------------------- /src/views/exception/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '未找到' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/flex/Index.vue: -------------------------------------------------------------------------------- 1 | 87 | 127 | -------------------------------------------------------------------------------- /src/views/flex/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '弹性布局' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/floatButton/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '浮动按钮' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/gradientText/Index.vue: -------------------------------------------------------------------------------- 1 | 56 | -------------------------------------------------------------------------------- /src/views/gradientText/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '渐变文字' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/grid/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '栅格' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/highlight/Index.vue: -------------------------------------------------------------------------------- 1 | 8 | 41 | -------------------------------------------------------------------------------- /src/views/highlight/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '高亮文本' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/home/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '首页' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/image/Index.vue: -------------------------------------------------------------------------------- 1 | 27 | 67 | 73 | -------------------------------------------------------------------------------- /src/views/image/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '图片' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/input/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '输入框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/inputNumber/Index.vue: -------------------------------------------------------------------------------- 1 | 34 | 82 | -------------------------------------------------------------------------------- /src/views/inputNumber/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '数字输入框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/inputSearch/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '搜索框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/layout/Index.vue: -------------------------------------------------------------------------------- 1 | 4 | 10 | -------------------------------------------------------------------------------- /src/views/layout/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '布局' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/list/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '列表' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/loadingBar/Index.vue: -------------------------------------------------------------------------------- 1 | 21 | 55 | 65 | -------------------------------------------------------------------------------- /src/views/loadingBar/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '加载条' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/message/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '全局提示' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/modal/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '模态框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/notification/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '通知提醒' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/numberAnimation/Index.vue: -------------------------------------------------------------------------------- 1 | 28 | 103 | -------------------------------------------------------------------------------- /src/views/numberAnimation/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '数值动画' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/pagination/Index.vue: -------------------------------------------------------------------------------- 1 | 48 | 96 | -------------------------------------------------------------------------------- /src/views/pagination/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '分页' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/popconfirm/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '弹出确认' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/popover/Index.vue: -------------------------------------------------------------------------------- 1 | 8 | 86 | -------------------------------------------------------------------------------- /src/views/popover/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '气泡卡片' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/progress/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '进度条' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/qrcode/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '二维码' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/radio/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '单选框' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/rate/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '评分' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/result/Index.vue: -------------------------------------------------------------------------------- 1 | 4 | 85 | 91 | -------------------------------------------------------------------------------- /src/views/result/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '结果' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/scrollbar/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '滚动条' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/segmented/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '分段控制器' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/select/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '选择器' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/skeleton/Index.vue: -------------------------------------------------------------------------------- 1 | 54 | 112 | -------------------------------------------------------------------------------- /src/views/skeleton/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '骨架屏' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/slider/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '滑动输入条' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/space/Index.vue: -------------------------------------------------------------------------------- 1 | 24 | 96 | 114 | -------------------------------------------------------------------------------- /src/views/space/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '间距' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/spin/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '加载中' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/statistic/Index.vue: -------------------------------------------------------------------------------- 1 | 8 | 77 | -------------------------------------------------------------------------------- /src/views/statistic/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '统计数值' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/steps/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '步骤条' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/swiper/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '触摸滑动' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/switch/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '开关' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/table/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '表格' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/tabs/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '标签页' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/tag/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '标签' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/textScroll/index.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | title: '文字滚动' 3 | } 4 | -------------------------------------------------------------------------------- /src/views/textarea/Index.vue: -------------------------------------------------------------------------------- 1 | 18 |