iview/examples/routers/button.vue

<template>
    <div>
        <Button to="/menu" @click="hc">Open Menu</Button>
        <Button to="/menu" replace>Open Menu Replace</Button>
        <Button to="//iviewui.com" target="_blank">Open iView</Button>
        <hr>
        <Icon custom="i-icon i-icon-search" />
        <Icon custom="i-icon i-icon-video" size="24" color="#ff6600" />
        <Icon custom="i-icon i-icon-time" />
        <Icon type="ionic" />
        <Button icon="ionic">Default</Button>
        <Button custom-icon="i-icon i-icon-search">Default</Button>
        <Button icon="ionic" shape="circle"></Button>
        <Button custom-icon="i-icon i-icon-video" shape="circle"></Button>
        <hr>
        <Button>Default</Button>
        <Button type="primary">Primary</Button>
        <Button type="ghost">Ghost</Button>
        <Button type="dashed">Dashed</Button>
        <Button type="text">Text</Button>
        <br><br>
        <Button type="info">Info</Button>
        <Button type="success">Success</Button>
        <Button type="warning">Warning</Button>
        <Button type="error">Error</Button>
        <br><br>
        <Button type="primary" shape="circle" icon="ios-search"></Button>
        <Button type="primary" icon="ios-search">Search</Button>
        <Button type="primary" shape="circle" icon="ios-search">Search</Button>
        <Button type="primary" shape="circle">Circle</Button>
        <br><br>
        <Button type="ghost" shape="circle" icon="ios-search"></Button>
        <Button type="ghost" icon="ios-search">Search</Button>
        <Button type="ghost" shape="circle" icon="ios-search">Search</Button>
        <Button type="ghost" shape="circle">Circle</Button>
        <br><br>
        <Button>Default</Button>
        <Button disabled>Default(Disabled)</Button>
        <br>
        <Button type="primary">Primary</Button>
        <Button type="primary" disabled>Primary(Disabled)</Button>
        <br>
        <Button type="ghost">Ghost</Button>
        <Button type="ghost" disabled>Ghost(Disabled)</Button>
        <br>
        <Button type="dashed">Dashed</Button>
        <Button type="dashed" disabled>Dashed(Disabled)</Button>
        <br>
        <Button type="text">Text</Button>
        <Button type="text" disabled>Text(Disabled)</Button>
        <br><br>

        <br><br>
        <h4>基本</h4>
        <br><br>
        <Button-group>
            <Button>取消</Button>
            <Button type="primary">确定</Button>
        </Button-group>
        <Button-group>
            <Button disabled>昨日</Button>
            <Button disabled>今日</Button>
            <Button disabled>明日</Button>
        </Button-group>
        <Button-group>
            <Button type="primary">L</Button>
            <Button>M</Button>
            <Button type="ghost">M</Button>
            <Button type="dashed">R</Button>
        </Button-group>
        <br><br>
        <h4>配合图标</h4>
        <br><br>
        <Button-group>
            <Button type="primary">
                <Icon type="chevron-left"></Icon>
                前进
            </Button>
            <Button type="primary">
                后退
                <Icon type="chevron-right"></Icon>
            </Button>
        </Button-group>
        <Button-group>
            <Button type="primary" icon="ios-skipbackward"></Button>
            <Button type="primary" icon="ios-skipforward"></Button>
        </Button-group>
        <Button-group>
            <Button type="ghost" icon="ios-color-wand-outline"></Button>
            <Button type="ghost" icon="ios-sunny-outline"></Button>
            <Button type="ghost" icon="ios-crop"></Button>
            <Button type="ghost" icon="ios-color-filter-outline"></Button>
        </Button-group>
        <br><br>
        <h4>圆角</h4>
        <br><br>
        <Button-group shape="circle">
            <Button type="primary">
                <Icon type="chevron-left"></Icon>
                前进
            </Button>
            <Button type="primary">
                后退
                <Icon type="chevron-right"></Icon>
            </Button>
        </Button-group>
        <Button-group shape="circle">
            <Button type="primary" icon="ios-skipbackward"></Button>
            <Button type="primary" icon="ios-skipforward"></Button>
        </Button-group>
        <Button-group shape="circle">
            <Button type="ghost" icon="ios-color-wand-outline"></Button>
            <Button type="ghost" icon="ios-sunny-outline"></Button>
            <Button type="ghost" icon="ios-crop"></Button>
            <Button type="ghost" icon="ios-color-filter-outline"></Button>
        </Button-group>
        <br><br>
        <h4>尺寸</h4>
        <br><br>
        <Button-group size="large">
            <Button type="ghost">Large</Button>
            <Button type="ghost">Large</Button>
        </Button-group>
        <Button-group>
            <Button type="ghost">Default</Button>
            <Button type="ghost">Default</Button>
        </Button-group>
        <Button-group size="small">
            <Button type="ghost">Small</Button>
            <Button type="ghost">Small</Button>
        </Button-group>
        <br><br>
        <Button-group size="large" shape="circle">
            <Button type="ghost">Large</Button>
            <Button type="ghost">Large</Button>
        </Button-group>
        <Button-group shape="circle">
            <Button type="ghost">Default</Button>
            <Button type="ghost">Default</Button>
        </Button-group>
        <Button-group size="small" shape="circle">
            <Button type="ghost">Small</Button>
            <Button type="ghost">Small</Button>
        </Button-group>
    </div>
