@wapri/gutils 2.1.0 → 2.2.0
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/dist/currency/demo/basic.vue +172 -172
- package/dist/storage/demo/basic.vue +138 -138
- package/dist/vconsole/index.js +4 -4
- package/package.json +2 -2
|
@@ -1,172 +1,172 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { computed, ref } from 'vue'
|
|
3
|
-
import { currency } from '@wapri/gutils'
|
|
4
|
-
|
|
5
|
-
const amountInput = ref('1234.56')
|
|
6
|
-
const centsInput = ref('123456')
|
|
7
|
-
const symbol = ref('¥')
|
|
8
|
-
const precision = ref(2)
|
|
9
|
-
|
|
10
|
-
function toFiniteNumber(value: string): number {
|
|
11
|
-
const number = Number(value)
|
|
12
|
-
return Number.isFinite(number) ? number : 0
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
const amountValue = computed(() => toFiniteNumber(amountInput.value))
|
|
16
|
-
const amount = computed(() => currency(amountValue.value, { symbol: symbol.value, precision: precision.value }))
|
|
17
|
-
const centsValue = computed(() => amount.value.intValue)
|
|
18
|
-
const restoredAmount = computed(() =>
|
|
19
|
-
currency(centsValue.value, {
|
|
20
|
-
fromCents: true,
|
|
21
|
-
symbol: symbol.value,
|
|
22
|
-
precision: precision.value,
|
|
23
|
-
}).format(),
|
|
24
|
-
)
|
|
25
|
-
const centsAmount = computed(() =>
|
|
26
|
-
currency(toFiniteNumber(centsInput.value), {
|
|
27
|
-
fromCents: true,
|
|
28
|
-
symbol: symbol.value,
|
|
29
|
-
precision: precision.value,
|
|
30
|
-
}),
|
|
31
|
-
)
|
|
32
|
-
const plusAmount = computed(() => amount.value.add('99.90').format())
|
|
33
|
-
const splitAmounts = computed(() =>
|
|
34
|
-
amount.value
|
|
35
|
-
.distribute(3)
|
|
36
|
-
.map((item) => item.format())
|
|
37
|
-
.join('、'),
|
|
38
|
-
)
|
|
39
|
-
</script>
|
|
40
|
-
|
|
41
|
-
<template>
|
|
42
|
-
<div class="currency-demo">
|
|
43
|
-
<div class="currency-demo__fields">
|
|
44
|
-
<label class="currency-demo__field">
|
|
45
|
-
<span>输入金额（元）</span>
|
|
46
|
-
<input
|
|
47
|
-
v-model="amountInput"
|
|
48
|
-
type="number"
|
|
49
|
-
step="0.01"
|
|
50
|
-
inputmode="decimal"
|
|
51
|
-
/>
|
|
52
|
-
</label>
|
|
53
|
-
<label class="currency-demo__field">
|
|
54
|
-
<span>货币符号</span>
|
|
55
|
-
<input
|
|
56
|
-
v-model="symbol"
|
|
57
|
-
maxlength="3"
|
|
58
|
-
/>
|
|
59
|
-
</label>
|
|
60
|
-
<label class="currency-demo__field">
|
|
61
|
-
<span>小数位数</span>
|
|
62
|
-
<select v-model.number="precision">
|
|
63
|
-
<option :value="0">0</option>
|
|
64
|
-
<option :value="2">2</option>
|
|
65
|
-
<option :value="3">3</option>
|
|
66
|
-
</select>
|
|
67
|
-
</label>
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
|
-
<div class="currency-demo__result">
|
|
71
|
-
<p>
|
|
72
|
-
格式化展示：
|
|
73
|
-
<strong>{{ amount.format() }}</strong>
|
|
74
|
-
</p>
|
|
75
|
-
<p>
|
|
76
|
-
元金额数值：
|
|
77
|
-
<code>{{ amount.value }}</code>
|
|
78
|
-
</p>
|
|
79
|
-
<p>
|
|
80
|
-
转换为最小货币单位：
|
|
81
|
-
<code>{{ centsValue }}</code>
|
|
82
|
-
</p>
|
|
83
|
-
<p>
|
|
84
|
-
从最小货币单位还原：
|
|
85
|
-
<strong>{{ restoredAmount }}</strong>
|
|
86
|
-
</p>
|
|
87
|
-
<p>
|
|
88
|
-
加上 99.90：
|
|
89
|
-
<strong>{{ plusAmount }}</strong>
|
|
90
|
-
</p>
|
|
91
|
-
<p>
|
|
92
|
-
平均分成 3 份：
|
|
93
|
-
<strong>{{ splitAmounts }}</strong>
|
|
94
|
-
</p>
|
|
95
|
-
</div>
|
|
96
|
-
|
|
97
|
-
<label class="currency-demo__field currency-demo__field--cents">
|
|
98
|
-
<span>输入最小货币单位（分）</span>
|
|
99
|
-
<input
|
|
100
|
-
v-model="centsInput"
|
|
101
|
-
type="number"
|
|
102
|
-
step="1"
|
|
103
|
-
inputmode="numeric"
|
|
104
|
-
/>
|
|
105
|
-
<strong>{{ centsAmount.format() }}</strong>
|
|
106
|
-
</label>
|
|
107
|
-
</div>
|
|
108
|
-
</template>
|
|
109
|
-
|
|
110
|
-
<style scoped>
|
|
111
|
-
.currency-demo {
|
|
112
|
-
max-width: 760px;
|
|
113
|
-
padding: 20px;
|
|
114
|
-
border: 1px solid #e5e7eb;
|
|
115
|
-
border-radius: 8px;
|
|
116
|
-
color: #1f2937;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
.currency-demo__fields {
|
|
120
|
-
display: flex;
|
|
121
|
-
flex-wrap: wrap;
|
|
122
|
-
gap: 16px;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
.currency-demo__field {
|
|
126
|
-
display: inline-flex;
|
|
127
|
-
min-width: 150px;
|
|
128
|
-
flex: 1;
|
|
129
|
-
flex-direction: column;
|
|
130
|
-
gap: 6px;
|
|
131
|
-
font-size: 14px;
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
.currency-demo__field input,
|
|
135
|
-
.currency-demo__field select {
|
|
136
|
-
box-sizing: border-box;
|
|
137
|
-
height: 34px;
|
|
138
|
-
padding: 0 10px;
|
|
139
|
-
border: 1px solid #d1d5db;
|
|
140
|
-
border-radius: 4px;
|
|
141
|
-
background: #fff;
|
|
142
|
-
color: inherit;
|
|
143
|
-
font: inherit;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.currency-demo__result {
|
|
147
|
-
margin: 20px 0;
|
|
148
|
-
padding: 14px 16px;
|
|
149
|
-
border-radius: 6px;
|
|
150
|
-
background: #f8fafc;
|
|
151
|
-
line-height: 1.8;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.currency-demo__result p {
|
|
155
|
-
margin: 0;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
.currency-demo__result strong,
|
|
159
|
-
.currency-demo__field strong {
|
|
160
|
-
color: #1677ff;
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
.currency-demo__field--cents {
|
|
164
|
-
max-width: 300px;
|
|
165
|
-
}
|
|
166
|
-
|
|
167
|
-
code {
|
|
168
|
-
padding: 2px 5px;
|
|
169
|
-
border-radius: 3px;
|
|
170
|
-
background: #eef2f7;
|
|
171
|
-
}
|
|
172
|
-
</style>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { computed, ref } from 'vue'
|
|
3
|
+
import { currency } from '@wapri/gutils'
|
|
4
|
+
|
|
5
|
+
const amountInput = ref('1234.56')
|
|
6
|
+
const centsInput = ref('123456')
|
|
7
|
+
const symbol = ref('¥')
|
|
8
|
+
const precision = ref(2)
|
|
9
|
+
|
|
10
|
+
function toFiniteNumber(value: string): number {
|
|
11
|
+
const number = Number(value)
|
|
12
|
+
return Number.isFinite(number) ? number : 0
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const amountValue = computed(() => toFiniteNumber(amountInput.value))
|
|
16
|
+
const amount = computed(() => currency(amountValue.value, { symbol: symbol.value, precision: precision.value }))
|
|
17
|
+
const centsValue = computed(() => amount.value.intValue)
|
|
18
|
+
const restoredAmount = computed(() =>
|
|
19
|
+
currency(centsValue.value, {
|
|
20
|
+
fromCents: true,
|
|
21
|
+
symbol: symbol.value,
|
|
22
|
+
precision: precision.value,
|
|
23
|
+
}).format(),
|
|
24
|
+
)
|
|
25
|
+
const centsAmount = computed(() =>
|
|
26
|
+
currency(toFiniteNumber(centsInput.value), {
|
|
27
|
+
fromCents: true,
|
|
28
|
+
symbol: symbol.value,
|
|
29
|
+
precision: precision.value,
|
|
30
|
+
}),
|
|
31
|
+
)
|
|
32
|
+
const plusAmount = computed(() => amount.value.add('99.90').format())
|
|
33
|
+
const splitAmounts = computed(() =>
|
|
34
|
+
amount.value
|
|
35
|
+
.distribute(3)
|
|
36
|
+
.map((item) => item.format())
|
|
37
|
+
.join('、'),
|
|
38
|
+
)
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<template>
|
|
42
|
+
<div class="currency-demo">
|
|
43
|
+
<div class="currency-demo__fields">
|
|
44
|
+
<label class="currency-demo__field">
|
|
45
|
+
<span>输入金额（元）</span>
|
|
46
|
+
<input
|
|
47
|
+
v-model="amountInput"
|
|
48
|
+
type="number"
|
|
49
|
+
step="0.01"
|
|
50
|
+
inputmode="decimal"
|
|
51
|
+
/>
|
|
52
|
+
</label>
|
|
53
|
+
<label class="currency-demo__field">
|
|
54
|
+
<span>货币符号</span>
|
|
55
|
+
<input
|
|
56
|
+
v-model="symbol"
|
|
57
|
+
maxlength="3"
|
|
58
|
+
/>
|
|
59
|
+
</label>
|
|
60
|
+
<label class="currency-demo__field">
|
|
61
|
+
<span>小数位数</span>
|
|
62
|
+
<select v-model.number="precision">
|
|
63
|
+
<option :value="0">0</option>
|
|
64
|
+
<option :value="2">2</option>
|
|
65
|
+
<option :value="3">3</option>
|
|
66
|
+
</select>
|
|
67
|
+
</label>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<div class="currency-demo__result">
|
|
71
|
+
<p>
|
|
72
|
+
格式化展示：
|
|
73
|
+
<strong>{{ amount.format() }}</strong>
|
|
74
|
+
</p>
|
|
75
|
+
<p>
|
|
76
|
+
元金额数值：
|
|
77
|
+
<code>{{ amount.value }}</code>
|
|
78
|
+
</p>
|
|
79
|
+
<p>
|
|
80
|
+
转换为最小货币单位：
|
|
81
|
+
<code>{{ centsValue }}</code>
|
|
82
|
+
</p>
|
|
83
|
+
<p>
|
|
84
|
+
从最小货币单位还原：
|
|
85
|
+
<strong>{{ restoredAmount }}</strong>
|
|
86
|
+
</p>
|
|
87
|
+
<p>
|
|
88
|
+
加上 99.90：
|
|
89
|
+
<strong>{{ plusAmount }}</strong>
|
|
90
|
+
</p>
|
|
91
|
+
<p>
|
|
92
|
+
平均分成 3 份：
|
|
93
|
+
<strong>{{ splitAmounts }}</strong>
|
|
94
|
+
</p>
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
<label class="currency-demo__field currency-demo__field--cents">
|
|
98
|
+
<span>输入最小货币单位（分）</span>
|
|
99
|
+
<input
|
|
100
|
+
v-model="centsInput"
|
|
101
|
+
type="number"
|
|
102
|
+
step="1"
|
|
103
|
+
inputmode="numeric"
|
|
104
|
+
/>
|
|
105
|
+
<strong>{{ centsAmount.format() }}</strong>
|
|
106
|
+
</label>
|
|
107
|
+
</div>
|
|
108
|
+
</template>
|
|
109
|
+
|
|
110
|
+
<style scoped>
|
|
111
|
+
.currency-demo {
|
|
112
|
+
max-width: 760px;
|
|
113
|
+
padding: 20px;
|
|
114
|
+
border: 1px solid #e5e7eb;
|
|
115
|
+
border-radius: 8px;
|
|
116
|
+
color: #1f2937;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.currency-demo__fields {
|
|
120
|
+
display: flex;
|
|
121
|
+
flex-wrap: wrap;
|
|
122
|
+
gap: 16px;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.currency-demo__field {
|
|
126
|
+
display: inline-flex;
|
|
127
|
+
min-width: 150px;
|
|
128
|
+
flex: 1;
|
|
129
|
+
flex-direction: column;
|
|
130
|
+
gap: 6px;
|
|
131
|
+
font-size: 14px;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.currency-demo__field input,
|
|
135
|
+
.currency-demo__field select {
|
|
136
|
+
box-sizing: border-box;
|
|
137
|
+
height: 34px;
|
|
138
|
+
padding: 0 10px;
|
|
139
|
+
border: 1px solid #d1d5db;
|
|
140
|
+
border-radius: 4px;
|
|
141
|
+
background: #fff;
|
|
142
|
+
color: inherit;
|
|
143
|
+
font: inherit;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.currency-demo__result {
|
|
147
|
+
margin: 20px 0;
|
|
148
|
+
padding: 14px 16px;
|
|
149
|
+
border-radius: 6px;
|
|
150
|
+
background: #f8fafc;
|
|
151
|
+
line-height: 1.8;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.currency-demo__result p {
|
|
155
|
+
margin: 0;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
.currency-demo__result strong,
|
|
159
|
+
.currency-demo__field strong {
|
|
160
|
+
color: #1677ff;
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.currency-demo__field--cents {
|
|
164
|
+
max-width: 300px;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
code {
|
|
168
|
+
padding: 2px 5px;
|
|
169
|
+
border-radius: 3px;
|
|
170
|
+
background: #eef2f7;
|
|
171
|
+
}
|
|
172
|
+
</style>
|
|
@@ -1,138 +1,138 @@
|
|
|
1
|
-
<script setup lang="ts">
|
|
2
|
-
import { ref } from 'vue'
|
|
3
|
-
import { storage } from '@wapri/gutils'
|
|
4
|
-
|
|
5
|
-
const key = ref('demo-key')
|
|
6
|
-
const value = ref('demo-value')
|
|
7
|
-
const result = ref<string | null>(null)
|
|
8
|
-
const message = ref('等待操作')
|
|
9
|
-
|
|
10
|
-
const getKey = () => key.value.trim()
|
|
11
|
-
|
|
12
|
-
const save = () => {
|
|
13
|
-
const storageKey = getKey()
|
|
14
|
-
if (!storageKey) {
|
|
15
|
-
message.value = '请输入 key 后再存储'
|
|
16
|
-
return
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
storage.setItem(storageKey, value.value)
|
|
20
|
-
message.value = '已存储'
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
const read = () => {
|
|
24
|
-
const storageKey = getKey()
|
|
25
|
-
if (!storageKey) {
|
|
26
|
-
message.value = '请输入 key 后再读取'
|
|
27
|
-
result.value = null
|
|
28
|
-
return
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
result.value = storage.getItem(storageKey)
|
|
32
|
-
message.value = result.value === null ? '未找到对应数据' : '读取成功'
|
|
33
|
-
}
|
|
34
|
-
</script>
|
|
35
|
-
|
|
36
|
-
<template>
|
|
37
|
-
<div class="storage-demo">
|
|
38
|
-
<label class="storage-demo__field">
|
|
39
|
-
<span>Key</span>
|
|
40
|
-
<input
|
|
41
|
-
v-model="key"
|
|
42
|
-
placeholder="请输入 key"
|
|
43
|
-
/>
|
|
44
|
-
</label>
|
|
45
|
-
|
|
46
|
-
<label class="storage-demo__field">
|
|
47
|
-
<span>Value</span>
|
|
48
|
-
<input
|
|
49
|
-
v-model="value"
|
|
50
|
-
placeholder="请输入 value"
|
|
51
|
-
/>
|
|
52
|
-
</label>
|
|
53
|
-
|
|
54
|
-
<div class="storage-demo__actions">
|
|
55
|
-
<button
|
|
56
|
-
type="button"
|
|
57
|
-
@click="save"
|
|
58
|
-
>
|
|
59
|
-
存储
|
|
60
|
-
</button>
|
|
61
|
-
<button
|
|
62
|
-
type="button"
|
|
63
|
-
@click="read"
|
|
64
|
-
>
|
|
65
|
-
读取
|
|
66
|
-
</button>
|
|
67
|
-
</div>
|
|
68
|
-
|
|
69
|
-
<div
|
|
70
|
-
class="storage-demo__result"
|
|
71
|
-
aria-live="polite"
|
|
72
|
-
>
|
|
73
|
-
<span>{{ message }}</span>
|
|
74
|
-
<code>读取结果：{{ result ?? 'null' }}</code>
|
|
75
|
-
</div>
|
|
76
|
-
</div>
|
|
77
|
-
</template>
|
|
78
|
-
|
|
79
|
-
<style scoped>
|
|
80
|
-
.storage-demo {
|
|
81
|
-
display: grid;
|
|
82
|
-
max-width: 640px;
|
|
83
|
-
gap: 16px;
|
|
84
|
-
padding: 20px;
|
|
85
|
-
border: 1px solid #e5e7eb;
|
|
86
|
-
border-radius: 8px;
|
|
87
|
-
color: #1f2937;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.storage-demo__field {
|
|
91
|
-
display: grid;
|
|
92
|
-
gap: 6px;
|
|
93
|
-
font-size: 14px;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.storage-demo__field input {
|
|
97
|
-
box-sizing: border-box;
|
|
98
|
-
width: 100%;
|
|
99
|
-
height: 34px;
|
|
100
|
-
padding: 0 10px;
|
|
101
|
-
border: 1px solid #d1d5db;
|
|
102
|
-
border-radius: 4px;
|
|
103
|
-
color: inherit;
|
|
104
|
-
font: inherit;
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
.storage-demo__actions {
|
|
108
|
-
display: flex;
|
|
109
|
-
gap: 10px;
|
|
110
|
-
}
|
|
111
|
-
|
|
112
|
-
.storage-demo__actions button {
|
|
113
|
-
height: 34px;
|
|
114
|
-
padding: 0 16px;
|
|
115
|
-
border: 0;
|
|
116
|
-
border-radius: 4px;
|
|
117
|
-
background: #1677ff;
|
|
118
|
-
color: #fff;
|
|
119
|
-
cursor: pointer;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
.storage-demo__actions button + button {
|
|
123
|
-
background: #4b5563;
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.storage-demo__result {
|
|
127
|
-
display: grid;
|
|
128
|
-
gap: 6px;
|
|
129
|
-
padding: 12px;
|
|
130
|
-
border-radius: 6px;
|
|
131
|
-
background: #f8fafc;
|
|
132
|
-
font-size: 14px;
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
.storage-demo__result code {
|
|
136
|
-
color: #1677ff;
|
|
137
|
-
}
|
|
138
|
-
</style>
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { ref } from 'vue'
|
|
3
|
+
import { storage } from '@wapri/gutils'
|
|
4
|
+
|
|
5
|
+
const key = ref('demo-key')
|
|
6
|
+
const value = ref('demo-value')
|
|
7
|
+
const result = ref<string | null>(null)
|
|
8
|
+
const message = ref('等待操作')
|
|
9
|
+
|
|
10
|
+
const getKey = () => key.value.trim()
|
|
11
|
+
|
|
12
|
+
const save = () => {
|
|
13
|
+
const storageKey = getKey()
|
|
14
|
+
if (!storageKey) {
|
|
15
|
+
message.value = '请输入 key 后再存储'
|
|
16
|
+
return
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
storage.setItem(storageKey, value.value)
|
|
20
|
+
message.value = '已存储'
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const read = () => {
|
|
24
|
+
const storageKey = getKey()
|
|
25
|
+
if (!storageKey) {
|
|
26
|
+
message.value = '请输入 key 后再读取'
|
|
27
|
+
result.value = null
|
|
28
|
+
return
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
result.value = storage.getItem(storageKey)
|
|
32
|
+
message.value = result.value === null ? '未找到对应数据' : '读取成功'
|
|
33
|
+
}
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<template>
|
|
37
|
+
<div class="storage-demo">
|
|
38
|
+
<label class="storage-demo__field">
|
|
39
|
+
<span>Key</span>
|
|
40
|
+
<input
|
|
41
|
+
v-model="key"
|
|
42
|
+
placeholder="请输入 key"
|
|
43
|
+
/>
|
|
44
|
+
</label>
|
|
45
|
+
|
|
46
|
+
<label class="storage-demo__field">
|
|
47
|
+
<span>Value</span>
|
|
48
|
+
<input
|
|
49
|
+
v-model="value"
|
|
50
|
+
placeholder="请输入 value"
|
|
51
|
+
/>
|
|
52
|
+
</label>
|
|
53
|
+
|
|
54
|
+
<div class="storage-demo__actions">
|
|
55
|
+
<button
|
|
56
|
+
type="button"
|
|
57
|
+
@click="save"
|
|
58
|
+
>
|
|
59
|
+
存储
|
|
60
|
+
</button>
|
|
61
|
+
<button
|
|
62
|
+
type="button"
|
|
63
|
+
@click="read"
|
|
64
|
+
>
|
|
65
|
+
读取
|
|
66
|
+
</button>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<div
|
|
70
|
+
class="storage-demo__result"
|
|
71
|
+
aria-live="polite"
|
|
72
|
+
>
|
|
73
|
+
<span>{{ message }}</span>
|
|
74
|
+
<code>读取结果：{{ result ?? 'null' }}</code>
|
|
75
|
+
</div>
|
|
76
|
+
</div>
|
|
77
|
+
</template>
|
|
78
|
+
|
|
79
|
+
<style scoped>
|
|
80
|
+
.storage-demo {
|
|
81
|
+
display: grid;
|
|
82
|
+
max-width: 640px;
|
|
83
|
+
gap: 16px;
|
|
84
|
+
padding: 20px;
|
|
85
|
+
border: 1px solid #e5e7eb;
|
|
86
|
+
border-radius: 8px;
|
|
87
|
+
color: #1f2937;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.storage-demo__field {
|
|
91
|
+
display: grid;
|
|
92
|
+
gap: 6px;
|
|
93
|
+
font-size: 14px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.storage-demo__field input {
|
|
97
|
+
box-sizing: border-box;
|
|
98
|
+
width: 100%;
|
|
99
|
+
height: 34px;
|
|
100
|
+
padding: 0 10px;
|
|
101
|
+
border: 1px solid #d1d5db;
|
|
102
|
+
border-radius: 4px;
|
|
103
|
+
color: inherit;
|
|
104
|
+
font: inherit;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.storage-demo__actions {
|
|
108
|
+
display: flex;
|
|
109
|
+
gap: 10px;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.storage-demo__actions button {
|
|
113
|
+
height: 34px;
|
|
114
|
+
padding: 0 16px;
|
|
115
|
+
border: 0;
|
|
116
|
+
border-radius: 4px;
|
|
117
|
+
background: #1677ff;
|
|
118
|
+
color: #fff;
|
|
119
|
+
cursor: pointer;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.storage-demo__actions button + button {
|
|
123
|
+
background: #4b5563;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.storage-demo__result {
|
|
127
|
+
display: grid;
|
|
128
|
+
gap: 6px;
|
|
129
|
+
padding: 12px;
|
|
130
|
+
border-radius: 6px;
|
|
131
|
+
background: #f8fafc;
|
|
132
|
+
font-size: 14px;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.storage-demo__result code {
|
|
136
|
+
color: #1677ff;
|
|
137
|
+
}
|
|
138
|
+
</style>
|
package/dist/vconsole/index.js
CHANGED
|
@@ -3,10 +3,10 @@ var ERUDA_URL = 'https://cdn.jsdelivr.net/npm/eruda';
|
|
|
3
3
|
var initializePromise;
|
|
4
4
|
var initialized = false;
|
|
5
5
|
|
|
6
|
-
/**
|
|
7
|
-
* 动态加载并初始化移动端调试面板 Eruda。
|
|
8
|
-
*
|
|
9
|
-
* 同一页面中重复调用只会初始化一次；服务端渲染环境会安全跳过。
|
|
6
|
+
/**
|
|
7
|
+
* 动态加载并初始化移动端调试面板 Eruda。
|
|
8
|
+
*
|
|
9
|
+
* 同一页面中重复调用只会初始化一次；服务端渲染环境会安全跳过。
|
|
10
10
|
*/
|
|
11
11
|
export function vconsole() {
|
|
12
12
|
if (typeof window === 'undefined' || initialized) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wapri/gutils",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "前端通用函数库",
|
|
5
5
|
"keywords": [],
|
|
6
6
|
"license": "MIT",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"console-ban": "^5.0.0",
|
|
20
20
|
"dayjs": "^1.11.9",
|
|
21
|
-
"@wapri/gbase": "^2.
|
|
21
|
+
"@wapri/gbase": "^2.2.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependenciesMeta": {},
|
|
24
24
|
"scripts": {
|