@didaoktv/didaoui-uniapp 1.3.4 → 1.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/components/dd-action-sheet/dd-action-sheet.vue +3 -0
- package/components/dd-alert/dd-alert.vue +3 -0
- package/components/dd-car-keyboard/carPlate.ts +47 -0
- package/components/dd-car-keyboard/dd-car-keyboard.vue +289 -288
- package/components/dd-cell-group/dd-cell-group.vue +0 -1
- package/components/dd-date-picker/dd-date-picker.vue +3 -0
- package/components/dd-dialog/dd-dialog.vue +22 -13
- package/components/dd-drawer/dd-drawer.vue +3 -0
- package/components/dd-dropdown-item/dd-dropdown-item.vue +3 -0
- package/components/dd-dropdown-menu/dd-dropdown-menu.vue +3 -0
- package/components/dd-keyboard/dd-keyboard.vue +5 -14
- package/components/dd-keyboard/keyboard.js +1 -2
- package/components/dd-keyboard/props.js +0 -5
- package/components/dd-loading/dd-loading.vue +5 -1
- package/components/dd-modal/dd-modal.vue +3 -0
- package/components/dd-number-keyboard/dd-number-keyboard.vue +30 -27
- package/components/dd-overlay/dd-overlay.vue +3 -0
- package/components/dd-picker/dd-picker.vue +3 -0
- package/components/dd-popup/dd-popup.vue +4 -0
- package/components/dd-portal/dd-portal.vue +22 -0
- package/components/dd-toast/dd-toast.vue +3 -0
- package/index.ts +4 -3
- package/libs/config/props.js +0 -1
- package/libs/config/zIndex.d.ts +14 -0
- package/libs/config/zIndex.js +3 -0
- package/package.json +1 -1
- package/components/dd-car-keyboard/carKeyboard.js +0 -6
- package/components/dd-car-keyboard/props.js +0 -19
|
@@ -1,15 +1,18 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
2
|
+
<!-- 内容经 portal 提升到页面根节点:规避 transform 祖先劫持 fixed 定位(详见 dd-portal 组件) -->
|
|
3
|
+
<dd-portal>
|
|
4
|
+
<view class="dd-dialog">
|
|
5
|
+
<view
|
|
6
|
+
class="dd-dialog__mask"
|
|
7
|
+
:class="{ 'dd-dialog__mask--show': modelValue }"
|
|
8
|
+
:style="{ zIndex: maskZIndex }"
|
|
9
|
+
@click="onOverlayClick"
|
|
10
|
+
></view>
|
|
11
|
+
<view
|
|
12
|
+
class="dd-dialog__card"
|
|
13
|
+
:class="[{ 'dd-dialog__card--show': modelValue }, `dd-dialog__card--${theme}`]"
|
|
14
|
+
:style="{ width: widthValue, maxWidth: '92vw', zIndex: cardZIndex }"
|
|
15
|
+
>
|
|
13
16
|
<view v-if="title" class="dd-dialog__header">
|
|
14
17
|
<text class="dd-dialog__title">{{ title }}</text>
|
|
15
18
|
</view>
|
|
@@ -55,10 +58,17 @@
|
|
|
55
58
|
</view>
|
|
56
59
|
</view>
|
|
57
60
|
</view>
|
|
61
|
+
</dd-portal>
|
|
58
62
|
</template>
|
|
59
63
|
|
|
60
64
|
<script setup lang="ts">
|
|
61
65
|
import { computed } from 'vue'
|
|
66
|
+
import zIndexConfig from '../../libs/config/zIndex.js'
|
|
67
|
+
import DdPortal from '../dd-portal/dd-portal.vue'
|
|
68
|
+
|
|
69
|
+
/* z-index 统一取 libs/config/zIndex.js(弹窗需压在 popup 面板之上、toast 之下) */
|
|
70
|
+
const maskZIndex = zIndexConfig.dialogMask
|
|
71
|
+
const cardZIndex = zIndexConfig.dialog
|
|
62
72
|
|
|
63
73
|
interface Props {
|
|
64
74
|
modelValue?: boolean
|
|
@@ -148,7 +158,7 @@ function onCancel() {
|
|
|
148
158
|
background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
|
|
149
159
|
opacity: 0;
|
|
150
160
|
visibility: hidden;
|
|
151
|
-
z-index
|
|
161
|
+
/* z-index 由 script 注入(libs/config/zIndex.js) */
|
|
152
162
|
@include dd-transition(opacity 0.3s ease, visibility 0.3s);
|
|
153
163
|
|
|
154
164
|
&--show {
|
|
@@ -164,7 +174,6 @@ function onCancel() {
|
|
|
164
174
|
transform: translate(-50%, -50%) scale(0.9);
|
|
165
175
|
opacity: 0;
|
|
166
176
|
visibility: hidden;
|
|
167
|
-
z-index: 2001;
|
|
168
177
|
background: var(--dd-bg-elevated, #{$dd-bg-elevated});
|
|
169
178
|
border: 1px solid var(--dd-border-default, #{$dd-border-default});
|
|
170
179
|
border-radius: $dd-radius-lg;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
+
<dd-portal>
|
|
2
3
|
<view class="dd-drawer">
|
|
3
4
|
<view
|
|
4
5
|
class="dd-drawer__mask"
|
|
@@ -36,10 +37,12 @@
|
|
|
36
37
|
</scroll-view>
|
|
37
38
|
</view>
|
|
38
39
|
</view>
|
|
40
|
+
</dd-portal>
|
|
39
41
|
</template>
|
|
40
42
|
|
|
41
43
|
<script setup lang="ts">
|
|
42
44
|
import { watch } from 'vue'
|
|
45
|
+
import DdPortal from '../dd-portal/dd-portal.vue'
|
|
43
46
|
|
|
44
47
|
interface Props {
|
|
45
48
|
modelValue?: boolean
|
|
@@ -13,6 +13,7 @@
|
|
|
13
13
|
:class="{ 'dd-dropdown-item__arrow--open': isOpen }"
|
|
14
14
|
/>
|
|
15
15
|
</view>
|
|
16
|
+
<dd-portal>
|
|
16
17
|
<view
|
|
17
18
|
v-if="ctx"
|
|
18
19
|
class="dd-dropdown-item__panel"
|
|
@@ -41,11 +42,13 @@
|
|
|
41
42
|
</view>
|
|
42
43
|
</scroll-view>
|
|
43
44
|
</view>
|
|
45
|
+
</dd-portal>
|
|
44
46
|
</view>
|
|
45
47
|
</template>
|
|
46
48
|
|
|
47
49
|
<script setup lang="ts">
|
|
48
50
|
import { computed, inject, ref } from 'vue'
|
|
51
|
+
import DdPortal from '../dd-portal/dd-portal.vue'
|
|
49
52
|
import DdIcon from '../dd-icon/dd-icon.vue'
|
|
50
53
|
|
|
51
54
|
interface DropdownOption {
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
<view class="dd-dropdown__bar">
|
|
4
4
|
<slot></slot>
|
|
5
5
|
</view>
|
|
6
|
+
<dd-portal>
|
|
6
7
|
<view
|
|
7
8
|
v-if="overlay"
|
|
8
9
|
class="dd-dropdown__overlay"
|
|
@@ -10,6 +11,7 @@
|
|
|
10
11
|
:style="overlayStyle"
|
|
11
12
|
@click="onOverlayClick"
|
|
12
13
|
></view>
|
|
14
|
+
</dd-portal>
|
|
13
15
|
</view>
|
|
14
16
|
</template>
|
|
15
17
|
|
|
@@ -21,6 +23,7 @@ let activeMenuClose: (() => void) | null = null
|
|
|
21
23
|
|
|
22
24
|
<script setup lang="ts">
|
|
23
25
|
import { getCurrentInstance, onMounted, onUnmounted, provide, reactive, ref } from 'vue'
|
|
26
|
+
import DdPortal from '../dd-portal/dd-portal.vue'
|
|
24
27
|
|
|
25
28
|
interface Props {
|
|
26
29
|
activeColor?: string
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
<text
|
|
30
30
|
v-if="showTips"
|
|
31
31
|
class="dd-keyboard__tooltip__item dd-keyboard__tooltip__tips"
|
|
32
|
-
>{{tips ? tips : mode == 'number' ? '数字键盘' :
|
|
32
|
+
>{{tips ? tips : mode == 'number' ? '数字键盘' : '身份证键盘'}}</text>
|
|
33
33
|
</view>
|
|
34
34
|
<view
|
|
35
35
|
hover-class="dd-keyboard-hover"
|
|
@@ -42,23 +42,14 @@
|
|
|
42
42
|
>{{showConfirm && confirmText}}</text>
|
|
43
43
|
</view>
|
|
44
44
|
</view>
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
<!-- 车牌号输入已独立为 dd-car-keyboard(车牌格子+按位锁键键盘一体),此处仅保留 number/card 数字键盘 -->
|
|
46
|
+
<dd-number-keyboard
|
|
47
47
|
:random="random"
|
|
48
48
|
@backspace="backspace"
|
|
49
49
|
@change="change"
|
|
50
50
|
:mode="mode"
|
|
51
51
|
:dotDisabled="dotDisabled"
|
|
52
52
|
></dd-number-keyboard>
|
|
53
|
-
</template>
|
|
54
|
-
<template v-else>
|
|
55
|
-
<dd-car-keyboard
|
|
56
|
-
:random="random"
|
|
57
|
-
:autoChange="autoChange"
|
|
58
|
-
@backspace="backspace"
|
|
59
|
-
@change="change"
|
|
60
|
-
></dd-car-keyboard>
|
|
61
|
-
</template>
|
|
62
53
|
</view>
|
|
63
54
|
</dd-popup>
|
|
64
55
|
</template>
|
|
@@ -70,8 +61,8 @@
|
|
|
70
61
|
|
|
71
62
|
/**
|
|
72
63
|
* keyboard 键盘
|
|
73
|
-
* @description
|
|
74
|
-
* @property {String} mode
|
|
64
|
+
* @description 自定义的键盘面板,内含了数字键盘,身份证号键盘2种模式,都有可以打乱按键顺序的选项。车牌号输入请使用 dd-car-keyboard。
|
|
65
|
+
* @property {String} mode 键盘类型:number-数字键盘,card-身份证键盘 (默认 'number' )
|
|
75
66
|
* @property {Boolean} dotDisabled 是否显示"."按键,只在mode=number时有效 (默认 false )
|
|
76
67
|
* @property {Boolean} tooltip 是否显示键盘顶部工具条 (默认 true )
|
|
77
68
|
* @property {Boolean} showTips 是否显示工具条中间的提示 (默认 true )
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
|
|
2
|
+
<!-- 仅全屏分支传送;inline 分支必须留在原位(传送会破坏布局流) -->
|
|
3
|
+
<dd-portal v-if="fullscreen">
|
|
4
|
+
<view class="dd-loading dd-loading--fullscreen" :style="{ zIndex: 9999 }">
|
|
3
5
|
<view class="dd-loading__mask"></view>
|
|
4
6
|
<view class="dd-loading__box">
|
|
5
7
|
<view class="dd-loading__core" :class="[`dd-loading__core--${type}`, `dd-loading__core--${size}`]" :style="coreStyle">
|
|
@@ -17,6 +19,7 @@
|
|
|
17
19
|
<text v-if="text" class="dd-loading__text">{{ text }}</text>
|
|
18
20
|
</view>
|
|
19
21
|
</view>
|
|
22
|
+
</dd-portal>
|
|
20
23
|
<view v-else class="dd-loading" :class="[`dd-loading--inline`, `dd-loading--${type}`, `dd-loading--${size}`]">
|
|
21
24
|
<view class="dd-loading__core" :class="[`dd-loading__core--${type}`, `dd-loading__core--${size}`]" :style="coreStyle">
|
|
22
25
|
<template v-if="type === 'spinner'">
|
|
@@ -36,6 +39,7 @@
|
|
|
36
39
|
|
|
37
40
|
<script setup lang="ts">
|
|
38
41
|
import { computed } from 'vue'
|
|
42
|
+
import DdPortal from '../dd-portal/dd-portal.vue'
|
|
39
43
|
|
|
40
44
|
interface Props {
|
|
41
45
|
type?: 'spinner' | 'dots' | 'pulse'
|
|
@@ -4,6 +4,7 @@ let activeModalClose: (() => void) | null = null
|
|
|
4
4
|
</script>
|
|
5
5
|
|
|
6
6
|
<template>
|
|
7
|
+
<dd-portal>
|
|
7
8
|
<view class="dd-modal">
|
|
8
9
|
<view
|
|
9
10
|
v-if="visible"
|
|
@@ -56,10 +57,12 @@ let activeModalClose: (() => void) | null = null
|
|
|
56
57
|
<view class="dd-modal__safe-bottom"></view>
|
|
57
58
|
</view>
|
|
58
59
|
</view>
|
|
60
|
+
</dd-portal>
|
|
59
61
|
</template>
|
|
60
62
|
|
|
61
63
|
<script setup lang="ts">
|
|
62
64
|
import { computed, ref, watch, onUnmounted, nextTick } from 'vue'
|
|
65
|
+
import DdPortal from '../dd-portal/dd-portal.vue'
|
|
63
66
|
import DdIcon from '../dd-icon/dd-icon.vue'
|
|
64
67
|
|
|
65
68
|
interface Props {
|
|
@@ -10,6 +10,7 @@
|
|
|
10
10
|
>
|
|
11
11
|
<view
|
|
12
12
|
class="dd-keyboard__button-wrapper__button"
|
|
13
|
+
:class="[btnBgGray(index) && 'dd-keyboard__button-wrapper__button--gray']"
|
|
13
14
|
:style="[itemStyle(index)]"
|
|
14
15
|
@tap="keyboardClick(item)"
|
|
15
16
|
hover-class="dd-keyboard-hover"
|
|
@@ -25,8 +26,10 @@
|
|
|
25
26
|
class="dd-keyboard__button-wrapper__button dd-keyboard__button-wrapper__button--gray"
|
|
26
27
|
hover-class="dd-keyboard-hover"
|
|
27
28
|
:hover-stay-time="200"
|
|
28
|
-
@touchstart.stop="
|
|
29
|
+
@touchstart.stop="backspaceTouchStart"
|
|
29
30
|
@touchend="clearTimer"
|
|
31
|
+
@touchcancel="clearTimer"
|
|
32
|
+
@tap="backspaceTap"
|
|
30
33
|
>
|
|
31
34
|
<dd-icon
|
|
32
35
|
name="backspace"
|
|
@@ -61,6 +64,7 @@
|
|
|
61
64
|
backspace: 'backspace', // 退格键内容
|
|
62
65
|
dot: '.', // 点
|
|
63
66
|
timer: null, // 长按多次删除的事件监听
|
|
67
|
+
isTouch: false, // 本次退格是否来自触摸(防 tap 重复删除)
|
|
64
68
|
cardX: 'X' // 身份证的X符号
|
|
65
69
|
};
|
|
66
70
|
},
|
|
@@ -88,15 +92,15 @@
|
|
|
88
92
|
}
|
|
89
93
|
}
|
|
90
94
|
},
|
|
91
|
-
// 按键的样式,在非乱序&&数字键盘&&不显示点按钮时,index为9
|
|
95
|
+
// 按键的样式,在非乱序&&数字键盘&&不显示点按钮时,index为9时,"0"键占位两个空间(flex 拉伸为 2 倍宽)
|
|
92
96
|
itemStyle() {
|
|
93
97
|
return index => {
|
|
94
98
|
let style = {};
|
|
95
|
-
if (this.mode == 'number' && this.dotDisabled && index == 9) style.
|
|
99
|
+
if (this.mode == 'number' && this.dotDisabled && index == 9) style.flex = '2 1 30%';
|
|
96
100
|
return style;
|
|
97
101
|
};
|
|
98
102
|
},
|
|
99
|
-
//
|
|
103
|
+
// 是否让按键显示灰色,只在非乱序&&数字键盘&&且允许点按键的时候("."键 / 身份证"X"键)
|
|
100
104
|
btnBgGray() {
|
|
101
105
|
return index => {
|
|
102
106
|
if (!this.random && index == 9 && (this.mode != 'number' || (this.mode == 'number' && !this
|
|
@@ -109,8 +113,9 @@
|
|
|
109
113
|
},
|
|
110
114
|
emits: ["backspace", "change"],
|
|
111
115
|
methods: {
|
|
112
|
-
//
|
|
113
|
-
|
|
116
|
+
// 点击退格键(触摸路径:touchstart 立删 + 长按连删;鼠标路径:tap 单删,isTouch 防移动端触摸后 tap 二次删除)
|
|
117
|
+
backspaceTouchStart() {
|
|
118
|
+
this.isTouch = true
|
|
114
119
|
this.$emit('backspace');
|
|
115
120
|
clearInterval(this.timer); //再次清空定时器,防止重复注册定时器
|
|
116
121
|
this.timer = null;
|
|
@@ -118,6 +123,13 @@
|
|
|
118
123
|
this.$emit('backspace');
|
|
119
124
|
}, 250);
|
|
120
125
|
},
|
|
126
|
+
backspaceTap() {
|
|
127
|
+
if (this.isTouch) {
|
|
128
|
+
this.isTouch = false;
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
this.$emit('backspace');
|
|
132
|
+
},
|
|
121
133
|
clearTimer() {
|
|
122
134
|
clearInterval(this.timer);
|
|
123
135
|
this.timer = null;
|
|
@@ -137,12 +149,8 @@
|
|
|
137
149
|
@import '../../scss/dd-shared';
|
|
138
150
|
$dd-number-keyboard-background-color: var(--dd-bg-section, #{$dd-bg-section}) !default;
|
|
139
151
|
$dd-number-keyboard-padding:8px 10rpx 8px 10rpx !default;
|
|
140
|
-
$dd-number-keyboard-
|
|
141
|
-
$dd-number-keyboard-button-
|
|
142
|
-
$dd-number-keyboard-button-border-top-left-radius:4px !default;
|
|
143
|
-
$dd-number-keyboard-button-border-top-right-radius:4px !default;
|
|
144
|
-
$dd-number-keyboard-button-border-bottom-left-radius:4px !default;
|
|
145
|
-
$dd-number-keyboard-button-border-bottom-right-radius:4px !default;
|
|
152
|
+
$dd-number-keyboard-gap:6rpx !default;
|
|
153
|
+
$dd-number-keyboard-button-border-radius:var(--dd-radius-sm, #{$dd-radius-sm}) !default;
|
|
146
154
|
$dd-number-keyboard-button-height: 90rpx!default;
|
|
147
155
|
$dd-number-keyboard-button-background-color:var(--dd-surface-container-high, #{$dd-surface-container-high}) !default;
|
|
148
156
|
$dd-number-keyboard-button-box-shadow:0 2px 0px var(--dd-bg, #{$dd-bg}) !default;
|
|
@@ -155,30 +163,25 @@
|
|
|
155
163
|
.dd-keyboard {
|
|
156
164
|
@include flex;
|
|
157
165
|
flex-direction: row;
|
|
158
|
-
justify-content: space-around;
|
|
159
|
-
background-color: $dd-number-keyboard-background-color;
|
|
160
166
|
flex-wrap: wrap;
|
|
167
|
+
gap: $dd-number-keyboard-gap;
|
|
168
|
+
background-color: $dd-number-keyboard-background-color;
|
|
161
169
|
padding: $dd-number-keyboard-padding;
|
|
162
170
|
|
|
171
|
+
// ponytail: 弹性三等分替代固定 222rpx 宽——容器宽度不足 702rpx 时固定宽会挤成 2 列
|
|
163
172
|
&__button-wrapper {
|
|
173
|
+
flex: 1 1 30%;
|
|
164
174
|
box-shadow: $dd-number-keyboard-button-box-shadow;
|
|
165
|
-
|
|
166
|
-
border-top-left-radius: $dd-number-keyboard-button-border-top-left-radius;
|
|
167
|
-
border-top-right-radius: $dd-number-keyboard-button-border-top-right-radius;
|
|
168
|
-
border-bottom-left-radius: $dd-number-keyboard-button-border-bottom-left-radius;
|
|
169
|
-
border-bottom-right-radius: $dd-number-keyboard-button-border-bottom-right-radius;
|
|
175
|
+
border-radius: $dd-number-keyboard-button-border-radius;
|
|
170
176
|
|
|
171
177
|
&__button {
|
|
172
|
-
width:
|
|
178
|
+
width: 100%;
|
|
173
179
|
height: $dd-number-keyboard-button-height;
|
|
174
180
|
background-color: $dd-number-keyboard-button-background-color;
|
|
175
181
|
@include flex;
|
|
176
182
|
justify-content: center;
|
|
177
183
|
align-items: center;
|
|
178
|
-
border-
|
|
179
|
-
border-top-right-radius: $dd-number-keyboard-button-border-top-right-radius;
|
|
180
|
-
border-bottom-left-radius: $dd-number-keyboard-button-border-bottom-left-radius;
|
|
181
|
-
border-bottom-right-radius: $dd-number-keyboard-button-border-bottom-right-radius;
|
|
184
|
+
border-radius: $dd-number-keyboard-button-border-radius;
|
|
182
185
|
|
|
183
186
|
&__text {
|
|
184
187
|
font-size: $dd-number-keyboard-text-font-size;
|
|
@@ -187,9 +190,9 @@
|
|
|
187
190
|
}
|
|
188
191
|
|
|
189
192
|
&--gray {
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
+
background-color: $dd-number-keyboard-gray-background-color;
|
|
194
|
+
color: $dd-number-keyboard-text-color; // 退格图标 color=inherit,由此处控制
|
|
195
|
+
}
|
|
193
196
|
}
|
|
194
197
|
}
|
|
195
198
|
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
+
<dd-portal>
|
|
2
3
|
<view
|
|
3
4
|
class="dd-overlay"
|
|
4
5
|
:class="{ 'dd-overlay--show': modelValue }"
|
|
@@ -9,10 +10,12 @@
|
|
|
9
10
|
>
|
|
10
11
|
<slot></slot>
|
|
11
12
|
</view>
|
|
13
|
+
</dd-portal>
|
|
12
14
|
</template>
|
|
13
15
|
|
|
14
16
|
<script setup lang="ts">
|
|
15
17
|
import { watch } from 'vue'
|
|
18
|
+
import DdPortal from '../dd-portal/dd-portal.vue'
|
|
16
19
|
|
|
17
20
|
interface Props {
|
|
18
21
|
modelValue?: boolean
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
+
<dd-portal>
|
|
2
3
|
<view class="dd-picker" :class="{ 'dd-picker--open': show }">
|
|
3
4
|
<view class="dd-picker__mask" @click="onMaskClick"></view>
|
|
4
5
|
<view class="dd-picker__sheet">
|
|
@@ -26,10 +27,12 @@
|
|
|
26
27
|
</view>
|
|
27
28
|
</view>
|
|
28
29
|
</view>
|
|
30
|
+
</dd-portal>
|
|
29
31
|
</template>
|
|
30
32
|
|
|
31
33
|
<script setup lang="ts">
|
|
32
34
|
import { computed, ref, watch } from 'vue'
|
|
35
|
+
import DdPortal from '../dd-portal/dd-portal.vue'
|
|
33
36
|
|
|
34
37
|
interface PickerItem {
|
|
35
38
|
text: string
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
|
+
<!-- 内容经 portal 提升到页面根节点:popup 可安全嵌套进另一弹层/transform 祖先,不被其劫持 fixed 定位(详见 dd-portal 组件) -->
|
|
3
|
+
<dd-portal>
|
|
2
4
|
<view class="dd-popup" :style="{ '--dd-popup-duration': `${props.duration}s` }">
|
|
3
5
|
<view
|
|
4
6
|
v-if="visible && overlay"
|
|
@@ -24,11 +26,13 @@
|
|
|
24
26
|
<slot></slot>
|
|
25
27
|
</view>
|
|
26
28
|
</view>
|
|
29
|
+
</dd-portal>
|
|
27
30
|
</template>
|
|
28
31
|
|
|
29
32
|
<script setup lang="ts">
|
|
30
33
|
import { computed, ref, watch, onUnmounted, nextTick } from 'vue'
|
|
31
34
|
import DdIcon from '../dd-icon/dd-icon.vue'
|
|
35
|
+
import DdPortal from '../dd-portal/dd-portal.vue'
|
|
32
36
|
|
|
33
37
|
interface Props {
|
|
34
38
|
modelValue?: boolean
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<!-- 弹层传送适配器:把插槽内容提升到页面根节点,规避 transform / filter / backdrop-filter 祖先
|
|
3
|
+
对 position:fixed 的包含块劫持(如弹层嵌在 dd-popup 面板内时,fixed 会被 popup 的
|
|
4
|
+
常驻 transform 捕获,导致弹窗相对面板而非视口定位、遮罩只盖住面板)。
|
|
5
|
+
库内消费方:dd-dialog / dd-popup / dd-modal / dd-alert / dd-action-sheet / dd-drawer /
|
|
6
|
+
dd-toast / dd-loading(全屏) / dd-overlay / dd-picker / dd-date-picker / dd-dropdown-menu / dd-dropdown-item -->
|
|
7
|
+
<!-- #ifdef H5 -->
|
|
8
|
+
<Teleport to="body">
|
|
9
|
+
<slot></slot>
|
|
10
|
+
</Teleport>
|
|
11
|
+
<!-- #endif -->
|
|
12
|
+
<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
|
|
13
|
+
<root-portal>
|
|
14
|
+
<slot></slot>
|
|
15
|
+
</root-portal>
|
|
16
|
+
<!-- #endif -->
|
|
17
|
+
<!-- #ifndef H5 || MP-WEIXIN || MP-ALIPAY -->
|
|
18
|
+
<!-- ponytail: 其余平台(App/抖音等)无等价传送能力,原位渲染保持旧行为;
|
|
19
|
+
这些平台上弹层勿嵌在 transform 祖先(如 dd-popup 面板)内 -->
|
|
20
|
+
<slot></slot>
|
|
21
|
+
<!-- #endif -->
|
|
22
|
+
</template>
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
+
<dd-portal>
|
|
2
3
|
<view class="dd-toast" :class="[`dd-toast--${toastState.position}`, { 'dd-toast--show': toastState.visible }]">
|
|
3
4
|
<view class="dd-toast__capsule">
|
|
4
5
|
<view v-if="showIcon" class="dd-toast__icon">
|
|
@@ -8,6 +9,7 @@
|
|
|
8
9
|
<text v-if="toastState.message" class="dd-toast__msg">{{ toastState.message }}</text>
|
|
9
10
|
</view>
|
|
10
11
|
</view>
|
|
12
|
+
</dd-portal>
|
|
11
13
|
</template>
|
|
12
14
|
|
|
13
15
|
<script lang="ts">
|
|
@@ -77,6 +79,7 @@ export function showError(message: string) {
|
|
|
77
79
|
|
|
78
80
|
<script setup lang="ts">
|
|
79
81
|
import { computed } from 'vue'
|
|
82
|
+
import DdPortal from '../dd-portal/dd-portal.vue'
|
|
80
83
|
import DdIcon from '../dd-icon/dd-icon.vue'
|
|
81
84
|
|
|
82
85
|
// text 类型强制隐藏图标
|
package/index.ts
CHANGED
|
@@ -75,7 +75,8 @@ import DdCoupon from './components/dd-coupon/dd-coupon.vue'
|
|
|
75
75
|
import DdParse from './components/dd-parse/dd-parse.vue'
|
|
76
76
|
import DdMarkdown from './components/dd-markdown/dd-markdown.vue'
|
|
77
77
|
|
|
78
|
-
// === Overlay (
|
|
78
|
+
// === Overlay (11) ===
|
|
79
|
+
import DdPortal from './components/dd-portal/dd-portal.vue'
|
|
79
80
|
import DdModal from './components/dd-modal/dd-modal.vue'
|
|
80
81
|
import DdActionSheet from './components/dd-action-sheet/dd-action-sheet.vue'
|
|
81
82
|
import DdToast from './components/dd-toast/dd-toast.vue'
|
|
@@ -119,7 +120,7 @@ const components = {
|
|
|
119
120
|
DdImage, DdProgress, DdSkeleton, DdEmptyState, DdStep, DdSteps,
|
|
120
121
|
DdText, DdLink, DdCopy, DdAlbum, DdCoupon, DdParse, DdMarkdown,
|
|
121
122
|
DdModal, DdActionSheet, DdToast, DdAlert, DdLoading,
|
|
122
|
-
DdDialog, DdOverlay, DdPopup, DdPopover, DdPopoverItem,
|
|
123
|
+
DdPortal, DdDialog, DdOverlay, DdPopup, DdPopover, DdPopoverItem,
|
|
123
124
|
DdSwipeAction, DdSwipe, DdSwipeItem, DdPullRefresh, DdLoadmore,
|
|
124
125
|
DdCapsuleButton, DdMiniProgramNavbar,
|
|
125
126
|
DdCanvas, DdBarcode, DdCropper, DdSignature, DdPoster,
|
|
@@ -149,7 +150,7 @@ export {
|
|
|
149
150
|
DdImage, DdProgress, DdSkeleton, DdEmptyState, DdStep, DdSteps,
|
|
150
151
|
DdText, DdLink, DdCopy, DdAlbum, DdCoupon, DdParse, DdMarkdown,
|
|
151
152
|
DdModal, DdActionSheet, DdToast, DdAlert, DdLoading,
|
|
152
|
-
DdDialog, DdOverlay, DdPopup, DdPopover, DdPopoverItem,
|
|
153
|
+
DdPortal, DdDialog, DdOverlay, DdPopup, DdPopover, DdPopoverItem,
|
|
153
154
|
DdSwipeAction, DdSwipe, DdSwipeItem, DdPullRefresh, DdLoadmore,
|
|
154
155
|
DdCapsuleButton, DdMiniProgramNavbar,
|
|
155
156
|
DdCanvas, DdBarcode, DdCropper, DdSignature, DdPoster,
|
package/libs/config/props.js
CHANGED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// libs/config/zIndex.js 的类型声明(该库多为 JS 文件,allowJs 未开启,TS 侧导入需要此声明)
|
|
2
|
+
declare const zIndex: {
|
|
3
|
+
toast: number
|
|
4
|
+
noNetwork: number
|
|
5
|
+
popup: number
|
|
6
|
+
mask: number
|
|
7
|
+
dialogMask: number
|
|
8
|
+
dialog: number
|
|
9
|
+
navbar: number
|
|
10
|
+
topTips: number
|
|
11
|
+
sticky: number
|
|
12
|
+
indexListSticky: number
|
|
13
|
+
}
|
|
14
|
+
export default zIndex
|
package/libs/config/zIndex.js
CHANGED
|
@@ -13,6 +13,9 @@ export default {
|
|
|
13
13
|
// popup包含popup,actionsheet,keyboard,picker的值
|
|
14
14
|
popup: 10075,
|
|
15
15
|
mask: 10070,
|
|
16
|
+
// dialog 独立于 popup 体系:弹窗需压在 popup 面板(popup+1)之上,又不遮住 noNetwork/toast
|
|
17
|
+
dialogMask: 10077,
|
|
18
|
+
dialog: 10078,
|
|
16
19
|
navbar: 980,
|
|
17
20
|
topTips: 975,
|
|
18
21
|
sticky: 970,
|
package/package.json
CHANGED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import { defineMixin } from '../../libs/vue'
|
|
2
|
-
import CarKeyboardDefaultProps from './carKeyboard'
|
|
3
|
-
import { registerComponentProps } from '../../libs/config/props.js'
|
|
4
|
-
|
|
5
|
-
const defProps = registerComponentProps(CarKeyboardDefaultProps)
|
|
6
|
-
export const props = defineMixin({
|
|
7
|
-
props: {
|
|
8
|
-
// 是否打乱键盘按键的顺序
|
|
9
|
-
random: {
|
|
10
|
-
type: Boolean,
|
|
11
|
-
default: false
|
|
12
|
-
},
|
|
13
|
-
// 输入一个中文后,是否自动切换到英文
|
|
14
|
-
autoChange: {
|
|
15
|
-
type: Boolean,
|
|
16
|
-
default: false
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
})
|