iview/test/routers/radio.vue

<template>
    <div>
        <Radio-group :model.sync="phone">
            <Radio value="apple">
                <Icon type="social-apple"></Icon>
                <span>Apple</span>
            </Radio>
            <Radio value="android" disabled>
                <Icon type="social-android"></Icon>
                <span>Android</span>
            </Radio>
            <Radio value="windows">
                <Icon type="social-windows"></Icon>
                <span>Windows</span>
            </Radio>
        </Radio-group>
        <Radio-group :model.sync="animal">
            <Radio value="金斑蝶"></Radio>
            <Radio value="爪哇犀牛"></Radio>
            <Radio value="印度黑羚"></Radio>
        </Radio-group>
        <br><br>
        <Button @click="activeKey = '2'">换</Button>
    </div>
    <Radio :checked.sync="radio">Radio</Radio>
    <Button @click="radio = !radio">change radio</Button>
    <br>
    <br>
    <Radio-group :model.sync="phone" type="button">
        <Radio value="apple">
            <Icon type="social-apple"></Icon>
            <span>Apple</span>
        </Radio>
        <Radio value="android">
            <Icon type="social-android"></Icon>
            <span>Android</span>
        </Radio>
        <Radio value="windows">
            <Icon type="social-windows"></Icon>
            <span>Windows</span>
        </Radio>
    </Radio-group>
    <Radio-group :model.sync="animal" type="button">
        <Radio value="金斑蝶"></Radio>
        <Radio value="爪哇犀牛"></Radio>
        <Radio value="印度黑羚"></Radio>
    </Radio-group>

    <Radio-group :model.sync="animal" type="button">
        <Radio value="金斑蝶" disabled></Radio>
        <Radio value="爪哇犀牛" disabled></Radio>
        <Radio value="印度黑羚"></Radio>
    </Radio-group>
    <br><br>
    <Radio-group :model.sync="animal" type="button" size="large">
        <Radio value="金斑蝶"></Radio>
        <Radio value="爪哇犀牛"></Radio>
        <Radio value="印度黑羚"></Radio>
    </Radio-group>
    <Radio-group :model.sync="animal" type="button">
        <Radio value="金斑蝶"></Radio>
        <Radio value="爪哇犀牛"></Radio>
        <Radio value="印度黑羚"></Radio>
    </Radio-group>
    <Radio-group :model.sync="animal" type="button" size="small">
        <Radio value="金斑蝶"></Radio>
        <Radio value="爪哇犀牛"></Radio>
        <Radio value="印度黑羚"></Radio>
    </Radio-group>
    <br><br><br><br>
    <Checkbox :checked.sync="radio">Checkbox</Checkbox>
    <br><br>
    <Checkbox-group :model="social">
        <Checkbox value="twitter">
            <Icon type="social-twitter"></Icon>
            <span>Twitter</span>
        </Checkbox>
        <Checkbox value="facebook">
            <Icon type="social-facebook"></Icon>
            <span>Facebook</span>
        </Checkbox>
        <Checkbox value="github">
            <Icon type="social-github"></Icon>
            <span>Github</span>
        </Checkbox>
        <Checkbox value="snapchat">
            <Icon type="social-snapchat"></Icon>
            <span>Snapchat</span>
        </Checkbox>
    </Checkbox-group>
    <br><br>
    <Checkbox :checked.sync="disabledSingle" disabled>Checkbox</Checkbox>
    <Checkbox-group :model="disabledGroup">
        <Checkbox value="香蕉" disabled></Checkbox>
        <Checkbox value="苹果" disabled></Checkbox>
        <Checkbox value="西瓜"></Checkbox>
    </Checkbox-group>
    <br><br>
    <Switch @on-change="change"></Switch>
    <br><br>
    <Switch>
        <span slot="open">开</span>
        <span slot="close">关</span>
    </Switch>
    <br><br>
    <Switch>
        <Icon type="android-done" slot="open"></Icon>
        <Icon type="android-close" slot="close"></Icon>
    </Switch>
    <Switch disabled></Switch>
    <Switch size="small"></Switch>
    <br><br>
    <Input-number :max="10" :min="1" :step="1.2" :value="1"></Input-number>
    <Input-number :value="2" size="small"></Input-number>
    <Input-number :value="2"></Input-number>
    <Input-number :value="2" size="large"></Input-number>
    <br><br>
    <Breadcrumb>
        <Breadcrumb-item href="/">Home</Breadcrumb-item>
        <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
        <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
    </Breadcrumb>
    <Breadcrumb>
        <Breadcrumb-item href="/">
            <Icon type="ios-home-outline"></Icon> Home
        </Breadcrumb-item>
        <Breadcrumb-item href="/components/breadcrumb">
            <Icon type="social-buffer-outline"></Icon> Components
        </Breadcrumb-item>
        <Breadcrumb-item>
            <Icon type="pound"></Icon> Breadcrumb
        </Breadcrumb-item>
    </Breadcrumb>
    <Breadcrumb separator=">">
        <Breadcrumb-item href="/">Home</Breadcrumb-item>
        <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
        <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
    </Breadcrumb>
    <Breadcrumb separator="<b class='demo-breadcrumb-separator'>=></b>">
        <Breadcrumb-item href="/">Home</Breadcrumb-item>
        <Breadcrumb-item href="/components/breadcrumb">Components</Breadcrumb-item>
        <Breadcrumb-item>Breadcrumb</Breadcrumb-item>
    </Breadcrumb>
</template>
<script>
    import { Radio, Alert, Icon, Collapse, Button, Checkbox, Switch, InputNumber, Breadcrumb, LoadingBar } from 'iview';

    const RadioGroup = Radio.Group;
    const Panel = Collapse.Panel;
    const CheckboxGroup = Checkbox.Group;
    const BreadcrumbItem = Breadcrumb.Item;

    export default {
        components: {
            Radio,
            RadioGroup,
            Alert,
            Icon,
            Collapse,
            Panel,
            Button,
            Checkbox,
            CheckboxGroup,
            Switch,
            InputNumber,
            Breadcrumb,
            BreadcrumbItem,
            LoadingBar
        },
        props: {

        },
        data () {
            return {
                radio: false,
                radioGroup: '段模',
                activeKey: [1,2],
                phone: 'apple',
                animal: '爪哇犀牛',
                social: ['facebook', 'github'],
                disabledSingle: true,
                disabledGroup: ['苹果']
            }
        },
        computed: {

        },
        methods: {
            changeGroup (data) {
                console.log(data);
            },
            closed (data) {
                console.log(data)
            },
            change (status) {
                console.log(status);
            }
        },
        ready () {
            LoadingBar.start();
        }
    }
</script>