Vuejs2-如何在 vue-form-generator 中对单选按钮进行内联对齐？

Question

我正在使用“vue-form-generator”插件来动态加载表单字段。在这些字段中，我将“单选按钮”用于“性别”字段。选项显示在另一个下方，但我希望该选项应以“内联”样式显示

如何将单选按钮选项对齐在同一行（内联）？

这是我的代码：addMember.vue

  <template>
    <div class="panel-body">
      <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
        <input type="submit" value="Submit">
    </div>
  </template>

  <script>
  import Vue from 'vue'
  import VueFormGenerator from "vue-form-generator";
  import "vue-form-generator/dist/vfg.css";

  Vue.use(VueFormGenerator);

  export default {
    data: () => ({

    model: {             
  building: "",
  unitCategory: "",
  unit: "",
  fullName: "",
  gender: "",
  },

    schema: {
      groups: [{
  fields: [{
    type: "select",
    inputType: "text",
    label: "Building",
    model: "building",
    required: true,
    styleClasses:'col-md-6',
     values: [
        { id: "", name: 'Select Building' },
        { id: 'A', name: 'Block-A'},
        { id: 'B', name: 'Block-B'},
    ],
     selectOptions: {
    hideNoneSelectedText: true,
  }
  }]
  },{
  fields: [{
    type: "select",
    inputType: "text",
    label: "Unit Category",
    model: "unitCategory",
    required: true,
    styleClasses:'col-md-3',
    values: [
        { id: "", name: 'Select Unit Category' },
        ],
     selectOptions: {
    hideNoneSelectedText: true,
  }
  },{
    type: "select",
    inputType: "text",
    label: "Unit",
    model: "unit",
    required: true,
    styleClasses:'col-md-3',
    values: [
        { id: "", name: 'Select Unit' },
        ],
     selectOptions: {
    hideNoneSelectedText: true,
  }
  }]
  },{
  fields: [{
    type: "input",
    inputType: "text",
    label: "Full Name",
    model: "fullName",
    placeholder: "Enter Full Name",
    required: true,
    styleClasses:'col-md-3'
  },
  {
    type: "radios",
    label: "Gender",
    model: "gender",
    values: [
        "Male",
        "Female",
        "Other"
    ],
    styleClasses:'col-md-3'
}]
  }]
},

      formOptions: {
        validateAfterLoad: true,
        validateAfterChanged: true
      }
    }),

  }
  </script> 

Answer 1

您可以将自定义 css 添加到您的收音机输入中

{
    type: "radios",
    label: "Gender",
    model: "gender",
    values: [
        "Male",
        "Female",
        "Other"
    ],
    styleClasses:'col-md-3 display-inline'
}

在你的 CSS 中

.display-inline label {
  display: inline !important;
}

var vm = new Vue({
    el: "#app",
	
    components: {
        "vue-form-generator": VueFormGenerator.component
    },

    data() {
			return {
        model: {
        },
        schema: {
            fields: [{
                  type: "radios",
                  label: "Select your gender",
                  model: "friend",
                  values: [
                      "Male",
                      "Female",
                      "Others"
                  ],
                  styleClasses: "display-inline"
              }]
        },

        formOptions: {
            validateAfterLoad: true,
            validateAfterChanged: true
        }
			};
    }
});

.display-inline label {
   display: inline !important;
}

<link href="https://cdn.jsdelivr.net/npm/vue-form-generator@2.2.2/dist/vfg.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue-form-generator@2.2.2/dist/vfg.min.js"></script>
<script src="https://unpkg.com/vue@2.2.1/dist/vue.min.js"></script>
<h1 class="text-center">Demo of vue-form-generator</h1>
  <div class="container" id="app">
    <div class="panel panel-default">
      <div class="panel-heading">Form</div>
      <div class="panel-body">
        <vue-form-generator :schema="schema" :model="model" :options="formOptions"></vue-form-generator>
      </div>
    </div>
  </div>