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 🙏

© 2024 – Pkg Stats / Ryan Hefner

iviewplus

v1.3.3

Published

A high quality UI components Library with Vue.js

Downloads

17

Readme

iViewPlus

iView

安装

  npm i iviewplus -S

修改记录

From 验证 解决正则失效bug

RadioGroup CheckboxGroup 添加disabled

datepicker 组件 date和datetime模式下添加默认时间defaultTime

| API | 说明 |类型| 默认 | | :---: | --| :----: | :----: | | defaultTime | 可选最大值,可取值('now'或HH:mm:ss) | string/date| "00:00:00" |

datepicker 组件添加最大最小值

| API | 说明 |类型| 默认 | | :---: | --| :----: | :----: | | maxDate | 可选最大值,可取值('today'或date) | string/date| null | | minDate | 可选最小值,可取值('today'或date) | string/date| null |

modal 组件添加纵向位置

| API | 说明 |类型| 默认 | | :---: | --| :----: | :----: | | position | 纵向位置可取值("center"和数值) | string/number| center |

datepicker 组件修改datetime切换方式

modal 组件添加纵向位置

| API | 说明 |类型| 默认 | | :---: | --| :----: | :----: | | position | 纵向位置可取值("center"和数值) | string/number| center |

table 组件添加全局对齐方式

| API | 说明 |类型| 默认 | | :---: | --| :----: | :----: | | align | 对齐方式center left right | string| left | | headerAlign | 对齐方式center left right | string| left |

table 组件添加过滤方法confirmFilter

| Methods | 说明 |参数| | :---: | --| :----: | | confirmFilter | 过滤方法 | columnId,filteredValue|

poptip 组件添加指令v-poptip:ref

解决 poptip组件影响布局问题

poptip 添加 disabled poptipClass功能

| API | 说明 |类型| 默认 | | :---: | --| :----: | :----: | | disabled | 是否禁用 | boolean| false | | poptipClass | 为poptip添加类名 | string||

select 添加事件on-select

手动选择select选项触发

inputNumber 添加带加减风格

| API | 说明 |类型| 默认 | | :---: | --| :----: | :----: | | plusminus | 风格 | boolean| true |

select 组件bug修复

bug描述:select的value不能为空

datePicker&timePicker 组件修复

bug描述:on-change事件触发时机错误,value未改变

datePicker&timePicker 添加输出格式api

| API | 说明 |类型| 默认 | | :---: | --| :----: | :----: | | value-format | 输出格式'date'(时间戳), 'format'(同显示格式), 'number'(毫秒数) |string | date |

tabs组件添加router功能

| API | 说明 |类型| 默认 | | :---: | --| :----: | :----: | | router | 是否开启router功能 | boolean| false | | routerRoot | router basePath | string||

menu组件添加横向收起功能并添加tooltip提示

Menu属性

| API | 说明 |类型| 默认 | | :---: | --| :----: | :----: | | collapse | 是否开启collapse功能 | boolean| false |

MenuItem&&Submenu 属性

| API | 说明 |类型| 默认 | | :---: | --| :----: | :----: | | tooltip | 收起后提示内容 | string | |

menu 组件添加router功能

| API | 说明 |类型| 默认 | | :---: | --| :----: | :----: | | router | 是否开启router功能 | boolean | false |

icon组件添加支持第三方字体功能

| API | 说明 |类型| 默认 | | :---: | --| :----: | :----: | | prefix | 字体class前缀 | string | ivu-icon |

form组件 添加动态修改验证功能及重置验证方法

| 方法 | 说明 | | :---: | --| | resetValidate | 参数为String重置一个item,多个使用数组,为空重置所有 | | resetFields | 规则同上 |

表单验证添加类型 any

添加table&column组件,原table组件改名未grid默认不打包

