Skip to content

Commit 758db2f

Browse files
wswmswordwswmsword
committed
feat: add screen adaptation prompt
1 parent 46bffe7 commit 758db2f

File tree

6 files changed

+174
-3
lines changed

6 files changed

+174
-3
lines changed

‎src/components/Notice.vue‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<script setup lang="ts">
2+
const { t } = useI18n()
3+
</script>
4+
5+
<template>
6+
<van-notice-bar
7+
class="notice"
8+
wrapable
9+
background="white"
10+
color="#323233"
11+
>
12+
<i18n-t keypath="menus.adaptation-info" tag="p">
13+
<template #min>
14+
<code>min()</code>
15+
</template>
16+
<template #max>
17+
<code>max()</code>
18+
</template>
19+
<template #option>
20+
<code>maxDisplayWidth</code>
21+
</template>
22+
</i18n-t>
23+
24+
<i18n-t keypath="menus.compatibility-info" tag="p">
25+
<template #documentation>
26+
<a target="_blank" href="https://easy-temps.github.io/easy-docs/vue3-vant-mobile/browser-adaptation">{{ t("menus.doc") }}</a>
27+
</template>
28+
</i18n-t>
29+
30+
<ul>
31+
<i18n-t keypath="menus.browser-support.min-max-clamp" tag="li">
32+
<template #compat_min>
33+
<span class="yes-min">{{ t("menus.browser-support.compat") }}</span><span class="no-min">{{ t("menus.browser-support.not-compat") }}</span>
34+
</template>
35+
<template #min>
36+
<code>min()</code>
37+
</template>
38+
<template #max>
39+
<code>max()</code>
40+
</template>
41+
<template #clamp>
42+
<code>clamp()</code>
43+
</template>
44+
</i18n-t>
45+
<i18n-t keypath="menus.browser-support.calc" tag="li">
46+
<template #compat_calc>
47+
<span class="yes-calc">{{ t("menus.browser-support.compat") }}</span><span class="no-calc">{{ t("menus.browser-support.not-compat") }}</span>
48+
</template>
49+
<template #calc>
50+
<code>calc()</code>
51+
</template>
52+
</i18n-t>
53+
<i18n-t keypath="menus.browser-support.vw" tag="li">
54+
<template #compat_vw>
55+
<span class="yes-vw">{{ t("menus.browser-support.compat") }}</span><span class="no-vw">{{ t("menus.browser-support.not-compat") }}</span>
56+
</template>
57+
<template #vw>
58+
<code>vw</code>
59+
</template>
60+
</i18n-t>
61+
</ul>
62+
63+
<p class="show">
64+
{{ t('menus.consider-compatibility') }}
65+
</p>
66+
</van-notice-bar>
67+
</template>
68+
69+
<style scoped>
70+
.notice {
71+
font-size: 11px;
72+
line-height: 17px;
73+
}
74+
code {
75+
background: rgba(142, 150, 170, 0.14);
76+
padding: 2px 6px;
77+
color: #51a13c;
78+
border-radius: 4px;
79+
}
80+
p {
81+
margin: 9px 0;
82+
}
83+
a {
84+
text-decoration: underline;
85+
color: #51a13c;
86+
text-underline-offset: 3px;
87+
}
88+
.yes-min,
89+
.yes-vw,
90+
.yes-calc {
91+
color: green;
92+
display: none;
93+
}
94+
.no-min,
95+
.no-vw,
96+
.no-calc {
97+
color: red;
98+
display: none;
99+
}
100+
101+
.show {
102+
display: none;
103+
}
104+
105+
@supports (left: min(1px, 2px)) {
106+
.yes-min {
107+
display: inline;
108+
}
109+
}
110+
@supports not (left: min(1px, 2px)) {
111+
.no-min {
112+
display: inline;
113+
}
114+
}
115+
@supports (left: calc(1px + 2px)) {
116+
.yes-calc {
117+
display: inline;
118+
}
119+
}
120+
@supports not (left: calc(1px + 2px)) {
121+
.no-calc {
122+
display: inline;
123+
}
124+
}
125+
@supports (left: 1vw) {
126+
.yes-vw {
127+
display: inline;
128+
}
129+
}
130+
@supports not (left: 1vw) {
131+
.no-vw {
132+
display: inline;
133+
}
134+
}
135+
136+
@supports (left: min(1px, 2px)) and (left: calc(1px + 2px)) and (left: 1vw) {
137+
.show {
138+
display: block;
139+
}
140+
}
141+
</style>

