Form Radio Inputs

<nly-form-radio-group><nly-form-radio> 组件是单选框组件

v0.6.8 版本以上 nly-adminlte-vue 才有此组件

单个单选框

<template>
  <div>
    <nly-form-group label="单个单选框">
      <nly-form-radio v-model="selected" name="some-radios" value="A"
        >Option A</nly-form-radio
      >
      <nly-form-radio v-model="selected" name="some-radios" value="B"
        >Option B</nly-form-radio
      >
    </nly-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: ""
      };
    }
  };
</script>

<!-- 单选框组件.name -->
<!-- nly-form-radio.vue -->

单选框组

<nly-form-radio-group> 可以设置 options prop 或者嵌入 <nly-form-radio> 组件来渲染成单选框组

使用 <nly-form-radio> 嵌入 <nly-form-radio-group> 组件时,<nly-form-radio> 会继承 <nly-form-radio-group> 的大部分 prop

v-model 也会绑定在 <nly-form-radio-group>

<template>
  <div>
    <nly-form-group label="options 单选框组">
      <nly-form-radio-group
        id="radio-group-1"
        v-model="selected"
        :options="options"
        name="radio-options"
      ></nly-form-radio-group>
    </nly-form-group>

    <nly-form-group label="子组件单选框组">
      <nly-form-radio-group
        id="radio-group-2"
        v-model="selected"
        name="radio-sub-component"
      >
        <nly-form-radio value="first">切换</nly-form-radio>
        <nly-form-radio value="second">切换</nly-form-radio>
        <nly-form-radio value="third" disabled>切换</nly-form-radio>
        <nly-form-radio :value="{ fourth: 4 }">切换</nly-form-radio>
      </nly-form-radio-group>
    </nly-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: "first",
        options: [
          { text: "切换为第一个", value: "first" },
          { text: "切换为第二个", value: "second" },
          { text: "切换为第三个", value: "third", disabled: true },
          { text: "切换为第四个", value: { fourth: 4 } }
        ]
      };
    }
  };
</script>

<!-- 单选框组.name -->
<!-- nly-form-radio-group.vue -->

支持混合使用 options prop 和 <nly-form-radio> 嵌套到 <nly-form-radio-group> 中,但是 <nly-form-radio> 组件会默认渲染到 options prop 渲染的选项下面,如果需要使 <nly-form-radio 渲染到 options prop 上面,请使用插槽 first

<template>
  <div>
    <nly-form-group label="使用插槽">
      <nly-form-radio-group
        id="radio-slots"
        v-model="selected"
        :options="options"
        name="radio-options-slots"
      >
        <template #first>
          <nly-form-radio value="first">切换</nly-form-radio>
        </template>

        <nly-form-radio :value="{ fourth: 4 }">这是第四个</nly-form-radio>
        <nly-form-radio value="fifth">这是第五个</nly-form-radio>
      </nly-form-radio-group>
    </nly-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: "",
        options: [
          { text: "切换为第二个", value: "second" },
          { text: "切换为第三个", value: "third" }
        ]
      };
    }
  };
</script>

<!-- first 插槽.name -->
<!-- nly-form-radio-group-slot.vue -->

数组类型 options

options 是一个数组,元素可以是字符串或者 key-value 对象,每一个元素可以有以下 key:

  • value 选项值, 如果选中,会添加到 v-model 绑定的值中
  • disabled 禁用当前选择,无法选中
  • text 选项显示的文本
  • html 选项显示的文本,是 html 字符串

value 类型可以是字符串,数字,简单对象. 请避免同一个 options 中不同元素的 value 类型不同.

如果 texthtml 属性同时出现, html 属性会覆盖 text,即 html 属性的渲染的优先级比 text 高。 html 属性仅 支持原生的 html 字符串,如果嵌入组件,是不生效的。注意并非所有的浏览器都会支持所有的 html 字符串。

