JView UI

Appearance

Radio 单选框组件，用于在多个选项中选择某个，由于选项会全部展示，选项数量不宜过多。

基本展示 ​

单个 Radio 只有选中能力，没有反选，不必诧异！

Option
展开查看代码
vue
<template>
    <j-radio v-model:checked="checked">Option</j-radio>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checked = ref(false)
</script>
<template>
    <j-radio v-model:checked="checked">Option</j-radio>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const checked = ref(false)
</script>

禁用状态 ​

通过disabled控制禁用状态。

OptionOption
展开查看代码
vue
<template>
    <j-radio checked disabled>Option</j-radio>
    <j-radio disabled>Option</j-radio>
</template>
<template>
    <j-radio checked disabled>Option</j-radio>
    <j-radio disabled>Option</j-radio>
</template>

选项组 ​

通过 RadioGroup 组件组织多个选项。

Option 1Option 2Option 3
Option 1Option 2Option 3
展开查看代码
vue
<template>
    <j-radio-group v-model:value="value">
        <j-radio :value="1">Option 1</j-radio>
        <j-radio :value="2">Option 2</j-radio>
        <j-radio :value="3">Option 3</j-radio>
    </j-radio-group>

    <j-radio-group v-model:value="value2" disabled style="display: flex;margin-top: 20px;">
        <j-radio :value="1">Option 1</j-radio>
        <j-radio :value="2">Option 2</j-radio>
        <j-radio :value="3">Option 3</j-radio>
    </j-radio-group>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref(1)
const value2 = ref(2)
</script>
<template>
    <j-radio-group v-model:value="value">
        <j-radio :value="1">Option 1</j-radio>
        <j-radio :value="2">Option 2</j-radio>
        <j-radio :value="3">Option 3</j-radio>
    </j-radio-group>

    <j-radio-group v-model:value="value2" disabled style="display: flex;margin-top: 20px;">
        <j-radio :value="1">Option 1</j-radio>
        <j-radio :value="2">Option 2</j-radio>
        <j-radio :value="3">Option 3</j-radio>
    </j-radio-group>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref(1)
const value2 = ref(2)
</script>

按钮风格 ​

radio-button组件是按钮风格的选项组件。

展开查看代码
vue
<template>
    <j-radio-group v-model:value="value">
        <j-radio-button :value="1">苹果</j-radio-button>
        <j-radio-button :value="2">香蕉</j-radio-button>
        <j-radio-button :value="3">芒果</j-radio-button>
    </j-radio-group>

    <j-radio-group v-model:value="value2" button-style="filled" style="display: flex;margin-top: 20px;">
        <j-radio-button :value="1">苹果</j-radio-button>
        <j-radio-button :value="2" disabled>香蕉</j-radio-button>
        <j-radio-button :value="3">芒果</j-radio-button>
    </j-radio-group>

    <j-radio-group v-model:value="value3" disabled style="display: flex;margin-top: 20px;">
        <j-radio-button :value="1">苹果</j-radio-button>
        <j-radio-button :value="2" disabled>香蕉</j-radio-button>
        <j-radio-button :value="3">芒果</j-radio-button>
    </j-radio-group>

    <j-radio-group v-model:value="value4" button-size="small" style="display: flex;margin-top: 20px;">
        <j-radio-button :value="1">苹果</j-radio-button>
        <j-radio-button :value="2">香蕉</j-radio-button>
        <j-radio-button :value="3">芒果</j-radio-button>
    </j-radio-group>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref(1)

const value2 = ref(2)

const value3 = ref(3)

const value4 = ref(3)
</script>
<template>
    <j-radio-group v-model:value="value">
        <j-radio-button :value="1">苹果</j-radio-button>
        <j-radio-button :value="2">香蕉</j-radio-button>
        <j-radio-button :value="3">芒果</j-radio-button>
    </j-radio-group>

    <j-radio-group v-model:value="value2" button-style="filled" style="display: flex;margin-top: 20px;">
        <j-radio-button :value="1">苹果</j-radio-button>
        <j-radio-button :value="2" disabled>香蕉</j-radio-button>
        <j-radio-button :value="3">芒果</j-radio-button>
    </j-radio-group>

    <j-radio-group v-model:value="value3" disabled style="display: flex;margin-top: 20px;">
        <j-radio-button :value="1">苹果</j-radio-button>
        <j-radio-button :value="2" disabled>香蕉</j-radio-button>
        <j-radio-button :value="3">芒果</j-radio-button>
    </j-radio-group>

    <j-radio-group v-model:value="value4" button-size="small" style="display: flex;margin-top: 20px;">
        <j-radio-button :value="1">苹果</j-radio-button>
        <j-radio-button :value="2">香蕉</j-radio-button>
        <j-radio-button :value="3">芒果</j-radio-button>
    </j-radio-group>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const value = ref(1)

const value2 = ref(2)

const value3 = ref(3)

const value4 = ref(3)
</script>

Radio/RadioButton 属性 ​

参数说明类型默认值必填
checked当前是否为选中状态booleanfalse否
disabled禁用状态boolean无否
value在 radio-group 下起作用，根据 value 进行比较，判断是否选中boolean | string | number无否

Radio/RadioButton 事件 ​

事件名说明回调类型
changechange事件(e: boolean) => void

RadioGroup 属性 ​

参数说明类型默认值必填
value当前选中的值boolean | string | number无否
disabled禁用状态，开启会禁用所有子项boolean无否
options通过选项配置 radio 子项Array<{ disabled: boolean; label: string; value: unknown }>无否
buttonStyleradio-button 的风格，支持outlined, filled，默认是outlined"filled" | "outlined"'outlined'否
buttonSize按钮大小，只对 radio-button 有效"default" | "small" | "large"'default'否

RadioGroup 事件 ​

事件名说明回调类型
changechange事件(e: boolean) => void

Copyright © 2022-2024 All Rights Reserved by Tusi.