2.0.0 • Published 4 years ago
hz-plugin v2.0.0
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 buildFor detailed explanation on how things work, consult the docs for vue-loader.