注意: 使用 (html) 字符串的属性可能会引起 脚本攻击 (XSS), 当用户使用这类属性的时候,您应该谨慎 处理 这类值

const options = [
  "A",
  "B",
  "C",
  { text: "D", value: { d: 1 }, disabled: true },
  "E",
  "F"
];

如果数组的元素全是字符串, 这个字符串默认会被转为 textvalue

支持在 options 中使用字符串和对象混合类型, 详情请查看对象数组 options

在 NlyAdminlteVue 中, 会自动把上面的 options 转化为 对象数组 options 格式:

const options = [
  { text: "A", value: "A", disabled: false },
  { text: "B", value: "B", disabled: false },
  { text: "C", value: "C", disabled: false },
  { text: "D", value: { d: 1 }, disabled: true },
  { text: "E", value: "E", disabled: false },
  { text: "F", value: "F", disabled: false }
];

对象数组

const options = [
  { text: "Item 1", value: "first" },
  { text: "Item 2", value: "second" },
  { html: "<b>Item</b> 3", value: "third", disabled: true },
  { text: "Item 4" },
  { text: "Item 5", value: { foo: "bar", baz: true } }
];

如果没有在数组的对象元素中定义 value 属性,text 属性既会渲染成 text, 又会渲染成 value 属性。

如果使用的是 html 属性, 那必须提供一个 value 属性, 否则会报错

在 NlyAdminlteVue 中, 会自动把上面的 options 转化为对象数组 options 格式:

const options = [
  { text: "Item 1", value: "first", disabled: false },
  { text: "Item 2", value: "second", disabled: false },
  { html: "<b>Item</b> 3", value: "third", disabled: true },
  { text: "Item 4", value: "Item 4", disabled: false },
  { text: "Item 5", value: "E", disabled: false }
];

自定义 options 的属性名称

如果您想用自定义的属性来代替 text, value 属性。比如使用 name 来代替 text, 可以通过 text-field, html-field, value-field, 和 disabled-field prop 来指定自定义的属性

<template>
  <div>
    <nly-form-radio-group
      v-model="selected"
      :options="options"
      class="mb-3"
      value-field="item"
      text-field="name"
      disabled-field="notEnabled"
    ></nly-form-radio-group>
    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: "A",
        options: [
          { item: "A", name: "Option A" },
          { item: "B", name: "Option B" },
          { item: "D", name: "Option C", notEnabled: true },
          { item: { d: 1 }, name: "Option D" }
        ]
      };
    }
  };
</script>

<!-- 自定义对象数组属性.name -->
<!-- nly-form-radio-group-options-fields.vue -->

单选框的值 value 和 v-model

<nly-form-radio> 组件没有默认值. 你必须给 <nly-form-radio> 的 prop value 传入一个人初始值 . 绑定到 v-model 值会直接渲染成选中状态

<nly-form-radio><nly-form-radio-group> v-model 都绑定到了 checked prop. 你逆序事给 v-model 绑定一个 options 中可选的值或者 <nly-form-radio> 中组件中的 value, 不要直接使用 checked

每个单选框都必须有一个唯一的值

单选框的 value props 支持 string, boolean, number, object 等类型

水平模式和堆叠模式

<nly-form-radio-group> 组件默认是渲染成水平模式, while <nly-form-radio> 默认是渲染成块级堆叠模式

可以设置 <nly-form-radio-group> 的 prop stacked 使其渲染成堆叠式样

如果 <nly-form-radio> 不是嵌套在 <nly-form-radio-group> 中, 可以设置 nly-form-radioinline 使其渲染成水平模式

<template>
  <div>
    <nly-form-group label="水平模式">
      <nly-form-radio-group
        v-model="selected"
        :options="options"
        name="radio-inline"
      ></nly-form-radio-group>
    </nly-form-group>

    <nly-form-group label="堆叠模式">
      <nly-form-radio-group
        v-model="selected"
        :options="options"
        name="radios-stacked"
        stacked
      ></nly-form-radio-group>
    </nly-form-group>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: "yide",
        options: [
          { text: "张飞", value: "yide" },
          { text: "诸葛亮", value: "kongming" },
          { text: "关羽", value: "yunchang" }
        ]
      };
    }
  };
