@taole/dev-helper 0.0.5 → 0.0.7
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/Tdiv/index.svelte +8 -2
- package/Tdiv/index.vue +14 -2
- package/Tdiv/setting.js +29 -0
- package/package.json +1 -1
package/Tdiv/index.svelte
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
* @type {boolean}
|
|
13
13
|
* 默认false， 传入true表示直接使用px单位，一般使用场景比如pc
|
|
14
14
|
*/
|
|
15
|
-
export let usePx =
|
|
15
|
+
export let usePx = null;
|
|
16
16
|
|
|
17
17
|
/**
|
|
18
18
|
* @type {string}
|
|
@@ -260,7 +260,7 @@
|
|
|
260
260
|
<div
|
|
261
261
|
role="presentation"
|
|
262
262
|
on:click={handleOnClick}
|
|
263
|
-
class="tw-img-div {_class}"
|
|
263
|
+
class="tw-img-div {_class} {setting.useButtonEffect && onClick ? 'click-effect' : ''}"
|
|
264
264
|
style={styleStr}
|
|
265
265
|
>
|
|
266
266
|
<slot />
|
|
@@ -273,4 +273,10 @@
|
|
|
273
273
|
background-size: 100% auto;
|
|
274
274
|
flex: none;
|
|
275
275
|
}
|
|
276
|
+
.click-effect {
|
|
277
|
+
&:active {
|
|
278
|
+
opacity: 0.85;
|
|
279
|
+
transform: translateY(1px);
|
|
280
|
+
}
|
|
281
|
+
}
|
|
276
282
|
</style>
|
package/Tdiv/index.vue
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div role="presentation" :class="['tw-img-div', _class]" :style="styleStr" @click="handleOnClick">
|
|
2
|
+
<div role="presentation" :class="['tw-img-div', _class, setting.useButtonEffect && onClick ? 'click-effect' : '']" :style="styleStr" @click="handleOnClick">
|
|
3
3
|
<slot />
|
|
4
4
|
</div>
|
|
5
5
|
</template>
|
|
@@ -34,6 +34,11 @@ export default {
|
|
|
34
34
|
viewportWidth: { type: Number, default: null },
|
|
35
35
|
viewportUnit: { type: String, default: null },
|
|
36
36
|
},
|
|
37
|
+
data() {
|
|
38
|
+
return {
|
|
39
|
+
setting,
|
|
40
|
+
};
|
|
41
|
+
},
|
|
37
42
|
computed: {
|
|
38
43
|
styleStr() {
|
|
39
44
|
let vWidth = setting.viewportWidth;
|
|
@@ -45,7 +50,7 @@ export default {
|
|
|
45
50
|
vUnit = this.viewportUnit;
|
|
46
51
|
}
|
|
47
52
|
let localUsePx = setting.usePx;
|
|
48
|
-
if(typeof this.usePx === 'boolean'){
|
|
53
|
+
if (typeof this.usePx === 'boolean') {
|
|
49
54
|
localUsePx = this.usePx;
|
|
50
55
|
}
|
|
51
56
|
const calc = (value) => {
|
|
@@ -128,4 +133,11 @@ export default {
|
|
|
128
133
|
background-size: 100% auto;
|
|
129
134
|
flex: none;
|
|
130
135
|
}
|
|
136
|
+
|
|
137
|
+
.click-effect {
|
|
138
|
+
&:active {
|
|
139
|
+
opacity: 0.85;
|
|
140
|
+
transform: translateY(1px);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
131
143
|
</style>
|
package/Tdiv/setting.js
CHANGED
|
@@ -1,7 +1,20 @@
|
|
|
1
1
|
const config = {
|
|
2
|
+
/**
|
|
3
|
+
* 设置视口宽度
|
|
4
|
+
*/
|
|
2
5
|
viewportWidth: 750,
|
|
6
|
+
/**
|
|
7
|
+
* 设置视口单位
|
|
8
|
+
*/
|
|
3
9
|
viewportUnit: "vw",
|
|
10
|
+
/**
|
|
11
|
+
* 设置是否使用px
|
|
12
|
+
*/
|
|
4
13
|
usePx: false,
|
|
14
|
+
/**
|
|
15
|
+
* 设置是否使用按钮效果(指按钮的点击效果)
|
|
16
|
+
*/
|
|
17
|
+
useButtonEffect: false,
|
|
5
18
|
}
|
|
6
19
|
|
|
7
20
|
/**
|
|
@@ -28,4 +41,20 @@ export function setUsePx(use) {
|
|
|
28
41
|
config.usePx = use;
|
|
29
42
|
}
|
|
30
43
|
|
|
44
|
+
/**
|
|
45
|
+
* 设置是否使用按钮效果(指按钮的点击效果)
|
|
46
|
+
* @param {boolean} use
|
|
47
|
+
*/
|
|
48
|
+
export function setUseButtonEffect(use) {
|
|
49
|
+
config.useButtonEffect = use;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* 更新配置
|
|
54
|
+
* @param {Partial<typeof config>} newConfig
|
|
55
|
+
*/
|
|
56
|
+
export function updateConfig(newConfig) {
|
|
57
|
+
Object.assign(config, newConfig);
|
|
58
|
+
}
|
|
59
|
+
|
|
31
60
|
export default config;
|