open-index/open-npm huggingface dataset:
npm package: @springleo/30-seconds-of-code
Description: 1. number 1. type js基础类型判断 1. browser 浏览器相关 1. utility 常用工具函数
Latest version: 1.0.3

1. number
1. type js基础类型判断
1. browser 浏览器相关
1. utility 常用工具函数
npm package: @springleo/el-dialog-helper
Description: ## Install
Latest version: 0.1.5

# el-dialog-helper ![](https://img.shields.io/badge/license-MIT-F44336.svg)

## Install

``` bash
yarn add @springleo/el-dialog-helper
```

## Online Example

https://lq782655835.github.io/el-dialog-helper

## Quick Start

Import modules and set up settings in main.js:

``` js
import ElDialogHelper from '@springleo/el-dialog-helper'
Vue.use(ElDialogHelper)
```

use `Vue.prototype.$openDialog` in your App.vue

``` js
<template>
  <el-button type="primary" @click="open" size="small">编程式打开dialog</el-button>
</template>

<script>
import ElementUIDialog from "./elementui-dialog";
export default {
  methods: {
    open() {
      this.$openDialog(ElementUIDialog)({ name: "123" })
        .then(() => this.$message.success('任务成功'))
        .catch(() => this.$message.warning('任务失败'));
    }
  }
};
</script>
```

use `Vue.prototype.$closeDialog` in your elementui-dialog.vue:

``` js
<template>
  <el-dialog title="ElementUI Dialog" :visible.sync="visible">
    {{ name }}
    <div>
      <el-button type="primary" @click="$closeDialog(true)">确定</el-button>
      <el-button @click="$closeDialog(false)">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: { name: String },
  data() {
    return { visible: false };
  }
};
</script>
```

## API

### 1. Vue.prototype.$openDialog()

使用方式：`this.$openDialog(DialogComponent)(props = {}, parentContext = undefined)`

* DialogComponent： 自定义的弹窗.vue组件

* props：弹窗组件需要传入的初始化props

* parentContext：弹窗的父级上下文，一般用于获取父级 provider， 如获取 ConfigProvider 的配置、$store、$router

返回等待用户弹窗关闭的Promise，当Dialog弹窗组件`$emit('done')`时，resolve promise；当`$emit('cancel')`时，reject promise。

### 2. Vue.prototype.$closeDialog()

使用方式： this.$closeDialog(isSuccess = false, ...args)

全局注入的快捷方法，`是$emit('done')和$emit('cancel')的快捷键`。当isSuccess = true，执行$emit('done');当isSuccess = false时，执行$emit('cancel')。

## Vue plugin series

| Plugin | Status | Description |
| :---------------- | :-- | :-- |
| [@springleo/el-dialog-helper](https://github.com/lq782655835/el-dialog-helper) | ![](https://img.shields.io/badge/license-MIT-F44336.svg) | Promisify dialogs in Vue! |
| [@springleo/el-table-plus](https://github.com/lq782655835/el-table-plus) | ![](https://img.shields.io/badge/license-MIT-F44336.svg) | 基于el-table的配置化组件|
| [@springleo/el-form-plus](https://github.com/lq782655835/el-form-plus) | ![](https://img.shields.io/badge/license-MIT-F44336.svg) | schema form base on element-ui form |

## License

MIT
npm package: @springleo/el-form-plus
Description: ## Install
Latest version: 0.1.1

# el-form-plus ![](https://img.shields.io/badge/license-MIT-F44336.svg)

## Install

``` bash
yarn add @springleo/el-form-plus
```

## Online Example

https://lq782655835.github.io/el-form-plus

## Quick Start

Import modules and set up settings in main.js:

``` js
import ElFormPlus from '@springleo/el-form-plus'
Vue.use(ElFormPlus)
```

use `<el-form-plus>` in your page

``` html
<template>
    <el-form-plus
        :formModel="{
            name: '',
            age: '',
            address: '',
            sex: '男'
        }"
        :fieldList="[
            { label: '姓名', value: 'name', type: 'input' },
            { label: '年龄', value: 'age', type: 'input' },
            { label: '家庭住址', value: 'address', type: 'select', options: ['地址1', '地址2'].map(str => ({label: str, value: str})) },
            { label: '性别', value: 'sex', type: 'radio-group', options: ['男', '女'].map(str => ({label: str, value: str})) }
        ]"
    />
</template>
```

you can get preview by above code：

![image](https://user-images.githubusercontent.com/6310131/71068039-be5dcb00-21b0-11ea-80eb-005f365fa6ec.png)

## API

### el-form-plus Props

基于el-form，所以Props支持el-form上所有props以及事件event。

Prop | Type | Default | Description
--- | --- | --- | ---
refObj | Object |  | 返回form引用，如果手动validate需要用到
formModel | Object |  {} | el-form的model属性包装
fieldList | Array | item配置列表 | 详细见[如下](#fieldList-Attrs)
rules | Object | {} | el-form的rules，可定义所有form-item的规则，优先级最高
labelWidth | string | 100px | el-form的labelWidth
labelPosition | string | left | el-form的labelPosition

### fieldList Attrs

Attr | Type | Default | Description
--- | --- | --- | ---
type | String |  | 必需。渲染的组件类型，支持input、textarea、select、radio-group、input-number、date、slot。同时支持动态组件，为约束完全的动态性，动态组件的命名请以`el-`或`dynamic-`开头。
value | String |   | 必需。值字段，v-model绑定的值为this.data[value]
label | String |   | form-item标题
tooltip | String |  | 标题附近的提示
disabled | Boolean |  false | 是否禁用
placeholder | String |  | 组件placeholder提示，默认input是‘请输入label’，select默认是‘请选择label’
required | Boolean |  false | 校验规则：是否必须
pattern | Regex |   | 校验规则：满足正则
validator | function |   | 校验规则：自定义函数，最灵活
rules | Array\<Rule> |   | 以上三种attr校验属于快速校验规则，使用rules可一次性定义form-item的规则
options | Array |   | 针对select和radio-group组件，配置options list

> 由于type=slot用到v-slot作用域插槽，vue版本需要v2.6+

## License

MIT
npm package: @springleo/el-table-plus
Description: ## Install
Author: springleo
Latest version: 1.0.0

# el-table-plus ![](https://img.shields.io/badge/license-MIT-F44336.svg)

## Install

``` bash
yarn add @springleo/el-table-plus
```

## Online Example

https://lq782655835.github.io/el-table-plus

## Quick Start

Import modules and set up settings in main.js:

``` js
import ElTablePlus from '@springleo/el-table-plus'
Vue.use(ElTablePlus)
```

use `<el-table-plus>` in your page

``` html
<template>
    <el-table-plus
      :data="list"
      :columns="[
        { label: 'ID', value: 'id', width: '80px' },
        { label: '存储卷名', value: 'name' },
        { label: '总容量', value: 'storage', fn: val => `${val}G` },
        { label: '创建人', value: 'member.userId' },
        { label: '邮箱', value: 'member.email' },
        { label: '创建时间', value: 'gmtCreate' }
      ]"
    />
</template>
```

## API

### el-table-plus 属性

支持el-table上所有[原有属性](https://element.eleme.cn/#/zh-CN/component/table#table-attributes)，同时扩展以下api。

参数 | 类型 | 默认值 | 说明
--- | --- | --- | ---
loading | Boolean | false | 动效loading
data | Array |  [] | 列表数据
columns | Array | [] | column item配置列表，详细见[如下columns Attrs](#columns-属性)
pagination | Object | | 翻页器配置，默认未设置，不显示翻页器。相关api可查看[el-pagination](https://element.eleme.cn/#/zh-CN/component/pagination#attributes)
total | Number | 0 | 翻页器条数总数

### el-table-plus 事件

支持el-table上所有[原有事件](https://element.eleme.cn/#/zh-CN/component/table#table-events)，同时扩展以下api。

事件名称 | 说明 | Description
--- | --- | ---
scroll | table滚动条事件 | e
page-change | 翻页器改变事件 | { pageSize, currentPage }

### columns 属性

支持el-table-column所有[原有属性](https://element.eleme.cn/#/zh-CN/component/table#table-column-attributes)、[Scoped Slot](https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-slot),同时扩展以下api：

Attr | Type | Default | Description
--- | --- | --- | ---
label | String |   | 列名称
prop | String |   | 列数据字段，支持多层对象嵌套，如user.email.prefix
fn | Function |   | 格式化列。函数参数(value, row, column, $index)
hidden | Boolean |   | 是否隐藏该列。建议是一个computed，使得可以响应式显示隐藏
customRender | Function |   | 自定义列数据渲染。函数参数(value, row, column, $index, h)，**支持jsx和h函数**
customTitle | Function |   | 自定义列头部渲染。函数参数(column, $index, h)，**支持jsx和h函数**
scopedSlots | Object |   | **使用slot方式自定义渲染**，替换customRender/customTitle函数。比如：{ customRender: 'slotName1', customTitle: 'slotName2' }

## License

MIT
npm package: @springleo/virtual-scroll-table
Description: ## 在线案例
Author: springleo
Latest version: 0.0.3

# virtual-scroll-table ![](https://img.shields.io/badge/license-MIT-F44336.svg)

## 在线案例

https://lq782655835.github.io/virtual-scroll-table

## 特点

1. 自定义虚拟滚动table

## 安装和引入

安装
``` bash
yarn add @springleo/virtual-scroll-table
```

引入

``` js
import VirtualScrollTable from '@springleo/virtual-scroll-table'
Vue.use(VirtualScrollTable)
```

## 基本使用

``` html
<template>
    <virtual-scroll-table
      :columns="columns"
      :data="list"
      key-field="id"
      :item-size="45"
      :maxHeight="2 * 45"
      @loadMore="loadMore"
    />
</template>
```

## License

MIT