1

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

在此处输入图像描述

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

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

4

1 回答 1

3

我认为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"
  }
});

这是一个示例的链接：https ://codesandbox.io/s/tailwind-vue-formulate-checkbox-after-pwxh2?file=/src/main.js

于 2020-09-07T17:57:16.277 回答