Skip to content

Commit d7f8ce1

Browse files
author
tianhaoyun@didiglobal.com
committed
feat: 补充单侧
1 parent e20e80e commit d7f8ce1

14 files changed

Lines changed: 843 additions & 1 deletion

File tree

‎docs/config/sidebar.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,10 @@ module.exports = [
146146
{
147147
title: 'Tip 提示',
148148
path: '/components/base/tip'
149+
},
150+
{
151+
title: 'ActionSheet 操作列表',
152+
path: '/components/base/action-sheet'
149153
}
150154
]
151155
},

‎example/app.mpx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,8 @@
4747
"./pages/float-ball/index",
4848
"./pages/rate/index",
4949
"./pages/switch/index",
50-
"./pages/loading/index"
50+
"./pages/loading/index",
51+
"./pages/action-sheet/index"
5152
]
5253
}
5354
</script>

‎example/common/config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ export default {
7070
'dialog',
7171
'modal',
7272
'tip',
73+
'action-sheet'
7374
]
7475
},
7576
{

‎example/pages/action-sheet/README.md‎

Lines changed: 226 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,226 @@
1+
## Cube-AcitionSheet
2+
3+
<card>
4+
5+
## 介绍
6+
7+
ActionSheet操作列表提供了两种常见的样式，灵活可控内容。
8+
9+
10+
</card>
11+
12+
### 示例
13+
14+
<card>
15+
16+
### 基本用法
17+
18+
配置标题 title 和 data 数据项，data 中内容是 content，一段 HTML 字符串，额外还可以配置自定义 class：class 和方向：align（值可以是 left、right）。
19+
20+
<collapse-wrapper>
21+
22+
```vue
23+
<template>
24+
<view>
25+
<cube-button bindtap="showActionSheet">action-sheet</cube-button>
26+
<cube-action-sheet
27+
wx:ref="actionSheet"
28+
title="{{title}}"
29+
inputData="{{inputData}}"
30+
bindselect="onSelect"
31+
/>
32+
</view>
33+
</template>
34+
35+
<script>
36+
import { createComponent } from '@mpxjs/core'
37+
createComponent({
38+
data() {
39+
return {
40+
inputData: [
41+
{
42+
content: 'align-center',
43+
class: 'cube-foo'
44+
},
45+
{
46+
content: 'align-left',
47+
align: 'left'
48+
},
49+
{
50+
content: 'align-right',
51+
align: 'right'
52+
}
53+
],
54+
selectContent: '',
55+
title: '我是标题'
56+
}
57+
},
58+
methods: {
59+
onSelect(selectData) {
60+
const { item } = selectData.detail
61+
this.selectContent = `Clicked: ${item.content}`
62+
this.$refs.selectToast.show()
63+
},
64+
showActionSheet() {
65+
this.$refs.actionSheet.show()
66+
}
67+
}
68+
})
69+
</script>
70+
```
71+
</collapse-wrapper>
72+
73+
74+
</card>
75+
76+
<card>
77+
78+
### 高亮设置
79+
80+
通过设置 active 属性来控制高亮的是第几个。
81+
82+
<collapse-wrapper>
83+
84+
```vue
85+
<template>
86+
<view>
87+
<cube-button bindtap="showActionSheet">action-sheet-active</cube-button>
88+
<cube-action-sheet
89+
wx:ref="actionSheet"
90+
title="{{title}}"
91+
inputData="{{inputData}}"
92+
active="{{active}}"
93+
bind:select="onSelect"
94+
bind:cancel="onCancel"
95+
/>
96+
<cube-toast
97+
txt="{{ selectContent }}"
98+
wx:ref="selectToast">
99+
</cube-toast>
100+
</view>
101+
</template>
102+
103+
<script>
104+
import { createComponent } from '@mpxjs/core'
105+
createComponent({
106+
data: {
107+
inputData: [
108+
{
109+
content: '舒适型'
110+
},
111+
{
112+
content: '七座商务'
113+
},
114+
{
115+
content: '豪华型'
116+
}
117+
],
118+
active: 0,
119+
selectContent: '',
120+
title: '我是标题'
121+
},
122+
methods: {
123+
onSelect(selectData) {
124+
const { item, index } = selectData.detail
125+
this.selectContent = `Clicked ${item.content}`
126+
this.active = index
127+
this.$refs.selectToast.show()
128+
},
129+
onCancel() {
130+
this.selectContent = 'Clicked canceled '
131+
this.$refs.selectToast.show()
132+
},
133+
showActionSheet() {
134+
this.$refs.actionSheet.show()
135+
},
136+
}
137+
})
138+
</script>
139+
```
140+
</collapse-wrapper>
141+
142+
143+
</card>
144+
145+
<card>
146+
147+
### Picker 样式设定
148+
149+
pickerStyle 属性决定是否使用 Picker 样式。
150+
151+
152+
<collapse-wrapper>
153+
154+
```vue
155+
<template>
156+
<view>
157+
<cube-button bindtap="showActionSheet">action-sheet-picker</cube-button>
158+
<cube-action-sheet
159+
wx:ref="actionSheet"
160+
title="{{ title }}"
161+
inputData="{{inputData}}"
162+
pickerStyle="{{true}}"
163+
bind:select="onSelect"
164+
bind:cancel="onCancel"
165+
/>
166+
<cube-toast
167+
txt="{{ selectContent }}"
168+
wx:ref="selectToast">
169+
</cube-toast>
170+
</view>
171+
</template>
172+
173+
<script>
174+
import { createComponent } from '@mpxjs/core'
175+
createComponent({
176+
data: {
177+
inputData: [
178+
{
179+
content: '舒适型'
180+
},
181+
{
182+
content: '七座商务'
183+
},
184+
{
185+
content: '豪华型'
186+
}
187+
],
188+
selectContent: '',
189+
title: '我是标题'
190+
},
191+
methods: {
192+
onSelect(selectData) {
193+
const { item } = selectData.detail
194+
this.selectContent = `Clicked ${item.content}`
195+
this.$refs.selectToast.show()
196+
},
197+
onCancel() {
198+
this.selectContent = 'Clicked canceled '
199+
this.$refs.selectToast.show()
200+
},
201+
showActionSheet() {
202+
this.$refs.actionSheet.show()
203+
}
204+
}
205+
})
206+
</script>
207+
208+
<style lang="stylus">
209+
.rate-item-demo
210+
width: 100%
211+
height: 100%
212+
background-size: 100%
213+
background-color: grey
214+
.cube-rate-item_active
215+
.cube-rate-item-demo
216+
background-color: orange
217+
.cube-rate-item_half_active
218+
.cube-rate-item-demo
219+
background-color: blue
220+
</style>
221+
222+
```
223+
</collapse-wrapper>
224+
225+
</card>
226+

‎example/pages/action-sheet/action-sheet-active.mpx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<view>
3+
<cube-button bindtap="showActionSheet">action-sheet-active</cube-button>
4+
<cube-action-sheet
5+
wx:ref="actionSheet"
6+
title="我是标题~~~"
7+
inputData="{{inputData}}"
8+
active="{{active}}"
9+
bind:select="onSelect"
10+
bind:cancel="onCancel"
11+
/>
12+
<cube-toast
13+
txt="{{ selectContent }}"
14+
wx:ref="selectToast">
15+
</cube-toast>
16+
</view>
17+
</template>
18+
19+
<script>
20+
import { createComponent } from '@mpxjs/core'
21+
22+
createComponent({
23+
data: {
24+
inputData: [
25+
{
26+
content: '舒适型'
27+
},
28+
{
29+
content: '七座商务'
30+
},
31+
{
32+
content: '豪华型'
33+
}
34+
],
35+
active: 0,
36+
selectContent: ''
37+
},
38+
methods: {
39+
onSelect(selectData) {
40+
const { item, index } = selectData.detail
41+
this.selectContent = `Clicked ${item.content}`
42+
this.active = index
43+
this.$refs.selectToast.show()
44+
},
45+
onCancel() {
46+
this.selectContent = 'Clicked canceled '
47+
this.$refs.selectToast.show()
48+
},
49+
showActionSheet() {
50+
this.$refs.actionSheet.show()
51+
},
52+
}
53+
})
54+
</script>
55+
56+
<style lang="stylus">
57+
58+
</style>
59+
60+
<script type="application/json">
61+
{
62+
"usingComponents": {
63+
"cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index",
64+
"cube-action-sheet": "@mpxjs/mpx-cube-ui/src/components/action-sheet/index",
65+
"cube-toast": "@mpxjs/mpx-cube-ui/src/components/toast/index"
66+
}
67+
}
68+
</script>

‎example/pages/action-sheet/action-sheet-picker.mpx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<view>
3+
<cube-button bindtap="showActionSheet">action-sheet-picker</cube-button>
4+
<cube-action-sheet
5+
wx:ref="actionSheet"
6+
title="我是标题~~~"
7+
inputData="{{inputData}}"
8+
pickerStyle="{{true}}"
9+
bind:select="onSelect"
10+
bind:cancel="onCancel"
11+
/>
12+
<cube-toast
13+
txt="{{ selectContent }}"
14+
wx:ref="selectToast">
15+
</cube-toast>
16+
</view>
17+
</template>
18+
19+
<script>
20+
import { createComponent } from '@mpxjs/core'
21+
22+
createComponent({
23+
data: {
24+
inputData: [
25+
{
26+
content: '舒适型'
27+
},
28+
{
29+
content: '七座商务'
30+
},
31+
{
32+
content: '豪华型'
33+
}
34+
],
35+
selectContent: ''
36+
},
37+
methods: {
38+
onSelect(selectData) {
39+
const { item } = selectData.detail
40+
this.selectContent = `Clicked ${item.content}`
41+
this.$refs.selectToast.show()
42+
},
43+
onCancel() {
44+
this.selectContent = 'Clicked canceled '
45+
this.$refs.selectToast.show()
46+
},
47+
showActionSheet() {
48+
this.$refs.actionSheet.show()
49+
}
50+
}
51+
})
52+
</script>
53+
54+
<style lang="stylus">
55+
56+
</style>
57+
58+
<script type="application/json">
59+
{
60+
"usingComponents": {
61+
"cube-button": "@mpxjs/mpx-cube-ui/src/components/button/index",
62+
"cube-action-sheet": "@mpxjs/mpx-cube-ui/src/components/action-sheet/index",
63+
"cube-toast": "@mpxjs/mpx-cube-ui/src/components/toast/index"
64+
}
65+
}
66+
</script>

0 commit comments

Comments
 (0)