Skip to content

N
nutui

京东前端 / nutui

通知 37
Star 4
Fork 1
N
nutui

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

未验证 提交 69ba8cf2 编写于 作者: Y Ymm0008 提交者： GitHub
浏览文件
操作

fix(collapse、radio): 优化样式、文档 (#416) 

* style: 样式修改

* fix: docs props name

* fix: 视觉走查修改

* upd: 折叠面板组件优化

* style: 折叠面板文档修改，单选多选样式调整
Co-authored-by: richard_1015's avatarrichard1015 <51844712@qq.com>
上级 c65ea773
隐藏空白更改
内联 并排
Showing with 168 addition and 80 deletion
src/packages/checkbox/demo.vue
浏览文件 @ 69ba8cf2
......@@ -123,7 +123,7 @@
<nut-checkbox label="选项三"></nut-checkbox>
</nut-checkboxgroup>
</div>
<span>{{ result2 }}</span>
<span>{{ result4 }}</span>
</div>
</div>
</template>
......@@ -156,10 +156,10 @@ export default createDemo({
checkboxGroup7: []
});
const result = reactive({
result1: '',
result2: '',
result3: '',
result4: ''
result1: 'false',
result2: '选中状态选项：',
result3: '选中状态选项：',
result4: '选中状态选项：'
});
const changeBox1 = (state: boolean) => {
data.checkbox1 = state;
......@@ -194,13 +194,18 @@ export default createDemo({
}
});
</script>
<style>
#app {
height: auto;
background: #f6f7f9;
}
</style>
<style lang="scss" scoped>
.demo-list {
margin: 60px 0;
padding: 17px;
margin: 57px 0 60px 0;
padding: 0 17px 17px;
h4 {
margin: 20px 0 10px;
margin: 25px 0 10px;
line-height: 20px;
color: #909ca4;
font-size: 14px;
......@@ -213,7 +218,8 @@ export default createDemo({
box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
p,
span {
margin-top: 10px;
display: block;
margin-top: 15px;
font-size: 14px;
color: #636363;
}
......
src/packages/collapse/demo.vue
浏览文件 @ 69ba8cf2
......@@ -47,7 +47,6 @@
<nut-collapse
v-model:active="active3"
:accordion="true"
:expandIconPosition="expandIconPosition"
icon="arrow-right2"
rotate="90"
>
......@@ -92,7 +91,6 @@ export default createDemo({
active3: 1,
active4: 1,
active5: 1,
expandIconPosition: 'left',
title1: '标题1',
title2: '标题2',
title3: '标题3',
......
src/packages/collapse/doc.md
浏览文件 @ 69ba8cf2
......@@ -5,84 +5,162 @@
通过`v-model`控制展开的面板列表，`activeNames`为数组格式
```html
<nut-collapse v-model="activeNames">
<nut-collapse-item title="标题1" :name="1">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</nut-collapse-item>
<nut-collapse-item title="标题2" :name="2">
京东到家：教师节期间 创意花束销量增长53倍
</nut-collapse-item>
<nut-collapse-item title="标题3" :name="3" disabled>
</nut-collapse-item>
<nut-collapse v-model:active="active1" icon="down-arrow">
<nut-collapse-item :title="title1" :name="1">
京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
</nut-collapse-item>
<nut-collapse-item :title="title2" :name="2">
京东到家：教师节期间 创意花束销量增长53倍
</nut-collapse-item>
<nut-collapse-item :title="title3" :name="3" disabled>
</nut-collapse-item>
</nut-collapse>
```
``` javascript
setup() {
const activeNames = reactive([1, 2]);
const title = reactive({
title1: '标题1',
title2: '标题2',
title3: '标题3',
})
return {
activeNames
activeNames,
...toRefs(title)
};
}
```
### 无icon样式
```html
<nut-collapse v-model:active="activeName" :accordion="true">
<nut-collapse-item :title="title1" :name="1">
2020年中国数字游戏市场规模超2786亿元
</nut-collapse-item>
<nut-collapse-item :title="title2" :name="2">
基于区块链技术的取证APP在浙江省杭州市发布
</nut-collapse-item>
</nut-collapse>
```
``` javascript
setup() {
const activeName = ref(1);
const title = reactive({
title1: '标题1',
title2: '标题2',
title3: '标题3',
})
return {
activeName,
...toRefs(title)
};
}
```
### 手风琴
通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式；`subTitle`可以设置副标题的内容
```html
<nut-collapse v-model="activeName" :accordion="true">
<nut-collapse-item :title="title1" :name="1">
华为终端操作系统EMUI 11发布，9月11日正式开启
</nut-collapse-item>
<nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
中国服务机器人市场已占全球市场超1/4
</nut-collapse-item>
<nut-collapse-item :title="title3" :name="3">
QuestMobile：90后互联网用户规模超越80后达3.62亿
</nut-collapse-item>
<nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
<nut-collapse-item :title="title1" :name="1">
华为终端操作系统EMUI 11发布，9月11日正式开启
</nut-collapse-item>
<nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
中国服务机器人市场已占全球市场超1/4
</nut-collapse-item>
<nut-collapse-item :title="title3" :name="3">
QuestMobile：90后互联网用户规模超越80后达3.62亿
</nut-collapse-item>
</nut-collapse>
```
``` javascript
setup() {
const activeName = ref(1);
const subTitle = '副标题';
const title = reactive({
title1: '标题1',
title2: '标题2',
title3: '标题3',
})
return {
activeName,
subTitle: '副标题'
subTitle,
...toRefs(title)
};
}
```
### 图标展示
### 自定义折叠图标
通过`expandIconPosition`可以设置图标的位置，icon设置自定义图标，rotate设置图标旋转的角度
通过icon设置自定义图标，rotate设置图标旋转的角度
```html
<nut-collapse v-model="activeName" :accordion="true" :expand-icon-position="expandIconPosition" :icon="icon" :rotate="rotate" :icon-width="iconWidth"
:icon-height="iconHeight">
<nut-collapse-item :title="title1" :name="1">
京东数科IPO将引入“绿鞋机制”
</nut-collapse-item>
<nut-collapse-item :title="title2" :name="2">
世界制造业大会开幕，阿里巴巴与安徽合作再升级
</nut-collapse-item>
<nut-collapse
v-model:active="activeName"
:accordion="true"
icon="arrow-right2"
rotate="90"
>
<nut-collapse-item :title="title1" :name="1">
京东数科IPO将引入“绿鞋机制”
</nut-collapse-item>
<nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
世界制造业大会开幕，阿里巴巴与安徽合作再升级
</nut-collapse-item>
</nut-collapse>
```
``` javascript
setup() {
return {
activeName: 1,
expandIconPosition: 'left',
icon: 'https://img11.360buyimg.com/imagetools/jfs/t1/132849/8/9709/550/5f5f0d8aE802abee7/68bd02b3a52c3988.png'
rotate: 180,
iconWidth: '20px',
iconHeight: '20px',
};
}
const activeName = ref(1);
const title = reactive({
title1: '标题1',
title2: '标题2',
})
return {
activeName,
...toRefs(title)
};
```
### 自定义标题图标
通过icon设置自定义图标，rotate设置图标旋转的角度
```html
<nut-collapse
v-model:active="activeName"
title-icon="issue"
title-icon-color="red"
title-icon-size="20px"
title-icon-position="left"
icon="down-arrow"
:accordion="true"
>
<nut-collapse-item :title="title1" :name="1">
“森亿智能”获4亿元D轮融资
</nut-collapse-item>
<nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
快看漫画与全球潮玩集合店X11达成战略合作
</nut-collapse-item>
</nut-collapse>
```
``` javascript
const activeName = ref(1);
const title = reactive({
title1: '标题1',
title2: '标题2',
})
return {
activeName,
...toRefs(title)
};
```
## Collapse Prop
......@@ -91,26 +169,26 @@ setup() {
|----- | ----- | ----- | -----
| v-model | 当前展开面板的 name | 手风琴模式：string \| number<br>非手风琴模式：(string \| number)[] | - |
| accordion | 是否开启手风琴模式 | boolean | false |
| border | 是否显示外边框 | boolean | true |
### Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| change | 切换面板时触发 | 类型与 v-model 绑定的值一致 |
| icon | 图标链接/或使用 NutUI 的 icon | string | ‘’ |
| icon-size | 图标大小 | string | 16px |
| icon-color | 图标颜色 | string | '' |
| sub-title | 标题栏副标题 | string | - |
| title-icon | 标题图标链接/或使用 NutUI 的 icon | string | ‘’ |
| title-icon-size | 标题图标大小 | string | 16px |
| title-icon-color | 标题图标颜色 | string | ’‘ |
| title-icon-position | 标题图标位置 | string | ‘left' |
| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \ number | 180 |
### CollapseItem Prop
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|------|
| title | 标题栏左侧内容 | string | - |
| name | 唯一标识符，必填 | string \ number | -1 |
| expand-icon-position | 标题图标的位置 | string | right |
| title-icon | 标题图标链接 | string | ‘’ 为不展示图标，默认 ‘’ |
| title-icon-width | 标题图标宽度 | string | 13px |
| title-icon-height | 标题图标高度 | string | 13px |
| title-icon-position | 标题图标位置 | string | ‘left' 'right' |
| title | 标题栏左侧内容 | string | - |
| sub-title | 标题栏副标题 | string | - |
| icon | 标题栏自定义图标链接 | string | ‘none’ 为不展示图标，默认 ‘’ |
| icon-width | 标题栏自定义图标宽度 | string | 24px |
| icon-height | 标题栏自定义图标高度 | string | 12px |
| rotate | 点击折叠和展开的旋转角度,在自定义图标模式下生效 | string \ number | 180 |
\ No newline at end of file
| disabled | 标题栏是否禁用 | boolean | false |
### Events
| 事件名 | 说明 | 回调参数 |
|------|------|------|
| change | 切换面板时触发 | 类型与 v-model 绑定的值一致 |
\ No newline at end of file
src/packages/collapse/index.vue
浏览文件 @ 69ba8cf2
......@@ -17,10 +17,10 @@ export default create({
accordion: {
type: Boolean
},
expandIconPosition: {
type: String,
default: 'right'
},
// expandIconPosition: {
// type: String,
// default: 'right'
// },
titleIcon: {
type: String,
default: ''
......
src/packages/collapseitem/index.vue
浏览文件 @ 69ba8cf2
......@@ -91,7 +91,7 @@ export default create({
const prefixCls = componentName;
return {
[prefixCls]: true,
[`${prefixCls}-left`]: parent.props.classDirection === 'left',
// [`${prefixCls}-left`]: parent.props.classDirection === 'left',
[`${prefixCls}-icon`]: parent.props.icon
};
});
......@@ -106,7 +106,7 @@ export default create({
iconSize: parent.props.iconSize,
iconColor: parent.props.iconColor,
openExpanded: false,
classDirection: 'right',
// classDirection: 'right',
iconStyle: {
transform: 'rotate(0deg)',
marginTop: parent.props.iconHeght
......@@ -230,7 +230,7 @@ export default create({
}
}
proxyData.classDirection = parent.props.expandIconPosition;
// proxyData.classDirection = parent.props.expandIconPosition;
// if (parent.props.icon && parent.props.icon != 'none') {
// proxyData.iconStyle['background-image'] =
// 'url(' + parent.props.icon + ')';
......
src/packages/radio/demo.vue
浏览文件 @ 69ba8cf2
......@@ -124,12 +124,18 @@ export default createDemo({
});
</script>
<style>
#app {
height: auto;
background: #f6f7f9;
}
</style>
<style lang="scss" scoped>
.demo-list {
padding-top: 0;
margin: 60px 0;
margin: 57px 0 60px 0;
padding: 0 17px 17px;
h4 {
margin: 20px 0 10px 25px;
margin: 25px 0 10px;
line-height: 20px;
color: #909ca4;
font-size: 14px;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或