基于iview的咱家健康前端PC端VUE组件库-华佗（zjjk-huatuo）

ZjCard 卡片组件

可将内容直接设置为Tabs组件，样式将自动适配

solt

• title // 标题
• extra // 右侧扩展内容

ZjButton 按钮组件

props

• color: String // 按钮文字颜色
• bgColor: String // 按钮背景色
• width: [String, Number] // 按钮宽度
• height: [String, Number] // 按钮高度
• fontSize: [String, Number] // 按钮文字字号
• radius: [String, Number] // 按钮边框圆角

ZjEditor 富文本编辑器组件

获取编辑器实例 this.$refs[ZjEditor组件ref名称].instance

此编辑器是基于《wangEditor》的二次封装，点击查看官方文档

props

• value: String // 编辑器的内容 可使用v-model进行双向绑定
• menu: Array // 菜单配置

// 默认菜单配置，注释的内容为默认关闭的菜单
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
// 'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
// 'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
// 'quote', // 引用
// 'emoticon',  // 表情
'image', // 插入图片
'table', // 表格
// 'video',  // 插入视频
// 'code',  // 插入代码
'undo', // 撤销
'redo' // 重复

• colors: Array // 前景色、背景色配置
• zIndex: Number // 编辑区域的z-index 默认为1000
• customUploadImg: Function // 上传图片的自定义方法

/**
 * customUploadImg 函数说明
 * @param {Files} files 选中的文件列表
 * @param {String} insert 获取图片 url 后，插入到编辑器的方法
 */
function (files, insert) {
  // 上传代码返回结果之后，将图片插入到编辑器中
  insert(imgUrl)
}

methods

• setContent // 设置编辑器内容
• getContent // 获取内容，默认获取html

/**
 * getContent 函数说明
 * @param {Boolean} html 是否获取html类型的内容，传入false获取的是text类型
 */
function getContent(html = true) { }

• appendContent // 向编辑器后面追加内容
• clearContent // 清空编辑器内容

ZjModal 模态框组件

props

• value: Boolean // 弹窗是否显示 可使用v-model进行双向绑定
• forceHeight: Boolean // 是否强制显示最高高度
• minHeight: [String, Number] // 窗口最小高度 默认100px
• type: String // 弹窗类型默认1000px(default) 800px(dog) 600px(cat) 400px(ant) 警告420px(warning) 提示信息420px(info) 默认 default
• 以及官方Modal组件的所有的属性和事件配置

ZjSelectImg 选择图片组件

应优先使用SuperForm的image组件，该组件支持自动预览、自动上传功能

props

• maxWidth: Number // 图片压缩后的最大宽度 单位px 0或负数表示不限制宽度

events

• preview // 图片压缩完成后的事件，返回图片压缩后的base64数据，预览图片可以在该事件中实现

MaxHeightTable 最高高度表格

props

• container: String // 所在容器的id或class
• columns: Array // 表格列配置项
• data: Array // 表格数据
• maxLine: Number // 最多显示几行内容，多余的内容会通过tooltip显示，0表示全部显示。 默认1
• showPage: Boolean // 是否显示底部页码 默认true
• current: Number // 当前页
• count: Number // 记录总数
• pageSize: Number // 每页条数 默认20
• pageSizeOpts: Array // 配置每页的显示数量 默认[10, 20, 30, 50, 100]

events

• change // 页码改变的回调，返回改变后的页码
• sizeChange // 切换每页条数时的回调，返回切换后的每页条数