npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

my-vue3-common-components

v2.4.1

Published

my-vue3-common-components

Readme

my-vue3-common-components

对element-plus进行二次封装,使用示例及源码可在这里查看

如何使用

  1. 安装
    yarn add my-vue3-common-components --save
    or
    npm install my-vue3-common-components --save
  2. 引入及使用
    在main.ts中进行组件引入,全局注册,使用类似于element-plus
    import MyVue3CommonComponents from 'my-vue3-common-components'
    import 'my-vue3-common-components/style.css'
    
    const app = createApp(App)
    app
      .use(MyVue3CommonComponents)
      .mount('#app')
    全局配置及国际化(可选项)
    use(MyVue3CommonComponents,{ formCol: 1, formLabelPosition: 'right',i18n: '你的i18n对象' })
    formCol 表单列数,可选项为1,2,默认值为2
    formLabelPosition 表单label对齐方式,参考element-plus的table组件,默认值为top
    i18n 国际化参数,需要将你的国际化对象给传入,目前仅支持zh(中文),en(英文)
  3. TypeScript支持
    tsconfig.json中的types字段中添加"my-vue3-common-components/dist/components"即可获得组件及字段提示
    在script中获取组件类型及提示可参考如下操作
    import { GlobalComponents } from 'vue'
    const formRef = ref<InstanceType<GlobalComponents['MyFormDialog']>>()
    const myInput = ref<InstanceType<GlobalComponents['MyInput']>>()
    获取基础类型
    import BaseType from 'my-vue3-common-components/dist/baseType'
  4. 其他
    table组件中有v-has指令,用于按钮权限判断,根据实际业务自行实现或者复制本人源码中此指令代码
    组件搭配本人开发的hooks使用将更加快捷方便
    一个demo页面示例