Skip to content

Commit

Permalink
fix(snackbar): fix zIndex and loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@BeADre
BeADre committed Jan 11, 2021
1 parent 84a9827 commit aaf2459
Show file tree
Hide file tree
Showing 5 changed files with 41 additions and 89 deletions.
2 changes: 2 additions & 0 deletions packages/varlet-ui/src/snackbar/core.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
top: 0;
bottom: 0;
pointer-events: none;
z-index: 10;
}

.var-pointer-auto {
Expand All @@ -24,6 +25,7 @@
right: 0;
bottom: 0;
transition: all 0.15s cubic-bezier(0, 0, 0.2, 1);
z-index: 10;

&__wrapper {
width: 256px;
Expand Down
16 changes: 7 additions & 9 deletions packages/varlet-ui/src/snackbar/core.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,15 @@
<div class="var-snackbar" :style="{ pointerEvents: forbidClick ? 'auto' : 'none' }" v-show="show">
<div :class="snackbarClass" :style="snackbarStyle">
<div :class="`var-snackbar__content${contentClass ? ` ${contentClass}` : ''}`">
<var-loading :type="loadingType" :size="loadingSize" v-if="type === 'loading'" />
<slot>
{{ content }}
</slot>
<slot>{{ content }}</slot>
</div>
<div class="var-snackbar__action">
<var-icon v-if="type === 'success'" name="checkbox-marked-circle"></var-icon>
<var-icon v-if="type === 'warning'" name="warning"></var-icon>
<var-icon v-if="type === 'info'" name="information"></var-icon>
<var-icon v-if="type === 'error'" name="error"></var-icon>
<slot name="action"></slot>
<var-icon v-if="type === 'success'" :transition="200" name="checkbox-marked-circle" />
<var-icon v-if="type === 'warning'" :transition="200" name="warning" />
<var-icon v-if="type === 'info'" :transition="200" name="information" />
<var-icon v-if="type === 'error'" :transition="200" name="error" />
<var-loading v-if="type === 'loading'" :type="loadingType" :size="loadingSize" />
<slot name="action" />
</div>
</div>
</div>
Expand Down
104 changes: 31 additions & 73 deletions packages/varlet-ui/src/snackbar/example/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,89 +3,43 @@
<div class="snackbar-demo__basic">
<app-type>基本使用</app-type>
<div class="snackbar-demo__basic-block">
<var-button type="primary" size="small" @click="changeValue('show1')">
基本使用
</var-button>
<var-button type="primary" size="small" @click="changeValue('show2')">
自定义action
</var-button>
<var-button type="primary" size="small" @click="changeValue('show3')">
垂直排列
</var-button>
<var-button type="primary" size="small" @click="changeValue('show4')">
自定义关闭时间
</var-button>
<var-button type="primary" size="small" @click="changeMultiple()">
切换单例或多例
</var-button>
<var-button type="primary" size="small" @click="changeValue('show1')"> 基本使用 </var-button>
<var-button type="primary" size="small" @click="changeValue('show2')"> 自定义action </var-button>
<var-button type="primary" size="small" @click="changeValue('show3')"> 垂直排列 </var-button>
<var-button type="primary" size="small" @click="changeValue('show4')"> 自定义关闭时间 </var-button>
<var-button type="primary" size="small" @click="changeMultiple()"> 切换单例或多例 </var-button>
</div>
</div>
<div class="snackbar-demo__type">
<app-type>snackbar类型</app-type>
<div class="snackbar-demo__type-block">
<var-button type="primary" size="small" @click="changeValue('show7')">
success
</var-button>
<var-button type="primary" size="small" @click="create('warning')">
warning
</var-button>
<var-button type="primary" size="small" @click="create('info')">
info
</var-button>
<var-button type="primary" size="small" @click="createMethod('error')">
error
</var-button>
<var-button
type="primary"
size="small"
@click="createMethod('loading')"
>
loading
</var-button>
<var-button type="primary" size="small" @click="changeValue('show7')"> success </var-button>
<var-button type="primary" size="small" @click="create('warning')"> warning </var-button>
<var-button type="primary" size="small" @click="create('info')"> info </var-button>
<var-button type="primary" size="small" @click="createMethod('error')"> error </var-button>
<var-button type="primary" size="small" @click="createMethod('loading')"> loading </var-button>
</div>
</div>
<div class="snackbar-demo__position">
<app-type>snackbar位置</app-type>
<div class="snackbar-demo__position-block">
<var-button type="primary" size="small" @click="createPosition('top')">
top
</var-button>
<var-button
type="primary"
size="small"
@click="createPosition('center')"
>
center
</var-button>
<var-button
type="primary"
size="small"
@click="createPosition('bottom')"
>
bottom
</var-button>
<var-button type="primary" size="small" @click="createPosition('top')"> top </var-button>
<var-button type="primary" size="small" @click="createPosition('center')"> center </var-button>
<var-button type="primary" size="small" @click="createPosition('bottom')"> bottom </var-button>
</div>
</div>
<div class="snackbar-demo__others">
<app-type>其他配置</app-type>
<div class="snackbar-demo__others-block">
<var-button type="primary" size="small" @click="changeValue('show8')">
自定义内容class
</var-button>
<var-button type="primary" size="small" @click="changeValue('show9')">
不可穿透点击
</var-button>
<var-button type="primary" size="small" @click="changeValue('show10')">
可以穿透滑动
</var-button>
<var-button type="primary" size="small" @click="changeValue('show8')"> 自定义内容class </var-button>
<var-button type="primary" size="small" @click="changeValue('show9')"> 不可穿透点击 </var-button>
<var-button type="primary" size="small" @click="changeValue('show10')"> 可以穿透滑动 </var-button>
</div>
</div>
<div class="snackbar-demo__event">
<app-type>snackbar事件</app-type>
<div class="snackbar-demo__event-block">
<var-button type="primary" size="small" @click="changeValue('show11')">
打开与关闭回调
</var-button>
<var-button type="primary" size="small" @click="changeValue('show11')"> 打开与关闭回调 </var-button>
<var-button type="primary" size="small" @click="changeValue('show12')">
打开动画与关闭动画结束时回调
</var-button>
Expand All @@ -99,18 +53,14 @@
<var-snackbar v-model:show="show2">
{{ text }}
<template #action>
<var-button type="primary" size="small" @click="show2 = !show2">
close
</var-button>
<var-button type="primary" size="small" @click="show2 = !show2"> close </var-button>
</template>
</var-snackbar>

<var-snackbar v-model:show="show3" :vertical="true">
{{ text }}
<template #action>
<var-button type="primary" size="small" @click="show3 = !show3">
close
</var-button>
<var-button type="primary" size="small" @click="show3 = !show3"> close </var-button>
</template>
</var-snackbar>

Expand Down Expand Up @@ -151,7 +101,7 @@ export default defineComponent({
[Button.name]: Button,
},
setup() {
const text: Ref<string> = ref("Hello, I'm a snackbar-core")
const text: Ref<string> = ref("Hello, I'm a snackbar")
const isAllowMultiple: Ref<boolean> = ref(true)
const shows: any = reactive({
show1: false,
Expand All @@ -171,7 +121,7 @@ export default defineComponent({
const create = (type: any) => {
const snackbar: any = Snackbar({
content: "Hello, I'm a snackbar-core",
content: "Hello, I'm a snackbar",
type,
})
setTimeout(function () {
Expand All @@ -181,14 +131,22 @@ export default defineComponent({
const createMethod = (type: SnackbarType) => {
Snackbar[type]({
content: "Hello, I'm a snackbar-core",
content: "Hello, I'm a snackbar",
forbidClick: type === 'loading',
loadingSize: 'small',
})
if (type === 'loading') {
setTimeout(() => {
Snackbar.success({
content: "Hello, I'm a snackbar",
})
}, 3000)
}
}
const createPosition = (position: 'top' | 'center' | 'bottom') => {
Snackbar({
content: "Hello, I'm a snackbar-core",
content: "Hello, I'm a snackbar",
position,
})
}
Expand Down
6 changes: 1 addition & 5 deletions packages/varlet-ui/src/utils/elements.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
import { inBrowser } from './shared'

const root = (inBrowser ? window : global) as Window

export function getTop(element: HTMLElement): number {
const { top } = element.getBoundingClientRect()

Expand Down Expand Up @@ -88,5 +84,5 @@ export function remToPx(rem: string | number): number {
}

export function requestAnimationFrame(fn: FrameRequestCallback): number {
return root.requestAnimationFrame ? root.requestAnimationFrame(fn) : root.setTimeout(fn, 16)
return window.requestAnimationFrame ? window.requestAnimationFrame(fn) : window.setTimeout(fn, 16)
}
2 changes: 0 additions & 2 deletions packages/varlet-ui/src/utils/shared.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,6 @@ export interface CacheInstance<T> {
remove(key: T): void
}

export const inBrowser = typeof window !== 'undefined'

export const isString = (val: unknown): val is string => typeof val === 'string'

export const isNumber = (val: unknown): val is number => typeof val === 'number'
Expand Down

0 comments on commit aaf2459

Please sign in to comment.