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 } |