Button add to, replace, target prop, #3402
This commit is contained in:
梁灏
parent
3d1f3cf661
commit
bc6eb6f33d
2 changed files with 191 additions and 150 deletions
|
|
@ -1,3 +1,154 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Button to="/menu">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 {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
<style>
|
<style>
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "iconfont";
|
font-family: "iconfont";
|
||||||
|
|
@ -289,151 +440,4 @@
|
||||||
.i-icon-financial_fill:before { content: "\e765"; }
|
.i-icon-financial_fill:before { content: "\e765"; }
|
||||||
|
|
||||||
.i-icon-commodity:before { content: "\e766"; }
|
.i-icon-commodity:before { content: "\e766"; }
|
||||||
</style>
|
</style>
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<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 {
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
@ -1,9 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
|
<a
|
||||||
|
v-if="to"
|
||||||
|
:class="classes"
|
||||||
|
:disabled="disabled"
|
||||||
|
:href="linkUrl"
|
||||||
|
:target="target"
|
||||||
|
@click="handleClickLink">
|
||||||
|
<Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
|
||||||
|
<Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
|
||||||
|
<span v-if="showSlot" ref="slot"><slot></slot></span>
|
||||||
|
</a>
|
||||||
<button
|
<button
|
||||||
|
v-else
|
||||||
:type="htmlType"
|
:type="htmlType"
|
||||||
:class="classes"
|
:class="classes"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
@click="handleClick">
|
@click="handleClickLink">
|
||||||
<Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
|
<Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
|
||||||
<Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
|
<Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
|
||||||
<span v-if="showSlot" ref="slot"><slot></slot></span>
|
<span v-if="showSlot" ref="slot"><slot></slot></span>
|
||||||
|
|
@ -12,11 +24,13 @@
|
||||||
<script>
|
<script>
|
||||||
import Icon from '../icon';
|
import Icon from '../icon';
|
||||||
import { oneOf } from '../../utils/assist';
|
import { oneOf } from '../../utils/assist';
|
||||||
|
import mixinsLink from '../../mixins/link';
|
||||||
|
|
||||||
const prefixCls = 'ivu-btn';
|
const prefixCls = 'ivu-btn';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Button',
|
name: 'Button',
|
||||||
|
mixins: [ mixinsLink ],
|
||||||
components: { Icon },
|
components: { Icon },
|
||||||
props: {
|
props: {
|
||||||
type: {
|
type: {
|
||||||
|
|
@ -53,6 +67,20 @@
|
||||||
long: {
|
long: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
to: {
|
||||||
|
type: [Object, String]
|
||||||
|
},
|
||||||
|
replace: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
target: {
|
||||||
|
type: String,
|
||||||
|
validator (value) {
|
||||||
|
return oneOf(value, ['_blank', '_self', '_parent', '_top']);
|
||||||
|
},
|
||||||
|
default: '_self'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
|
|
@ -76,8 +104,17 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
handleClick (event) {
|
handleClickLink (event) {
|
||||||
this.$emit('click', event);
|
this.$emit('click', event);
|
||||||
|
|
||||||
|
if (this.to) {
|
||||||
|
if (this.target === '_blank') {
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
event.preventDefault();
|
||||||
|
this.handleClick();
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted () {
|
mounted () {
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue