Совет о том, как go разбить форму на несколько «страниц» / «вкладок» в Vue? - PullRequest
Новая
       123

Совет о том, как go разбить форму на несколько «страниц» / «вкладок» в Vue?

0 голосов
/ 26 мая 2020

Я новичок в разработке Vue и надеялся получить совет или лучшее решение проблемы, которую пытаюсь решить.

В настоящий момент я пытаюсь создать мастер-инструмент который может принимать одну форму, охватывающую несколько страниц (в мастере). Я надеюсь, что он будет вести себя примерно так: 

  <myWizard>
    <form>
      <myPage>
        <label />
        <input/>
      </myPage>
      <myPage>
        <label />
        <input/>
      </myPage>
    </form>
  </myWizard>

Моя основная проблема в основном заключается в том, что это инструмент, который я не знаю / не знаю, что находится между тегами <myWizard>, поскольку это зависит от человек, использующий инструмент.

У меня уже есть базовая настройка, которая может отображать контент на отдельных вкладках (страницах) с помощью BootStrap, но мне интересно, как лучше всего справиться с разделением содержимого формы на разные страницы .

Например, может ли что-то вроде использования <slot> принимать все, что находится между тегами <myWizard>, тогда myPage будет еще одним компонентом, который позволит мне отображать то, что между ними, на отдельных страницах в мастере?

Хотя делать это и пытаться идентифицировать «теги» / «компоненты» внутри слота кажется очень окольным, и я еще не рассматривал это специально.

Спасибо за любые советы, которые вы можете есть.

1 Ответ

0 голосов
/ 26 мая 2020

Вы можете сделать что-то вроде этого: 

// router.js
const vueRoutes = [
  {
    path: '/',
    name: 'home',
    component: Home,
  },
(...)
  {
    path: '/wizard',  // Define main route for the form
    name: 'wizard',
    component: AppWizard,
    children: [
      {
        path: 'page1',
        name: 'page1',
        component: FormPart1, // If the route is '/wizard/page1' it will render the FormPart1 component
      },
      {
        path: 'page2',
        name: 'page2',
        component: FormPart2, // If the route is '/wizard/page2' it will render the FormPart2 component
      }
    ],
  },
(...)
]

// AppWizard.vue
<template>
  <my-wizard>
    <form>
      <router-view>
    </form>
  </my-wizard>
</template>

// FormPart1.vue
<template>
  <fieldset>
    <label1/>
    <input1>
    <label2/>
    <input2>
  </fieldset>
</template>


// FormPart2.vue
<template>
  <fieldset>
    <label3/>
    <input3>
    <label4/>
    <input4>
  </fieldset>
</template>

Конечно, вы можете заменить wizard/page1 на pages/1 или что-то еще.

...