iView UI参考手册

组件基础

Button 按钮

基础组件，触发业务逻辑时使用。

注意：非 template/render 模式下，需使用 i-button。

代码示例

<template>
    <Button type="default" ghost>Default</Button>
    <Button type="primary" ghost>Primary</Button>
    <Button type="dashed" ghost>Dashed</Button>
    <Button type="text" ghost>Text</Button>
    <Button type="info" ghost>Info</Button>
    <Button type="success" ghost>Success</Button>
    <Button type="warning" ghost>Warning</Button>
    <Button type="error" ghost>Error</Button>
</template>
<script>
    export default {
        
    }
</script>

<template>
    <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 shape="circle" icon="ios-search"></Button>
    <Button icon="ios-search">Search</Button>
    <Button shape="circle" icon="ios-search">Search</Button>
    <Button shape="circle">Circle</Button>
</template>
<script>
    export default {
        
    }
</script>

<template>
    <div>
        <RadioGroup v-model="buttonSize" type="button">
            <Radio label="large">Large</Radio>
            <Radio label="default">Default</Radio>
            <Radio label="small">small</Radio>
        </RadioGroup>
        <br><br>
        <Button :size="buttonSize" type="primary">Primary</Button>
        <Button :size="buttonSize" type="default">Default</Button>
        <Button :size="buttonSize" type="dashed">Dashed</Button>
        <Button :size="buttonSize" type="text">Text</Button>
        <br><br>
        <Button :size="buttonSize" icon="ios-download-outline" type="primary" shape="circle"></Button>
        <Button :size="buttonSize" icon="ios-download-outline" type="primary">Download</Button>
        <br><br>
        <ButtonGroup :size="buttonSize">
            <Button :size="buttonSize" type="primary">
                <Icon type="ios-arrow-back" />
                Backward
            </Button>
            <Button :size="buttonSize" type="primary">
                Forward
                <Icon type="ios-arrow-forward" />
            </Button>
        </ButtonGroup>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                buttonSize: 'large'
            }
        },
    }
</script>

<template>
    <Button type="success" long>SUBMIT</Button>
    <br><br>
    <Button type="error" long>DELETE</Button>
</template>
<script>
    export default {
        
    }
</script>