</script>

<!-- 水平和 堆叠.name -->
<!-- nly-form-radio-stacked.vue -->

控制代销

使用 size prop 来控制大小,默认大小为 md, 可选 sm (small) and lg (large).

<div>
  <nly-form-radio name="radio-size" size="sm">Small</nly-form-radio>
  <nly-form-radio name="radio-size">Default</nly-form-radio>
  <nly-form-radio name="radio-size" size="lg">Large</nly-form-radio>
</div>

<!-- 大小.name -->
<!-- form-radio-sizes.vue -->

如果需要控制 <nly-form-radio> 组件的大小,可以设置 size, 也可以设置 <nly-form-radio-group>size prop 通常情况下, 如果不单独设置 <nly-form-radio> 组件的大小, <nly-form-radio> 组件会继承 <nly-form-radio> 的大小

注意: 控制 check 的大小在 adminlte3 中是不支持的, 这是 NlyAdminlteVue 自定义的 css 式样

按钮模式

支持设置 <nly-form-radio> 渲染成按钮式样

按钮模式下的 radio 在选中的时候会渲染一个 .active css 类型

<template>
  <div>
    <nly-form-group label="按钮模式">
      <nly-form-radio-group
        id="btn-radios-1"
        v-model="selected"
        :options="options"
        buttons
        name="radios-btn-default"
      ></nly-form-radio-group>
    </nly-form-group>

    <nly-form-group label="按钮模式">
      <nly-form-radio-group
        id="btn-radios-2"
        v-model="selected"
        :options="options"
        buttons
        button-variant="outline-primary"
        size="lg"
        name="radio-btn-outline"
      ></nly-form-radio-group>
    </nly-form-group>

    <nly-form-group label="堆叠按钮模式">
      <nly-form-radio-group
        id="btn-radios-3"
        v-model="selected"
        :options="options"
        buttons
        stacked
        name="radio-btn-stacked"
      ></nly-form-radio-group>
    </nly-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: "radio1",
        options: [
          { text: "Radio 1", value: "radio1" },
          { text: "Radio 3", value: "radio2" },
          { text: "Radio 3 (disabled)", value: "radio3", disabled: true },
          { text: "Radio 4", value: "radio4" }
        ]
      };
    }
  };
</script>

<!-- 按钮模式.name -->
<!-- nly-form-radio-buttons.vue -->

原生单选框

设置 plain prop 可以使 <nly-form-radio> and <nly-form-radio-group> 渲染成一个原生单选框

<template>
  <div>
    <nly-form-group label="水平原生单选框">
      <nly-form-radio-group
        v-model="selected"
        :options="options"
        plain
        name="plain-inline"
      ></nly-form-radio-group>
    </nly-form-group>

    <nly-form-group label="堆叠原生单选框">
      <nly-form-radio-group
        v-model="selected"
        :options="options"
        plain
        stacked
        name="plain-stacked"
      ></nly-form-radio-group>
    </nly-form-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: "first",
        options: [
          { text: "First radio", value: "first" },
          { text: "Second radio", value: "second" },
          { text: "Third radio", value: "third" }
        ]
      };
    }
  };
</script>

<!-- 原生单选框.name -->
<!-- nly-form-radio-plain.vue -->

Note: 原生 单选框 的 prop buttonbuttons is 无效

表单必填 valid 状态

如果使用单选 <nly-form-radio>组件 , 且需要在 nly-form 组件中必填 , 你必须传入 name prop 和 required 给每个 <nly-form-radio> 组件,这样 nly-form 的必填才会生效. 所有的绑定到同一个 v-model 值 的 <nly-form-radio> 组件必须设置相同的 name prop

