更新记录

1.1.11(2020-07-23)

select和multi-select支持“其它选项”

1.1.10(2020-05-09)

车牌号输入样式修改

查看更多

平台兼容性

综述

  1. 本项目支持添加:单选、多选、是否、单行输入、多行输入、级别输入、日期、时间、省市区三联、图片、行业/大学二级联动、手机号+验证码、用户自定义单列选择器、密码输入、外国选择、当地地理位置、车牌号输入的问卷题目格式
  2. 本项目的省市区三级联动为JSON数据《中国省市区json数据 三级联动》 璎Nicole珞 博客园 并未采用<picker mode='region'></picker>所以可能出现更新不及时的问题
  3. 本项目的行业选择器行业划分参考国家行业划分标准:GB-4754-2017(<wenjuan mode='work'></wenjuan>
  4. 本项目手机号+验证码仅为前端,不包括后端服务器也不包括阿里云短信服务(<wenjuan mode='phone'></wenjuan>
  5. 本项目的大学选择器为JSON数据来源:包子源 CSDN,为“区域”-“大学名称”(<wenjuan mode='university'></wenjuan>

组件属性

类型样例

调用格式

<wenjuan type='example' 
         title='example' 
         subTitle='example' 
         :value='array' 
         :defaultValue='array/string' 
         :maxSelect='number' 
         :hasOther='boolean'
         @change='function'
         @sendCode='function: only when type=phone'
></wenjuan>

主要属性

上述类型分别对应如下属性:

type

必填题目类型

  • 'multi-select' 复选选择题
  • 'select' 单选选择题
  • 'input' 单行文本输入
  • 'textarea' 多行文本输入
  • 'level' 等级选择题
  • 'boolean' 是非选择题
  • 'date' 日期选择器
  • 'time' 时间选择器
  • 'region' 省市区三联选择器
  • 'image' 图片选择器
  • 'phone' 手机输入+验证码
  • 'work' 行业二级联动选择器
  • 'university' 大学二级联动选择器
  • 'single-picker' 自定义单列选择器
  • 'password' 密码输入
  • 'foreign' 外国国家选取
  • 'local' 获取当前位置信息
  • 'drive' 车牌号输入

分题目类型属性说明

共有的属性

内容 类型 样例 备注
title string 标题 必填
subTitle string 副标题 选填,副标题或说明
type string select 必填,指示问卷题目为何种类型
hasOther boolean false 选填,表示选项是否支持“其他”

复选 multi-select

内容 类型 样例 备注
type string multi-select 必填
value array ["A","B","C","D"] 必填,每一个选项的string说明
defaultValue array ["A","C"] 选填,初始选择的选项
maxSelect number 3 选填,最多选择的选项个数
hasOther boolean false 选填,表示选项是否支持“其他”

单选 select

内容 类型 样例 备注
type string select 必填
value array ["A","B","C","D"] 必填,每一个选项的string说明
defaultValue array ["A"] 选填,初始选择的选项

判断 boolean

内容 类型 样例 备注
type string input 必填
value array ["是","否"] 选填,第一个是“正确”的文字说明,第二个是“错误”的文字中说明
defaultValue array ["A"] 选填,初始选择的选项

数值 level

内容 类型 样例 备注
type string level 必填
value array [1,10,2] 前两个参数分别为上限和下限(必填),最后一个参数为步长(选填,默认1)

单行输入 input

内容 类型 样例 备注
type string input 必填
defaultValue string 请输入 选填,为input的placeholder
maxSelect number 30 选填,为input的maxLength

多行输入 textarea

内容 类型 样例 备注
type string textarea 必填
defaultValue string 选填,为textarea的placeholder
maxSelect number 30 选填,为textarea的maxLength

日期选择 date

内容 类型 样例 备注
type string date 必填
defaultValue string 2019-12-20 选填,初始日期,不填默认今天

时间选择器 time

内容 类型 样例 备注
type string time 必填
value array ["12:00","13:00"] 选填,开始时间,结束时间(24小时制)
defaultValue string 13:00 选填,初始日期,不填默认当前时间

地区选择器 region

内容 类型 样例 备注
type string region 必填

可排序图片选择器 image

内容 类型 样例 备注
type string image 必填(每张图片可以长按排序)
maxSelect number 3 选填,最多几张图片

前端手机+验证码输入 phone

内容 类型 样例 备注
type string phone 必填
value array [4,30] 第一个参数是验证码位数(选填,不填默认6),第二个参数是等待时间(选填单位秒,不填60s)

行业选择器 work

内容 类型 样例 备注
type string work 必填

大学选择器 university

内容 类型 样例 备注
type string university 必填

自定义单列选择器 single-picker

内容 类型 样例 备注
type string single-picker 必填
value array ["A","B","C","D"] 必填,选项
defaultValue string "1" 选填,这是个string,代表第几个选项

密码输入 password

内容 类型 样例 备注
type string password 必填
value array ["true","/static/cannot-visiable.png",","/static/visiable.png"] 选填,第一个参数是初始状态下是否隐藏:true 密码不可见, false 密码可见, none 密码不可见且不可切换可见性。第2.3个参数是不可见、可见的图标
defaultValue string "请输入密码" 选填,密码框的placeholder

外国过国家选取 foreign

内容 类型 样例 备注
type string foreign 必填

当前位置信息 local

内容 类型 样例 备注
type string local 必填
defaultValue string 点击以获取信息 选填,当未获取时显示的提示

特殊的:当type=local时,$event将返回3个信息:当前中文地理名称、经纬度、ip地址

车牌号输入 drive

内容 类型 样例 备注
type string drive 必填

方法

change

用于获取更改选项等参数,支持change($event,...其他参数)获取方式,其中$event返回一个数组

sendCode

用于监听验证码发送按钮点击事件,支持sendCode($event,...其他参数)获取方式,其中$event返回一个数组[phone,code]

样式

调用本组件可以用scoped穿透:
比如:

//你的功能也定义样式如下:可以修改问题题目的样式:color
//wenjuan-view就是您自己给问卷<wenjuan class="wenjuan-view" />的样式
<style>
  .wenjuan-view >>> .title{
      color: #123456;
  }
</style>

.title

负责设置问卷标题样式

.subTitle

负责这只问卷副标题样式

.borderGrey

负责设置问卷完成的下方的下划线

.sliderInput

负责设置级别输入下方输入框样式

.xuanxiang

负责设置选项文字的样式

input

负责设置输入框样式

textarea

负责设置多行输入框样式

.datePicker

负责picker样式:日期、时间、省市区三级联动、行业二级选择器、外国、车牌、自定义单列、大学

.imageContainer

负责图片外框样式

.imageBlock

负责图片样式

.phone

负责电话号码输入框的样式

.code

负责验证码输入框的样式

.sendButton

负责发送短信验证码按钮的样式

.bg-green

负责发送短信验证码按钮可用时样式

.bg-white

发送短信验证码按钮不可用(倒计时)的样式

关于事例项目

list页面

list 页面展示的是通过 data设置一整张问卷的情形

index页面

index 页面所展示的是 单独使用wenjuan的情形

特殊的

致歉

本项目暂时无法对用户的行为(包括必须非空、异常值处理)做出相应约束,请有需要的用户在自己前端提交时自行对所提交的数据进行校验

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问