1

目标：

  • 从 JSON/CMS 生成表单字段
  • 在 JSON 中有一个参数，允许两个字段在一行上彼此相邻

到目前为止的解决方案：

我正在使用 Vue Formulate 的模式 API 来生成字段。在 Vue Formulate 的选项中，我可以outer根据context.

classes: {
  outer(context, classes) {
    if (context.attrs.colspan === 1) {
      return classes.concat('col-span-1')
    }
    return classes.concat('col-span-2')
  },

我正在使用 Tailwind，它不需要类名连接，并且实际上希望默认为col-span-2，因此如果您倾向于复制它，您的逻辑可能会有所不同。

将一些类应用于FormulateForm，这非常有效。由于 CSS 网格，不需要额外的包装行：

<FormulateForm
  v-model="values"
  class="sm:grid sm:grid-cols-2 sm:gap-2"
  :schema="schema"
/>

架构现在看起来像这样：

[
  {
    type: 'text',
    name: 'first_name',
    label: 'First name',
    validation: 'required',
    required: true,
    colspan: 1,
  },

问题/问题

Vue Formulate 的模式 API 将所有定义的属性（除了一些保留名称）传递给input元素。就我而言，这导致：

<div
  data-classification="text"
  data-type="text"
  class="formulate-input col-span-1"
  data-has-errors="true"
  >
  <div class="formulate-input-wrapper">
    <label
      for="formulate-global-1"
      class="formulate-input-label formulate-input-label--before"
    >
      First name
    </label>
    <div
      data-type="text"
      class="formulate-input-element formulate-input-element--text"
    >
      <input
        type="text"
        required="required"
        colspan="1" <--------------- hmm…
        id="formulate-global-1"
        name="first_name"
      >
    </div>
  </div>
</div>

我认识到我可以命名我的属性data-colspan，这样我就不会在td上放置属性input，但我认为colspan我不想将其应用于模板的元数据。有没有办法防止它被应用到——input也许是模式 API 中的一个保留字，它允许通过访问元数据对象context而不被应用到v-bind="$attrs"？

4

1 回答 1

1

vue-formulate 团队帮助我解决了这个问题。非常感谢。非常喜欢。

有一种方法可以防止它登陆输入，那就是使用outer-class模式中的保留属性：

[
  {
    type: 'text',
    name: 'first_name',
    label: 'First name',
    validation: 'required',
    required: true,
   'outer-class': ['col-span-1'],
  },

这意味着我根本不需要这样做：

classes: {
  outer(context, classes) {
    if (context.attrs.colspan === 1) {
      return classes.concat('col-span-1')
    }
    return classes.concat('col-span-2')
  },

vue-formulate 支持通过 props 替换或连接类。我设法忽略了它，因为我没有认识到您传递给模式 API 的所有内容最终都与应用该名称的道具相同。

类也可以应用于组件的其他几个部分——不仅仅是outer/container。更多信息在这里：

https://vueformulate.com/guide/theming/customizing-classes/#sharing-classes-with-props

于 2021-01-15T20:22:02.937 回答