Skip to content

Commit 5f35800

Browse files
zzcrzzcr
authored
feat: enhance the divider dialogbox treemenu function (#2758)
1 parent 6e29e24 commit 5f35800

File tree

90 files changed

+2035
-242
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+2035
-242
lines changed

‎examples/sites/demos/apis/dialog-box.js

+30
Original file line numberDiff line numberDiff line change
@@ -246,6 +246,36 @@ export default {
246246
mode: ['pc'],
247247
pcDemo: 'dialog-width'
248248
},
249+
{
250+
name: 'custom-style',
251+
type: 'string',
252+
defaultValue: ``,
253+
desc: {
254+
'zh-CN': '自定义实现双层抽屉',
255+
'en-US': 'Custom Styles'
256+
},
257+
meta: {
258+
stable: '3.21.0'
259+
},
260+
mode: ['pc', 'mobile-first'],
261+
pcDemo: 'double-dialog-height',
262+
mfDemo: 'double-dialog-height'
263+
},
264+
{
265+
name: 'no-animation',
266+
type: 'string',
267+
defaultValue: ``,
268+
desc: {
269+
'zh-CN': '是否开启动画',
270+
'en-US': 'Indicates whether to enable animation'
271+
},
272+
meta: {
273+
stable: '3.21.0'
274+
},
275+
mode: ['pc', 'mobile-first'],
276+
pcDemo: 'double-dialog-height',
277+
mfDemo: 'double-dialog-height'
278+
},
249279
{
250280
name: 'dialog-transition',
251281
type: 'string',

‎examples/sites/demos/apis/divider.js

+88-9
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,13 @@ export default {
1010
type: 'string',
1111
defaultValue: "'solid'",
1212
desc: {
13-
'zh-CN': '设置分隔线的样式，该属性的可选值为 solid / dashed',
14-
'en-US': 'Set the style of the separator line, with optional values of solid/dashed for this property'
13+
'zh-CN': '设置分隔线的样式，该属性的可选值为 solid / dashed / dotted',
14+
'en-US':
15+
'Set the style of the separator line, with optional values of solid/dashed/dotted for this property'
1516
},
16-
mode: ['pc'],
17-
pcDemo: 'custom-style'
17+
mode: ['pc', 'mobile-first'],
18+
pcDemo: 'custom-style',
19+
mfDemo: 'type'
1820
},
1921
{
2022
name: 'color',
@@ -24,8 +26,9 @@ export default {
2426
'zh-CN': '设置分隔线的颜色',
2527
'en-US': 'Set the color of the divider.'
2628
},
27-
mode: ['pc'],
28-
pcDemo: 'custom-style'
29+
mode: ['pc', 'mobile-first'],
30+
pcDemo: 'custom-style',
31+
mfDemo: 'color'
2932
},
3033
{
3134
name: 'content-background-color',
@@ -58,8 +61,9 @@ export default {
5861
'en-US':
5962
'Set the position of the separator text, with optional values of left/center/right for this attribute'
6063
},
61-
mode: ['pc'],
62-
pcDemo: 'content-position'
64+
mode: ['pc', 'mobile-first'],
65+
pcDemo: 'content-position',
66+
mfDemo: 'content-position'
6367
},
6468
{
6569
name: 'direction',
@@ -70,8 +74,83 @@ export default {
7074
'en-US':
7175
'Set the direction of the divider; the possible values for this property are "horizontal" or "vertical"'
7276
},
77+
mode: ['pc', 'mobile-first'],
78+
pcDemo: 'direction',
79+
mfDemo: 'vertical'
80+
},
81+
{
82+
name: 'margin',
83+
type: 'string',
84+
defaultValue: '',
85+
desc: {
86+
'zh-CN': '设置分割线上下左右的边距',
87+
'en-US': 'Sets the margins of the split line'
88+
},
89+
meta: {
90+
stable: '3.21.0'
91+
},
92+
mode: ['pc', 'mobile-first'],
93+
pcDemo: 'custom-style',
94+
mfDemo: 'divider-margin'
95+
},
96+
{
97+
name: 'offset',
98+
type: 'string',
99+
defaultValue: '',
100+
desc: {
101+
'zh-CN': '设置文本位置偏移量，需同时配合`text-position`属性使用，以确定偏移的方向',
102+
'en-US':
103+
'Sets the text position offset. This parameter must be used together with the `text-position` attribute to determine the offset direction'
104+
},
105+
meta: {
106+
stable: '3.21.0'
107+
},
108+
mode: ['pc', 'mobile-first'],
109+
pcDemo: 'content-position',
110+
mfDemo: 'offset'
111+
},
112+
{
113+
name: 'height',
114+
type: 'string',
115+
defaultValue: '',
116+
desc: {
117+
'zh-CN': '设置整体的高度',
118+
'en-US': 'Sets the overall height'
119+
},
120+
meta: {
121+
stable: '3.21.0'
122+
},
123+
mode: ['pc'],
124+
pcDemo: 'custom-style'
125+
},
126+
{
127+
name: 'font-size',
128+
type: 'string',
129+
defaultValue: '14px',
130+
desc: {
131+
'zh-CN': '文本字体大小',
132+
'en-US': 'Text font size'
133+
},
134+
meta: {
135+
stable: '3.21.0'
136+
},
73137
mode: ['pc'],
74-
pcDemo: 'direction'
138+
pcDemo: 'custom-style'
139+
},
140+
{
141+
name: 'status',
142+
type: 'string',
143+
defaultValue: '',
144+
desc: {
145+
'zh-CN': '分割线状态',
146+
'en-US': 'Splitting Line Status'
147+
},
148+
meta: {
149+
stable: '3.21.0'
150+
},
151+
mode: ['pc', 'mobile-first'],
152+
pcDemo: 'status',
153+
mfDemo: 'status'
75154
}
76155
],
77156
events: [],

‎examples/sites/demos/apis/form.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -219,10 +219,10 @@ export default {
219219
},
220220
{
221221
name: 'validate-on-rule-change',
222-
type: 'boolean',
222+
type: 'boolean | "deep"',
223223
defaultValue: 'true',
224224
desc: {
225-
'zh-CN': '是否在 rules 属性改变后立即触发一次验证',
225+
'zh-CN': '是否在 rules 属性改变后立即触发一次验证（"deep"选项新增于3.21.0）',
226226
'en-US': 'Whether to trigger a verification immediately after the rules attribute is changed'
227227
},
228228
mode: ['pc', 'mobile', 'mobile-first'],

‎examples/sites/demos/mobile-first/app/dialog-box/double-dialog-height.vue

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<template>
2+
<div>
3+
<tiny-button @click="changModdeFn" type="primary">当前为 {{ flag }} 模式</tiny-button>
4+
<tiny-button @click="changFn">双层抽屉 </tiny-button>
5+
<tiny-dialog-box
6+
:visible="boxVisibility"
7+
right-slide
8+
@update:visible="boxVisibility = $event"
9+
title="父弹窗"
10+
width="30%"
11+
:custom-style="customStyle1"
12+
>
13+
<span>父弹窗内容</span>
14+
<tiny-dialog-box
15+
append-to-body
16+
right-slide
17+
:modal="false"
18+
:close-on-click-modal="false"
19+
no-animation
20+
:visible="boxVisibility2"
21+
:custom-style="customStyle2"
22+
@close="dialogClose"
23+
@update:visible="boxVisibility2 = $event"
24+
title="子弹窗"
25+
width="300px"
26+
>
27+
<span>子弹窗内容</span>
28+
<template #footer>
29+
<tiny-button type="primary" @click="boxVisibility2 = false"> 确定 </tiny-button>
30+
</template>
31+
</tiny-dialog-box>
32+
<template #footer>
33+
<tiny-button @click="boxVisibility = false">取消</tiny-button>
34+
<tiny-button type="primary" @click="openDialog"> 子弹窗 </tiny-button>
35+
</template>
36+
</tiny-dialog-box>
37+
</div>
38+
</template>
39+
40+
<script>
41+
import { Button, DialogBox } from '@opentiny/vue'
42+
43+
export default {
44+
components: {
45+
TinyButton: Button,
46+
TinyDialogBox: DialogBox
47+
},
48+
data() {
49+
return {
50+
flag: 'auto',
51+
boxVisibility: false,
52+
customStyle1: {},
53+
customStyle2: {},
54+
boxVisibility2: false
55+
}
56+
},
57+
methods: {
58+
changFn() {
59+
this.boxVisibility = true
60+
},
61+
changModdeFn() {
62+
this.flag = this.flag === 'full' ? 'auto' : 'full'
63+
},
64+
openDialog() {
65+
if (this.flag === 'full') {
66+
this.customStyle1 = {
67+
right: '8px',
68+
bottom: '8px',
69+
top: '8px',
70+
height: 'auto',
71+
borderRadius: '8px',
72+
transition: 'right 0.2s ease-in-out'
73+
}
74+
this.customStyle2 = {
75+
bottom: '8px',
76+
top: '8px',
77+
height: 'auto',
78+
borderRadius: '8px',
79+
opacity: 0
80+
}
81+
const rightW = document.body.offsetWidth * 0.3
82+
this.customStyle1.right = -rightW + 80 + 'px'
83+
this.customStyle2.right = rightW + 'px'
84+
this.customStyle2.transition = 'right 200ms ease-in-out opacity 100ms linear'
85+
this.boxVisibility2 = true
86+
87+
setTimeout(() => {
88+
this.customStyle2.right = '85px'
89+
}, 10)
90+
91+
setTimeout(() => {
92+
this.customStyle2.opacity = 1
93+
}, 100)
94+
} else {
95+
this.customStyle1 = {
96+
right: '8px',
97+
bottom: '8px',
98+
top: '8px',
99+
height: 'auto',
100+
borderRadius: '8px',
101+
transition: 'right 0.2s ease-in-out'
102+
}
103+
this.customStyle2 = {
104+
bottom: '8px',
105+
top: 'unset',
106+
height: 'auto',
107+
borderRadius: '8px',
108+
opacity: 0
109+
}
110+
const rightW = document.body.offsetWidth * 0.3
111+
this.customStyle2.right = rightW + 46 + 'px'
112+
this.customStyle2.transition = 'opacity 100ms linear'
113+
this.boxVisibility2 = true
114+
115+
setTimeout(() => {
116+
this.customStyle2.opacity = 1
117+
}, 100)
118+
}
119+
},
120+
dialogClose() {
121+
setTimeout(() => {
122+
this.customStyle1.right = '8px'
123+
this.customStyle2.opacity = 0
124+
}, 50)
125+
}
126+
}
127+
}
128+
</script>

‎examples/sites/demos/mobile-first/app/dialog-box/webdoc/dialog-box.js

+13
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,19 @@ export default {
8282
'en-US': '<p>code>default</code>: content default slot. <code>footer</code>: bottom slot</p>'
8383
},
8484
codeFiles: ['dialog-slot.vue']
85+
},
86+
{
87+
demoId: 'double-dialog-height',
88+
name: {
89+
'zh-CN': '右侧双层弹框',
90+
'en-US': 'Double-layer dialog box on the right'
91+
},
92+
desc: {
93+
'zh-CN': '右侧弹窗分两种情况，父级弹框自动缩进，子级弹框高度撑满。父级弹框不缩进，子级弹框高度自适应。',
94+
'en-US':
95+
'There are two types of pop-up windows on the right. The parent pop-up boxes are automatically indented, and the child pop-up boxes are full. The parent dialog box is not indented, and the height of the child dialog box is adaptive.'
96+
},
97+
codeFiles: ['double-dialog-height.vue']
8598
}
8699
]
87100
}

