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 build
For detailed explanation on how things work, consult the docs for vue-loader.