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

wm-design

v0.1.1

Published

## 使用方法 <mEditor ref="mEditor" :value="123"/>

Readme

基于 aomao-editor 的富文本编辑器

使用方法

编辑模式 异步更新 使用 this.$refs.mEditor.setValue()

参数列表

options toolbar配置项
    [
        [
            {
                type: 'collapse',
                groups: [
                    {
                        items: [{ name: 'image-uploader' }]
                    },
                    {
                        items: [{ name: 'table' }]
                    },
                    {
                        items: [{ name: 'file-uploader' }]
                    },
                    {
                        items: [{ name: 'video-uploader' }]
                    }
                ]
            }
        ],
        ['undo', 'redo', 'paintformat', 'removeformat'],
        ['heading', 'fontfamily', 'fontsize'],
        ['bold', 'italic', 'strikethrough', 'underline'],
        ['fontcolor', 'backcolor'],
        ['alignment'],
        ['unorderedlist', 'orderedlist', 'indent', 'line-height'],
        ['link', 'hr']
    ]
value 文本
readonly 编辑/只读 默认 编辑
baseUrl 文件库origin  默认 https://nas.mugood.com/
uploadBaseUrl 上传地址
token
fileOption 文件上传配置项
videoOption 视频上传配置项
imageOption 图片上传配置项

基础表格 基于 vxe-table

使用方法

<mTable :columns="tableColumns" :data="tableData">
    <template #name="{ row }"> {{ row }} </template>
</mTable>

参数列表(部分参数参考官方文档)

border 默认full
stripe 默认false
rowId String
align String
pagination 是否分页 默认为true
page 分页配置项 默认 {
                        current: 1,
                        pageSize: 10
                    }
pageSizeOptions 每页显示项 默认 [5, 10, 20, 50]
pagerlayouts 分页布局
        默认 ['Total', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump']
resizable 列可调整
showOverflow 整体一行展示
emptyText 空数据提示 默认 暂无相关内容
highlightHoverRow 默认为true
highlightCurrentRow
currentChangeEvent: Function,
headerCellClassName: Function,
rowClassName: Function,
cellClassName: Function,
rowConfig: Object,
columnConfig: Object,
checkboxConfig: Object,
    默认{
            checkField: 'checked',
        }
radioConfig: Object,
treeConfig: Object,
columns 列数据源(部分属性参考官方文档)
    { key: 1, type: 'seq', width: 60, title: '#', fixed: null },
    { key: 2, type: 'checkbox', width: 50, fixed: null },
    {
        key: 3,
        field: 'name',
        title: 'Name',
        width: 200,
        slots: {
            customRender: 'name'
        },
        showOverflow:'',
        showHeaderOverflow:'',
        showFooterOverflow:'',
        treeNode:false
    },
    { key: 4, field: 'nickname', title: 'Nickname', width: 300 },
    { key: 5, field: 'sex', title: 'Sex', width: 200, filters: [{ value: '1', label: '男' }] },
    { key: 6, field: 'role', title: 'Role', width: 200 },
    { key: 7, field: 'address', title: 'Address', width: 300 }

data 初始数据源
method 请求模式 默认get
url 请求url
requestHeaders 请求头
    注意 token默认从localstorage里面取
        示例if (getStorage('token')) {
                config.headers.common['Authorization'] = `Bearer ${getStorage('token')}`
            }
searchParam 查询参数
formatData 返回数据格式化函数
cellClick 单元格单击事件

主动查询

$refs.xxx.fetchData(flag) flag为true,查询第一页

emit 事件

mulSelRows 选中的数据
complete 接口返回数据

虚拟滚动表格(大数据)

使用方法

##参数列表 参考基础表格

echarts 图表组件

使用方法

参数列表(部分属性参考官方文档)

option: {
    type: Object
},
loading: {
    type: Boolean,
    default: false
},
loadingConfig: {
    type: Object,
    default: function () {
        return {
            text: '',
            color: '#0af',
            textColor: '#fff',
            maskColor: 'rgba(25, 58, 127, 0.7)',
            zlevel: 99,
            fontSize: 30,
            showSpinner: true,
            spinnerRadius: 15,
            lineWidth: 5
        }
    }
},
notMerge: {
    type: Boolean,
    default: false
},
replaceMerge: {
    type: [String, Array],
    default: ''
},
lazyUpdate: {
    type: Boolean,
    default: false
},
silent: {
    type: Boolean,
    default: false
},
transition: Object