‎src/locales/en-US.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,19 @@
1515
"settings": "Settings",
1616
"basicSettings": "Basic Settings",
1717
"exampleComponents": "Example components",
18-
"forgot-password": "Forgot Password"
18+
"forgot-password": "Forgot Password",
19+
"prompt": "Prompt",
20+
"adaptation-info": "Screen adaptation is implemented using {min} and {max}. If style issues occur due to compatibility problems, open the vite.config.ts file, remove the {option} option, and disable desktop adaptation.",
21+
"compatibility-info": "If you need to meet both compatibility and desktop adaptation requirements, please refer to the {documentation} for detailed information.",
22+
"doc": "documentation",
23+
"browser-support": {
24+
"min-max-clamp": "The current browser is {compat_min} with {min}, {max}, and {clamp}.",
25+
"calc": "The current browser is {compat_calc} with {calc}.",
26+
"vw": "The current browser is {compat_vw} with {vw}.",
27+
"compat": "compatible",
28+
"not-compat": "not compatible"
29+
},
30+
"consider-compatibility": "Please consider whether the actual deployment scenario of the application requires compatibility adjustments."
1931
},
2032
"mock": {
2133
"fromAsyncData": "Data from asynchronous requests",

‎src/locales/zh-CN.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,19 @@
1515
"settings": "设置",
1616
"basicSettings": "基本设置",
1717
"exampleComponents": "示例组件",
18-
"forgot-password": "忘记密码"
18+
"forgot-password": "忘记密码",
19+
"prompt": "提示",
20+
"adaptation-info": "屏幕适配通过 {min} 和 {max} 实现，若兼容性导致了样式错乱，请打开 vite.config.ts 文件，删除 {option} 选项，关闭桌面端适配。",
21+
"compatibility-info": "若需同时满足兼容性和桌面端适配，请查看{documentation}了解详细信息。",
22+
"doc": "文档",
23+
"browser-support": {
24+
"min-max-clamp": "当前浏览器{compat_min} {min}、{max} 和 {clamp}。",
25+
"calc": "当前浏览器{compat_calc} {calc}。",
26+
"vw": "当前浏览器{compat_vw} {vw}。",
27+
"compat": "已兼容",
28+
"not-compat": "未兼容"
29+
},
30+
"consider-compatibility": "请考虑应用的真实投放场景是否需要考虑兼容性。"
1931
},
2032
"mock": {
2133
"fromAsyncData": "来自异步请求的数据",

‎src/pages/index.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@ const menuItems = computed(() => ([
6262
</template>
6363
</VanCellGroup>
6464

65+
<VanCellGroup :title="t('menus.prompt')" :inset="true">
66+
<Notice />
67+
</VanCellGroup>
68+
6569
<van-popup v-model:show="showLanguagePicker" position="bottom">
6670
<van-picker
6771
v-model="languageValues"

‎src/types/auto-imports.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -320,6 +320,6 @@ declare global {
320320
// for type re-export
321321
declare global {
322322
// @ts-ignore
323-
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
323+
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
324324
import('vue')
325325
}

‎src/types/components.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ declare module 'vue' {
1010
Chart: typeof import('./../components/Chart/index.vue')['default']
1111
GhostButton: typeof import('./../components/GhostButton.vue')['default']
1212
NavBar: typeof import('./../components/NavBar.vue')['default']
13+
Notice: typeof import('./../components/Notice.vue')['default']
1314
RouterLink: typeof import('vue-router')['RouterLink']
1415
RouterView: typeof import('vue-router')['RouterView']
1516
TabBar: typeof import('./../components/TabBar.vue')['default']
@@ -23,6 +24,7 @@ declare module 'vue' {
2324
VanIcon: typeof import('vant/es')['Icon']
2425
VanImage: typeof import('vant/es')['Image']
2526
VanNavBar: typeof import('vant/es')['NavBar']
27+
VanNoticeBar: typeof import('vant/es')['NoticeBar']
2628
VanPicker: typeof import('vant/es')['Picker']
2729
VanPopup: typeof import('vant/es')['Popup']
2830
VanSpace: typeof import('vant/es')['Space']

0 commit comments

Comments
 (0)