nutui-uniapp

Appearance

Radio 单选按钮 ​

介绍 ​

用于在一组备选项中进行单选

基础用法 ​

通过 v-model 绑定值当前选项的 label 。并且必须 nut-radio-group 和 nut-radio 相结合进行使用

html
<template>
  <nut-cell-group title="基础用法">
    <nut-cell>
      <nut-radio-group v-model="radioVal">
        <nut-radio shape="button" label="1" size="large">选项1</nut-radio>
        <nut-radio disabled label="2">选项2</nut-radio>
        <nut-radio label="3">选项3</nut-radio>
      </nut-radio-group>
    </nut-cell>
    <nut-cell>
      <nut-radio-group v-model="radioVal" text-position="left">
        <nut-radio label="1">选项1</nut-radio>
        <nut-radio disabled label="2">选项2</nut-radio>
        <nut-radio label="3">选项3</nut-radio>
      </nut-radio-group>
    </nut-cell>
    <nut-cell>
      <nut-radio-group v-model="radioVal">
        <nut-radio shape="button" label="1">选项1</nut-radio>
        <nut-radio disabled shape="button" label="2">选项2</nut-radio>
        <nut-radio shape="button" label="3">选项3</nut-radio>
      </nut-radio-group>
    </nut-cell>
  </nut-cell-group>
</template>
<script lang="ts">
  import { ref } from 'vue';
  export default {
    props: {},
    setup() {
      const radioVal = ref('1');
      return { radioVal };
    },
  };
</script>

水平使用 ​

html
<template>
  <nut-cell-group title="水平使用">
    <nut-cell>
      <nut-radio-group v-model="radioVal" direction="horizontal">
        <nut-radio shape="button" label="1" size="large">选项1</nut-radio>
        <nut-radio label="2">选项2</nut-radio>
        <nut-radio label="3">选项3</nut-radio>
      </nut-radio-group>
    </nut-cell>
    <nut-cell>
      <nut-radio-group v-model="radioVal" text-position="left" direction="horizontal">
        <nut-radio label="1">选项1</nut-radio>
        <nut-radio label="2">选项2</nut-radio>
        <nut-radio label="3">选项3</nut-radio>
      </nut-radio-group>
    </nut-cell>
    <nut-cell>
      <nut-radio-group v-model="radioVal" direction="horizontal">
        <nut-radio shape="button" label="1">选项1</nut-radio>
        <nut-radio shape="button" label="2">选项2</nut-radio>
        <nut-radio shape="button" label="3">选项3</nut-radio>
      </nut-radio-group>
    </nut-cell>
  </nut-cell-group>
</template>
<script lang="ts">
  import { ref } from 'vue';
  export default {
    props: {},
    setup() {
      const radioVal = ref('1');
      return { radioVal };
    },
  };
</script>

自定义尺寸 ​

html
<template>
  <nut-cell-group title="自定义尺寸">
    <nut-cell>
      <nut-radio-group v-model="radioVal">
        <nut-radio label="1" icon-size="12">自定义尺寸12</nut-radio>
        <nut-radio label="2" icon-size="12">自定义尺寸12</nut-radio>
      </nut-radio-group>
    </nut-cell>
  </nut-cell-group>
</template>
<script lang="ts">
  import { ref } from 'vue';
  export default {
    props: {},
    setup() {
      const radioVal = ref('1');
      return { radioVal };
    },
  };
</script>

自定义图标 ​

通过 slot 自定义图标，建议同时设置icon和checkedIcon两个插槽

html
<template>
  <nut-cell-group title="Radio自定义图标">
    <nut-cell>
      <nut-radio-group v-model="radioVal">
        <nut-radio label="1">
          自定义图标
          <template #icon> <nut-icon  name="checklist" /> </template>
          <template #checkedIcon> <nut-icon  name="checklist" custom-color="red" /> </template>
        </nut-radio>
        <nut-radio label="2">
          自定义图标
          <template #icon> <nut-icon  name="checklist" /> </template>
          <template #checkedIcon> <nut-icon  name="checklist" custom-color="red" /> </template>
        </nut-radio>
      </nut-radio-group>
    </nut-cell>
  </nut-cell-group>
</template>
<script lang="ts">
  import { ref } from 'vue';
  export default {
    setup() {
      const radioVal = ref('1');
      return { radioVal };
    },
  };
</script>

触发 change 事件 ​

html
<template>
  <nut-cell-group title="触发事件">
    <nut-cell>
      <nut-radio-group v-model="radioVal" @change="handleChange">
        <nut-radio label="1">触发事件</nut-radio>
        <nut-radio label="2">触发事件</nut-radio>
      </nut-radio-group>
    </nut-cell>
    <nut-cell title="当前选中值" :desc="radioVal"></nut-cell>
  </nut-cell-group>
</template>
<script lang="ts">
  import { ref } from 'vue';
  export default {
    props: {},
    setup() {
      const radioVal = ref('1');
      const handleChange = (value: any) => {
        console.log(value);
      };
      return { radioVal, handleChange };
    },
  };
</script>

API ​

Radio Props ​

参数说明类型可选值默认值
disabled是否禁用选择boolean-false
icon-size图标尺寸string / number-18
label单选框标识string / number / boolean--
shape形状stringbutton / roundround
size v1.5.9尺寸,仅在 shape 为 / button / 时生效stringlarge / small / mini / normalnormal

Radio Slots ​

名称说明
icon未选中时的图标
checkedIcon选中时的图标

RadioGroup Props ​

参数说明类型可选值默认值
v-model当前选中项的标识符，与 label 值一致时呈选中状态string / number / boolean--
text-position文本所在的位置stringleft / rightright
direction使用横纵方向stringhorizontal / verticalvertical

RadioGroup Events ​

事件名说明回调参数
change值变化时触发当前选中项值（label）【设置label后有值、默认为空】

主题定制 ​

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值
--nut-radio-label-font-color#1d1e1e
--nut-radio-label-font-active-colorvar(--nut-primary-color)
--nut-radio-label-disable-color#999
--nut-radio-icon-disable-color#d6d6d6
--nut-radio-label-button-border-colorvar(--nut-primary-color)
--nut-radio-label-button-backgroundvar(--nut-primary-color)
--nut-radio-label-margin-left15px
--nut-radio-button-border-radius15px
--nut-radio-label-font-size14px
--nut-radio-button-font-size12px
--nut-radio-button-padding5px 18px
--nut-radio-icon-disable-color2var(--nut-help-color)_

MIT Licensed

版权所有 © 2023 年-至今 yang1206 贡献者