Table Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | data | 显示的数据 | array | — | — | | height | Table 的高度,默认为自动高度。如果 height 为 number 类型,单位 px;如果 height 为 string 类型,则 Table 的高度受控于外部样式。 | string/number | — | — | | max-height | Table 的最大高度 | string/number | — | — | | stripe | 是否为斑马纹 table | boolean | — | false | | border | 是否带有纵向边框 | boolean | — | false | | size | Table 的尺寸 | string | medium / small / mini | — | | fit | 列的宽度是否自撑开 | boolean | — | true | | show-header | 是否显示表头 | boolean | — | true | | highlight-current-row | 是否要高亮当前行 | boolean | — | false | | current-row-key | 当前行的 key,只写属性 | String,Number | — | — | | row-class-name | 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — | | row-style | 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — | | cell-class-name | 单元格的 className 的回调方法,也可以使用字符串为所有单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — | | cell-style | 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 | Function({row, column, rowIndex, columnIndex})/Object | — | — | | header-row-class-name | 表头行的 className 的回调方法,也可以使用字符串为所有表头行设置一个固定的 className。 | Function({row, rowIndex})/String | — | — | | header-row-style | 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 | Function({row, rowIndex})/Object | — | — | | header-cell-class-name | 表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 className。 | Function({row, column, rowIndex, columnIndex})/String | — | — | | header-cell-style | 表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 | Function({row, rowIndex, rowIndex, columnIndex})/Object | — | — | | row-key | 行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能的情况下,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function。 | Function(row)/String | — | — | | empty-text | 空数据时显示的文本内容,也可以通过 slot="empty" 设置 | String | — | 暂无数据 | | default-expand-all | 是否默认展开所有行,当 Table 中存在 type="expand" 的 Column 的时候有效 | Boolean | — | false | | expand-row-keys | 可以通过该属性设置 Table 目前的展开行,需要设置 row-key 属性才能使用,该属性为展开行的 keys 数组。| Array | — | | | default-sort | 默认的排序列的prop和顺序。它的prop属性指定默认的排序的列,order指定默认排序的顺序| Object | order: ascending, descending | 如果只指定了prop, 没有指定order, 则默认顺序是ascending | | tooltip-effect | tooltip effect 属性 | String | dark/light | | dark | | show-summary | 是否在表尾显示合计行 | Boolean | — | false | | sum-text | 合计行第一列的文本 | String | — | 合计 | | summary-method | 自定义的合计计算方法 | Function({ columns, data }) | — | — | | span-method | 合并行或列的计算方法 | Function({ row, column, rowIndex, columnIndex }) | — | — |

Table Events

| 事件名 | 说明 | 参数 | | ---- | ---- | ---- | | select | 当用户手动勾选数据行的 Checkbox 时触发的事件 | selection, row | | select-all | 当用户手动勾选全选 Checkbox 时触发的事件 | selection | | selection-change | 当选择项发生变化时会触发该事件 | selection | | cell-mouse-enter | 当单元格 hover 进入时会触发该事件 | row, column, cell, event | | cell-mouse-leave | 当单元格 hover 退出时会触发该事件 | row, column, cell, event | | cell-click | 当某个单元格被点击时会触发该事件 | row, column, cell, event | | cell-dblclick | 当某个单元格被双击击时会触发该事件 | row, column, cell, event | | row-click | 当某一行被点击时会触发该事件 | row, event, column | | row-contextmenu | 当某一行被鼠标右键点击时会触发该事件 | row, event | | row-dblclick | 当某一行被双击时会触发该事件 | row, event | | header-click | 当某一列的表头被点击时会触发该事件 | column, event | | sort-change | 当表格的排序条件发生变化的时候会触发该事件 | { column, prop, order } | | filter-change | 当表格的筛选条件发生变化的时候会触发该事件,参数的值是一个对象,对象的 key 是 column 的 columnKey,对应的 value 为用户选择的筛选条件的数组。 | filters | | current-change | 当表格的当前行发生变化的时候会触发该事件,如果要高亮当前行,请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow | | header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event | | expand-change | 当用户对某一行展开或者关闭的时候会触发该事件 | row, expandedRows |

Table Methods

