Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

体验新版 GitCode，发现更多精彩内容 >>

提交 7c84409f 编写于 作者: F Frans
浏览文件
操作

update

上级 4997c7e3
隐藏空白更改
内联 并排
Showing with 270 addition and 130 deletion
sites/doc/asset/css/style-blue.scss
浏览文件 @ 7c84409f
......@@ -4,20 +4,20 @@
h1 {
font-size: 28px;
font-weight: 700;
margin:10px 0;
margin: 10px 0;
color: #333333;
}
p {
font-size: 14px;
margin:10px 0;
margin: 10px 0;
}
h1+p,
h1+p+p,
h1+p+p {
color: #333333;
}
}
h2 {
margin:30px 0 15px;
margin: 30px 0 15px;
font-size: 22px;
font-weight: 400;
color: #333333;
......@@ -25,8 +25,9 @@
h2+p,
h2+p+p {
color: #3F4449;
}
}
h3 {
margin: 20px 0 10px;
font-size: 18px;
font-weight: 400;
color: #333333;
......@@ -34,11 +35,11 @@
h3+p,
h3+p+p {
color: #3F4449;
}
}
h4 {
font-size: 14px;
font-weight: normal;
margin:15px 0;
margin: 15px 0;
color: #666666;
}
h4+p,
......@@ -48,8 +49,7 @@
}
h4+p::nth-child(n) {
color: #666666;
}
}
blockquote {
padding: 0;
margin: 0;
......@@ -68,22 +68,22 @@
font-style: normal;
}
}
ul {
ul {
border-radius: 3px;
padding: 5px 20px;
padding: 5px 20px;
list-style: none;
p{
margin:0;
p {
margin: 0;
}
ul{
margin:0;
padding:0;
ul {
margin: 0;
padding: 0;
}
li {
font-size: 14px;
color: #455A64;
padding: 7px;
line-height: 20px;
line-height: 20px;
display: flex;
align-items: center;
}
......@@ -101,7 +101,7 @@
background: #F2F4F5;
border-radius: 3px;
padding: 13px 40px;
li {
li {
line-height: 20px;
padding: 7px 0 0 10px;
font-size: 14px;
......@@ -110,8 +110,8 @@
}
ul,
ol,
p,table
{
p,
table {
em {
color: #8cade9;
font-style: normal;
......@@ -167,10 +167,10 @@
white-space: unset;
word-break: break-all;
}
a{
a {
color: #5396ff;
text-decoration: none;
&:hover{
&:hover {
text-decoration: underline;
}
}
......
src/config.json
浏览文件 @ 7c84409f
......@@ -329,6 +329,16 @@
"desc": "单选按钮，可组合成单选按钮组",
"author": "Frans"
},
{
"name": "RadioGroup",
"version": "1.0.0",
"sort": "1",
"chnName": "单选按钮组",
"type": "component",
"showDemo": false,
"desc": "单选按钮组",
"author": "Frans"
},
{
"version": "1.0.0",
"name": "CheckBox",
......
src/mixins/findCptUpward/index.js 0 → 100644
浏览文件 @ 7c84409f
export default {
methods: {
findCptUpward(cptName) {
let parentCpt = this.$parent;
while (parentCpt) {
if (parentCpt.$options.name === cptName){
this.parent = parentCpt;
break;
}
parentCpt = parent.$parent;
}
}
}
}
src/packages/radio/demo.vue
浏览文件 @ 7c84409f
<template>
<div class="demo-list">
<h4>基本用法</h4>
<h4>Radio基本用法</h4>
<div>
<nut-cell>
<span slot="title">
<nut-radio v-model="radioVal" :label="2">备选项</nut-radio>
</span>
</nut-cell>
</div>
<h4>组合使用Radio</h4>
<div>
<nut-cell>
<span slot="title">
......@@ -10,25 +19,48 @@
<div slot="desc">radioVal1: {{radioVal1}}</div>
</nut-cell>
</div>
<p>组合使用 Radio 时推荐使用 radiogroup 组件，见下方示例</p>
<h4>禁用状态</h4>
<h4>RadioGroup基本用法</h4>
<div>
<nut-cell>
<span slot="title">
<nut-radio :disabled="true" v-model="radioVal2" label="禁用">备选项1</nut-radio>
<nut-radiogroup v-model="radioGroupVal1">
<nut-radio label="a">备选项1</nut-radio>
<nut-radio label="b">备选项2</nut-radio>
</nut-radiogroup>
</span>
</nut-cell>
</div>
<h4>Radio禁用</h4>
<div>
<nut-cell>
<span slot="title">
<nut-radio :disabled="true" v-model="radioVal2" label="选中且禁用">备选项2</nut-radio>
未选中时的禁用状态：<nut-radio :disabled="true" v-model="radioVal2" label="禁用">备选项1</nut-radio>
</span>
</nut-cell>
<nut-cell>
<span slot="title">radioVal2: {{radioVal2}}</span>
<span slot="title">
已选中时的禁用状态：<nut-radio :disabled="true" v-model="radioVal2" label="选中且禁用">备选项2</nut-radio>
</span>
</nut-cell>
</div>
<h4>自定义尺寸</h4>
<h4>RadioGroup整体禁用</h4>
<div>
<nut-cell>
<span slot="title">
<nut-radiogroup v-model="radioGroupVal2" :disabled="true">
<nut-radio label="1">备选项1</nut-radio>
<nut-radio label="2">备选项2</nut-radio>
<nut-radio label="3">备选项3</nut-radio>
</nut-radiogroup>
</span>
</nut-cell>
</div>
<h4>Radio自定义尺寸</h4>
<div>
<nut-cell>
<span slot="title">
......@@ -48,34 +80,45 @@
<p>size可选值：'small', 'base', 'large'</p>
</div>
<h4>禁用动效</h4>
<h4>RadioGroup整体定义尺寸</h4>
<div>
<nut-cell>
<span slot="title">
<nut-radio :animation="false" v-model="radioVal3" label="a">备选项1</nut-radio>
<nut-radiogroup v-model="radioGroupVal3" size="large">
<nut-radio label="1">备选项1</nut-radio>
<nut-radio label="2">备选项2</nut-radio>
<nut-radio label="3">备选项3</nut-radio>
</nut-radiogroup>
</span>
</nut-cell>
</div>
<h4>Radio禁用动效</h4>
<div>
<nut-cell>
<span slot="title">
<nut-radio :animation="false" v-model="radioVal3" label="b">备选项2</nut-radio>
<nut-radio :animated="false" v-model="radioVal3" label="a">备选项1</nut-radio>
</span>
</nut-cell>
<p>animation属性值为false时，禁用自带动效</p>
</div>
<h4>事件</h4>
<div>
<nut-cell>
<span slot="title">
<nut-radio v-model="radioVal4" label="a" @change="radioChange">备选项1</nut-radio>
<nut-radio :animated="false" v-model="radioVal3" label="b">备选项2</nut-radio>
</span>
</nut-cell>
<p>animated 属性值为 false 时，禁用自带动效</p>
</div>
<h4>RadioGroup禁用动效</h4>
<div>
<nut-cell>
<span slot="title">
<nut-radio v-model="radioVal4" label="b" @change="radioChange">备选项2</nut-radio>
<nut-radiogroup v-model="radioGroupVal4" :animated="false">
<nut-radio label="a">备选项1</nut-radio>
<nut-radio label="b">备选项2</nut-radio>
<nut-radio label="c">备选项3</nut-radio>
</nut-radiogroup>
</span>
</nut-cell>
<p>值发生变化时，将触发change事件</p>
</div>
<h4>自定义Class</h4>
......@@ -98,18 +141,19 @@
export default {
data() {
return {
result: "",
radioVal:1,
radioVal1: 2,
radioVal2: "选中且禁用",
radioVal3: "b",
radioVal4: "b",
radioVal5: "a"
radioVal5: "a",
radioGroupVal1:"b",
radioGroupVal2:"2",
radioGroupVal3:"2",
radioGroupVal4:"c",
};
},
methods: {
radioChange(label) {
alert("选中的是" + label);
}
}
};
</script>
......
src/packages/radio/doc.md
浏览文件 @ 7c84409f
......@@ -2,6 +2,26 @@
## 基本用法
通过 **v-model** 绑定值当前选中项的 **label** ，二者一致时 **Radio** 选中。
```html
<nut-radio
v-model="radioVal"
:label="b"
>备选项1
</nut-radio>
```
```javascript
export default {
data() {
return {
radioVal:"a",
}
}
};
```
## 组合使用
```html
<nut-radio
v-model="radioVal1"
......@@ -15,9 +35,29 @@
>备选项2
</nut-radio>
```
> 组合使用 **Radio** 组件时，推荐使用 **RadioGroup** 组件，按需加载时，别忘了引入哦
```html
<nut-radiogroup v-model="radioGroupVal1">
<nut-radio label="a">备选项1</nut-radio>
<nut-radio label="b">备选项2</nut-radio>
</nut-radiogroup>
```
```javascript
export default {
data() {
return {
radioGroupVal1:"b",
}
}
};
```
## 禁用状态
非选中时的禁用状态
通过给 **disabled** 传布尔值 **false** ，可将组件禁用
```html
<nut-radio
......@@ -28,15 +68,15 @@
</nut-radio>
```
选中时的禁用状态
RadioGroup整体禁用
```html
<nut-radio
:disabled="true"
v-model="radioVal2"
label="选中且禁用"
>备选项2
</nut-radio>
<nut-radiogroup v-model="radioGroupVal2" :disabled="true">
<nut-radio label="1">备选项1</nut-radio>
<nut-radio label="2">备选项2</nut-radio>
<nut-radio label="3">备选项3</nut-radio>
</nut-radiogroup>
```
## 自定义尺寸
......@@ -60,25 +100,45 @@
</nut-radio>
```
自定义RadioGroup整体尺寸
```html
<nut-radiogroup v-model="radioGroupVal3" size="large">
<nut-radio label="1">备选项1</nut-radio>
<nut-radio label="2">备选项2</nut-radio>
<nut-radio label="3">备选项3</nut-radio>
</nut-radiogroup>
```
## 禁用动效
animation属性值为false时，禁用自带动效
通过给 **animated** 传布尔值 **false** ，禁用自带动效
```html
<nut-radio
:animation="false"
:animated="false"
v-model="radioVal3"
label="a"
>备选项1
</nut-radio>
<nut-radio
:animation="false"
:animated="false"
v-model="radioVal3"
label="b"
>备选项2</nut-radio>
```
禁用 **RadioGroup** 动效
```html
<nut-radiogroup v-model="radioGroupVal4" :animated="false">
<nut-radio label="a">备选项1</nut-radio>
<nut-radio label="b">备选项2</nut-radio>
<nut-radio label="c">备选项3</nut-radio>
</nut-radiogroup>
```
## 新增自定义class
```html
......@@ -86,8 +146,11 @@ animation属性值为false时，禁用自带动效
class="my-radio"
>备选项</nut-radio>
```
**RadioGroup** 也支持新增自定义class
## API
## Props
### Radio
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
......@@ -95,10 +158,13 @@ animation属性值为false时，禁用自带动效
| label | 标识符，与v-model值一致时呈选中状态 | 任意类型 | -
| size | 尺寸，可选值small/base/large | String | base
| disabled | 是否禁用 | Boolean | false
| animation | 是否需要动效 | Boolean | true
| animated | 是否需要动效 | Boolean | true
## Event
### RadioGroup
| 字段 | 说明 | 回调参数
|----- | ----- | -----
| change | 值变化时触发 | 当前选中项标识符（label）
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
| v-model | 当前选中项的标识符，与label值一致时呈选中状态 | 任意类型 | -
| size | 尺寸，可选值small/base/large | String | base
| disabled | 是否禁用 | Boolean | false
| animated | 是否需要动效 | Boolean | true
src/packages/radio/index.js
浏览文件 @ 7c84409f
......@@ -6,4 +6,4 @@ Radio.install = function(Vue) {
};
export default Radio
\ No newline at end of file
export default Radio;
\ No newline at end of file
src/packages/radio/radio.vue
浏览文件 @ 7c84409f
<template>
<label :class="['nut-radio','nut-radio-size-'+size]">
<input
type="radio"
:class="{'nut-radio-ani':animation}"
:checked="value===label"
:disabled="disabled"
:label="label"
:value="value"
@change="changeEvt"
<label :class="['nut-radio','nut-radio-size-'+currentSize]" @click="clickEvt">
<input
type="radio"
:value="currentValue"
:class="{'nut-radio-ani':isAnimated}"
:checked="currentValue === label"
:disabled="isDisabled"
:label="label"
>
<span class="nut-radio-label">
<slot></slot>
</span>
</label>
</label>
</template>
<script>
import findCptUpward from "../../mixins/findCptUpward/index.js";
export default {
name: "nut-radio",
mixins: [findCptUpward],
props: {
value: {
type: [String, Number, Boolean],
default: false
},
label:{
type: [String, Number, Boolean]
type: [String, Number, Boolean],
default: false
},
label: [String, Number, Boolean],
size: {
type: String,
default: 'base'
default: "base"
},
disabled: {
type: Boolean,
default: false
},
animation: {
animated: {
type: Boolean,
default: true
}
},
data() {
return {}
return {
parent: null
};
},
computed: {
currentValue: {
get() {
return this.parent ? this.parent.value : this.value;
},
set(val) {
(this.parent || this).$emit("input", val);
}
},
currentSize() {
return this.parent ? this.parent.size || this.size : this.size;
},
isDisabled() {
return this.parent
? this.parent.disabled || this.disabled
: this.disabled;
},
isAnimated() {
return this.parent
? this.parent.animated && this.animated
: this.animated;
}
},
mounted(){
created() {
this.findCptUpward("nut-radiogroup");
},
methods: {
changeEvt(event) {
this.$emit("change", this.label);
this.$emit('input', this.label);
clickEvt(event) {
if (this.isDisabled) {
return false;
}
this.currentValue = this.label;
}
}
};
......
src/packages/radiogroup/demo.vue
浏览文件 @ 7c84409f
<template>
<div>
<nut-radiogroup>
<nut-radio label="禁用">备选项1</nut-radio>
<nut-radio label="禁用2">备选项2</nut-radio>
</nut-radiogroup>
</div>
</template>
......@@ -11,27 +7,7 @@
export default {
data() {
return {
myData:[
{
id:1,
text:'备选项1',
label:'a',
},
{
id:2,
text:'备选项2',
label:'b',
},
{
id:3,
text:'备选项3',
label:'c'
},
]
};
},
methods: {
}
};
</script>
......
src/packages/radiogroup/index.js
浏览文件 @ 7c84409f
import RadioGroup from './radiogroup.vue';
import './radiogroup.scss';
RadioGroup.install = function(Vue) {
Vue.component(RadioGroup.name, RadioGroup);
};
export default RadioGroup
\ No newline at end of file
export default RadioGroup;
\ No newline at end of file
src/packages/radiogroup/radiogroup.vue
浏览文件 @ 7c84409f
<template>
<div class="nut-radiogroup">
<slot></slot>
<!-- <nut-radio v-for="rdo in gData" :key="rdo.id" :label="rdo.label">{{rdo.text}}</nut-radio> -->
</div>
<div class="nut-radiogroup">
<slot></slot>
</div>
</template>
<script>
export default {
name:'nut-radiogroup',
props: {
groupData:{
type:Array,
default(){
return [];
}
}
name: "nut-radiogroup",
props: {
value: {
type: [String, Number, Boolean],
default: false
},
data() {
return {
gData:this.groupData
};
disabled: {
type: Boolean,
default: false
},
methods: {
size: {
type: String,
default: "base"
},
mounted(){
console.log(1234,this);
animated: {
type: Boolean,
default: true
}
}
}
};
</script>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或