对于辅助技术来说, prop name 是必传的, 这样辅助技术才能识别 radio 属于哪个表单。 prop required 只有在设置了 prop name 才生效.

如果 <nly-form-radio-group> 组件没有传入 prop name, 会自动生成一个唯一的 name

自动聚焦

<nly-form-checkbox> 组件设置 autofocus prop 时, 会自动聚焦到当前选择框。 如果组件或者页面 被 <keep-alive> 缓存了,返回这个页面或者组件时,也会自动聚焦到当前选择框,

校验状态

Adminlte3 的大部分表单组件都有状态 invalid, valid, warning, novalid

  • invalid : 无效状态

  • valid : 有效状态

  • warning : 警告状态

  • novalid : 无状态

注意: valid 不支持 按钮模式.

feedback valid 状态

<template>
  <div>
    <nly-form-radio-group
      v-model="value"
      :options="options"
      :valid="state"
      name="radio-validation"
    >
      <nly-form-feedback
        :state="state"
        :class='state==="invalid"?"d-block":null'
        >Please select one</nly-form-feedback
      >
      <nly-form-feedback :state="state" :class='state==="valid"?"d-block":null'
        >Thank you</nly-form-feedback
      >
    </nly-form-radio-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value: null,
        options: [
          { text: "First radio", value: "first" },
          { text: "Second radio", value: "second" },
          { text: "Third radio", value: "third" }
        ]
      };
    },
    computed: {
      state() {
        if (this.value !== null) {
          return "valid";
        } else {
          return "invalid";
        }
      }
    }
  };
</script>

<!-- valid.name -->
<!-- nly-form-radio-validation.vue -->

组件参数

<nly-form-radio-group>

组件简写

<nly-form-radio-group> 组件可以用以下简写

  • <nly-radio-group>

注意: 组件简写只有在导出为插件的时候才可以用

props 参数

props (Click to sort Ascending)类型默认值描述
id
String设置id
name
String设置 表单控件的 'name' attribute 属性
disabled
Booleanfalse禁用,设置true为禁用状态
required
Booleanfalse将`required`属性添加到表单控件
form
Stringnull指定归属表单,可以放置在表单外面。form 应设置为对应表单的id
autofocus
Booleanfalse设置true,会自动聚焦
validated
Booleanfalse校验, 设置 true, 会渲染 class='was-validated' 到 warpper 元素上
aria-invalid
Boolean or Stringfalse设置 'aria-invalid' 数据. 如果没有传入值, 会默认选择 'state' prop 的值
stacked
Booleanfalse堆叠模式
plain
Booleanfalse渲染成plain模式
buttons
Booleanfalse按钮模式, 设置 true 会渲染成按钮式样
button-variant
String'secondary'设置按钮模式的时候,按钮颜色, 可选 adminlte3 主题颜色
options
Array or Object[]设置,类型为一个数组或者对象
value-field
String'value'options 中的属性, 用于自定义 value
text-field
String'text'options 中的属性, 用于自定义 text
html-field
String'html'options 中的属性, 用于自定义 html
disabled-field
String'disabled'options 中的属性, 用于自定义 disabled
size
String设置大小, 可选 'sm', 'md' (默认), or 'lg'
col
Booleanfalse在没有其他props的情况下, 所有列等宽, 放在class='row'的元素下有效
xs
String or Number在XS及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
sm
String or Number在SM及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
md
String or Number在MD及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
lg
String or Number在LG及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
xl
String or Number在XL及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
offset-xs
String or Number在XS及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
offset-sm
String or Number在SM及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
offset-md
String or Number在MD及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
offset-lg
String or Number在LG及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
offset-xl
String or Number在XL及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
order-xs
String or Number在XS及以上断点的排序, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
order-sm
String or Number在SM及以上断点的排序, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
order-md
String or Number在MD及以上断点的排序, 可选0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
order-lg
String or Number在LG及以上断点的排序, 可选0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
order-xl
String or Number在XL及以上断点的排序, 可选0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
valid
String表单验证提示状态,可选valid, invalid, warning, loading, novalid
checked
v-model
Anynullv-model绑定值, 当前选中的选择框的值,如果是多选,值必须是数组类型

