@wu-component/wu-radio v2.0.3

Radio 单选

常用的单选框组件。

基础用法

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-around;padding: 16px">
        <wu-plus-radio label="男" value="medium" size="medium" name="medium" checked="true" @change="valueChange"></wu-plus-radio>
        <wu-plus-radio label="女" value="small" size="small" name="small" checked="true"></wu-plus-radio>
        <wu-plus-radio label="未知" value="mini" size="mini" name="mini" id="miniEvent1"></wu-plus-radio>
    </div>
</template>
<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            valueChange(value) {
                console.log(value)
                alert(`值被修改:${JSON.stringify(value.detail)}`)
            }
        }
    }
</script>

:::

禁用状态

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-between;padding: 16px">
        <wu-plus-radio label="未知" value="mini" disabled="true" size="medium" name="mini" id="miniEvent1"></wu-plus-radio>
    </div>
</template>
<script>
</script>

:::

边框

::: demo

<template>
    <div style="display: flex; align-items: center;justify-content: space-between;padding: 16px">
        <wu-plus-radio label="未知" value="mini" border="true" size="medium" name="mini" id="miniEvent1"></wu-plus-radio>
    </div>
</template>
<script>
</script>

:::

Attributes

Event