帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue表单组转换为对话表单

帝国模板之家 2021-02-03 网页特效 评论

介绍

一个Vue.js组件,可将表单组转换为对话表单。

基本用法

1. 引入组件。

import ConversationalForm from ‘vue-conversational-form’

2. 将表单组添加到“对话表单”组件。

<template>
  <ConversationalForm @submit="submit">
    <fieldset>
      <label for="name">What's your name?</label>
      <input required data-question="Hi there! What's your name? " type="text" name="name" id="name">
    </fieldset>
    <fieldset>
       <label for="name">Gender</label><br />
       <input type="radio" data-question="What's your gender?" name="gender" value="male" data-text="Male" /> Male<br>
       <input type="radio" name="gender" value="female" data-text="Female" /> Female<br>
       <input type="radio" name="gender" value="other" data-text="Other" /> Other
    </fieldset>
    <fieldset>
      <label for="opinion">Will conversational interfaces be everywhere?</label>
      <select data-question="Do you think conversational forms will replace web forms in the future?" name="opinion" id="opinion">
        <option></option>
        <option>Definitely</option>
        <option>Maybe</option>
        <option>No</option>
      </select>
    </fieldset>
    <fieldset>
      <label for="company">Company</label>
      <input data-question="{occupation}, nice! Which company are you with?" type="text" name="company" id="company">
    </fieldset>
    <fieldset>
      <label for="thats-all">Want to start over?</label>
      <button data-question="Want to start over?" name="reset" type="reset" data-cancel="No">Yes, let's go again</button>
    </fieldset>
    <fieldset>
      <label for="thats-all">Are you ready to submit the form?</label>
      <button data-question="Are you ready to submit the form?" data-success="Submited! Yay!" name="submit" type="submit" data-cancel="Nope">Yup</button>
    </fieldset>
  </ConversationalForm>
</template>
export default {
  name: 'App',
  components: {
    ConversationalForm
  },
  methods: {
    submit (o) {
      console.log('Submit:')
      console.log(o) // get form data
    }
  }
}
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言