mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-01 13:36:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(radio): vue3

Browse Source
This commit is contained in:
07akioni 2020-10-22 12:55:37 +08:00
parent 0e20b7c61c
commit 02c8150374
13 changed files with 166 additions and 197 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
demo/documentation/components/radio/enUS/basic.demo.md
View File

@ -1,26 +1,27 @@
# Basic
```html
<n-radio
v-model="value"
value="Definitely Maybe"
>
Definitely Maybe
</n-radio>
<n-radio
v-model="value"
value="Be Here Now"
>
Be Here Now
</n-radio>
<n-radio
v-model="value"
value="Be Here Now"
:disabled="disabled"
>
Be Here Now
</n-radio>
<n-switch v-model="disabled"/>
<n-space>
<n-radio
v-model:checked-value="value"
value="Definitely Maybe"
>
Definitely Maybe
</n-radio>
<n-radio
v-model:checked-value="value"
value="Be Here Now"
>
Be Here Now
</n-radio>
<n-radio
v-model:checked-value="value"
value="Be Here Now"
:disabled="disabled"
>
Be Here Now
</n-radio>
<n-switch v-model:value="disabled"/>
</n-space>
```
```js
export default {
@ -32,8 +33,3 @@ export default {
}
}
```
```css
.n-radio {
margin-right: 8px;
}
```

30
demo/documentation/components/radio/enUS/button-group.demo.md
View File

@ -1,8 +1,8 @@
# Button Group
Sometimes a radio button group looks more elegant.
```html
<div style="margin-bottom: 12px;">
<n-radio-group v-model="value" name="radiobuttongroup1">
<n-space vertical>
<n-radio-group v-model:value="value" name="radiobuttongroup1">
<n-radio-button
v-for="song in songs"
:key="song.value"
@ -12,18 +12,20 @@ Sometimes a radio button group looks more elegant.
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<n-checkbox
v-model="disabled2"
style="margin-right: 12px;"
>
Disable Shakemaker
</n-checkbox>
<n-checkbox
v-model="disabled1"
>
Disable Live Forever
</n-checkbox>
<n-space>
<n-checkbox
v-model:value="disabled2"
style="margin-right: 12px;"
>
Disable Shakemaker
</n-checkbox>
<n-checkbox
v-model:value="disabled1"
>
Disable Live Forever
</n-checkbox>
</n-space>
</n-space>
```
```js
export default {

2
demo/documentation/components/radio/enUS/group.demo.md
View File

@ -1,7 +1,7 @@
# Group
A radio group look elegant.
```html
<n-radio-group v-model="value" name="radiogroup">
<n-radio-group v-model:value="value" name="radiogroup">
<n-radio
v-for="song in songs"
:key="song.value"

47
demo/documentation/components/radio/enUS/index.demo-entry.md
View File