‎examples/sites/demos/mobile-first/app/divider/basic-usage.vue

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div>
3+
<p>基础使用</p>
4+
<tiny-divider> </tiny-divider>
5+
<br />
6+
<p>带文本分割线</p>
7+
<tiny-divider> 分割线 </tiny-divider>
8+
</div>
9+
</template>
10+
11+
<script>
12+
import { Divider } from '@opentiny/vue'
13+
14+
export default {
15+
components: {
16+
TinyDivider: Divider
17+
}
18+
}
19+
</script>

‎examples/sites/demos/mobile-first/app/divider/color.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div>
3+
<tiny-divider color="#55ccd9"></tiny-divider>
4+
<br />
5+
<tiny-divider color="#eb74df"> 分割线 </tiny-divider>
6+
</div>
7+
</template>
8+
9+
<script>
10+
import { Divider } from '@opentiny/vue'
11+
12+
export default {
13+
components: {
14+
TinyDivider: Divider
15+
}
16+
}
17+
</script>

‎examples/sites/demos/mobile-first/app/divider/content-position.vue

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<template>
2+
<div>
3+
<tiny-divider> 分割线 </tiny-divider>
4+
<tiny-divider content-position="left"> 分割线 </tiny-divider>
5+
<tiny-divider content-position="right"> 分割线 </tiny-divider>
6+
</div>
7+
</template>
8+
9+
<script>
10+
import { Divider } from '@opentiny/vue'
11+
12+
export default {
13+
components: {
14+
TinyDivider: Divider
15+
}
16+
}
17+
</script>

0 commit comments

Comments
 (0)