refactor: 优化全局组件定义

This commit is contained in:
pipipi-pikachu 2022-06-24 15:45:20 +08:00
parent e62fbd839d
commit ee4f27faef
3 changed files with 123 additions and 339 deletions

232
src/components.d.ts vendored
View File

@ -1,119 +1,11 @@
import FileInput from '@/components/FileInput.vue'
import CheckboxButton from '@/components/CheckboxButton.vue'
import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
import ColorPicker from '@/components/ColorPicker/index.vue'
import FullscreenSpin from '@/components/FullscreenSpin.vue'
import { icons } from '@/plugins/icon'
import { components } from '@/plugins/component'
import {
PlayOne,
FullScreenPlay,
Lock,
Unlock,
Ppt,
Format,
Picture,
FullScreen,
List,
OrderedList,
Helpcenter,
FlipVertically,
FlipHorizontally,
FontSize,
Code,
TextBold,
TextItalic,
TextUnderline,
Strikethrough,
Edit,
Quote,
BackgroundColor,
Group,
Ungroup,
Back,
Next,
Fullwidth,
AlignTop,
AlignLeft,
AlignRight,
AlignBottom,
AlignVertically,
AlignHorizontally,
BringToFront,
SendToBack,
AlignTextLeft,
AlignTextRight,
AlignTextCenter,
RowHeight,
Write,
InsertTable,
AddText,
Fill,
Tailoring,
Effects,
ColorFilter,
Down,
Plus,
Minus,
Connection,
BringToFrontOne,
SentToBack,
Github,
ChartProportion,
ChartHistogram,
ChartHistogramOne,
ChartLineArea,
ChartRing,
ChartScatter,
ChartLine,
ChartPie,
Text,
Rotate,
LeftTwo,
RightTwo,
Platte,
UpOne,
DownOne,
Close,
CloseSmall,
Undo,
Transform,
Click,
Theme,
ArrowCircleLeft,
GraphicDesign,
Logout,
Erase,
Clear,
FolderClose,
AlignTextTopOne,
AlignTextBottomOne,
AlignTextMiddleOne,
Pause,
VolumeMute,
VolumeNotice,
VolumeSmall,
VideoTwo,
Formula,
LinkOne,
FullScreenOne,
OffScreenOne,
Power,
ListView,
Magic,
HighLight,
Share,
IndentLeft,
IndentRight,
VerticalSpacingBetweenItems,
Copy,
Delete,
Square,
Round,
Needle,
} from '@icon-park/vue-next'
type Icon = typeof icons
type CustomComponent = typeof components
declare module 'vue' {
export interface GlobalComponents {
export interface GlobalComponents extends Icon, CustomComponent {
// antd 组件
InputNumber: typeof import('ant-design-vue')['InputNumber']
@ -140,120 +32,6 @@ declare module 'vue' {
Checkbox: typeof import('ant-design-vue')['Checkbox']
Drawer: typeof import('ant-design-vue')['Drawer']
Spin: typeof import('ant-design-vue')['Spin']
// 自定义组件
FileInput: typeof FileInput
CheckboxButton: typeof CheckboxButton
CheckboxButtonGroup: typeof CheckboxButtonGroup
ColorPicker: typeof ColorPicker
FullscreenSpin: typeof FullscreenSpin
// IconPark 图标组件
IconPlayOne: typeof PlayOne
IconFullScreenPlay: typeof FullScreenPlay
IconLock: typeof Lock
IconUnlock: typeof Unlock
IconPpt: typeof Ppt
IconFormat: typeof Format
IconPicture: typeof Picture
IconFullScreen: typeof FullScreen
IconList: typeof List
IconOrderedList: typeof OrderedList
IconHelpcenter: typeof Helpcenter
IconFlipVertically: typeof FlipVertically
IconFlipHorizontally: typeof FlipHorizontally
IconFontSize: typeof FontSize
IconCode: typeof Code
IconTextBold: typeof TextBold
IconTextItalic: typeof TextItalic
IconTextUnderline: typeof TextUnderline
IconStrikethrough: typeof Strikethrough
IconEdit: typeof Edit
IconQuote: typeof Quote
IconBackgroundColor: typeof BackgroundColor
IconGroup: typeof Group
IconUngroup: typeof Ungroup
IconBack: typeof Back
IconNext: typeof Next
IconFullwidth: typeof Fullwidth
IconAlignTop: typeof AlignTop
IconAlignLeft: typeof AlignLeft
IconAlignRight: typeof AlignRight
IconAlignBottom: typeof AlignBottom
IconAlignVertically: typeof AlignVertically
IconAlignHorizontally: typeof AlignHorizontally
IconBringToFront: typeof BringToFront
IconSendToBack: typeof SendToBack
IconAlignTextLeft: typeof AlignTextLeft
IconAlignTextRight: typeof AlignTextRight
IconAlignTextCenter: typeof AlignTextCenter
IconRowHeight: typeof RowHeight
IconWrite: typeof Write
IconInsertTable: typeof InsertTable
IconAddText: typeof AddText
IconFill: typeof Fill
IconTailoring: typeof Tailoring
IconEffects: typeof Effects
IconColorFilter: typeof ColorFilter
IconDown: typeof Down
IconPlus: typeof Plus
IconMinus: typeof Minus
IconConnection: typeof Connection
IconBringToFrontOne: typeof BringToFrontOne
IconSentToBack: typeof SentToBack
IconGithub: typeof Github
IconChartProportion: typeof ChartProportion
IconChartHistogram: typeof ChartHistogram
IconChartHistogramOne: typeof ChartHistogramOne
IconChartLineArea: typeof ChartLineArea
IconChartRing: typeof ChartRing
IconChartScatter: typeof ChartScatter
IconChartLine: typeof ChartLine
IconChartPie: typeof ChartPie
IconText: typeof Text
IconRotate: typeof Rotate
IconLeftTwo: typeof LeftTwo
IconRightTwo: typeof RightTwo
IconPlatte: typeof Platte
IconUpOne: typeof UpOne
IconDownOne: typeof DownOne
IconClose: typeof Close
IconCloseSmall: typeof CloseSmall
IconUndo: typeof Undo
IconTransform: typeof Transform
IconClick: typeof Click
IconTheme: typeof Theme
IconArrowCircleLeft: typeof ArrowCircleLeft
IconGraphicDesign: typeof GraphicDesign
IconLogout: typeof Logout
IconErase: typeof Erase
IconClear: typeof Clear
IconFolderClose: typeof FolderClose
IconAlignTextTopOne: typeof AlignTextTopOne
IconAlignTextBottomOne: typeof AlignTextBottomOne
IconAlignTextMiddleOne: typeof AlignTextMiddleOne
IconPause: typeof Pause
IconVolumeMute: typeof VolumeMute
IconVolumeNotice: typeof VolumeNotice
IconVolumeSmall: typeof VolumeSmall
IconVideoTwo: typeof VideoTwo
IconFormula: typeof Formula
IconLinkOne: typeof LinkOne
IconFullScreenOne: typeof FullScreenOne
IconOffScreenOne: typeof OffScreenOne
IconPower: typeof Power
IconListView: typeof ListView
IconMagic: typeof Magic
IconHighLight: typeof HighLight
IconShare: typeof Share
IconIndentLeft: typeof IndentLeft
IconIndentRight: typeof IndentRight
IconVerticalSpacingBetweenItems: typeof VerticalSpacingBetweenItems
IconCopy: typeof Copy
IconDelete: typeof Delete
IconSquare: typeof Square
IconRound: typeof Round
IconNeedle: typeof Needle
}
}

View File

@ -6,12 +6,18 @@ import CheckboxButtonGroup from '@/components/CheckboxButtonGroup.vue'
import ColorPicker from '@/components/ColorPicker/index.vue'
import FullscreenSpin from '@/components/FullscreenSpin.vue'
export const components = {
FileInput,
CheckboxButton,
CheckboxButtonGroup,
ColorPicker,
FullscreenSpin,
}
export default {
install(app: App) {
app.component('FileInput', FileInput)
app.component('CheckboxButton', CheckboxButton)
app.component('CheckboxButtonGroup', CheckboxButtonGroup)
app.component('ColorPicker', ColorPicker)
app.component('FullscreenSpin', FullscreenSpin)
for (const key of Object.keys(components)) {
app.component(key, components[key])
}
}
}

View File

@ -109,118 +109,118 @@ import {
Needle,
} from '@icon-park/vue-next'
const icons = {
PlayOne,
FullScreenPlay,
Lock,
Unlock,
Ppt,
Format,
Picture,
FullScreen,
List,
OrderedList,
Helpcenter,
FlipVertically,
FlipHorizontally,
FontSize,
Code,
TextBold,
TextItalic,
TextUnderline,
Strikethrough,
Edit,
Quote,
BackgroundColor,
Group,
Ungroup,
Back,
Next,
Fullwidth,
AlignTop,
AlignLeft,
AlignRight,
AlignBottom,
AlignVertically,
AlignHorizontally,
BringToFront,
SendToBack,
AlignTextLeft,
AlignTextRight,
AlignTextCenter,
RowHeight,
Write,
InsertTable,
AddText,
Fill,
Tailoring,
Effects,
ColorFilter,
Down,
Plus,
Minus,
Connection,
BringToFrontOne,
SentToBack,
Github,
ChartProportion,
ChartHistogram,
ChartHistogramOne,
ChartLineArea,
ChartRing,
ChartScatter,
ChartLine,
ChartPie,
Text,
Rotate,
LeftTwo,
RightTwo,
Platte,
UpOne,
DownOne,
Close,
CloseSmall,
Undo,
Transform,
Click,
Theme,
ArrowCircleLeft,
GraphicDesign,
Logout,
Erase,
Clear,
FolderClose,
AlignTextTopOne,
AlignTextBottomOne,
AlignTextMiddleOne,
Pause,
VolumeMute,
VolumeNotice,
VolumeSmall,
VideoTwo,
Formula,
LinkOne,
FullScreenOne,
OffScreenOne,
Power,
ListView,
Magic,
HighLight,
Share,
IndentLeft,
IndentRight,
VerticalSpacingBetweenItems,
Copy,
Delete,
Square,
Round,
Needle,
export const icons = {
IconPlayOne: PlayOne,
IconFullScreenPlay: FullScreenPlay,
IconLock: Lock,
IconUnlock: Unlock,
IconPpt: Ppt,
IconFormat: Format,
IconPicture: Picture,
IconFullScreen: FullScreen,
IconList: List,
IconOrderedList: OrderedList,
IconHelpcenter: Helpcenter,
IconFlipVertically: FlipVertically,
IconFlipHorizontally: FlipHorizontally,
IconFontSize: FontSize,
IconCode: Code,
IconTextBold: TextBold,
IconTextItalic: TextItalic,
IconTextUnderline: TextUnderline,
IconStrikethrough: Strikethrough,
IconEdit: Edit,
IconQuote: Quote,
IconBackgroundColor: BackgroundColor,
IconGroup: Group,
IconUngroup: Ungroup,
IconBack: Back,
IconNext: Next,
IconFullwidth: Fullwidth,
IconAlignTop: AlignTop,
IconAlignLeft: AlignLeft,
IconAlignRight: AlignRight,
IconAlignBottom: AlignBottom,
IconAlignVertically: AlignVertically,
IconAlignHorizontally: AlignHorizontally,
IconBringToFront: BringToFront,
IconSendToBack: SendToBack,
IconAlignTextLeft: AlignTextLeft,
IconAlignTextRight: AlignTextRight,
IconAlignTextCenter: AlignTextCenter,
IconRowHeight: RowHeight,
IconWrite: Write,
IconInsertTable: InsertTable,
IconAddText: AddText,
IconFill: Fill,
IconTailoring: Tailoring,
IconEffects: Effects,
IconColorFilter: ColorFilter,
IconDown: Down,
IconPlus: Plus,
IconMinus: Minus,
IconConnection: Connection,
IconBringToFrontOne: BringToFrontOne,
IconSentToBack: SentToBack,
IconGithub: Github,
IconChartProportion: ChartProportion,
IconChartHistogram: ChartHistogram,
IconChartHistogramOne: ChartHistogramOne,
IconChartLineArea: ChartLineArea,
IconChartRing: ChartRing,
IconChartScatter: ChartScatter,
IconChartLine: ChartLine,
IconChartPie: ChartPie,
IconText: Text,
IconRotate: Rotate,
IconLeftTwo: LeftTwo,
IconRightTwo: RightTwo,
IconPlatte: Platte,
IconUpOne: UpOne,
IconDownOne: DownOne,
IconClose: Close,
IconCloseSmall: CloseSmall,
IconUndo: Undo,
IconTransform: Transform,
IconClick: Click,
IconTheme: Theme,
IconArrowCircleLeft: ArrowCircleLeft,
IconGraphicDesign: GraphicDesign,
IconLogout: Logout,
IconErase: Erase,
IconClear: Clear,
IconFolderClose: FolderClose,
IconAlignTextTopOne: AlignTextTopOne,
IconAlignTextBottomOne: AlignTextBottomOne,
IconAlignTextMiddleOne: AlignTextMiddleOne,
IconPause: Pause,
IconVolumeMute: VolumeMute,
IconVolumeNotice: VolumeNotice,
IconVolumeSmall: VolumeSmall,
IconVideoTwo: VideoTwo,
IconFormula: Formula,
IconLinkOne: LinkOne,
IconFullScreenOne: FullScreenOne,
IconOffScreenOne: OffScreenOne,
IconPower: Power,
IconListView: ListView,
IconMagic: Magic,
IconHighLight: HighLight,
IconShare: Share,
IconIndentLeft: IndentLeft,
IconIndentRight: IndentRight,
IconVerticalSpacingBetweenItems: VerticalSpacingBetweenItems,
IconCopy: Copy,
IconDelete: Delete,
IconSquare: Square,
IconRound: Round,
IconNeedle: Needle,
}
export default {
install(app: App) {
for (const key of Object.keys(icons)) {
app.component(`Icon${key}`, icons[key])
app.component(key, icons[key])
}
}
}