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

安装和下载：

# NPM
$ npm i vue-conversational-form --save

基本用法：

1.导入组件。

从’vue-conversational-form’导入ConversationalForm

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

<template>
  <ConversationalForm @submit="submit">
    <fieldset>
      <label for="name">你叫什么名字?</label>
      <input required data-question="大家好!你叫什么名字? " type="text" name="name" id="name">
    </fieldset>
    <fieldset>
       <label for="name">性别</label><br />
       <input type="radio" data-question=什么是你的性别?" name="gender" value="男性" data-text="Male" /> Male<br>
       <input type="radio" name="gender" value="女" data-text="Female" /> Female<br>
       <input type="radio" name="gender" value="其他" data-text="Other" /> Other
    </fieldset>
    <fieldset>
      <label for="opinion">会话接口会到处都是吗?</label>
      <select data-question="你认为会话形式会在将来取代网络形式吗?" name="opinion" id="opinion">
        <option></option>
        <option>肯定</option>
        <option>也许</option>
        <option>没有</option>
      </select>
    </fieldset>
    <fieldset>
      <label for="company">公司</label>
      <input data-question="{occupation}, 好了!你在哪家公司工作?" type="text" name="company" id="company">
    </fieldset>
    <fieldset>
      <label for="thats-all">想要重新开始吗??</label>
      <button data-question="想要重新开始吗?" name="reset" type="reset" data-cancel="No">是的，我们再去一次</button>
    </fieldset>
    <fieldset>
      <label for="thats-all">您准备好提交表单了吗?</label>
      <button data-question="您准备好提交表单了吗?" 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) // 获取表单数据
    }
  }
}