Vue Questionnaire Design

基于Vue2、vuex3和ElementUI搭建一个功能强大的 Vue2.0 问卷调查设计组件，支持富文本编辑器和表单构建器。

✨ 特性

• 🎨 可视化设计 - 拖拽式问卷设计界面
• 📝 富文本编辑 - 集成 TinyMCE 编辑器支持
• 🧩 多种题型 - 支持单选、多选、填空、多项填空多种题型，其他题型正在开发中
• 📱 响应式设计 - 支持 PC 和移动端预览
• 🎯 主题定制 - 支持自定义主题背景图上传、选定、删除功能
• 💾 数据存储 - 支持问卷数据的保存和模板功能
• 🔧 高度可配置 - 丰富的配置选项和 API

📚 项目截图

题目

主题手机端预览

主题电脑端预览

模板

📦 安装

# npm
npm install vue-questionnaire-design

# yarn
yarn add vue-questionnaire-design

# pnpm
pnpm add vue-questionnaire-design

✅ 必需依赖与包版本

使用本库前，请在你的项目中安装以下依赖（本库将它们声明为 peerDependencies）：

• vue: ^2.6.14
• element-ui: ^2.15.0
• vuex: ^3.x.0 版本

安装示例：

# npm
npm i vue@^2.6 element-ui@^2.15 vuex@^3 -S

# yarn
yarn add vue@^2.6 element-ui@^2.15 vuex@^3

# pnpm
pnpm add vue@^2.6 element-ui@^2.15 vuex@^3

备注：本库内部已自动注册 ElementUI 并引入其样式，但依赖仍需在你的项目中安装，确保打包器能正确解析模块。

🚀 快速开始

1. 全局注册

// main.js
import Vue from "vue";
import VueQuestionnaireDesign from "vue-questionnaire-design";
// 引入样式
import "vue-questionnaire-design/dist/vue-questionnaire-design.css";

Vue.use(VueQuestionnaireDesign);

2. 在组件中使用

<template>
  <div>
    <AvueFormDesign />
  </div>
</template>

📖 详细用法

基础用法

<template>
  <div class="questionnaire-container">
    <AvueFormDesign
      :preview-visible="previewVisible"
      :prop-current-options="currentOptions"
      :template-list="templateList"
      :theme-url-list="themeUrlList"
      @close="handleClosePreview"
      @current-question-column="handleQuestionOptions"
      @theme-upload-file="handleThemeUploadFile"
      @theme-delete-file="handleThemeDeleteFile"
      @save-questionnaire="handleAnnounce"
    >
    </AvueFormDesign>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentOptions: {
        title: "满意度调查问卷",
        headRemarks: "感谢您参与本次调查",
        themeUrl: "主题背景图链接地址",
        footerRemarks: "谢谢您的参与",
        data: [], //题型选项
      },
    };
  },
  methods: {
    handleSave(data) {
      console.log("问卷数据:", data);
    },
  },
};
</script>

预览模式

<template>
  <div>
    <!-- 设计模式 -->
    <AvueFormDesign
      :preview-visible="previewVisible"
      :prop-current-options="currentOptions"
      :template-list="templateList"
      :theme-url-list="themeUrlList"
      @close="handleClosePreview"
      @current-question-column="handleQuestionOptions"
      @theme-upload-file="handleThemeUploadFile"
      @theme-delete-file="handleThemeDeleteFile"
      @save-questionnaire="handleAnnounce"
    />
  </div>
</template>

🎯 API

Props

| 参数 | 说明 | 类型 | 默认值 | | ------------------ | ------------ | ------- | ------ | | previewVisible | 预览抽屉弹框 | Boolean | false | | propCurrentOptions | 问卷配置数据 | Object | null | | templateList | 模板数据 | Array | [] | | themeUrlList | 主题数据 | Array | [] |

propCurrentOptions 数据结构

{
  title: '问卷标题',
  headRemarks: '开头备注',
  footerRemarks: '结尾备注',
  themeUrl: '主题背景图URl地址',
  data: [
    {
      type: 'input', // 题型
      name: '姓名',// 题目标题
      required: true, // 是否必填，
      options: [], // 题型选项
      value: [ // 选项配置
        //other: false：是否其他选项，其他选项为true
        { name: '选项1', value: '1',  other: false },
        { name: '选项2', value: '2', other: false },
        { name: '选项3', value: '3',  other: false },
        {
          name: '其他选项', value: '4',  other: true,
          children: [
            { name: '填空1', value: '' }
          ]
        },
      ]
    },
    .....
  ]
}

templateList 模板数据结构

[
  {
    isDelete: "0", // 0：图片不可删除，1：图片可以删除
    url: "图片背景图地址.jpg",
  },
];

themeUrlList 主题图片数据结构

[
  {
    isDelete: "0", // 0：图片不可删除，1：图片可以删除
    url: "图片背景图地址.jpg",
  },
];

Events

| 事件名 | 说明 | 参数 | 参数说明 | | ------------------ | ---------------- | ---------------------------- | ----------------------------------------------------------------------- | | close | 关闭预览抽屉弹框 | 无 | 无 | | theme-upload-file | 主题文件上传触发 | file | file 文件对象 | | theme-delete-file | 主题文件删除触发 | (row: Object, index: Number) | row: 当前数据，index: 当前数据索引 | | save-questionnaire | 保存问卷时触发 | (data: Object, type: String) | data: 问卷 json 数据，type: 保存类型（1：生成，2：暂存，3：保存为模板） |

支持的题型

• input - 单行文本
• multiInput - 多行文本
• radio - 单选题
• checkbox - 多选题

🎨 样式定制

CSS 变量

:root {
  --questionnaire-primary-color: #409eff;
}

自定义主题

<template>
  <div class="custom-questionnaire">
    <AvueFormDesign :prop-current-options="options" />
  </div>
</template>

<style>
.custom-questionnaire {
    --questionnaire-primary-color: #67c23a; /*主题背景色*/
    --questionnaire-primary-hover-color: rgba(103, 194, 58, 0.1); /*主题色hover颜色*/
}
</style>

📱 移动端支持

组件原生支持响应式设计，在移动端设备上会自动适配。

<template>
  <div class="mobile-questionnaire">
    <AvueFormDesign :prop-current-options="mobileOptions" mobile-optimized />
  </div>
</template>

📊 数据导出

// 导出为JSON
const exportJSON = () => {
  const data = this.$refs.questionnaire.getFormData();
  console.log(JSON.stringify(data, null, 2));
};

// 导出为Excel
const exportExcel = () => {
  this.$refs.questionnaire.exportToExcel();
};

🤝 贡献

欢迎贡献代码！请查看 贡献指南。

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的修改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开一个 Pull Request

📝 许可证

MIT © [Your Name]

🆘 支持

如果您在使用过程中遇到问题，可以通过以下方式获取帮助：

• 提交 Issue
• 查看文档
• 加入讨论