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

add Button UI

Browse source 
add Button UI
This commit is contained in:
梁灏 2016-09-20 17:10:17 +08:00
parent 40f8606f58
commit e1596b7e2c
9 changed files with 456 additions and 119 deletions
Download patch file Download diff file Expand all files Collapse all files

182
local/routers/button.vue
View file

@ -1,88 +1,74 @@
<style>
</style>
<template>
<Button size="small" shape="circle" type="primary" icon="add" @click="abc">
<Icon type="link"></Icon>
链接
<Button>Default</Button>
<Button type="primary">Primary</Button>
<Button type="ghost">Ghost</Button>
<br><br>
<Button type="primary" size="large">Large</Button>
<Button type="primary">Default</Button>
<Button type="primary" size="small">Small</Button>
<br><br>
<Button>Default</Button>
<Button disabled>Default(Disabled)</Button>
<br><br>
<Button type="primary">Primary</Button>
<Button type="primary" disabled>Primary(Disabled)</Button>
<br><br>
<Button type="ghost">Ghost</Button>
<Button type="ghost" disabled>Ghost(Disabled)</Button>
<br><br>
<Button type="primary" shape="circle" icon="ios-search"></Button>
<Button type="primary" icon="ios-search">搜索</Button>
<br><br>
<Button type="ghost" shape="circle">
<Icon type="search"></Icon>
</Button>
<Button-group>
<Button>上一页</Button>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>下一页</Button>
<Button type="ghost">
<Icon type="search"></Icon>
搜索
</Button>
<Button type="ghost" shape="circle" size="large">
<Icon type="search"></Icon>
</Button>
<Button type="ghost" shape="circle" size="small">
<Icon type="search"></Icon>
</Button>
<br><br><br>
<Button type="primary" loading>Loading...</Button>
<Button type="primary" loading size="large">Loading...</Button>
<Button type="primary" loading size="small">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="checkmark-round" @click="toLoading2">
<span v-if="!loading2">Click me!</span>
<span v-else>Loading...</span>
</Button>
<h4>基本</h4>
<Button-group size="large">
<Button>取消</Button>
<Button type="primary">确定</Button>
</Button-group>
<Button-group>
<Button type="primary">L</Button>
<Button>M</Button>
<Button type="ghost">R</Button>
</Button-group>
<h4>配合图标</h4>
<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="cloud"></Button>
<Button type="primary" icon="upload"></Button>
</Button-group>
{{ msg }}
<i-input placeholder="请输入邮箱" size="large" :value.sync="msg" @keyup.enter="abc"></i-input>
<Switch size="large" @on-change="changeSwitch">
<span slot="checkedItem">开</span>
<span slot="unCheckedItem">关</span>
</Switch>
<br>
<Radio @on-change="changeRadio">梁灏</Radio>
<Radio checked>谦翔</Radio>
<br><br><br>
<Radio value="谦翔">
谦翔
</Radio>
<Radio value="梁灏">
梁灏
</Radio>
<Radio value="倪斌">
倪斌
</Radio>
<Radio value="段模">
段模
</Radio>
<br><br><br>
<Radio-group>
<Radio value="谦翔">
谦翔
</Radio>
<Radio value="梁灏">
梁灏
</Radio>
<Radio value="倪斌">
倪斌
</Radio>
<Radio value="段模">
段模
</Radio>
</Radio-group>
<br><br><br>
<Checkbox-group :model="checkbox" @on-change="groupChange">
<Checkbox value="梁灏">梁灏</Checkbox>
<Checkbox value="段模">段模</Checkbox>
<Checkbox value="倪斌">倪斌</Checkbox>
</Checkbox-group>
<br><br><br>
<div @click="changeCB">切换名称数据</div>
{{ checkbox | json }}
<br><br><br>
<Checkbox :checked.sync="singleRadio" @on-change="singleChange">梁灏</Checkbox>
<br>
{{ singleRadio }}
<div @click="singleRadio = !singleRadio">切换单个名称数据</div>
<br><br><br>
------------------------------
<Input-number :step="1.2" :value="1"></Input-number>
{{ inumber }}
<br><br><br>
<Row type="flex" align="top" justify="end" class="hello world">
<i-col span="8" offset="2" class="nihao shijie">1</i-col>
<i-col span="8" push="3">2</i-col>
<i-col span="8" order="2">3</i-col>
</Row>
<br><br><br>
<Page :current="1" :total="100" simple></Page>
</template>
<script>
import { Button, Icon, Input, Switch, Radio, Checkbox, InputNumber, Row, Col, Page } from 'iview';
@ -111,36 +97,16 @@
},
data () {
return {
msg: 123,
radio: '梁灏',
checkbox: ['倪斌'],
inumber: 5,
singleRadio: true
loading: false,
loading2: false
}
},
ready () {
setTimeout(() => {
// this.checkbox = ['倪斌', '梁灏'];
}, 2000);
},
methods: {
abc() {
console.log(123);
toLoading () {
this.loading = true;
},
changeSwitch (data) {
console.log(data);
},
changeRadio (data) {
console.log(data);
},
changeCB () {
this.checkbox = ['梁灏', '段模'];
},
groupChange (data) {
// console.log(data);
},
singleChange (data) {
// console.log(data);
toLoading2 () {
this.loading2 = true;
}
}
}