v-model

PropertyEvent
checkedinput

Slots

Slot NameDescription
first 如果需要让 <nly-form-checks> 渲染在 'options' prop 的前面,请使用这个插槽

Events

EventArgumentsDescription
input
  1. checked - checkbox 选择值, 返回的是一个数组
在 checked 值发送变化的时候触发的 emit 事件
change
  1. checked - checkbox 选择值, 返回的是一个数组
用户与组件交互的时候, checked 的值发生变化的时候触发的 emit 事件

<nly-form-radio>

组件简写

<nly-form-radio> 组件可以用以下简写

  • <nly-radio>

注意: 组件简写只有在导出为插件的时候才可以用

props 参数

props (Click to sort Ascending)类型默认值描述
id
String设置id
value
Any选择框有选中项的时候的值
checked
v-model
Anynullv-model绑定值, 当前选中的选择框的值,如果是多选,值必须是数组类型
inline
Booleanfalse水平模式, 设置 true, 会渲染成水平模式,并且宽度填充整个父元素
plain
Booleanfalse渲染成plain模式
button
Booleanfalse按钮模式, 设置 true 会渲染成按钮式样
button-variant
String设置按钮模式的时候,按钮颜色
aria-label
String给元素设置 aria-label 属性
aria-labelledby
String提供 arialabel 属性的元素 id.
name
String设置 表单控件的 'name' attribute 属性
disabled
Booleanfalse禁用,设置true为禁用状态
required
Booleanfalse将`required`属性添加到表单控件
form
Stringnull指定归属表单,可以放置在表单外面。form 应设置为对应表单的id
autofocus
Booleanfalse设置true,会自动聚焦
size
String设置大小, 可选 'sm', 'md' (默认), or 'lg'
col
Booleanfalse在没有其他props的情况下, 所有列等宽, 放在class='row'的元素下有效
xs
String or Number在XS及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
sm
String or Number在SM及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
md
String or Number在MD及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
lg
String or Number在LG及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
xl
String or Number在XL及以上断点的宽度, 可选1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, auto
offset-xs
String or Number在XS及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
offset-sm
String or Number在SM及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
offset-md
String or Number在MD及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
offset-lg
String or Number在LG及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
offset-xl
String or Number在XL及以上断点的偏移量, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
order-xs
String or Number在XS及以上断点的排序, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
order-sm
String or Number在SM及以上断点的排序, 可选0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
order-md
String or Number在MD及以上断点的排序, 可选0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
order-lg
String or Number在LG及以上断点的排序, 可选0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
order-xl
String or Number在XL及以上断点的排序, 可选0, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
valid
String表单验证提示状态,可选valid, invalid, warning, loading, novalid

v-model

PropertyEvent
checkedinput

Events

EventArgumentsDescription
input
  1. checked - checkbox 选择值, 返回的是一个数组
在 checked 值发送变化的时候触发的 emit 事件
change
  1. checked - checkbox 选择值, 返回的是一个数组
用户与组件交互的时候, checked 的值发生变化的时候触发的 emit 事件

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-form-radio-group>NlyFormRadioGroupnly-adminlte-vue
<nly-form-radio>NlyFormRadionly-adminlte-vue

例子

import { NlyFormRadioGroup } from 'nly-adminlte-vue'
Vue.component('nly-form-radio-group', NlyFormRadioGroup)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
FormRadioPluginnly-adminlte-vue

例子

import { FormRadioPlugin } from 'nly-adminlte-vue'
Vue.use(FormRadioPlugin)