项目说明

意见反馈提交弹窗

使用说明

安装

pnpm i szhn-feedback-dialog

vue3

入参

| 参数名称 | 类型 | 必填 | 默认值 | 说明 | | ----------------- | ----------------------- | ---- | ------ | ------------------ | | show | Boolean | 是 | false | 是否显示反馈对话框 | | initial-data | FeedbackData | 否 | {} | 初始数据 | | feed-back-options | Array | 否 | {} | 反馈选项 | | loading | Boolean | 否 | false | 是否加载中 | | upload-fn | Function | 否 | - | 文件上传函数 |

类型说明

interface FeedbackData {
  path: string;
  feedbackPerson: string;
  contactPhone: string;
}

interface IFeedbackOptions {
  label: string;
  value: string;
}

事件

| 事件名称 | 类型 | 说明 | | ---------- | --------------------------------------------------- | ----------------------------------------------- | | close | Function | 关闭反馈对话框回调，需要在close内调用show=false | | submit | Function(e: {detail: Array<{Record<string, any>}>}) | 提交反馈回调 | | file-click | Function(e: {detail: Array<{Record<string, any>}>}) | 文件点击回调 |

使用

在vite.config.ts中配置vue插件的isCustomElement选项，将szhn-开头的标签视为自定义元素

// vite.config.ts
import vue from "@vitejs/plugin-vue";
export default defineConfig(({ mode, command }) => {
  return {
    plugins: [
      vue({
        template: {
          compilerOptions: {
            isCustomElement: (tag) => tag.startsWith("szhn-"),
          },
        },
      }),
    ],
  };
});

// main.js
import "szhn-feedback-dialog";
import "szhn-feedback-dialog/style.css";

正式使用

<szhn-feedback-dialog
  :show="showFeedback"
  :initial-data="state.initialData"
  :feed-back-options="state.feedBackOptions"
  :loading="false"
  :upload-fn="fileUpload"
  @close="handleChangeShow"
  @submit="handleSubmit"
  @file-click="handleFileClick"
></szhn-feedback-dialog>

const showFeedback = ref(false)
const dialogLoading = ref(false)

const fileUpload =  (data: FormData)=> {
  return request<DefaultResponse<{ url: string; name: string }>>({
    url: '/upload',
    method: 'post',
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    data
  })
}

const handleChangeShow = ()=>{
    showFeedback.value = false
}

const handleSubmit = (e)=>{
  dialogLoading.value = true
  setTimeout(() => {
    dialogLoading.value = false
  }, 1000)
    console.log(e.detail[0])
}

const handleFileClick = (e)=>{
    console.log(e.detail[0])
}

vue2

在vue2项目中配置,将szhn-开头的标签视为自定义元素

// vue.config.js
module.exports = {
  chainWebpack(config) {
    config.module
      .rule("vue")
      .use("vue-loader")
      .tap((options) => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: (tag) => tag.startsWith("szhn-"),
        };
        return options;
      });
  },
};

// main.js
import "szhn-feedback-dialog/v2";
//vue2不用引入css

入参

| 参数名称 | 类型 | 必填 | 默认值 | 说明 | | ----------------- | ----------------------- | ---- | ------ | ------------------ | | show | Boolean | 是 | false | 是否显示反馈对话框 | | initial-data | FeedbackData | 否 | {} | 初始数据 | | feed-back-options | Array | 否 | {} | 反馈选项 | | loading | Boolean | 否 | false | 是否加载中 |

事件

vue2比vue3中， 不能将函数传给web-component，所以将上传函数改为事件触发

| 事件名称 | 类型 | 说明 | | ---------- | --------------------------------------------------- | ----------------------------------------------- | | close | Function | 关闭反馈对话框回调，需要在close内调用show=false | | submit | Function(e: {detail: Array<{Record<string, any>}>}) | 提交反馈回调 | | file-click | Function(e: {detail: Array<{Record<string, any>}>}) | 文件点击回调 | | upload | Function(e: {detail: Array<{Record<string, any>}>}) | 文件上传回调 |

正式使用

vue2的web-component的入参只支持string 所以需要将对象转换为string，否则会被转化为[object,Object]

<template>
      <szhn-feedback-dialog
      :show="showDialog"
      :feed-back-options="JSON.stringify(feedBackOptions)"
      :initial-data="JSON.stringify(initData)"
      @submit="handleSubmit"
      @upload="handleUpdate"
      @close="closeDialog">
    </szhn-feedback-dialog>
</template>
<script>
export default {
    data() {
        return {
            showDialog: false,
            feedBackOptions: {},
            initData: {
                path: '',
                feedbackPerson: '',
                contactPhone: ''
            }
        }
    },
    methods: {
        open() {
            this.initData.path='路径'
            this.initData.feedbackPerson='联系人'
            this.initData.contactPhone='联系电话'
            this.showDialog = true
        },
        handleSubmit(e) {
          this.dialogLoading = true
          setTimeout(() => {
            this.dialogLoading = false
          }, 1000)
          console.log('提交反馈:', e.detail)
        },
        handleUpdate(e) {
            console.log('文件上传:', e.detail)
        },
        closeDialog() {
            this.showDialog = false
        }
    }
}
</script>