Zznode-common NPM

zznode-common

一、安装与使用

yarn add zznode-common --save

如果要删除模块
yarn remove zznode-common

1 全局引入 zznode-common

在入口 main.js 中

import Vue from 'vue'
import ZznodeCommon from 'zznode-common'
Vue.use(ZznodeCommon)

后续组件可以直接如下使用，而不用在当前 vue 组件中进行 import 然后注册

<button-add></button-add>

2 局部按需引入单个组件

<button-add></button-add>
...

import {ButtonAdd} from "zznode-common"
export default {
	components: {ButtonAdd}
}

3 自定义指令

拖动 v-el-drag-dialog

<el-dialog v-el-drag-dialog :visible.sync="dialogTableVisible" title="Shipping address"></el-dialog>

按钮效果 v-waves

<el-button v-waves class="filter-item" type="primary" icon="el-icon-search">
Search
</el-button>

复制文字/提示文字复制成功 v-clipboard

<el-input v-model="inputData" placeholder="Please input" style="width:400px;max-width:100%;" />
<el-button v-clipboard:copy="inputData" v-clipboard:success="clipboardSuccess" type="primary" icon="el-icon-document">
  copy
</el-button>

组件 api 说明文档

1 基础扩展组件

按钮

/* 添加 */
<button-add />
/* 取消 */
<button-cancel />
/* 删除 */
<button-delete />
/* 编辑 */
<button-edit />
/* 保存 */
<button-save />
/* 查询 */
<button-search />

分页组件

<ZzPagination />

以下列出了拓展的属性说明

props

参数	说明	类型	默认值
total	总条目数	Number	-
page	当前选择的页码	Number	1
limit	每页条数显示条数	Number	20
pageSizes	每页显示个数选择器的选项设置	Array	10, 20, 30, 50
layout	表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev 表示上一页，next 为下一页，pager 表示页码列表，除此以外还提供了 jumper 和 total，size 和特殊的布局符号->，->后的元素会靠右显示，jumper 表示跳页元素，total 表示总条目数，size 用于设置每页显示的页码数量	String	"total, sizes, prev, pager, next, jumper"
background	为分页按钮添加背景色	Boolean	true
autoScroll	翻页是是否回到顶部	Boolean	true
hidden	是否不显示	Boolean	false

events

方法名	说明	参数	参数说明
pagination	获取当前页及当前页的条数	(page, limit) page 当前页 limit 当前页条数	-

methods

方法名	说明	参数	参数说明
handleSizeChange	pageSize 改变时会触发	(pageSize)切换条数	-
handleCurrentChange	currentPage 改变时会触发	(current)当前页修改时触发	-

table 组件

<ZzTable />

以下列出了拓展的属性说明

参数	说明	类型	默认值
tableData	table 数据	Array	[]
rowDblclick	单行点击事件	Function	(row, event, column) => {console.log('default: ' + row + '---' + event + '---' + column)}
tableHeader	表格头部	Array	[]
tabHeight	表格高度	String	'100%'
loading	加载等待	Boolean	false
isShow	是否需要选择	Boolean	false

events

方法名	说明	参数	参数说明
func	获取选择行数信息	[]	-

json 编辑器

<json-editor ref="jsonEditor" v-model="value" />

可拖动列表

<Kanban :key="1" :list="list1" :group="group" class="kanban todo" header-text="Todo" />
<Kanban :key="2" :list="list2" :group="group" class="kanban working" header-text="Working" />

以下列出了拓展的属性说明（group 是应用在 vuedraggable 中）

props

参数	说明	类型	默认值
headerText	标题名称	String	'Header'
options	选择项	Object	{}
list	列表数据	Array	[]

固定位置标签

<sticky :sticky-top="200">
  <el-button type="primary"> placeholder</el-button>
</sticky>

以下列出了拓展的属性说明

props

参数	说明	类型	默认值
stickyTop	固定位置	Number	0
zIndex	设置层级	Number	1
className	设置类名	String	''

返回顶部

<el-tooltip placement="top" content="tooltip">
  <back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
</el-tooltip>

参数	说明	类型	默认值
visibilityHeight	滚动多少距离显示	Number	400
backPosition	返回到顶部的距离	Number	0
customStyle	小图标的样式	Object	{right: '50px',bottom: '50px',width: '40px',height: '40px','border-radius': '4px','line-height': '45px', background: '#e7eaf1'}
transitionName	动画名称	String	'fade'

input 详情展示

<only-detail :descList="descList" :desProps="desProps"></only-detail>

具体示例可参考 test.vue

参数	说明	类型	默认值
descList	需要展示的数组	Array	[]
desProps	扩展的传输值	Object	{ column: 2}

table 输入框展示

<input-table :tableData="tableData" :listCount="listCount" :propList="propList" :page.sync="pageInfo"></input-table>

具体示例可参考 test.vue

参数	说明	类型	默认值
tableData	需要展示的数据	Array	[]
propList	th 展示的内容以及是否使用插槽	Array	[]
listCount	树图的总数	Number	0
page	当前展示的页数以及当前页展示个数	Object	{ currentPage: 1, pageSize: 10 }