github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix demo

pull/9/head
tangjinzhou 2017-11-03 18:46:18 +08:00
parent 67b357893a
commit ba79c3eee1
22 changed files with 445 additions and 198 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/button/demo/basic.vue
View File

@ -7,7 +7,6 @@
</div> </div>
</template> </template>
<script> <script>
import '../style'
import { Button } from 'antd' import { Button } from 'antd'
export default { export default {
components: { components: {

58
components/button/demo/button-group.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<div id="components-button-demo-button-group">
<h4>Basic</h4>
<ButtonGroup>
<AntButton>Cancel</AntButton>
<AntButton type="primary">OK</AntButton>
</ButtonGroup>
<ButtonGroup>
<AntButton disabled>L</AntButton>
<AntButton disabled>M</AntButton>
<AntButton disabled>R</AntButton>
</ButtonGroup>
<ButtonGroup>
<AntButton type="primary">L</AntButton>
<AntButton>M</AntButton>
<AntButton>M</AntButton>
<AntButton type="dashed">R</AntButton>
</ButtonGroup>
<h4>With Icon</h4>
<ButtonGroup>
<AntButton type="primary">
<Icon type="left" />Go back
</AntButton>
<AntButton type="primary">
Go forward<Icon type="right" />
</AntButton>
</ButtonGroup>
<ButtonGroup>
<AntButton type="primary" icon="cloud" />
<AntButton type="primary" icon="cloud-download" />
</ButtonGroup>
</div>
</template>
<script>
import { Button, Icon } from 'antd'
export default {
components: {
AntButton: Button,
ButtonGroup: Button.Group,
Icon,
},
}
</script>
<style>
#components-button-demo-button-group h4 {
margin: 16px 0;
font-size: 14px;
line-height: 1;
font-weight: normal;
}
#components-button-demo-button-group h4:first-child {
margin-top: 0;
}
#components-button-demo-button-group .ant-btn-group {
margin-right: 8px;
}
</style>

96
components/button/demo/button.vue
View File

@ -1,96 +0,0 @@
<template>
<div>
<AntButton :type="this.type" @click="handleClick" class="test">
primary
</AntButton>
<AntButton @mouseover="handleClick" @mouseout="handleClick">Default</AntButton>
<AntButton type="dashed">Dashed</AntButton>
<AntButton type="danger">Danger</AntButton>
<br />
<AntButton type="primary" shape="circle" icon="search" />
<AntButton type="primary" icon="search">Search</AntButton>
<AntButton shape="circle" icon="search" />
<AntButton icon="search">Search</AntButton>
<br />
<AntButton shape="circle" icon="search" />
<AntButton icon="search">Search</AntButton>
<AntButton type="dashed" shape="circle" icon="search" />
<AntButton type="dashed" icon="search">Search</AntButton>
<div>
<AntButton type="primary">Primary</AntButton>
<AntButton type="primary" disabled>Primary(disabled)</AntButton>
<br />
<AntButton>Default</AntButton>
<AntButton disabled>Default(disabled)</AntButton>
<br />
<AntButton>Ghost</AntButton>
<AntButton disabled>Ghost(disabled)</AntButton>
<br />
<AntButton type="dashed">Dashed</AntButton>
<AntButton type="dashed" disabled>Dashed(disabled)</AntButton>
</div>
<div :style="{background: 'rgb(190, 200, 200)', padding: '26px 16px 16px'}">
<AntButton type="primary" ghost>Primary</AntButton>
<AntButton ghost>Default</AntButton>
<AntButton type="dashed" ghost>Dashed</AntButton>
<AntButton type="danger" ghost>danger</AntButton>
</div>
<div>
<AntButton type="primary" loading>
Loading
</AntButton>
<AntButton type="primary" size="small" loading>
Loading
</AntButton>
<br />
<AntButton type="primary">
Click me!
</AntButton>
<AntButton type="primary" icon="poweroff">
Click me!
</AntButton>
<br />
<AntButton shape="circle" loading />
<AntButton type="primary" shape="circle" loading />
</div>
<div>
<ButtonGroup>
<AntButton>Cancel</AntButton>
<AntButton type="primary">OK</AntButton>
</ButtonGroup>
<ButtonGroup size="large">
<AntButton disabled>L</AntButton>
<AntButton disabled>M</AntButton>
<AntButton disabled>R</AntButton>
</ButtonGroup>
<ButtonGroup size="small">
<AntButton type="primary">L</AntButton>
<AntButton>M</AntButton>
<AntButton>M</AntButton>
<AntButton type="dashed">R</AntButton>
</ButtonGroup>
</div>
</div>
</template>
<script>
import '../style'
import { Button } from 'antd'
const ButtonGroup = Button.Group
export default {
data () {
return {
type: 'primary',
}
},
methods: {
handleClick (event) {
console.log(event)
this.type = this.type === 'primary' ? 'danger' : 'primary'
},
},
components: {
AntButton: Button,
ButtonGroup,
},
}
</script>

23
components/button/demo/disabled.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div>
<AntButton type="primary">Primary</AntButton>
<AntButton type="primary" disabled>Primary(disabled)</AntButton>
<br />
<AntButton>Default</AntButton>
<AntButton disabled>Default(disabled)</AntButton>
<br />
<AntButton>Ghost</AntButton>
<AntButton disabled>Ghost(disabled)</AntButton>
<br />
<AntButton type="dashed">Dashed</AntButton>
<AntButton type="dashed" disabled>Dashed(disabled)</AntButton>
</div>
</template>
<script>
import { Button } from 'antd'
export default {
components: {
AntButton: Button,
},
}
</script>

16
components/button/demo/ghost.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
<AntButton type="primary" ghost>Primary</AntButton>
<AntButton ghost>Default</AntButton>
<AntButton type="dashed" ghost>Dashed</AntButton>
<AntButton type="danger" ghost>danger</AntButton>
</div>
</template>
<script>
import { Button } from 'antd'
export default {
components: {
AntButton: Button,
},
}
</script>

21
components/button/demo/icon.vue Normal file
View File

@ -0,0 +1,21 @@
<template>
<div>
<AntButton type="primary" shape="circle" icon="search" />
<AntButton type="primary" icon="search">Search</AntButton>
<AntButton shape="circle" icon="search" />
<AntButton icon="search">Search</AntButton>
<br />
<AntButton shape="circle" icon="search" />
<AntButton icon="search">Search</AntButton>
<AntButton type="dashed" shape="circle" icon="search" />
<AntButton type="dashed" icon="search">Search</AntButton>
</div>
</template>
<script>
import { Button } from 'antd'
export default {
components: {
AntButton: Button,
},
}
</script>

42
components/button/demo/index.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<div>
<h1>Basic</h1>
<Basic />
<h1>ButtonGroup</h1>
<ButtonGroup />
<h1>Disabled</h1>
<Disabled />
<h1>Ghost</h1>
<Ghost />
<h1>Icon</h1>
<Icon />
<h1>Loading</h1>
<Loading />
<h1>TODO ： Multiple</h1>
<Multiple />
<h1>Size</h1>
<Size />
</div>
</template>
<script>
import Basic from './basic'
import ButtonGroup from './button-group'
import Disabled from './disabled'
import Ghost from './ghost'
import Icon from './icon'
import Loading from './loading'
import Multiple from './multiple'
import Size from './size'
export default {
components: {
Basic,
ButtonGroup,
Disabled,
Ghost,
Icon,
Loading,
Multiple,
Size,
},
}
</script>

42
components/button/demo/loading.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<div>
<AntButton type="primary" loading>
Loading
</AntButton>
<AntButton type="primary" size="small" loading>
Loading
</AntButton>
<br />
<AntButton type="primary" :loading="loading" @click="enterLoading">
Click me!
</AntButton>
<AntButton type="primary" icon="poweroff" :loading="iconLoading" @click="enterIconLoading">
Click me!
</AntButton>
<br />
<AntButton shape="circle" loading />
<AntButton type="primary" shape="circle" loading />
</div>
</template>
<script>
import { Button } from 'antd'
export default {
data () {
return {
loading: false,
iconLoading: false,
}
},
methods: {
enterLoading () {
this.loading = true
},
enterIconLoading () {
this.iconLoading = true
},
},
components: {
AntButton: Button,
},
}
</script>

17
components/button/demo/multiple.vue Normal file
View File

@ -0,0 +1,17 @@
// TODO: 依赖组件开发中
<template>
<div>
<AntButton type="primary">Primary</AntButton>
<AntButton>Default</AntButton>
<AntButton type="dashed">Dashed</AntButton>
<AntButton type="danger">Danger</AntButton>
</div>
</template>
<script>
import { Button } from 'antd'
export default {
components: {
AntButton: Button,
},
}
</script>

48
components/button/demo/size.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div>
<RadioGroup :value="size" @change="handleSizeChange">
<RadioButton value="large">Large</RadioButton>
<RadioButton value="default">Default</RadioButton>
<RadioButton value="small">Small</RadioButton>
</RadioGroup>
<br /><br />
<AntButton type="primary" :size="size">Primary</AntButton>
<AntButton :size="size">Normal</AntButton>
<AntButton type="dashed" :size="size">Dashed</AntButton>
<AntButton type="danger" :size="size">Danger</AntButton>
<br />
<AntButton type="primary" shape="circle" icon="download" :size="size" />
<AntButton type="primary" icon="download" :size="size">Download</AntButton>
<br />
<ButtonGroup :size="size">
<AntButton type="primary">
<Icon type="left" />Backward
</AntButton>
<AntButton type="primary">
Forward<Icon type="right" />
</AntButton>
</ButtonGroup>
</div>
</template>
<script>
import { Button, Radio, Icon } from 'antd'
export default {
data () {
return {
size: 'large',
}
},
methods: {
handleSizeChange (e) {
this.size = e.target.value
},
},
components: {
AntButton: Button,
ButtonGroup: Button.Group,
RadioButton: Radio.Button,
RadioGroup: Radio.Group,
Icon,
},
}
</script>

14
components/checkbox/Group.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div :class="`${prefixCls}`"> <div :class="`${prefixCls}`">
<Checkbox v-for="item in options" :key="item.value" :checked="checkedStatus.has(item.value)" <Checkbox v-for="item in checkOptions" :key="item.value" :checked="checkedStatus.has(item.value)"
:value="item.value" :disabled="item.disabled" @change="handleChange">{{item.label}}</Checkbox> :value="item.value" :disabled="item.disabled" @change="handleChange">{{item.label}}</Checkbox>
<slot v-if="options.length === 0"></slot> <slot v-if="options.length === 0"></slot>
</div> </div>
@ -26,6 +26,7 @@ export default {
default: () => [], default: () => [],
type: Array, type: Array,
}, },
disabled: Boolean,
}, },
model: { model: {
prop: 'value', prop: 'value',
@ -40,15 +41,20 @@ export default {
checkedStatus () { checkedStatus () {
return new Set(this.stateValue) return new Set(this.stateValue)
}, },
checkOptions () {
const { disabled } = this
return this.options.map(option => {
return typeof option === 'string'
? { label: option, value: option }
: { ...option, disabled: option.disabled === undefined ? disabled : option.disabled }
})
},
}, },
created () { created () {
this.setChildCheckbox(this.$slots.default) this.setChildCheckbox(this.$slots.default)
}, },
methods: { methods: {
handleChange (event) { handleChange (event) {
if (this.disabled) {
return false
}
const target = event.target const target = event.target
const { value: targetValue, checked } = target const { value: targetValue, checked } = target
const { stateValue, value } = this const { stateValue, value } = this

18
components/checkbox/demo/basic.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div>
<Checkbox @change="onChange">Checkbox</Checkbox>
</div>
</template>
<script>
import { Checkbox } from 'antd'
export default {
methods: {
onChange (e) {
console.log(`checked = ${e.target.checked}`)
},
},
components: {
Checkbox,
},
}
</script>

47
components/checkbox/demo/check-all.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<div>
<div :style="{ borderBottom: '1px solid #E9E9E9' }">
<Checkbox
:indeterminate="indeterminate"
@change="onCheckAllChange"
:checked="checkAll"
>
Check all
</Checkbox>
</div>
<br />
<CheckboxGroup :options="plainOptions" v-model="checkedList" @change="onChange" />
</div>
</template>
<script>
import { Checkbox } from 'antd'
const plainOptions = ['Apple', 'Pear', 'Orange']
const defaultCheckedList = ['Apple', 'Orange']
export default {
data () {
return {
checkedList: defaultCheckedList,
indeterminate: true,
checkAll: false,
plainOptions,
}
},
methods: {
onChange (checkedList) {
this.indeterminate = !!checkedList.length && (checkedList.length < plainOptions.length)
this.checkAll = checkedList.length === plainOptions.length
},
onCheckAllChange (e) {
Object.assign(this, {
checkedList: e.target.checked ? plainOptions : [],
indeterminate: false,
checkAll: e.target.checked,
})
},
},
components: {
Checkbox,
CheckboxGroup: Checkbox.Group,
},
}
</script>

18
components/checkbox/demo/controller.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div>
<Checkbox @change="onChange">Checkbox</Checkbox>
</div>
</template>
<script>
import { Checkbox } from 'antd'
export default {
methods: {
onChange (e) {
console.log(`checked = ${e.target.checked}`)
},
},
components: {
Checkbox,
},
}
</script>

15
components/checkbox/demo/disabled.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div>
<Checkbox :defaultChecked="false" disabled />
<br />
<Checkbox defaultChecked disabled />
</div>
</template>
<script>
import { Checkbox } from 'antd'
export default {
components: {
Checkbox,
},
}
</script>

45
components/checkbox/demo/group.vue Normal file
View File

@ -0,0 +1,45 @@
<template>
<div>
<CheckboxGroup :options="plainOptions" v-model="value" @change="onChange" />
<br />
<CheckboxGroup :options="plainOptions" :defaultValue="['Apple']" @change="onChange" />
<br />
<CheckboxGroup :options="options" :defaultValue="['Pear']" @change="onChange" />
<br />
<CheckboxGroup :options="optionsWithDisabled" disabled :defaultValue="['Apple']" @change="onChange" />
</div>
</template>
<script>
import { Checkbox } from 'antd'
const plainOptions = ['Apple', 'Pear', 'Orange']
const options = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange' },
]
const optionsWithDisabled = [
{ label: 'Apple', value: 'Apple' },
{ label: 'Pear', value: 'Pear' },
{ label: 'Orange', value: 'Orange', disabled: false },
]
export default {
data () {
return {
plainOptions,
options,
optionsWithDisabled,
value: [],
}
},
methods: {
onChange (checkedValues) {
console.log('checked = ', checkedValues)
console.log('value = ', this.value)
},
},
components: {
Checkbox,
CheckboxGroup: Checkbox.Group,
},
}
</script>

18
components/checkbox/demo/layout.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<div>
<Checkbox @change="onChange">Checkbox</Checkbox>
</div>
</template>
<script>
import { Checkbox } from 'antd'
export default {
methods: {
onChange (e) {
console.log(`checked = ${e.target.checked}`)
},
},
components: {
Checkbox,
},
}
</script>

2
components/radio/Group.vue
View File

@ -59,7 +59,7 @@ export default {
this.stateValue = targetValue this.stateValue = targetValue
} }
this.$emit('input', targetValue) this.$emit('input', targetValue)
this.$emit('change', targetValue) this.$emit('change', event)
}, },
setChildRadio (children = []) { setChildRadio (children = []) {
const { options, $slots, stateValue } = this const { options, $slots, stateValue } = this

4
components/style.js Normal file
View File

@ -0,0 +1,4 @@
import './button/style'
import './icon/style'
import './radio/style'
import './checkbox/style'

95
examples/button.vue
View File

@ -1,95 +0,0 @@
<template>
<div>
<AntButton :type="this.type" @click="handleClick" class="test">
primary
</AntButton>
<AntButton @mouseover="handleClick" @mouseout="handleClick">Default</AntButton>
<AntButton type="dashed">Dashed</AntButton>
<AntButton type="danger">Danger</AntButton>
<br />
<AntButton type="primary" shape="circle" icon="search" />
<AntButton type="primary" icon="search">Search</AntButton>
<AntButton shape="circle" icon="search" />
<AntButton icon="search">Search</AntButton>
<br />
<AntButton shape="circle" icon="search" />
<AntButton icon="search">Search</AntButton>
<AntButton type="dashed" shape="circle" icon="search" />
<AntButton type="dashed" icon="search">Search</AntButton>
<div>
<AntButton type="primary">Primary</AntButton>
<AntButton type="primary" disabled>Primary(disabled)</AntButton>
<br />
<AntButton>Default</AntButton>
<AntButton disabled>Default(disabled)</AntButton>
<br />
<AntButton>Ghost</AntButton>
<AntButton disabled>Ghost(disabled)</AntButton>
<br />
<AntButton type="dashed">Dashed</AntButton>
<AntButton type="dashed" disabled>Dashed(disabled)</AntButton>
</div>
<div :style="{background: 'rgb(190, 200, 200)', padding: '26px 16px 16px'}">
<AntButton type="primary" ghost>Primary</AntButton>
<AntButton ghost>Default</AntButton>
<AntButton type="dashed" ghost>Dashed</AntButton>
<AntButton type="danger" ghost>danger</AntButton>
</div>
<div>
<AntButton type="primary" loading>
Loading
</AntButton>
<AntButton type="primary" size="small" loading>
Loading
</AntButton>
<br />
<AntButton type="primary">
Click me!
</AntButton>
<AntButton type="primary" icon="poweroff">
Click me!
</AntButton>
<br />
<AntButton shape="circle" loading />
<AntButton type="primary" shape="circle" loading />
</div>
<div>
<ButtonGroup>
<AntButton>Cancel</AntButton>
<AntButton type="primary">OK</AntButton>
</ButtonGroup>
<ButtonGroup size="large">
<AntButton disabled>L</AntButton>
<AntButton disabled>M</AntButton>
<AntButton disabled>R</AntButton>
</ButtonGroup>
<ButtonGroup size="small">
<AntButton type="primary">L</AntButton>
<AntButton>M</AntButton>
<AntButton>M</AntButton>
<AntButton type="dashed">R</AntButton>
</ButtonGroup>
</div>
</div>
</template>
<script>
import { Button } from 'antd/index'
const ButtonGroup = Button.Group
export default {
data () {
return {
type: 'primary',
}
},
methods: {
handleClick (event) {
console.log(event)
this.type = this.type === 'primary' ? 'danger' : 'primary'
},
},
components: {
AntButton: Button,
ButtonGroup,
},
}
</script>

1
examples/index.js
View File

@ -1,3 +1,4 @@
import 'antd/style.js'
import './index.less' import './index.less'
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'

2
examples/routes.js
View File

@ -1,7 +1,7 @@
const AsyncComp = () => { const AsyncComp = () => {
const pathnameArr = window.location.pathname.split('/') const pathnameArr = window.location.pathname.split('/')
const com = pathnameArr[1] || 'button' const com = pathnameArr[1] || 'button'
const demo = pathnameArr[2] || 'basic' const demo = pathnameArr[2] || 'index'
return { return {
component: import(`../components/${com}/demo/${demo}.vue`), component: import(`../components/${com}/demo/${demo}.vue`),
} }