fix demo
tangjinzhou
parent
67b357893a
commit
ba79c3eee1
|
|
@ -7,7 +7,6 @@
|
|||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import '../style'
|
||||
import { Button } from 'antd'
|
||||
export default {
|
||||
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>
|
||||
<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>
|
||||
<slot v-if="options.length === 0"></slot>
|
||||
</div>
|
||||
|
|
@ -26,6 +26,7 @@ export default {
|
|||
default: () => [],
|
||||
type: Array,
|
||||
},
|
||||
disabled: Boolean,
|
||||
},
|
||||
model: {
|
||||
prop: 'value',
|
||||
|
|
@ -40,15 +41,20 @@ export default {
|
|||
checkedStatus () {
|
||||
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 () {
|
||||
this.setChildCheckbox(this.$slots.default)
|
||||
},
|
||||
methods: {
|
||||
handleChange (event) {
|
||||
if (this.disabled) {
|
||||
return false
|
||||
}
|
||||
const target = event.target
|
||||
const { value: targetValue, checked } = target
|
||||
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.$emit('input', targetValue)
|
||||
this.$emit('change', targetValue)
|
||||
this.$emit('change', event)
|
||||
},
|
||||
setChildRadio (children = []) {
|
||||
const { options, $slots, stateValue } = this
|
||||
|
|
|
|||
|
|
@ -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 Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
const AsyncComp = () => {
|
||||
const pathnameArr = window.location.pathname.split('/')
|
||||
const com = pathnameArr[1] || 'button'
|
||||
const demo = pathnameArr[2] || 'basic'
|
||||
const demo = pathnameArr[2] || 'index'
|
||||
return {
|
||||
component: import(`../components/${com}/demo/${demo}.vue`),
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue