blue-feedback

一个轻量的用户反馈UI插件。

• 智能客服：跳转链接，用于打开客服会话。
• 问题报错：提交各种系统异常（bug）的描述以及图片说明（可选）。
• 意见反馈：提交用户意见（feature）以及图片说明（可选）。

Install

npm install blue-feedback --save

Demo

const feedback = new Feedback({
  option: [
    {
      type: 'link',
      title: '跳转链接',
      url: 'https://www.baidu.com',
    },
    {
      type: 'modal',
      title: '问题报错',
      img: {
        label: '问题图片',
        count: 4,
        itemSize: 2,
      },
      text: {
        label: '问题描述',
        placeholder: '请输入问题描述以及正确描述',
        maxLength: 2000,
      },
    }
  ],
  async send (type, formData) {
    formData.append('type', type);
    await sendApi(formData); // 提交请求函数
  }
});

API

配置项

名称	类型	必选	说明
mode	'dropdown'|'expand'	否	默认为dropdown，用于切换入口样式
wrapClassName	string	否	自定义外层容器样式
helperUrl	string	否	需要『智能客服』时，传入跳转 url
toast	(e: Error) => string|false|void	否	用于定制toast，返回false禁止默认toast；返回void使用默认toast行为；返回string修改toast信息
send	(type: 'bug'|'feature', data: FormData): Promise<any>	否	提交函数
option	Array<Link|Modal>	是	菜单配置项

• send.args[0] type：触发提交的窗口，『问题报错』为 'bug'，『意见反馈』为 'feature'
• send.args[0] data：提交内容的FormData

名称	类型	说明
adviceContent	string	文本描述
files	File	【可选】多图片上传

option

option.Link[type="link"]

• title：必填，页签标题
• url：必填，页签跳转地址

option.Modal[type="modal"]

• title：必填，页签标题
• value：默认值同title，对应 send.args[0]
• evaluate：可选，评价满意度配置，为true时，应用默认值
  • options：评价选项
• img：可选，上传图片配置，为true时，应用默认值
  • 默认值：{label: '上传图片', count: 4, itemSize: 2}
  • label：表单文案
  • count：图片个数限制
  • itemSize：单个图片的大小限制（单位：MB）
• text：默认值{label: '文字描述'}，文本框配置
  • label：表单文案
  • placeholder：文本框提示文案
  • maxLength：最长字数限制

实例方法

• el：插件的根DOM节点

实例方法

• unmount：用于卸载插件

自定义异常

• StateError：上传图片解析失败
• SizeError：单个图片大小超过上限
• FileTypeError：上传非图片类型
• CountError：图片数量超过上限
• OverflowError：文字描述超过长度限制
• send函数产生的异常

History