| 方法名 | 说明 | 参数 | | ---- | ---- | ---- | | clearSelection | 用于多选表格,清空用户的选择,当使用 reserve-selection 功能的时候,可能会需要使用此方法 | selection | | toggleRowSelection | 用于多选表格,切换某一行的选中状态,如果使用了第二个参数,则是设置这一行选中与否(selected 为 true 则选中) | row, selected | | toggleRowExpansion | 用于可展开表格,切换某一行的展开状态,如果使用了第二个参数,则是设置这一行展开与否(expanded 为 true 则展开) | row, expanded | | setCurrentRow | 用于单选表格,设定某一行为选中行,如果调用时不加参数,则会取消目前高亮行的选中状态。 | row | | clearSort | 用于清空排序条件,数据会恢复成未排序的状态 | — | | clearFilter | 用于清空过滤条件,数据会恢复成未过滤的状态 | — | | doLayout | 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时,可能需要调用此方法 | — |

Table Slot

| name | 说明 | |------|--------| | append | 插入至表格最后一行之后的内容,如果需要对表格的内容进行无限滚动操作,可能需要用到这个 slot。若表格有合计行,该 slot 会位于合计行之上。 |

Table-column Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | type | 对应列的类型。如果设置了 selection 则显示多选框;如果设置了 index 则显示该行的索引(从 1 开始计算);如果设置了 expand 则显示为一个可展开的按钮 | string | selection/index/expand | — | | index | 如果设置了 type=index,可以通过传递 index 属性来自定义索引 | string, Function(index) | - | - | | column-key | column 的 key,如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件 | string | — | — | | label | 显示的标题 | string | — | — | | prop | 对应列内容的字段名,也可以使用 property 属性 | string | — | — | | width | 对应列的宽度 | string | — | — | | min-width | 对应列的最小宽度,与 width 的区别是 width 是固定的,min-width 会把剩余宽度按比例分配给设置了 min-width 的列 | string | — | — | | fixed | 列是否固定在左侧或者右侧,true 表示固定在左侧 | string, boolean | true, left, right | — | | render-header | 列标题 Label 区域渲染使用的 Function | Function(h, { column, $index }) | — | — | | sortable | 对应列是否可以排序,如果设置为 'custom',则代表用户希望远程排序,需要监听 Table 的 sort-change 事件 | boolean, string | true, false, 'custom' | false | | sort-method | 对数据进行排序的时候使用的方法,仅当 sortable 设置为 true 的时候有效,需返回一个数字,和 Array.sort 表现一致 | Function(a, b) | — | — | | sort-by | 指定数据按照哪个属性进行排序,仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。如果 sort-by 为数组,则先按照第 1 个属性排序,如果第 1 个相等,再按照第 2 个排序,以此类推。 | String/Array/Function(row, index) | — | — | | resizable | 对应列是否可以通过拖动改变宽度(需要在 el-table 上设置 border 属性为真) | boolean | — | true | | formatter | 用来格式化内容 | Function(row, column, cellValue) | — | — | | show-overflow-tooltip | 当内容过长被隐藏时显示 tooltip | Boolean | — | false | | align | 对齐方式 | String | left/center/right | left | | header-align | 表头对齐方式,若不设置该项,则使用表格的对齐方式 | String | left/center/right | — | | class-name | 列的 className | string | — | — | | label-class-name | 当前列标题的自定义类名 | string | — | — | | selectable | 仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 | Function(row, index) | — | — | | reserve-selection | 仅对 type=selection 的列有效,类型为 Boolean,为 true 则代表会保留之前数据的选项,需要配合 Table 的 clearSelection 方法使用。 | Boolean | — | false | | filters | 数据过滤的选项,数组格式,数组中的元素需要有 text 和 value 属性。 | Array[{ text, value }] | — | — | | filter-placement | 过滤弹出框的定位 | String | 与 Tooltip 的 placement 属性相同 | — | | filter-multiple | 数据过滤的选项是否多选 | Boolean | — | true | | filter-method | 数据过滤使用的方法,如果是多选的筛选项,对每一条数据会执行多次,任意一次返回 true 就会显示。 | Function(value, row, column) | — | — | | filtered-value | 选中的数据过滤项,如果需要自定义表头过滤的渲染方式,可能会需要此属性。 | Array | — | — |