2019.12.31更新日志

• VERSION 1.1.0
• 封装富文本编辑器组件（基于tinymce编辑器再次开发）。
• 表格组件中支持传入链接，如果传入链接，表格将会自动返回此链接获取的内容。

以下为此次更新使用教程

• 富文本编辑器使用

安装相关依赖

npm install hz-plugin -S
npm install @tinymce/tinymce-vue -S
npm install tinymce -S

在main.js中引入插件

import HzPlugin from 'hz-plugin';
Vue.use(HzPlugin);

在使用的地方直接引入即可

<HzEditor v-model="msg" :initData="'Hello World'"></HzEditor>

其中，msg为编辑器获取到的html内容，Hello World 为编辑器的初始化内容。 其他相关参数如下所示：

参数名| 说明 | 类型 | 可选值 | 默认值

• | :-: | :-: | :-: | -: disabled| 是否禁用编辑器| Boolean | true/false | false| menubar| 是否开启顶部菜单| Boolean | true/false | false | inline| 是否开启内联模式| Boolean | true/false | false | initData| 编辑器的初始化内容| String | ——— | ——— | width| 编辑器的宽度| String | ———（请携带单位一起传递） | 100% | height| 编辑器的高度| String | ———（请携带单位一起传递） | 300px | skin| 编辑器的皮肤| String | dark | ——— |

• 表格使用

安装相关依赖

npm install hz-plugin -S
npm install axios -S

在main.js中引入插件

import HzPlugin from 'hz-plugin';
Vue.use(HzPlugin);

在使用的地方直接引入。

<HzTable :table-list="tableList" :columns="columns" ></HzTable>
<HzTable :url="url" :columns="columns" ></HzTable>

Attributes

参数名| 说明 | 类型 | 可选值 | 默认值

• | :-: | :-: | :-: | -: columns| 表格数据列和数组的对应关系 | Array| —— | ——| tableList| 表格需要渲染的数据 | Array| —— | ——| size| 表格的大小 | String| medium / small / mini | ——| url| 表格数据的来源地址 | String | —— | —— | filter| 使用地址获取数据时，同时传入的参数，用于模糊查询等 | Object | —— | —— | height| 表格的高度 | String | —— | —— | border| 是否开启表格边框 | Boolean | true/false | false | showSummary| 是否开启表格合计 | Boolean | true/false | false | stripe| 是否开启表格斑马线 | Boolean | true/false | false |

Events

方法名| 说明 | 参数

• | :-: | :-: | :-: | -: handleSelectionChange| 用于开启多选框之后，监听选中数据的变化 | 用户选中的数据数组 |

Vue-based encapsulation of element- UI components

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.