Merge remote-tracking branch 'origin/master'
wanlei
commit
e33d11ab7e
|
|
@ -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: {
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,71 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
基本
|
||||||
|
<Rate class="custom"></Rate>
|
||||||
|
</br>
|
||||||
|
半星
|
||||||
|
<Rate :allowHalf="allowHalf"></Rate>
|
||||||
|
</br>
|
||||||
|
默认3颗星
|
||||||
|
<Rate v-model="initValue"></Rate>
|
||||||
|
<AntButton type="primary" @click="changeValue">改变</AntButton>
|
||||||
|
<AntButton type="primary" @click="getValue">当前值</AntButton>
|
||||||
|
</br>
|
||||||
|
只读
|
||||||
|
<Rate :value="initValue" :disabled="disabled"></Rate>
|
||||||
|
</br>
|
||||||
|
回调函数
|
||||||
|
<Rate
|
||||||
|
:onChange="onChange"
|
||||||
|
:onHoverChange="onHoverChange"></Rate>
|
||||||
|
<span v-if="hoverValue">{{hoverValue}}stars</span>
|
||||||
|
<span v-if="rValue">{{rValue}}stars</span>
|
||||||
|
<br/>
|
||||||
|
<Rate
|
||||||
|
:allowHalf="allowHalf"
|
||||||
|
:onHoverChange="onHoverChangeAH"></Rate>
|
||||||
|
<span v-if="hoverValueAH">{{hoverValueAH}}stars</span>
|
||||||
|
</br>
|
||||||
|
自定义
|
||||||
|
<Rate :value="initValue" :allowHalf="allowHalf" :character="character"></Rate>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import '../style'
|
||||||
|
import { Rate, Icon, Button } from 'antd/index'
|
||||||
|
export default {
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
allowHalf: true,
|
||||||
|
initValue: 3,
|
||||||
|
disabled: true,
|
||||||
|
hoverValue: undefined,
|
||||||
|
rValue: undefined,
|
||||||
|
hoverValueAH: undefined,
|
||||||
|
character: '好',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onHoverChange (val) {
|
||||||
|
this.hoverValue = val
|
||||||
|
},
|
||||||
|
onChange (val) {
|
||||||
|
this.rValue = val
|
||||||
|
},
|
||||||
|
onHoverChangeAH (val) {
|
||||||
|
this.hoverValueAH = val
|
||||||
|
},
|
||||||
|
changeValue () {
|
||||||
|
this.initValue = undefined
|
||||||
|
},
|
||||||
|
getValue () {
|
||||||
|
console.log(this.initValue)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Rate,
|
||||||
|
Icon,
|
||||||
|
AntButton: Button,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
import './button/style'
|
||||||
|
import './icon/style'
|
||||||
|
import './radio/style'
|
||||||
|
import './checkbox/style'
|
||||||
|
|
@ -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,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'
|
||||||
|
|
|
||||||
|
|
@ -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`),
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue