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>
|
||||
@font-face {
|
||||
font-family: "iconfont";
|
||||
|
|
@ -289,151 +440,4 @@
|
|||
.i-icon-financial_fill:before { content: "\e765"; }
|
||||
|
||||
.i-icon-commodity:before { content: "\e766"; }
|
||||
</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>
|
||||
</style>
|
||||
|
|
@ -1,9 +1,21 @@
|
|||
<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
|
||||
v-else
|
||||
:type="htmlType"
|
||||
:class="classes"
|
||||
:disabled="disabled"
|
||||
@click="handleClick">
|
||||
@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>
|
||||
|
|
@ -12,11 +24,13 @@
|
|||
<script>
|
||||
import Icon from '../icon';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import mixinsLink from '../../mixins/link';
|
||||
|
||||
const prefixCls = 'ivu-btn';
|
||||
|
||||
export default {
|
||||
name: 'Button',
|
||||
mixins: [ mixinsLink ],
|
||||
components: { Icon },
|
||||
props: {
|
||||
type: {
|
||||
|
|
@ -53,6 +67,20 @@
|
|||
long: {
|
||||
type: Boolean,
|
||||
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 () {
|
||||
|
|
@ -76,8 +104,17 @@
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick (event) {
|
||||
handleClickLink (event) {
|
||||
this.$emit('click', event);
|
||||
|
||||
if (this.to) {
|
||||
if (this.target === '_blank') {
|
||||
return false;
|
||||
} else {
|
||||
event.preventDefault();
|
||||
this.handleClick();
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue