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

mk-util

v0.3.2

Published

基于vue的实用组件

Downloads

35

Readme

mk-util 基于elementUI开发的实用组件

目录

1、selectInput 选择组件
2、personFilter 人员选择组件
3、departmentFilter 部门选择组件
4、localizationData 浏览器indexedDB数据库操作组件
5、initData 数据初始缓存组件 6、tablePage 多功能表格组件 7、designView 设计表视图组件


项目中引用插件

首先需要安装mk-util包npm install mk-util -S 然后 在main.js文件中添加以下代码

import MK from 'mk-util'
Vue.use(MK)

1、selectInput 选择组件的调用

<select-input
v-model="value"
:isMultiple="true" 
:isKeyword="true" 
:isCreated="false" 
:selectData="s_data"
returnField="all"
:revealField="['name']"
:queryField="['name','say']"/>

组件可传参数:
isMultiple: 选择框是否支持多选,默认为单选
isKeyword: 是否保留上次搜索关键字,默认保留
isCreated: 是否可创建条目,默认不可创建
upperCase: 是否将小写转大写,类型时Boolean,默认为false
mode: 匹配模式,0包含匹配;1左匹配;2右匹配;默认包含匹配
len: 开始查询时字符所需长度,默认为1个长度
keyName: 绑定数据源的某字段
size: 尺寸,可选值:medium/small/mini limit: 限制查询结果条数,默认10条
queryField: 查询的字段名,可多个字段,必传参数
revealField: 展示的字段名,默认和queryField一致
selectData: 数据源
returnField: 返回字段,默认值为all,返回选中的整条数据

2、personFilter 人员选择组件的调用

<person-filter ref="filter" 
      v-model="value"
      :queryField="['name']"
      :revealField="['name','email']"/>

组件可传参数:
mode: 匹配模式,0包含匹配;1左匹配;2右匹配;默认包含匹配
len: 开始查询时字符所需长度,默认为1个长度
size: 尺寸,可选值:medium/small/mini ,默认为空 limit: 限制查询结果条数,默认10条
queryField: 查询的字段名,可多个字段,必传参数
revealField: 展示的字段名,默认和queryField一致
returnField: 返回字段,默认返回选中的整条数据

3、departmentFilter 部门选择组件的调用

<department-filter ref="filter" 
      v-model="value"
      :queryField="['name']"
      :revealField="['name']"/>

***组件可传参数: ***
isMultiple: 选择框是否支持多选,默认为多选
mode: 匹配模式,0包含匹配;1左匹配;2右匹配;默认包含匹配
len: 开始查询时字符所需长度,默认为1个长度
size: 尺寸,可选值:medium/small/mini ,默认为空 limit: 限制查询结果条数,默认10条
queryField: 查询的字段名,可多个字段,必传参数
revealField: 展示的字段名,默认和queryField一致
returnField: 返回字段,默认返回选中的整条数据

4、localizationData 浏览器indexedDB数据库操作组件的调用

<localization-data 
ref="local" 
database="han" 
table="person" 
url="http://192.168.18.204:8093/api/v1/user/getEncrpyUserListByCondition" 
:field="['userList','list']"/>

***组件可传参数: ***
isUpdateData: 是否更新数据, 类型Boolean
url: 数据源地址, 类型String
field: 需要读取数据源的字段,类型Array, 如:['userList','list']表示读取userList.list的值
source: 数据源, 类型Array 如果传入数据源则自动写入数据,但url的优先级高于source
database: 数据库名,类型String
table: 表名,类型String

***可调用方法: ***

this.$refs['local'].initDB()  //初始化数据库
this.$refs['local'].apiData() //当数据源来自url,则调用该方法写入数据
await this.$refs['local'].getData() //获取数据
this.$refs['local'].removeData() //删除数据

5、initData 数据初始缓存组件的调用

<init-data 
:update="true"
:tables="[{
      name: "person",
      url: "http://192.168.18.204:8093/api/v1/user/getEncrpyUserListByCondition",
      field: ['userList','list']
},
{
      name: "department",
      url: "http://192.168.18.204:8093/api/v1/dept/getEncrpyDeptListByCondition",
      field: ['userList','list']
}]"
/>

***组件可传参数: ***
update: 更新数据, 类型Boolean,默认为false
tables: 数据库表信息,类型Array, 结构为[{name:'',url:'',field:[]}] ,name表示:表名;url表示:数据源地址;field表示:需要写入数据库的数据源字段;默认值为上述代码中传入的值

6、tablePage 多功能表格组件的调用

该组件集成了分页、添加、删除、修改、打印、导出功能

<tablePage 
:oper="oper"
:columns="columns" 
:list="list" 
:isHighlight="false" 
:isSort="isSort" 
:isExp="true" 
:total="10"
:pageSize="10"
:create="createConf" 
:revise="reviseConf"
@on-query="queryList" 
@on-remove="remove"
@on-submit="submit"
/>

