0.3.1 • Published 10 months ago

free-survey-form v0.3.1

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
10 months ago

Free Survey Form Builder

Free Survey Form 是一个 Free Survey Core 的问卷填写组件 Vue3 实现,提供简洁美观的问卷回答界面,采用了插件化的设计,能够轻松扩展题型。

npm GitHub License GitHub language count npm

安装

npm install free-survey-form

用法

你可选择全局引入使用或局部引入使用。全局引入后即可在任意模板中使用free-survey-form组件。

全局引入

main.ts :

import { createApp } from 'vue';
import App from './App.vue';

import FreeSurveyFormPlugin from 'free-survey-form';
import 'free-survey-form/style';

const app = createApp(App);
app.use(FreeSurveyFormPlugin);
app.mount('#app');

局部引入

App.vue :

<template>
  <div class="panel">
    <free-survey-form class="form" :survey="surveyModel" ref="form" />
  </div>
</template>

<script setup lang="ts">
import { Survey } from 'free-survey-core';
import { FreeSurveyForm } from 'free-survey-form';
import { ref } from 'vue';

const surveyModel = ref(new Survey());
const form = ref<InstanceType<typeof FreeSurveyForm>>();
const importJson = () => {
  const json = getSurveyJsonFromSomewhere();
  surveyModel.value.importFromJson(json);
  form.value?.refresh();
};
</script>

<style scoped>
.panel {
  display: flex;
  justify-content: center;
  background: cornflowerblue;
  padding: 16px 0;
}
.form {
  min-width: 400px;
}
</style>

支持题型及元素

题型是否支持是否规划
页面(Page)
题组(QuestionGroup)
单项选择(RadioGroup)
多项选择(CheckBox)
文本问答(SingleText)
下拉选择(Dropdown)
时间选择(Time)
分割线(Splitter)
文件(File)

参与开发

Free Survey Form 基于 Vue3 开发,界面部分采用了 Tdesign ,并进行了部分样式修改。代码使用 Prettier 和 TypeScript 进行格式和类型控制。

如果要参与开发,请将代码 fork 一份,并将 fork 的代码库克隆至本地,接着:

安装 npm 包

npm install

调试运行:

npm run dev

类型检查及发布:

npm run build

使用 Vitest 进行测试:

npm run test:unit

代码质量检查(采用 ESLint ):

npm run lint

反馈建议

请在 Free Survey Form 的 Github 仓库 提起 issue 以便进行反馈和建议。如有使用问题也可提出 issue。

项目未来规划

Free Survey Form 目前仍处于非常早期的版本,主要专注于基础实现,因此对于一些基础功能以外的建设目前暂不考虑,例如国际化、文档补充、测试等。如果你对这些有兴趣,欢迎你参与建设。

交流与沟通

如果你有沟通和交流的意愿,欢迎你发送邮件至 work@hhao.wang

开源协议

Apache 2.0 © HHao