Skip to content

Commit

Permalink
fix(varlet-ui): modify phone size
Browse files Browse the repository at this point in the history
  • Loading branch information
@kanghuiyi66
kanghuiyi66 committed Mar 22, 2021
1 parent 7f486c8 commit 9e92861
Show file tree
Hide file tree
Showing 7 changed files with 133 additions and 58 deletions.
11 changes: 7 additions & 4 deletions packages/varlet-cli/site/mobile/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div style="position: relative">
<header>
<var-app-bar :title="componentName" title-position="center">
<template #left>
<template #left v-if="isReturnIcon">
<var-button round @click="toHome" color="transparent" text-color="#ffffff" text>
<var-icon name="chevron-left" :size="28" />
</var-button>
Expand All @@ -17,7 +17,7 @@

<script lang="ts">
import { defineComponent, ref, Ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useRoute, useRouter } from 'vue-router'
import Icon from '@varlet/ui/es/icon'
import AppBar from '@varlet/ui/es/app-bar'
import Button from '@varlet/ui/es/button'
Expand All @@ -34,13 +34,14 @@ export default defineComponent({
setup() {
const componentName: Ref<string> = ref('')
const route = useRoute()
const isReturnIcon: Ref<boolean> = ref(false)
const router = useRouter()
const isPhone: Ref<boolean> = ref(false)
isPhone.value = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
const toHome = () => {
// todo 返回首页
alert('返回首页')
router.go(-1)
}
watch(
Expand All @@ -49,12 +50,14 @@ export default defineComponent({
const index = to.lastIndexOf('/')
const componentNameInner = to.slice(index + 1).replace(/-([a-z])/g, (all: string, i: string) => i.toUpperCase())
componentName.value = componentNameInner[0]?.toUpperCase() + componentNameInner.slice(1)
isReturnIcon.value = !(componentName.value.toLowerCase() === 'home')
}
)
return {
componentName,
isPhone,
isReturnIcon,
toHome,
}
},
Expand Down
13 changes: 8 additions & 5 deletions packages/varlet-cli/site/mobile/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ const router = createRouter({
history: createWebHashHistory(),
routes,
})

router.beforeEach((to) => {
let isPhone = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
if (!isPhone && window.self === window.top) {
Expand All @@ -28,11 +29,13 @@ router.beforeEach((to) => {
})

router.afterEach((to) => {
if (to.path === '/home' && to.query.path) {
console.log(to.path, to.query.path)
window.top['router'].replace(`/${to.query.language}/${to.query.path}`)
} else {
window.top['router'].replace(`/${to.query.language}${to.path}`)
let isPhone = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
if (!isPhone) {
if (to.path === '/home' && to.query.path) {
window.top['router'].replace(`/${to.query.language}/${to.query.path}`)
} else {
window.top['router'].replace(`/${to.query.language}${to.path}`)
}
}
})

Expand Down
112 changes: 78 additions & 34 deletions packages/varlet-cli/site/pc/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
<img :src="header.logo" alt="" />
<span>{{ title }}</span>
</span>
<span class="varlet-site-header__nav">
<var-menu :offset-y="40" v-model:show="offsetY">
<div class="varlet-site-header__nav-style" @click="offsetY = true">
<var-icon name="translate" size="26px" color="#ffffff" />
<var-icon name="chevron-down" color="#ffffff"></var-icon>
</div>
<template #menu>
<div class="language-list">
<div class="varlet-site-header__nav">
<div class="varlet-site-header__nav-style" @mouseenter="isOpenMenu = true" @mouseleave="isOpenMenu = false">
<var-icon name="translate" size="26px" color="#ffffff" />

<var-icon name="chevron-down" color="#ffffff" />

<transition name="fade">
<div class="language-list" v-if="isOpenMenu">
<var-cell
v-for="(value, key) in languageList"
:key="key"
Expand All @@ -22,14 +22,14 @@
{{ value }}
</var-cell>
</div>
</template>
</var-menu>
</transition>
</div>
<div class="varlet-site-header__nav-link">
<a target="_blank" href="https://github.com/haoziqaq/varlet" class="varlet-site-header__link">
<var-icon name="github" color="#ffffff" :size="28"></var-icon>
</a>
</div>
</span>
</div>
</div>
<div class="varlet-site-content">
<div class="varlet-site-nav" :ref="nav">
Expand All @@ -51,12 +51,14 @@
</div>
<router-view />
<div class="varlet-site-mobile">
<div class="varlet-site-empty"></div>
<div class="varlet-site-mobile-content">
<iframe :src="`./mobile.html#/${componentName}?language=${language}&platform=pc&path=${path}`"></iframe>
</div>
<div class="varlet-site-mobile-image">
<img src="./assets/images/mobile.png" />
<div class="varlet-site-mobile-frame">
<div class="varlet-site-empty"></div>
<div class="varlet-site-mobile-content">
<iframe :src="`./mobile.html#/${componentName}?language=${language}&platform=pc&path=${path}`"></iframe>
</div>
<div class="varlet-site-mobile-image">
<img src="./assets/images/mobile.png" />
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -111,7 +113,7 @@ export default defineComponent({
const { pc = {}, title: configTitle } = config
const { header: configHeader = { i18nButton: {}, logo: '', search: {} }, menu: configMenu = [] } = pc
const languageList: Ref<Language> = ref({})
const offsetY: Ref<boolean> = ref(false)
const isOpenMenu: Ref<boolean> = ref(false)
const path: Ref<string | null> = ref(null)
const isPhone: Ref<boolean> = ref(false)
Expand Down Expand Up @@ -157,7 +159,7 @@ export default defineComponent({
language.value = key
const pathArr = route.fullPath.split('/')
componentName.value = pathArr[pathArr.length - 1]
offsetY.value = false
isOpenMenu.value = false
}
onMounted(() => {
Expand All @@ -182,7 +184,7 @@ export default defineComponent({
versionList,
isHideVersion,
languageList,
offsetY,
isOpenMenu,
path,
nav,
changeRoute,
Expand All @@ -201,6 +203,7 @@ body {
margin: 0;
padding: 0;
font-family: 'Roboto', 'Noto Sans SC', sans-serif;
overflow-y: hidden;
}
iframe {
Expand All @@ -213,19 +216,23 @@ iframe {
.varlet {
&-site {
&-mobile {
flex: 0 0 432px;
transform: scale(0.66);
position: relative;
height: 863px;
align-self: center;
padding: 20px 30px;
overflow-y: auto;
&-frame {
width: 369px;
transform: scale(1);
position: relative;
height: 731px;
}
&-content {
height: 780px;
height: 665px;
position: absolute;
z-index: -2;
top: 57px;
width: calc(100% - 57px);
margin-left: 28px;
top: 44px;
width: calc(100% - 49px);
margin-left: 24px;
}
&-image {
Expand All @@ -242,12 +249,12 @@ iframe {
}
&-empty {
height: 32px;
width: calc(100% - 40px);
margin-left: 20px;
background-color: @color-primary;
height: 25px;
width: calc(100% - 49px);
margin-left: 24px;
background-color: #2979ff;
position: absolute;
top: 26px;
top: 19px;
z-index: -1;
}
Expand Down Expand Up @@ -293,6 +300,8 @@ iframe {
display: flex;
align-items: center;
padding: 0 10px;
position: relative;
cursor: pointer;
&:hover {
background: rgba(255, 255, 255, 0.2);
Expand Down Expand Up @@ -598,6 +607,9 @@ iframe {
cursor: pointer;
color: #666;
border-radius: 2px;
position: absolute;
top: 40px;
left: 0;
&__active {
background: #2b79fc21;
Expand All @@ -611,4 +623,36 @@ iframe {
}
}
}
.fade-enter-active {
animation-name: fade-in;
animation-duration: 0.5s;
}
.fade-leave-active {
animation-name: fade-leave;
animation-duration: 0.5s;
}
@keyframes fade-in {
0% {
top: 30px;
opacity: 0;
}
100% {
top: 40px;
opacity: 1;
}
}
@keyframes fade-leave {
0% {
top: 40px;
opacity: 1;
}
100% {
top: 30px;
opacity: 0;
}
}
</style>
18 changes: 12 additions & 6 deletions packages/varlet-ui/src/app-bar/example/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@
</template>

<template #right>
<var-menu :offset-y="38" :offset-x="-20" v-model:show="offsetY">
<var-button round text color="transparent" text-color="#ffffff" @click="offsetY = true">
<var-menu :offset-y="38" :offset-x="-45" v-model:show="offsetY">
<var-button round text color="transparent" text-color="#ffffff" @click="changeOffset">
<var-icon name="menu" :size="24" />
</var-button>

Expand Down Expand Up @@ -76,10 +76,7 @@ export default {
},
setup() {
const offsetY = ref(false)
const menuList = ref([
{ label: pack.value.options1, value: 'menu1' },
{ label: pack.value.options2, value: 'menu2' },
])
const menuList = ref([])
const searchData = () => {
Snackbar({
Expand All @@ -95,6 +92,14 @@ export default {
})
}
const changeOffset = () => {
menuList.value = [
{ label: pack.value.options1, value: 'menu1' },
{ label: pack.value.options2, value: 'menu2' },
]
offsetY.value = true
}
watchLang(use)
return {
Expand All @@ -103,6 +108,7 @@ export default {
pack,
searchData,
goBack,
changeOffset,
}
},
}
Expand Down
28 changes: 21 additions & 7 deletions packages/varlet-ui/src/home/example/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
<template>
<div class="space"></div>

<var-cell v-for="component in components" :key="component.text">
<var-cell v-for="component in components" :key="component.text" @click="toComponent(component)">
<template #extra>
<var-icon name="chevron-right" size="14" />
</template>
<template #default>
{{ component.text['zh-CN'] }}
{{ component.text[lang] }}
</template>
</var-cell>

Expand All @@ -17,6 +17,7 @@
import Cell from '../../cell'
import Icon from '../../icon'
import Ripple from '../../ripple'
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import { watchLang, watchPlatform } from '../../utils/components'
Expand All @@ -34,25 +35,34 @@ export default {
const components = reactive(configComponents)
const lang = ref('zh-CN')
const platform = ref('mobile')
const router = useRouter()
watchLang((newValue) => {
lang.value = newValue
console.log(lang.value)
})
watchPlatform((newValue) => {
platform.value = newValue
console.log(platform.value)
})
const toComponent = (component) => {
router.push({
path: `/${component.doc}`,
query: {
language: lang.value,
platform: platform.value,
path: component.doc,
},
})
}
return {
components,
platform,
lang,
toComponent,
}
}
},
}
</script>

Expand All @@ -63,5 +73,9 @@ export default {
.var-cell {
cursor: pointer;
&:hover {
background: #eee;
}
}
</style>
Loading

0 comments on commit 9e92861

Please sign in to comment.