复选框标签出现在复选框下方（即使没有加载任何样式）

Question

如何修复出现在框下方的默认（无样式）复选框标签（它应该像示例中那样位于框的右侧）

我正在使用 tailwind 并通过全局字符串选项设置表单样式。到目前为止，一切都很好，直到我尝试设置复选框样式。问题是标签显示在框下方，即使我删除了所有样式（如屏幕截图所示），这仍然是个问题。我不知道如何使用全局字符串选项定位此标签，这是我一直在研究的结构，尝试设置 label>box 和 input>box 的样式以获得复选框旁边的标签。

Vue.use(VueFormulate, {
    classes: {
        outer: 'py-4',
        wrapper(context) {
            switch (context.classification) {
                case "button":
                    return "";
                default:
                    return "bg-regal-blue-400 py-3  w-full hover:bg-regal-blue-500";
            }
        },
        label(context){
            switch (context.classification) {
                case "box":
                    return "bg-red-500";
                default:
                    return "w-full block text-gray-400 px-4 text-lg";
            }
        },
        element: 'w-full',
        input(context) {
            switch (context.classification) {
                case "button":
                    return "text-lg border-2 rounded-full h-12 bg-red-900 border-red-500 font-bold px-10 hover:bg-red-500 transition-colors duration-500 focus:outline-none";
                case "textarea":
                    return "bg-transparent w-full mt-2 h-48 focus:outline-none text-xl placeholder-gray-700 px-4";
                case "box":
                    return "h-6 w-6";
                default:
                    return "bg-transparent w-full h-10 focus:outline-none text-xl placeholder-gray-700 px-4";
            }
        },
        button: 'bg-red-500',
        help: '',
        errors: 'px-4',
        error: 'text-red-500'
    }
})

即使在一些提供的代码框示例中，如“Tailwind via Config”，如果您将复选框添加到现有表单，标签也会出现在复选框下方 https://codesandbox.io/s/tailwind-vue-formulate-2-password-reset-all-global-kydyp

Answer 1

我认为当它是一个盒子时，我认为缺少的只是包装纸上的一个 display: flex。这是您为使用 flex 修改的配置提供的代码：

Vue.use(VueFormulate, {
  classes: {
    outer: "py-4",
    wrapper(context) {
      switch (context.classification) {
        case "button":
          return "";
        case "box":
          return "w-full flex justify-start";
        default:
          return "bg-regal-blue-400 py-3  w-full hover:bg-regal-blue-500";
      }
    },
    label(context) {
      switch (context.classification) {
        case "box":
          return "bg-red-500 flex-grow";
        default:
          return "w-full block text-gray-400 px-4 text-lg";
      }
    },
    element ({ classification }) {
      switch (classification) {
        case 'box':
          return 'px-1';
        default:
          return 'w-full';
      }
    },
    input(context) {
      switch (context.classification) {
        case "button":
          return "text-lg border-2 rounded-full h-12 bg-red-900 border-red-500 font-bold px-10 hover:bg-red-500 transition-colors duration-500 focus:outline-none";
        case "textarea":
          return "bg-transparent w-full mt-2 h-48 focus:outline-none text-xl placeholder-gray-700 px-4";
        case "box":
          return "h-6 w-6";
        default:
          return "bg-transparent w-full h-10 focus:outline-none text-xl placeholder-gray-700 px-4";
      }
    },
    button: "bg-red-500",
    help: "",
    errors: "px-4",
    error: "text-red-500"
  }
});

下面是一个 link 示例：https://codesandbox.io/s/tailwind-vue-formulate-checkbox-after-pwxh2?file=/src/main.js

复选框标签出现在复选框下方（即使没有加载任何样式）

Checkbox labels appear under the checkbox (even with no styles loaded)

vue-formulate