vue-questionare-generator v1.0.0

vue-questionare-generator

问卷设计器的基础模板，基于questionare-generator-core核心校验库封装的一款默认组件

该组件面向不进行大量样式自定义的开发者

如需自定义组件可以单独使用核心校验工具自主设计组件

安装

使用npm进行安装

npm i vue-questionare-generator

使用yarn进行安装

yarn add vue-questionare-generator

引入

完整引入

完整引入提供全部题型的完整组件

import { QuestionareGenerator } from 'vue-questionare-generator'

按需引入

按需引入对应题目组件，配置单位更加轻量

import { BlanksFilling } from 'vue-questionare-generator' // 引入填空题组件
import { MultipleChoice } from 'vue-questionare-generator' // 引入多选题组件
import { SingleChoice } from 'vue-questionare-generator' // 引入单选题组件
import { Proportion } from 'vue-questionare-generator' // 引入比重题组件
import { Ranking } from 'vue-questionare-generator' // 引入排序题组件
import { Scoring } from 'vue-questionare-generator' // 引入打分题组件

使用

完整引入的使用方式

import { QuestionareGenerator } from 'vue-questionare-generator'

const testData = {
  questionImage: '',
  questionTitle: '问卷标题',
  questionRemark: '感谢您能抽出几分钟时间来参加本次答题，现在我们就马上开始吧！',
  isQuestionNumber: true,
  isQuestionType: true,
  data: [
    {
      id: 1,
      title: '请选择一个选项',
      type: 'single-choice',
      must: true,
      options: [{ label: '选项名称', value: 1 }, { label: '选项名称', value: 2 }]
    },
    {
      id: 2,
      title: '请选择一个或多个选项',
      type: 'multiple-choice',
      must: true,
      options: [{ label: '选项名称', value: 1 }, { label: '选项名称', value: 2 }]
    },
    {
      id: 3,
      title: '请选择一个或多个选项',
      type: 'multiple-choice',
      must: true,
      options: [{ label: '选项名称', value: 1 }, { label: '选项名称', value: 2 }]
    },
    {
      id: 4,
      title: '请填写本项内容',
      type: 'blanks-filling',
      must: true
    },
    {
      id: 5,
      title: '请给本项打分',
      type: 'scoring',
      must: true,
      fractionType: 5
    },
    {
      id: 6,
      title: '请给以下选项排序',
      type: 'ranking',
      must: false,
      options: [{ label: '选项名称', value: 1 }, { label: '选项名称', value: 2 }]
    }
  ]
}

return (
  <QuestionareGenerator data={ testData } />
)

按需引入的使用方式

import { BlanksFilling } from 'vue-questionare-generator'

const testData = [{
  id: 4,
  title: '请填写本项内容',
  type: 'blanks-filling',
  must: true
}]

return (
  <BlanksFilling data={ testData } />
)

QuestionareGenerator组件参数