<template>
    <Button>Default</Button>
    <Button disabled>Default(Disabled)</Button>
    <br>
    <Button type="primary">Primary</Button>
    <Button type="primary" disabled>Primary(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>
</template>
<script>
    export default {
        
    }
</script>

<template>
    <Button type="primary" loading>Loading...</Button>
    <Button type="primary" :loading="loading" @click="toLoading">
        <span v-if="!loading">Click me!</span>
        <span v-else>Loading...</span>
    </Button>
    <Button type="primary" :loading="loading2" icon="ios-power" @click="toLoading2">
        <span v-if="!loading2">Click me!</span>
        <span v-else>Loading...</span>
    </Button>
    <Button loading shape="circle"></Button>
    <Button loading shape="circle" type="primary"></Button>
</template>
<script>
    export default {
        data () {
            return {
                loading: false,
                loading2: false
            }
        },
        methods: {
            toLoading () {
                this.loading = true;
            },
            toLoading2 () {
                this.loading2 = true;
            }
        }
    }
</script>

<template>
    <h4>Basic</h4>
    <br><br>
    <ButtonGroup>
        <Button>Cancel</Button>
        <Button type="primary">Confirm</Button>
    </ButtonGroup>
    <ButtonGroup>
        <Button disabled>Yesterday</Button>
        <Button disabled>Today</Button>
        <Button disabled>Tomorrow</Button>
    </ButtonGroup>
    <ButtonGroup>
        <Button type="primary">L</Button>
        <Button>M</Button>
        <Button>M</Button>
        <Button type="dashed">R</Button>
    </ButtonGroup>
    <br><br>
    <h4>Icons</h4>
    <br><br>
    <ButtonGroup>
        <Button type="primary">
            <Icon type="ios-arrow-back"></Icon>
            Backward
        </Button>
        <Button type="primary">
            Forward
            <Icon type="ios-arrow-forward"></Icon>
        </Button>
    </ButtonGroup>
    <ButtonGroup>
        <Button type="primary" icon="ios-skip-backward"></Button>
        <Button type="primary" icon="ios-skip-forward"></Button>
    </ButtonGroup>
    <ButtonGroup>
        <Button icon="ios-color-wand-outline"></Button>
        <Button icon="ios-sunny-outline"></Button>
        <Button icon="ios-crop"></Button>
        <Button icon="ios-color-filter-outline"></Button>
    </ButtonGroup>
    <br><br>
    <h4>Circle</h4>
    <br><br>
    <ButtonGroup shape="circle">
        <Button type="primary">
            <Icon type="ios-arrow-back"></Icon>
            Backward
        </Button>
        <Button type="primary">
            Forward
            <Icon type="ios-arrow-forward"></Icon>
        </Button>
    </ButtonGroup>
    <ButtonGroup shape="circle">
        <Button type="primary" icon="ios-skip-backward"></Button>
        <Button type="primary" icon="ios-skip-forward"></Button>
    </ButtonGroup>
    <ButtonGroup shape="circle">
        <Button icon="ios-color-wand-outline"></Button>
        <Button icon="ios-sunny-outline"></Button>
        <Button icon="ios-crop"></Button>
        <Button icon="ios-color-filter-outline"></Button>
    </ButtonGroup>
    <br><br>
    <h4>Size</h4>
    <br><br>
    <ButtonGroup size="large">
        <Button>Large</Button>
        <Button>Large</Button>
    </ButtonGroup>
    <ButtonGroup>
        <Button>Default</Button>
        <Button>Default</Button>
    </ButtonGroup>
    <ButtonGroup size="small">
        <Button>Small</Button>
        <Button>Small</Button>
    </ButtonGroup>
    <br><br>
    <ButtonGroup size="large" shape="circle">
        <Button>Large</Button>
        <Button>Large</Button>
    </ButtonGroup>
    <ButtonGroup shape="circle">
        <Button>Default</Button>
        <Button>Default</Button>
    </ButtonGroup>
    <ButtonGroup size="small" shape="circle">
        <Button>Small</Button>
        <Button>Small</Button>
    </ButtonGroup>
</template>
<script>
    export default {
        
    }
</script>

<template>
    <ButtonGroup vertical>
        <Button icon="logo-facebook"></Button>
        <Button icon="logo-twitter"></Button>
        <Button icon="logo-googleplus"></Button>
        <Button icon="logo-tumblr"></Button>
    </ButtonGroup>
</template>
<script>
    export default {
        
    }
</script>

<template>
    <Button to="/components/icon-en">Normal</Button>
    <Button to="/components/icon-en" replace>No history</Button>
    <Button to="//iviewui.com" target="_blank">New window</Button>
</template>
<script>
    export default {
        
    }
</script>

API

Button props

属性	说明	类型	默认值
type	按钮类型，可选值为 default、primary、dashed、text、info、success、warning、error或者不设置	String	default
ghost	幽灵属性，使按钮背景透明	Boolean	false
size	按钮大小，可选值为large、small、default或者不设置	String	default
shape	按钮形状，可选值为circle或者不设置	String	-
long	开启后，按钮的长度为 100%	Boolean	false
html-type	设置button原生的type，可选值为button、submit、reset	String	button
disabled	设置按钮为禁用状态	Boolean	false
loading	设置按钮为加载中状态	Boolean	false
icon	设置按钮的图标类型	String	-
custom-icon	设置按钮的自定义图标	String	-
to	跳转的链接，支持 vue-router 对象	String \| Object	-
replace	路由跳转时，开启 replace 将不会向 history 添加新记录	Boolean	false
target	相当于 a 链接的 target 属性	String	_self

ButtonGroup props

属性	说明	类型	默认值
size	按钮组合大小，可选值为large、small、default或者不设置	String	default
shape	按钮组合形状，可选值为circle或者不设置	String	-
vertical	是否纵向排列按钮组	Boolean	false

组件基础相关

1.Color 色彩
2.Font 字体
3.Icon 图标

iView UI

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品

iView UI目录

1.指南
2.组件
3.组件基础
4.组件布局