***组件可传参数: *** oper: 表格操作项,配置表格的新增、批量删除、修改、单行删除、导出、打印功能
columns: 定义表格的表头字段
list: 表格数据
isHighlight: 是否高亮选中的当前行,默认为false
isSort: 是否可以排序,默认为true
isExp: 是否显示打印和导出按钮,默认为true
total: 表格数据的总条数,类型是number, 默认为0
pageSize: 每页显示的数据条数,类型是number, 默认为20
create: 添加数据时弹框的表单配置项
revise: 修改数据时弹框的表单配置项
on-query: 表格初始化查询数据时触发的事件
on-remove: 删除单条表格数据时触发的事件
on-submit: 添加或修改数据弹框的确定那妞被点击时触发的事件

示例:

<tablePage :oper="oper" :isExp="true" :columns="columns" @on-query="queryList" @on-remove="remove" @on-submit="submit"/>

export default class tablePageDemo extends Vue {
    columns: object[] = [
        {prop:'code', label: '编号'},
        {prop:'username', label: '名称'},
        {prop:'stime', label: '开始时间'},
        {prop:'etime', label: '结束时间'}
    ]
    list: object[] = [
        {code: "198379", username: "Maker", stime: '2019-08-06', etime: '2019-10-04'},
        {code: "187894", username: "Alice", stime: '2019-09-22', etime: '2019-12-02'},
    ]
    //当isExp为true时,可以在oper传入{print:true, export:true}来控制打印和导出这两个按钮的显示
    oper: object = {insert: true, delete: true, deletes: true, update: true, print: true, export: true}
    queryList(val: number) {
        console.log(val)
    }
    remove(val: any) {
        console.log(val.data)
        val.callback()
    }
    submit(val: any) {
        console.log(val.data)
        val.callback()
    }
}

7、designView 设计表视图组件

该组件是单表、双表视图组件,通过传入不同数据,渲染出不同界面布局,提供了两套类型布局组件,分别为:单表、双表

<designView 
type="double"
rowKey="id"
childName="children" 
:filters="filters"
:total="2"
:tableData="tableData"
:dialogConf="dialogFormConf"
:oper="oper" 
:isExp="true"
:isSort="false" />

***组件可传参数: ***
type: 界面布局类型,分为两种 单表(single)、双表(double)
rowKey: 行数据的Key,在显示树形数据时该项必填
childName: 树形数据时指定子节点的字段名
filters: 查询条件的表单项
total: 数据总条数
tableData: 表格数据,定义表头和表数据,如果是单表,数据结构为:{columns:[],list:[]};如果是双表,数据结构为:{ltable:{columns:[],list:[]},stable:{columns:[],list:[]}}
dialogConf: 弹框的表单配置项,数据类型为{create: object[], revise: object[]}
oper: 表格操作项,配置表格的新增、批量删除、修改、单行删除、导出、打印功能
isExp: 是否显示打印和导出按钮,默认为true
isSort: 是否可以排序,默认为true

***示例: ***

export default class designViewDemo extends Vue {
    oper: object[] = [{insert: true, delete: true, deletes: false, update: true, print:false,export:false}, {insert: false, delete: false, deletes: false, update: true, export: true, print: true}]
    filters: object[] = [{label: '部门', type: 'input', value: '', field: 'dept'}]
    dialogFormConf: {create: object[], revise: object[]} = {
        create:[
            {required:true, label: '部门', type: 'input', value: '', field: 'dept', message: "填写你的部门名称"},
            {required:true, label: '职业', type: 'select', value: '', field: 'job', options: [{label:'前端开发', value:'1'},{label:'后端开发', value:'2'}]}
        ], 
        revise:[
            {required:true, label: '名称', type: 'input', value: '', field: 'dept'}
        ]
    }
    tableData: object = {
        // columns: [
        //     {prop:'code', label: '编号'},
        //     {prop:'username', label: '名称'},
        //     {prop:'stime', label: '开始时间'},
        //     {prop:'etime', label: '结束时间'},
        // ],
        // list:[
        //     {code: "198379", username: "Maker", stime: '2019-08-06', etime: '2019-10-04'},
        //     {code: "198274", username: 'Alice', stime: '2019-06-16', etime: '2019-08-25'}
        // ]
        ltable: {
            columns: [
                {prop:'name', label: '名称'},
                {prop:'type', label: '类型'}
            ],
            list: [
                {name: "示例一1", type: "测试一"},
                {name: "示例二", type: '测试二'}
            ],
        },
        rtable: {
            columns: [
                {prop:'name', label: '名称'},
                {prop:'type', label: '类型'}
            ],
            list: [
                {id:1, name: "示例一2", type: "测试一", children:[{id:10, name: "示例2", type: "测试2"},{id:11, name: "示例3", type: "测试3"},{id:12, name: "示例4", type: "测试4",children:[{id:100, name: "示例2", type: "测试2"},{id:101, name: "示例3", type: "测试3"},{id:102, name: "示例4", type: "测试4"}]}]},
                {id:2, name: "示例二", type: '测试二'}
            ]
        },
    }
}