drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

iButton add some func

Browse source 
iButton add some func
This commit is contained in:
梁灏 2016-11-01 17:01:59 +08:00
parent 72493927e1
commit 698e3b614d
7 changed files with 96 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/styles/iview.all.css vendored
View file

File diff suppressed because one or more lines are too long

2
dist/styles/iview.css vendored
View file

File diff suppressed because one or more lines are too long

15
src/components/button/button.vue
View file

@ -2,7 +2,7 @@
<button :type="htmlType" :class="classes" :disabled="disabled">
<i :class="loadingIconClasses" v-if="loading"></i>
<i :class="typeIconClasses" v-if="icon && !loading"></i>
<slot></slot>
<span v-if="showSlot" v-el:slot><slot></slot></span>
</button>
</template>
<script>
@ -17,7 +17,7 @@
props: {
type: {
validator (value) {
return oneOf(value, ['primary', 'ghost']);
return oneOf(value, ['primary', 'ghost', 'dashed', 'text']);
}
},
shape: {
@ -40,6 +40,11 @@
},
icon: String
},
data () {
return {
showSlot: true
}
},
computed: {
classes () {
return [
@ -48,7 +53,8 @@
[`${prefixCls}-${this.type}`]: !!this.type,
[`${prefixCls}-${this.shape}`]: !!this.shape,
[`${prefixCls}-${this.size}`]: !!this.size,
[`${prefixCls}-loading`]: this.loading != null && this.loading
[`${prefixCls}-loading`]: this.loading != null && this.loading,
[`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
}
]
},
@ -63,6 +69,9 @@
}
]
}
},
ready () {
this.showSlot = this.$els.slot.innerHTML !== '';
}
}
</script>

12
src/styles/components/button.less
View file

@ -4,6 +4,10 @@
.btn;
.btn-default;
& > .ivu-icon + span, & > span + .ivu-icon{
margin-left: 4px;
}
&-primary {
.btn-primary;
@ -34,6 +38,14 @@
.btn-ghost;
}
&-dashed{
.btn-dashed;
}
&-text{
.btn-text;
}
//&-dashed {
// .btn-dashed;
//}

47
src/styles/mixins/button.less
View file

@ -93,7 +93,8 @@
user-select: none;
.button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
.transform(translate3d(0, 0, 0));
.transition(all @transition-time linear);
//.transition(all @transition-time linear);
.transition3(color @transition-time linear, background-color @transition-time linear, border @transition-time linear);
> .@{css-prefix-iconfont} {
line-height: 1;
@ -189,20 +190,60 @@
}
}
// Text
.btn-text() {
.button-variant(@link-color, @btn-ghost-bg, transparent);
// for disabled
&.disabled,
&[disabled],
fieldset[disabled] & {
&,
&:hover,
&:focus,
&:active,
&.active {
.button-color(@btn-disable-color; @btn-ghost-bg; transparent);
}
}
&:hover
//&:focus
{
.button-color(tint(@primary-color, 20%); @btn-ghost-bg; transparent);
}
&:active,
&.active {
.button-color(shade(@primary-color, 5%); @btn-ghost-bg; transparent);
}
}
// Circle for Icon
.btn-circle(@btnClassName: ivu-btn) {
border-radius: 28px;
&.@{btnClassName}-large{
border-radius: 36px;
}
&.@{btnClassName}-size{
border-radius: 24px;
}
&.@{btnClassName}-icon-only{
.square(@btn-circle-size);
.button-size(0; @font-size-base + 2; 50%);
&.@{btnClassName}-large {
&.@{btnClassName}-large{
.square(@btn-circle-size-large);
.button-size(0; @btn-font-size-large + 2; 50%);
}
&.@{btnClassName}-small {
&.@{btnClassName}-small{
.square(@btn-circle-size-small);
.button-size(0; @font-size-base; 50%);
}
}
}
// Group

4
src/styles/themes/default/custom.less
View file

@ -47,8 +47,8 @@
// Button
@btn-font-weight : 400;
@btn-padding-base : 4px 15px;
@btn-padding-large : 4px 15px 5px 15px;
@btn-padding-small : 1px 7px;
@btn-padding-large : 6px 15px 7px 15px;
@btn-padding-small : 2px 7px;
@btn-font-size : 12px;
@btn-font-size-large : 14px;
@btn-border-radius : 4px;

41
test/routers/button.vue
View file

@ -1,7 +1,17 @@
<template>
<i-button type="primary" icon="ios-search" shape="circle" size="small"></i-button>
<i-button type="primary" icon="ios-search" shape="circle"></i-button>
<i-button type="primary" icon="ios-search" shape="circle" size="large"></i-button>
<i-button type="primary" icon="ios-search" shape="circle" size="small">搜索</i-button>
<i-button type="primary" icon="ios-search" shape="circle">搜索</i-button>
<i-button type="primary" icon="ios-search" shape="circle" size="large">搜索</i-button>
<br><br>
<i-button>Default</i-button>
<i-button type="primary">Primary</i-button>
<i-button type="ghost">Ghost</i-button>
<i-button type="dashed">Dashed</i-button>
<i-button type="text">文字按钮</i-button>
<i-button type="text" disabled>文字按钮</i-button>
<br><br>
<i-button type="primary" size="large">Large</i-button>
<i-button type="primary">Default</i-button>
@ -16,6 +26,9 @@
<i-button type="ghost">Ghost</i-button>
<i-button type="ghost" disabled>Ghost(Disabled)</i-button>
<br><br>
<i-button type="dashed">dashed</i-button>
<i-button type="dashed" disabled>dashed(Disabled)</i-button>
<br><br>
<i-button type="primary" shape="circle" icon="ios-search"></i-button>
<i-button type="primary" icon="ios-search">搜索</i-button>
<br><br>
@ -53,6 +66,7 @@
<i-button type="primary">L</i-button>
<i-button>M</i-button>
<i-button type="ghost">R</i-button>
<i-button type="dashed">R</i-button>
</Button-group>
<h4>配合图标</h4>
<Button-group>
@ -69,29 +83,9 @@
<i-button type="primary" icon="cloud"></i-button>
<i-button type="primary" icon="upload"></i-button>
</Button-group>
<Modal
:visible="true"
title="普通的Modal对话框标题">
<p>对话框内容</p>
<p>对话框内容</p>
<p>对话框内容</p>
<div style="width: 200px">
<i-select :model.sync="model6" >
<i-option value="beijing">北京市</i-option>
<i-option value="shanghai" disabled>上海市</i-option>
<i-option value="shenzhen">深圳市</i-option>
</i-select>
</div>
</Modal>
<i-select :model.sync="model6" >
<i-option value="beijing">北京市</i-option>
<i-option value="shanghai" disabled>上海市</i-option>
<i-option value="shenzhen">深圳市</i-option>
</i-select>
</template>
<script>
import { Button, Icon, Input, Switch, Radio, Checkbox, InputNumber, Row, Col, Page, Modal, iSelect, iOption } from 'iview';
import { Button, Icon, Input, Switch, Radio, Checkbox, InputNumber, Row, Col, Page } from 'iview';
const ButtonGroup = Button.Group;
const RadioGroup = Radio.Group;
const CheckboxGroup = Checkbox.Group;
@ -110,10 +104,7 @@
InputNumber,
Row,
iCol: Col,
Page,
Modal,
iSelect,
iOption
Page
},
props: {