复选框标签显示在复选框下方即使未加载样式也是如此

问题描述

如何修复显示在框下方的默认（无样式）复选框标签（如示例所示，应位于框右侧）

我正在使用顺风车，并通过global string选项设置表单的样式。到目前为止，一切工作正常，直到我尝试设置复选框样式。问题是标签显示在框的下方，即使我删除了所有样式（如屏幕截图所示），这仍然是问题。我不知道如何使用global string选项来定位此标签，这是我一直在努力的结构，尝试设置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”，如果您向现有表单添加复选框，标签也会出现在复选框https://codesandbox.io/s/tailwind-vue-formulate-2-password-reset-all-global-kydyp

下

解决方法

我认为所缺少的只是包装盒上的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