Plugins 开发插件 | Vue.js 前言Vue3中，一个插件通常是一个对象 通常我们开发的插件通过全局导出 1export default myPlugin 从而在项目的入口文件中使用 1app.use(myPlugin) 基础开发plugins/MyButton.vue123<template> <button>我的按钮</button></template> index.ts123456import MyButton from './MyButton.vue'export default{ install:(app,options)=>{ app.component('myButton', MyButton) }} main.js123import MyButton from './plugins/MyButton.ts'create(App).use(MyButton).m ...

npm发布准备工作下载nrm 详情见文章 打开npm官网 npm | Home 我们需要先注册一个账号 主流程转换npm源 1nrm use npm 连接npm账号 1npm login 确认账号登录状态 1npm whoami cd到你需要发布的包/构建产物 比如说我的组件库项目产物位于packages\core 1cd .\packages\core\ 至此，先确认我们即将发布的包 packages\core\package.json 123456{ "name": "veyra", "version": "1.0.0", "description": "使用 Vue3 + Ts 构建的组件库", ...} 名称 不能和他人已发布过的包名重名 版本 如果是初次发布 “version”: “1.0.0” 即可 若是自己已发布过的包要更新版本 (如”1.0.1”) 详情请看到文章最后“关于版本号” 在确认 ...

项目结构1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012 ...

Tooltip 文字组件 导出的类型1. TooltipProps 描述: Tooltip 组件的 props 配置。 字段: content?: string提示框显示的内容文本。 trigger?: 'hover' | 'click' | 'contextmenu'触发方式（默认 'hover'）。 placement?: PlacementPopper.js 的定位策略（如 'bottom'）。 manual?: boolean是否手动控制显示（默认 false）。 disabled?: boolean是否禁用组件（默认 false）。 popperOptions?: Partial<Options>Popper.js 的配置选项。 transition?: string过渡动画名称（默认 'fade'）。 showTimeout?: number显示延迟（默认 0）。 hideTimeout?: number隐藏延迟（默认 200）。 2. TooltipEmi ...

MessageBox 对话框组件 MessageBox.vuescript1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283<script setup lang="ts">import { ref, reactive, computed, watch, nextTick, type Ref } from 'vue';import { isFunction, isNil } from 'lodash-es';import type { MessageBoxProps, MessageBoxAction } from './types';import VrOverlay from ...

Message 消息提示组件 Message.vuescript1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071<script setup lang="ts">import type { MessageProps } from './types';import { computed, onMounted, ref, watch } from 'vue';import { useOffset } from './methods';import { typeIconMap } from '@veyra/utils';import VrIcon from '../Icon/Ico ...

Dropdown 下拉菜单 Dropdown.vue Script 部分123456789101112131415161718192021222324252627282930313233343536373839404142434445464748<script setup lang="ts">import { ref, computed, provide } from 'vue'import { omit, isNil } from 'lodash-es'import type { DropdownProps, DropdownEmits, DropdownContext } from './types'import { useId, useDisabledStyle } from '@veyra/hooks'import { DROPDOWN_CTX_KEY } from & ...

Collapse 折叠面板Collapse.vuescript1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556import { ref, provide, watch } from 'vue'import { each } from 'lodash-es'import type { CollapseItemName, CollapseProps, CollapseEmits } from './types'import { debugWarn } from '@veyra/utils'import { COLLAPSE_CTX_KEY } from './constants'const COMPONENT_NAME = 'V ...

Button 按钮Button.vuescript1234567891011121314151617181920212223242526272829303132333435363738394041424344454647import { ref, computed, inject } from 'vue';import type { ButtonProps, ButtonEmits, ButtonInstance } from './types';import { BUTTON_GROUP_CTX_KEY } from './constants';import { throttle } from 'lodash-es';import VrIcon from '../Icon/Icon.vue';defineOptions({ name: 'VrButton',}) ...