mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-12-02 12:07:54 +08:00
add site search
This commit is contained in:
tangjinzhou
parent
8a4bdad9d3
commit
654f364acd
@ -13,7 +13,7 @@ If you need several buttons, we recommend that you use 1 primary button + n seco
|
||||
<div>
|
||||
<a-button type="primary">Primary</a-button>
|
||||
<a-button>secondary</a-button>
|
||||
<a-dropdown overlay={menu}>
|
||||
<a-dropdown>
|
||||
<a-menu slot="overlay" @click="handleMenuClick">
|
||||
<a-menu-item key="1">1st item</a-menu-item>
|
||||
<a-menu-item key="2">2nd item</a-menu-item>
|
||||
|
||||
15
components/radio/demo/basic.md
Normal file
15
components/radio/demo/basic.md
Normal file
@ -0,0 +1,15 @@
|
||||
<cn>
|
||||
#### 基本
|
||||
最简单的用法。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Basic
|
||||
The simplest use.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-radio>Radio</a-radio>
|
||||
</template>
|
||||
```
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<Radio>Radio</Radio>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
Radio,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,8 +1,19 @@
|
||||
<cn>
|
||||
#### 不可用
|
||||
Radio 不可用。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### disabled
|
||||
Radio unavailable.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<Radio :defaultChecked="false" :disabled="disabled">Disabled</Radio>
|
||||
<a-radio :defaultChecked="false" :disabled="disabled">Disabled</a-radio>
|
||||
<br />
|
||||
<Radio defaultChecked :disabled="disabled">Disabled</Radio>
|
||||
<a-radio defaultChecked :disabled="disabled">Disabled</a-radio>
|
||||
<div :style="{ marginTop: 20 }">
|
||||
<a-button type="primary" @click="toggleDisabled">
|
||||
Toggle disabled
|
||||
@ -11,7 +22,6 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio, Button } from 'antd'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
@ -23,9 +33,6 @@ export default {
|
||||
this.disabled = !this.disabled
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Radio,
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@ -1,23 +1,3 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Basic</h1>
|
||||
<Basic />
|
||||
<h1>Disabled</h1>
|
||||
<Disabled />
|
||||
<h1>RadioButton</h1>
|
||||
<RadioButton />
|
||||
<h1>RadioGroupMore</h1>
|
||||
<RadioGroupMore />
|
||||
<h1>RadioGroupOptions</h1>
|
||||
<RadioGroupOptions />
|
||||
<h1>RadioGroupWithName</h1>
|
||||
<RadioGroupWithName />
|
||||
<h1>RadioGroup</h1>
|
||||
<RadioGroup />
|
||||
<h1>Size</h1>
|
||||
<Size />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Basic from './basic'
|
||||
import Disabled from './disabled'
|
||||
@ -27,20 +7,53 @@ import RadioGroupOptions from './radioGroup-options'
|
||||
import RadioGroupWithName from './radioGroup-with-name'
|
||||
import RadioGroup from './radioGroup'
|
||||
import Size from './size'
|
||||
import CN from '../index.zh-CN.md'
|
||||
import US from '../index.en-US.md'
|
||||
|
||||
const md = {
|
||||
cn: `# 单选框
|
||||
单选框。
|
||||
|
||||
## 何时使用
|
||||
|
||||
- 用于在多个备选项中选中单个状态。
|
||||
- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
|
||||
## 代码演示`,
|
||||
us: `# Radio
|
||||
Radio.
|
||||
|
||||
## When To Use
|
||||
|
||||
- Used to select a single state in multiple options.
|
||||
- The difference between Select is that Radio is visible to user and can facilitate the comparison of choice. So, when you want to use Radio, option should not be too much.
|
||||
## Examples
|
||||
`,
|
||||
}
|
||||
export default {
|
||||
category: 'Components',
|
||||
subtitle: '单选框',
|
||||
type: 'Data Entry',
|
||||
title: 'Radio',
|
||||
components: {
|
||||
Basic,
|
||||
Disabled,
|
||||
RadioButton,
|
||||
RadioGroupMore,
|
||||
RadioGroupOptions,
|
||||
RadioGroupWithName,
|
||||
RadioGroup,
|
||||
Size,
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<md cn={md.cn} us={md.us}/>
|
||||
<Basic />
|
||||
<Disabled />
|
||||
<RadioButton />
|
||||
<RadioGroupMore />
|
||||
<RadioGroupOptions />
|
||||
<RadioGroupWithName />
|
||||
<RadioGroup />
|
||||
<Size />
|
||||
<api>
|
||||
<template slot='cn'>
|
||||
<CN/>
|
||||
</template>
|
||||
<US/>
|
||||
</api>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
49
components/radio/demo/radioButton.md
Normal file
49
components/radio/demo/radioButton.md
Normal file
@ -0,0 +1,49 @@
|
||||
<cn>
|
||||
#### 按钮样式
|
||||
按钮样式的单选组合。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### radio style
|
||||
The combination of radio button style.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<a-radio-group @change="onChange" defaultValue="a">
|
||||
<a-radio-button value="a">Hangzhou</a-radio-button>
|
||||
<a-radio-button value="b">Shanghai</a-radio-button>
|
||||
<a-radio-button value="c">Beijing</a-radio-button>
|
||||
<a-radio-button value="d">Chengdu</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<div :style="{ marginTop: '16px' }">
|
||||
<a-radio-group @change="onChange" defaultValue="a">
|
||||
<a-radio-button value="a">Hangzhou</a-radio-button>
|
||||
<a-radio-button value="b" disabled>Shanghai</a-radio-button>
|
||||
<a-radio-button value="c">Beijing</a-radio-button>
|
||||
<a-radio-button value="d">Chengdu</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<div :style="{ marginTop: '16px' }">
|
||||
<a-radio-group disabled @change="onChange" defaultValue="a">
|
||||
<a-radio-button value="a">Hangzhou</a-radio-button>
|
||||
<a-radio-button value="b">Shanghai</a-radio-button>
|
||||
<a-radio-button value="c">Beijing</a-radio-button>
|
||||
<a-radio-button value="d">Chengdu</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
onChange (e) {
|
||||
console.log(`checked = ${e.target.value}`)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<RadioGroup @change="onChange" defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div :style="{ marginTop: '16px' }">
|
||||
<RadioGroup @change="onChange" defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b" disabled>Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div :style="{ marginTop: '16px' }">
|
||||
<RadioGroup disabled @change="onChange" defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio } from 'antd'
|
||||
export default {
|
||||
methods: {
|
||||
onChange (e) {
|
||||
console.log(`checked = ${e.target.value}`)
|
||||
},
|
||||
},
|
||||
components: {
|
||||
RadioButton: Radio.Button,
|
||||
RadioGroup: Radio.Group,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
42
components/radio/demo/radioGroup-more.md
Normal file
42
components/radio/demo/radioGroup-more.md
Normal file
@ -0,0 +1,42 @@
|
||||
<cn>
|
||||
#### RadioGroup 垂直
|
||||
垂直的 RadioGroup，配合更多输入框选项。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Vertical RadioGroup
|
||||
Vertical RadioGroup, with more radios.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-radio-group @change="onChange" v-model="value">
|
||||
<a-radio :style="radioStyle" :value="1">Option A</a-radio>
|
||||
<a-radio :style="radioStyle" :value="2">Option B</a-radio>
|
||||
<a-radio :style="radioStyle" :value="3">Option C</a-radio>
|
||||
<a-radio :style="radioStyle" :value="4">
|
||||
More...
|
||||
<a-input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
|
||||
</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 1,
|
||||
radioStyle: {
|
||||
display: 'block',
|
||||
height: '30px',
|
||||
lineHeight: '30px',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange (e) {
|
||||
console.log('radio checked', e.target.value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<RadioGroup @change="onChange" v-model="value">
|
||||
<Radio :style="radioStyle" :value="1">Option A</Radio>
|
||||
<Radio :style="radioStyle" :value="2">Option B</Radio>
|
||||
<Radio :style="radioStyle" :value="3">Option C</Radio>
|
||||
<Radio :style="radioStyle" :value="4">
|
||||
More...
|
||||
<Input v-if="value === 4" :style="{ width: 100, marginLeft: 10 }" />
|
||||
</Radio>
|
||||
</RadioGroup>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio } from 'antd'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 1,
|
||||
radioStyle: {
|
||||
display: 'block',
|
||||
height: '30px',
|
||||
lineHeight: '30px',
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange (e) {
|
||||
console.log('radio checked', e.target.value)
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Radio,
|
||||
RadioGroup: Radio.Group,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,14 +1,24 @@
|
||||
<cn>
|
||||
#### RadioGroup 组合 - 配置方式
|
||||
通过配置 `options` 参数来渲染单选框。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### RadioGroup group - optional
|
||||
Render radios by configuring `options`.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<RadioGroup :options="plainOptions" @change="onChange1" :defaultValue="value1" />
|
||||
<a-radio-group :options="plainOptions" @change="onChange1" :defaultValue="value1" />
|
||||
<br />
|
||||
<RadioGroup :options="options" @change="onChange2" v-model="value2" />
|
||||
<a-radio-group :options="options" @change="onChange2" v-model="value2" />
|
||||
<br />
|
||||
<RadioGroup :options="optionsWithDisabled" disabled @change="onChange3" v-model="value3" />
|
||||
<a-radio-group :options="optionsWithDisabled" disabled @change="onChange3" v-model="value3" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio } from 'antd'
|
||||
const plainOptions = ['Apple', 'Pear', 'Orange']
|
||||
const options = [
|
||||
{ label: 'Apple', value: 'Apple' },
|
||||
@ -42,9 +52,6 @@ export default {
|
||||
console.log('radio3 checked', e.target.value)
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Radio,
|
||||
RadioGroup: Radio.Group,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
20
components/radio/demo/radioGroup-with-name.md
Normal file
20
components/radio/demo/radioGroup-with-name.md
Normal file
@ -0,0 +1,20 @@
|
||||
<cn>
|
||||
#### 单选组合 - 配合 name 使用
|
||||
可以为 RadioGroup 配置 `name` 参数，为组合内的 input 元素赋予相同的 `name` 属性，使浏览器把 RadioGroup 下的 Radio 真正看作是一组（例如可以通过方向键始终**在同一组内**更改选项）。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### RadioGroup with name
|
||||
Passing the `name` property to all `input[type="radio"]` that are in the same RadioGroup. It is usually used to let the browser see your RadioGroup as a real "group" and keep the default behavior. For example, using left/right keyboard arrow to change your selection that in the same RadioGroup.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-radio-group name="radioGroup" :defaultValue="1">
|
||||
<a-radio :value="1">A</a-radio>
|
||||
<a-radio :value="2">B</a-radio>
|
||||
<a-radio :value="3">C</a-radio>
|
||||
<a-radio :value="4">D</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
```
|
||||
@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<RadioGroup name="radioGroup" :defaultValue="1">
|
||||
<Radio :value="1">A</Radio>
|
||||
<Radio :value="2">B</Radio>
|
||||
<Radio :value="3">C</Radio>
|
||||
<Radio :value="4">D</Radio>
|
||||
</RadioGroup>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
Radio,
|
||||
RadioGroup: Radio.Group,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
34
components/radio/demo/radioGroup.md
Normal file
34
components/radio/demo/radioGroup.md
Normal file
@ -0,0 +1,34 @@
|
||||
<cn>
|
||||
#### 单选组合
|
||||
一组互斥的 Radio 配合使用。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Radio Group
|
||||
A group of radio components.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<a-radio-group @change="onChange" v-model="value">
|
||||
<a-radio :value="1">A</a-radio>
|
||||
<a-radio :value="2">B</a-radio>
|
||||
<a-radio :value="3">C</a-radio>
|
||||
<a-radio :value="4">D</a-radio>
|
||||
</a-radio-group>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 1,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange (e) {
|
||||
console.log('radio checked', e.target.value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<RadioGroup @change="onChange" v-model="value">
|
||||
<Radio :value="1">A</Radio>
|
||||
<Radio :value="2">B</Radio>
|
||||
<Radio :value="3">C</Radio>
|
||||
<Radio :value="4">D</Radio>
|
||||
</RadioGroup>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio } from 'antd'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
value: 1,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange (e) {
|
||||
console.log('radio checked', e.target.value)
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Radio,
|
||||
RadioGroup: Radio.Group,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
40
components/radio/demo/size.md
Normal file
40
components/radio/demo/size.md
Normal file
@ -0,0 +1,40 @@
|
||||
<cn>
|
||||
#### 单选组合
|
||||
一组互斥的 Radio 配合使用。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Radio Group
|
||||
A group of radio components.
|
||||
</us>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<a-radio-group defaultValue="a" size="large">
|
||||
<a-radio-button value="a">Hangzhou</a-radio-button>
|
||||
<a-radio-button value="b">Shanghai</a-radio-button>
|
||||
<a-radio-button value="c">Beijing</a-radio-button>
|
||||
<a-radio-button value="d">Chengdu</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<div :style="{ marginTop: '16px' }">
|
||||
<a-radio-group defaultValue="a">
|
||||
<a-radio-button value="a">Hangzhou</a-radio-button>
|
||||
<a-radio-button value="b">Shanghai</a-radio-button>
|
||||
<a-radio-button value="c">Beijing</a-radio-button>
|
||||
<a-radio-button value="d">Chengdu</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
<div :style="{ marginTop: '16px' }">
|
||||
<a-radio-group defaultValue="a" size="small">
|
||||
<a-radio-button value="a">Hangzhou</a-radio-button>
|
||||
<a-radio-button value="b">Shanghai</a-radio-button>
|
||||
<a-radio-button value="c">Beijing</a-radio-button>
|
||||
<a-radio-button value="d">Chengdu</a-radio-button>
|
||||
</a-radio-group>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
@ -1,37 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<RadioGroup defaultValue="a" size="large">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div :style="{ marginTop: '16px' }">
|
||||
<RadioGroup defaultValue="a">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div :style="{ marginTop: '16px' }">
|
||||
<RadioGroup defaultValue="a" size="small">
|
||||
<RadioButton value="a">Hangzhou</RadioButton>
|
||||
<RadioButton value="b">Shanghai</RadioButton>
|
||||
<RadioButton value="c">Beijing</RadioButton>
|
||||
<RadioButton value="d">Chengdu</RadioButton>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { Radio } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
RadioButton: Radio.Button,
|
||||
RadioGroup: Radio.Group,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
41
components/radio/index.en-US.md
Normal file
41
components/radio/index.en-US.md
Normal file
@ -0,0 +1,41 @@
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Radio
|
||||
|
||||
| Property | Description | Type | optional | Default |
|
||||
| -------- | ----------- | ---- | -------- | ------- |
|
||||
| autoFocus | get focus when component mounted | boolean | false | |
|
||||
| checked | Specifies whether the radio is selected. | boolean | | false |
|
||||
| defaultChecked | Specifies the initial state: whether or not the radio is selected. | boolean | | false |
|
||||
| disabled | Disable radio | boolean | | false |
|
||||
| value | According to value for comparison, to determine whether the selected | any | | none |
|
||||
|
||||
### RadioGroup
|
||||
|
||||
radio group，wrap a group of `Radio`。
|
||||
|
||||
| Property | Description | Type | optional | Default |
|
||||
| -------- | ----------- | ---- | -------- | ------- |
|
||||
| defaultValue | Default selected value | any | none | none |
|
||||
| disabled | Disable all radio buttons | boolean | | false |
|
||||
| name | The `name` property of all `input[type="radio"]` children | string | | none |
|
||||
| options | set children optional | string\[] \| Array<{ label: string value: string disabled?: boolean }> | 无 | 无 |
|
||||
| size | Size, only on radio style | string | `large` `default` `small` | `default` |
|
||||
| value(v-model) | Used for setting the currently selected value. | any | none | none |
|
||||
|
||||
|
||||
### RadioGroup Events
|
||||
| Events Name | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| change | The callback function that is triggered when the state changes. | Function(e:Event) |
|
||||
|
||||
## Methods
|
||||
|
||||
### Radio
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| blur() | remove focus |
|
||||
| focus() | get focus |
|
||||
39
components/radio/index.zh-CN.md
Normal file
39
components/radio/index.zh-CN.md
Normal file
@ -0,0 +1,39 @@
|
||||
|
||||
|
||||
## API
|
||||
|
||||
### Radio
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| autoFocus | 自动获取焦点 | boolean | false |
|
||||
| checked | 指定当前是否选中 | boolean | false |
|
||||
| defaultChecked | 初始是否选中 | boolean | false |
|
||||
| value | 根据 value 进行比较，判断是否选中 | any | 无 |
|
||||
|
||||
### RadioGroup
|
||||
|
||||
单选框组合，用于包裹一组 `Radio`。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| defaultValue | 默认选中的值 | any | 无 |
|
||||
| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | 无 |
|
||||
| options | 以配置形式设置子元素 | string\[] \| Array<{ label: string value: string disabled?: boolean }> | 无 |
|
||||
| size | 大小，只对按钮样式生效 | `large` \| `default` \| `small` | `default` |
|
||||
| value(v-model) | 用于设置当前选中的值 | any | 无 |
|
||||
|
||||
### RadioGroup 事件
|
||||
|
||||
| 事件名称 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| change | 选项变化时的回调函数 | Function(e:Event) |
|
||||
|
||||
## 方法
|
||||
|
||||
### Radio
|
||||
|
||||
| 名称 | 描述 |
|
||||
| --- | --- |
|
||||
| blur() | 移除焦点 |
|
||||
| focus() | 获取焦点 |
|
||||
@ -27,6 +27,7 @@ const AbstractSelectProps = {
|
||||
]),
|
||||
autoFocus: PropTypes.bool,
|
||||
backfill: PropTypes.bool,
|
||||
showArrow: PropTypes.bool,
|
||||
}
|
||||
const Value = PropTypes.shape({
|
||||
key: String,
|
||||
|
||||
@ -1,12 +1,15 @@
|
||||
<script>
|
||||
import { isZhCN } from '../util'
|
||||
import _ from 'lodash'
|
||||
export default {
|
||||
props: {
|
||||
num: Number,
|
||||
name: String,
|
||||
searchData: Array,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
value: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -18,10 +21,14 @@ export default {
|
||||
path: path.replace(name, newName),
|
||||
})
|
||||
},
|
||||
onSelect (val) {
|
||||
this.$router.push(val)
|
||||
this.value = val
|
||||
},
|
||||
},
|
||||
render () {
|
||||
const name = this.name
|
||||
|
||||
const searchData = _.sortBy(this.searchData, ['title'])
|
||||
const isCN = isZhCN(name)
|
||||
return (
|
||||
<header id='header'>
|
||||
@ -33,8 +40,26 @@ export default {
|
||||
</router-link>
|
||||
</a-col>
|
||||
<a-col xxl={20} xl={19} lg={19} md={18} sm={0} xs={0}>
|
||||
<div id='search-box'>
|
||||
进度：{this.num} / 52
|
||||
<div id='search-box' style='display: block'>
|
||||
<a-icon type='search' />
|
||||
<a-select
|
||||
ref='selectBox'
|
||||
placeholder={isCN ? '搜索组件...' : 'input search text'}
|
||||
style='width: 200px'
|
||||
defaultActiveFirstOption={false}
|
||||
showArrow={false}
|
||||
showSearch
|
||||
onSelect={this.onSelect}
|
||||
optionFilterProp='children'
|
||||
key={this.value}
|
||||
>
|
||||
{
|
||||
searchData.map(({ title, subtitle, url }) =>
|
||||
<a-select-option key={url}>
|
||||
{title} {isCN && subtitle}
|
||||
</a-select-option>)
|
||||
}
|
||||
</a-select>
|
||||
</div>
|
||||
<a-button ghost size='small' onClick={this.handleClick} class='header-lang-button' key='lang-button'>
|
||||
{isCN ? 'English' : '中文'}
|
||||
|
||||
@ -113,6 +113,7 @@ export default {
|
||||
Feedback: [],
|
||||
Other: [],
|
||||
}
|
||||
const searchData = []
|
||||
for (const [title, d] of Object.entries(AllDemo)) {
|
||||
const type = d.type || 'Other'
|
||||
const key = `${title.replace(/(\B[A-Z])/g, '-$1').toLowerCase()}`
|
||||
@ -132,6 +133,11 @@ export default {
|
||||
if (isCN) {
|
||||
key = `${key}-cn`
|
||||
}
|
||||
searchData.push({
|
||||
title,
|
||||
subtitle,
|
||||
url: `/ant-design/components/${key}/`,
|
||||
})
|
||||
MenuItems.push(<a-menu-item key={key}>
|
||||
<router-link to={`/ant-design/components/${key}/`}>{linkValue}</router-link>
|
||||
</a-menu-item>)
|
||||
@ -144,7 +150,7 @@ export default {
|
||||
}
|
||||
return (
|
||||
<div class='page-wrapper'>
|
||||
<Header num={Object.keys(AllDemo).length} name={name}/>
|
||||
<Header num={Object.keys(AllDemo).length} searchData={searchData} name={name}/>
|
||||
<a-locale-provider locale={locale}>
|
||||
<div class='main-wrapper'>
|
||||
<a-row>
|
||||
|
||||
@ -61,4 +61,12 @@
|
||||
right: 15px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
#search-box {
|
||||
.ant-select-focused,
|
||||
.ant-select-selection,
|
||||
.ant-select-selection:focus,
|
||||
.ant-select-selection:active {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user