@ -8,52 +8,25 @@ group
button-group
size
```
## V-model
### Radio V-model
|Prop|Event|
|-|-|
|checked-value|change|
### Radio Group V-model
|Prop|Event|
|-|-|
|value|change|
## Props
### Radio Props
### Radio Props, RadioButton Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|name|`string`|`undefined`|The name attribute of the radio element. If not set, name of `radio-group` will be used.|
|checked-value|`string \| number \| boolean`|`null`||
|value|`string \| number \| boolean`|`null`||
|disabled|`boolean`|`false`||
### Radio Button Props
|Name|Type|Default|Description|
|-|-|-|-|
|name|`string`|`undefined`|The name attribute of the radio element. If not set, name of `radio-group` will be used.|
|checked-value|`string \| number \| boolean`|`null`||
|value|`string \| number \| boolean`|`null`||
|disabled|`boolean`|`false`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`string \| number \| boolean`|required||
|on-update:checked-value|`(checkedValue: string \| number \| boolean) => any`|`undefined`||
### Radio Group Props
### RadioGroup Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|name|`string`|`null`|The name attribute of the radio elements inside the group.|
|size|`'small' \| 'medium' \| 'large'`|`small`||
|value|`string \| number \| boolean`|`null`||
|disabled|`boolean`|`false`||
|name|`string`|`undefined`|The name attribute of the radio elements inside the group.|
|size|`'small' \| 'medium' \| 'large'`|`'small'`||
## Events
### Radio, Radio Button Events
|Name|Parameters|Description|
|-|-|-|
|change|`(checkedValue: string \| number \| boolean)`||
### Radio Group Events
|Name|Parameters|Description|
|-|-|-|
|change|`(checkedValue: string \| number \| boolean)`||
|size|`'small' \| 'medium' \| 'large'`|`small`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`string \| number \| boolean`|`null`||
|on-update:value|`(checkedValue: string \| number \| boolean) => any`|`undefined`||

34
demo/documentation/components/radio/enUS/size.demo.md
View File

@ -1,8 +1,8 @@
# Size
Choose whatever you want.
```html
<div style="margin-bottom: 12px;">
<n-radio-group v-model="value" name="radiobuttongroup2" size="medium">
<n-space vertical>
<n-radio-group v-model:value="value" name="radiobuttongroup2" size="medium">
<n-radio-button
v-for="song in songs"
:key="song.value"
@ -12,9 +12,7 @@ Choose whatever you want.
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<div style="margin-bottom: 12px;">
<n-radio-group v-model="value" name="radiobuttongroup3" size="large">
<n-radio-group v-model:value="value" name="radiobuttongroup3" size="large">
<n-radio-button
v-for="song in songs"
:key="song.value"
@ -24,18 +22,20 @@ Choose whatever you want.
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<n-checkbox
v-model="disabled2"
style="margin-right: 12px;"
>
禁用 Shakemaker
</n-checkbox>
<n-checkbox
v-model="disabled1"
>
禁用 Live Forever
</n-checkbox>
<n-space>
<n-checkbox
v-model:value="disabled2"
style="margin-right: 12px;"
>
Disable Shakemaker
</n-checkbox>
<n-checkbox
v-model:value="disabled1"
>
Disable Live Forever
</n-checkbox>
</n-space>
</n-space>
```
```js
export default {

48
demo/documentation/components/radio/zhCN/basic.demo.md
View File

@ -1,26 +1,27 @@
# 基础用法
```html
<n-radio
v-model:value-value="value"
value="Definitely Maybe"
>
Definitely Maybe
</n-radio>
<n-radio
v-model:value-value="value"
value="Be Here Now"
>
Be Here Now
</n-radio>
<n-radio
v-model:value-value="value"
value="Be Here Now"
:disabled="disabled"
>
Be Here Now
</n-radio>
<n-switch v-model:value="disabled"/>
<n-space>
<n-radio
v-model:checked-value="value"
value="Definitely Maybe"
>
Definitely Maybe
</n-radio>
<n-radio
v-model:checked-value="value"
value="Be Here Now"
>
Be Here Now
</n-radio>
<n-radio
v-model:checked-value="value"
value="Be Here Now"
:disabled="disabled"
>
Be Here Now
</n-radio>
<n-switch v-model:value="disabled"/>
</n-space>
```
```js
export default {
@ -32,8 +33,3 @@ export default {
}
}
```
```css
.n-radio {
margin-right: 8px;
}
```

30
demo/documentation/components/radio/zhCN/button-group.demo.md
View File

@ -1,8 +1,8 @@
# 按钮组
有的时候用按钮显得更优雅一点。
```html
<div style="margin-bottom: 12px;">
<n-radio-group v-model:value="value" name="radiobuttongroup">
<n-space vertical>
<n-radio-group v-model:value="value" name="radiobuttongroup1">
<n-radio-button
v-for="song in songs"
:key="song.value"
@ -12,18 +12,20 @@
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<n-checkbox
v-model:value="disabled2"
style="margin-right: 12px;"
>
禁用 Shakemaker
</n-checkbox>
<n-checkbox
v-model:value="disabled1"
>
禁用 Live Forever
</n-checkbox>
<n-space>
<n-checkbox
v-model:value="disabled2"
style="margin-right: 12px;"
>
禁用 Shakemaker
</n-checkbox>
<n-checkbox
v-model:value="disabled1"
>
禁用 Live Forever
</n-checkbox>
</n-space>
</n-space>
```
```js
export default {

10
demo/documentation/components/radio/zhCN/index.demo-entry.md
View File

@ -11,21 +11,21 @@ radio-focus-debug
```
## Props
### Radio Props, Radio Button Props
### Radio Props, RadioButton Props
|名称|类型|默认值|说明|
|-|-|-|-|
|name|`string`|`undefined`|单选按钮 radio 元素的 name 属性。如果没有设定会使用 `n-radio-group` 的 `name`|
|checked-value|`string \| number \| boolean`|`null`||
|value|`string \| number \| boolean`|required||
|disabled|`boolean`|`false`||
|name|`string`|`undefined`|单选按钮 radio 元素的 name 属性。如果没有设定会使用 `n-radio-group` 的 `name`|
|size|`'small' \| 'medium' \| 'large'`|`'medium'`|只用于 `n-radio`|
|value|`string \| number \| boolean`|required||
|on-update:checked-value|`(checkedValue: string \| number \| boolean) => any`|`undefined`||
### Radio Group Props
### RadioGroup Props
|名称|类型|默认值|说明|
|-|-|-|-|
|disabled|`boolean`|`false`||
|name|`string`|`null`|选项组内部 radio 元素的 name 属性|
|name|`string`|`undefined`|选项组内部 radio 元素的 name 属性|
|size|`'small' \| 'medium' \| 'large'`|`medium`||
|theme|`'light' \| 'dark' \| null \| string`|`null`||
|value|`string \| number \| boolean`|`null`||

30
demo/documentation/components/radio/zhCN/size.demo.md
View File

@ -1,7 +1,7 @@
# 尺寸
任君挑选。
```html
<div style="margin-bottom: 12px;">
<n-space vertical>
<n-radio-group v-model:value="value" name="radiobuttongroup2" size="medium">
<n-radio-button
v-for="song in songs"
@ -12,8 +12,6 @@
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<div style="margin-bottom: 12px;">
<n-radio-group v-model:value="value" name="radiobuttongroup3" size="large">
<n-radio-button
v-for="song in songs"
@ -24,18 +22,20 @@
{{ song.label }}
</n-radio-button>
</n-radio-group>
</div>
<n-checkbox
v-model:value="disabled2"
style="margin-right: 12px;"
>
禁用 Shakemaker
</n-checkbox>
<n-checkbox
v-model:value="disabled1"
>
禁用 Live Forever
</n-checkbox>
<n-space>
<n-checkbox
v-model:value="disabled2"
style="margin-right: 12px;"
>
禁用 Shakemaker
</n-checkbox>
<n-checkbox
v-model:value="disabled1"
>
禁用 Live Forever
</n-checkbox>
</n-space>
</n-space>
```
```js
export default {

6
src/radio/src/Radio.vue
View File

@ -2,7 +2,7 @@
<div
class="n-radio"
:class="{
'n-radio--disabled': syntheticDisabled,
'n-radio--disabled': mergedDisabled,
'n-radio--checked': renderSafeChecked,
'n-radio--focus': focus,
[`n-radio--${mergedSize}-size`]: true,
@ -16,9 +16,9 @@
ref="input"
type="radio"
class="n-radio__radio-input"
:name="syntheticName"
:name="mergedName"
:checked="renderSafeChecked"
:disabled="syntheticDisabled"
:disabled="mergedDisabled"
@change="handleRadioInputChange"
@focus="handleRadioInputFocus"
@blur="handleRadioInputBlur"

6
src/radio/src/RadioButton.vue
View File

@ -2,7 +2,7 @@
<div
class="n-radio-button"
:class="{
'n-radio-button--disabled': syntheticDisabled,
'n-radio-button--disabled': mergedDisabled,
'n-radio-button--checked': renderSafeChecked,
'n-radio-button--focus': focus
}"
@ -17,9 +17,9 @@
ref="input"
type="radio"
class="n-radio-button__radio-input"
:name="syntheticName"
:name="mergedName"
:checked="renderSafeChecked"
:disabled="syntheticDisabled"
:disabled="mergedDisabled"
@change="handleRadioInputChange"
@focus="handleRadioInputFocus"
@blur="handleRadioInputBlur"

2
src/radio/src/RadioGroup.js
View File

@ -98,7 +98,7 @@ export default {
props: {
name: {
type: String,
default: null
default: undefined
},
value: {
type: [Boolean, String, Number],

70
src/radio/src/radio-mixin.js
View File

@ -1,4 +1,4 @@
import { warn } from '../../_utils/naive/warn'
import { warn, call } from '../../_utils'
export default {
props: {
@ -23,7 +23,7 @@ export default {
default: undefined
},
'onUpdate:checkedValue': {
type: Function,
type: [Function, Array],
default: undefined
},
// deprecated
@ -41,11 +41,11 @@ export default {
}
},
computed: {
syntheticName () {
mergedName () {
if (this.name !== undefined) return this.name
if (this.NRadioGroup) return this.NRadioGroup.name
},
syntheticDisabled () {
mergedDisabled () {
if (this.NRadioGroup && this.NRadioGroup.disabled) return true
if (this.disabled) return true
return false
@ -59,10 +59,38 @@ export default {
}
},
methods: {
doUpdateValue () {
const {
value
} = this
if (this.NRadioGroup) {
const {
onChange,
'onUpdate:value': updateValue,
nTriggerFormInput,
nTriggerFormChange
} = this.NRadioGroup
if (updateValue) call(updateValue, value)
if (onChange) call(onChange, value) // deprecated
nTriggerFormInput()
nTriggerFormChange()
} else {
const {
onChange,
'onUpdate:checkedValue': updateCheckedValue,
nTriggerFormInput,
nTriggerFormChange
} = this
if (updateCheckedValue) call(updateCheckedValue, value)
if (onChange) call(onChange, value) // deprecated
nTriggerFormInput()
nTriggerFormChange()
}
},
toggle () {
if (this.syntheticDisabled) return
if (this.mergedDisabled) return
if (this.checkedValue !== this.value) {
this.emitChangeEvent()
this.doUpdateValue()
}
},
handleRadioInputChange () {
@ -78,7 +106,7 @@ export default {
this.toggle()
},
handleMouseDown () {
if (this.syntheticDisabled) return
if (this.mergedDisabled) return
setTimeout(() => {
if (!this.$el.contains(document.activeElement)) {
this.$refs.input.focus()
@ -91,34 +119,6 @@ export default {
} = this
if (onClick) onClick(e)
this.toggle()
},
emitChangeEvent () {
const {
value
} = this
if (this.NRadioGroup) {
const {
onChange,
'onUpdate:value': updateValue,
nTriggerFormInput,
nTriggerFormChange
} = this.NRadioGroup
if (updateValue) updateValue(value)
if (onChange) onChange(value) // deprecated
nTriggerFormInput()
nTriggerFormChange()
} else {
const {
onChange,
'onUpdate:checkedValue': updateCheckedValue,
nTriggerFormInput,
nTriggerFormChange
} = this
if (updateCheckedValue) updateCheckedValue(value)
if (onChange) onChange(value) // deprecated
nTriggerFormInput()
nTriggerFormChange()
}
}
}
}