</template>
<script>
    export default {
        methods: {
            hc (data) {
                console.log(data);
            }
        }
    }
</script>
<style>
    @font-face {
        font-family: "iconfont";
        src: url('data:application/x-font-woff;charset=utf-8;base64,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
    }
    .i-icon {
        display: inline-block;
        font-family: 'iconfont';
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        text-rendering: auto;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    .i-icon-accessory:before { content: "\e6dd"; }

    .i-icon-activity:before { content: "\e6de"; }

    .i-icon-activity_fill:before { content: "\e6df"; }

    .i-icon-add:before { content: "\e6e0"; }

    .i-icon-addressbook_fill:before { content: "\e6e2"; }

    .i-icon-addressbook:before { content: "\e6e3"; }

    .i-icon-barrage_fill:before { content: "\e6e4"; }

    .i-icon-barrage:before { content: "\e6e5"; }

    .i-icon-browse_fill:before { content: "\e6e6"; }

    .i-icon-browse:before { content: "\e6e7"; }

    .i-icon-brush:before { content: "\e6e8"; }

    .i-icon-brush_fill:before { content: "\e6e9"; }

    .i-icon-businesscard_fill:before { content: "\e6ea"; }

    .i-icon-businesscard:before { content: "\e6eb"; }

    .i-icon-camera_fill:before { content: "\e6ec"; }

    .i-icon-camera:before { content: "\e6ed"; }

    .i-icon-clock_fill:before { content: "\e6ee"; }

    .i-icon-clock:before { content: "\e6ef"; }

    .i-icon-close:before { content: "\e6f0"; }

    .i-icon-collection_fill:before { content: "\e6f1"; }

    .i-icon-collection:before { content: "\e6f2"; }

    .i-icon-computer_fill:before { content: "\e6f3"; }

    .i-icon-computer:before { content: "\e6f4"; }

    .i-icon-coordinates_fill:before { content: "\e6f5"; }

    .i-icon-coordinates:before { content: "\e6f6"; }

    .i-icon-coupons_fill:before { content: "\e6f7"; }

    .i-icon-coupons:before { content: "\e6f8"; }

    .i-icon-createtask_fill:before { content: "\e6f9"; }

    .i-icon-createtask:before { content: "\e6fa"; }

    .i-icon-customerservice_fill:before { content: "\e6fb"; }

    .i-icon-customerservice:before { content: "\e6fc"; }

    .i-icon-delete_fill:before { content: "\e6fd"; }

    .i-icon-delete:before { content: "\e6fe"; }

    .i-icon-document:before { content: "\e6ff"; }

    .i-icon-document_fill:before { content: "\e700"; }

    .i-icon-dynamic_fill:before { content: "\e701"; }

    .i-icon-dynamic:before { content: "\e702"; }

    .i-icon-editor:before { content: "\e703"; }

    .i-icon-eit:before { content: "\e704"; }

    .i-icon-emoji_fill:before { content: "\e705"; }

    .i-icon-emoji:before { content: "\e706"; }

    .i-icon-enter:before { content: "\e707"; }

    .i-icon-enterinto:before { content: "\e708"; }

    .i-icon-enterinto_fill:before { content: "\e709"; }

    .i-icon-feedback_fill:before { content: "\e70a"; }

    .i-icon-feedback:before { content: "\e70b"; }

    .i-icon-flag_fill:before { content: "\e70c"; }

    .i-icon-flag:before { content: "\e70d"; }

    .i-icon-flashlight:before { content: "\e70e"; }

    .i-icon-flashlight_fill:before { content: "\e70f"; }

    .i-icon-fullscreen:before { content: "\e710"; }

    .i-icon-group:before { content: "\e711"; }

    .i-icon-group_fill:before { content: "\e712"; }

    .i-icon-homepage_fill:before { content: "\e713"; }

    .i-icon-homepage:before { content: "\e714"; }

    .i-icon-integral_fill:before { content: "\e715"; }

    .i-icon-integral:before { content: "\e716"; }

    .i-icon-interactive_fill:before { content: "\e717"; }

    .i-icon-interactive:before { content: "\e718"; }

    .i-icon-keyboard:before { content: "\e719"; }

    .i-icon-label:before { content: "\e71a"; }

    .i-icon-label_fill:before { content: "\e71b"; }

    .i-icon-like_fill:before { content: "\e71c"; }

    .i-icon-like:before { content: "\e71d"; }

    .i-icon-live_fill:before { content: "\e71e"; }

    .i-icon-live:before { content: "\e71f"; }

    .i-icon-lock_fill:before { content: "\e720"; }

    .i-icon-lock:before { content: "\e721"; }

    .i-icon-mail:before { content: "\e722"; }

    .i-icon-mail_fill:before { content: "\e723"; }

    .i-icon-message:before { content: "\e724"; }

    .i-icon-message_fill:before { content: "\e725"; }

    .i-icon-mine:before { content: "\e726"; }

    .i-icon-mine_fill:before { content: "\e727"; }

    .i-icon-mobilephone_fill:before { content: "\e728"; }

    .i-icon-mobilephone:before { content: "\e729"; }

    .i-icon-more:before { content: "\e72a"; }

    .i-icon-narrow:before { content: "\e72b"; }

    .i-icon-offline_fill:before { content: "\e72c"; }

    .i-icon-offline:before { content: "\e72d"; }

    .i-icon-other:before { content: "\e72e"; }

    .i-icon-picture_fill:before { content: "\e72f"; }

    .i-icon-picture:before { content: "\e730"; }

    .i-icon-play:before { content: "\e731"; }

    .i-icon-play_fill:before { content: "\e732"; }

    .i-icon-playon_fill:before { content: "\e733"; }

    .i-icon-playon:before { content: "\e734"; }

    .i-icon-praise_fill:before { content: "\e735"; }

    .i-icon-praise:before { content: "\e736"; }

    .i-icon-prompt_fill:before { content: "\e737"; }

    .i-icon-prompt:before { content: "\e738"; }

    .i-icon-redpacket_fill:before { content: "\e739"; }

    .i-icon-redpacket:before { content: "\e73a"; }

    .i-icon-refresh:before { content: "\e73b"; }

    .i-icon-remind_fill:before { content: "\e73c"; }

    .i-icon-remind:before { content: "\e73d"; }

    .i-icon-return:before { content: "\e73e"; }

    .i-icon-right:before { content: "\e73f"; }

    .i-icon-scan:before { content: "\e740"; }

    .i-icon-send:before { content: "\e741"; }

    .i-icon-service_fill:before { content: "\e742"; }

    .i-icon-service:before { content: "\e743"; }

    .i-icon-setup_fill:before { content: "\e744"; }

    .i-icon-setup:before { content: "\e745"; }

    .i-icon-share_fill:before { content: "\e746"; }

    .i-icon-share:before { content: "\e747"; }

    .i-icon-success_fill:before { content: "\e748"; }

    .i-icon-success:before { content: "\e749"; }

    .i-icon-suspend:before { content: "\e74a"; }

    .i-icon-switch:before { content: "\e74b"; }

    .i-icon-systemprompt_fill:before { content: "\e74c"; }

    .i-icon-systemprompt:before { content: "\e74d"; }

    .i-icon-tailor:before { content: "\e74e"; }

    .i-icon-task:before { content: "\e74f"; }

    .i-icon-task_fill:before { content: "\e750"; }

    .i-icon-tasklist_fill:before { content: "\e751"; }

    .i-icon-tasklist:before { content: "\e752"; }

    .i-icon-time_fill:before { content: "\e753"; }

    .i-icon-time:before { content: "\e754"; }

    .i-icon-translation_fill:before { content: "\e755"; }

    .i-icon-translation:before { content: "\e756"; }

    .i-icon-trash:before { content: "\e757"; }

    .i-icon-trash_fill:before { content: "\e758"; }

    .i-icon-undo:before { content: "\e759"; }

    .i-icon-video:before { content: "\e75a"; }

    .i-icon-video_fill:before { content: "\e75b"; }

    .i-icon-warning_fill:before { content: "\e75c"; }

    .i-icon-warning:before { content: "\e75d"; }

    .i-icon-search:before { content: "\e75e"; }

    .i-icon-searchfill:before { content: "\e75f"; }

    .i-icon-publishgoods_fill:before { content: "\e760"; }

    .i-icon-shop_fill:before { content: "\e761"; }

    .i-icon-transaction_fill:before { content: "\e762"; }

    .i-icon-packup:before { content: "\e763"; }

    .i-icon-unfold:before { content: "\e764"; }

    .i-icon-financial_fill:before { content: "\e765"; }

    .i-icon-commodity:before { content: "\e766"; }
</style>