Blue-feedback NPM

blue-feedback

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

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

Install

npm install blue-feedback --save

Demo

const feedback = new Feedback({
  option: [
    {
      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

配置项

名称	类型	必选	说明
`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.args0 type：触发提交的窗口，『问题报错』为 'bug'，『意见反馈』为 'feature'
send.args0 data：提交内容的FormData

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

option

option.Linktype="link"

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

option.Modaltype="modal"

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