ui/vant
1
0
Fork 0
mirror of https://github.com/youzan/vant.git synced 2025-10-20 18:54:24 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

[bugfix] Toast: overlay blocked by other element (#740)

Browse Source
This commit is contained in:
neverland
2018-03-21 15:58:11 +08:00
committed by GitHub
parent 11f9715793
commit bca3401d81
7 changed files with 116 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
packages/toast/toast.vue
View File

@@ -1,35 +1,33 @@
<template>
<transition name="van-fade">
<div class="van-toast-wrapper" v-show="visible">
<div class="van-toast" :class="[`van-toast--${displayStyle}`, `van-toast--${position}`]">
<!-- text only -->
<div v-if="displayStyle === 'text'">{{ message }}</div>
<div v-if="displayStyle === 'html'" v-html="message" />
<div class="van-toast" :class="[`van-toast--${displayStyle}`, `van-toast--${position}`]" v-show="value">
<!-- text only -->
<div v-if="displayStyle === 'text'">{{ message }}</div>
<div v-if="displayStyle === 'html'" v-html="message" />
<!-- with icon -->
<template v-if="displayStyle === 'default'">
<loading v-if="type === 'loading'" color="white" />
<icon v-else class="van-toast__icon" :name="type" />
<div v-if="hasMessage" class="van-toast__text">{{ message }}</div>
</template>
</div>
<div class="van-toast__overlay" :class="{ 'van-toast__overlay--mask': mask }" v-if="forbidClick || mask" />
<!-- with icon -->
<template v-if="displayStyle === 'default'">
<loading v-if="type === 'loading'" color="white" />
<icon v-else class="van-toast__icon" :name="type" />
<div v-if="hasMessage" class="van-toast__text">{{ message }}</div>
</template>
</div>
</transition>
</template>
<script>
import create from '../utils/create';
import Popup from '../mixins/popup';
const STYLE_LIST = ['success', 'fail', 'loading'];
export default create({
name: 'toast',
mixins: [Popup],
props: {
mask: Boolean,
message: [String, Number],
forbidClick: Boolean,
type: {
type: String,
default: 'text'
@@ -37,15 +35,13 @@ export default create({
position: {
type: String,
default: 'middle'
},
lockScroll: {
type: Boolean,
default: false
}
},
data() {
return {
visible: false
};
},
computed: {
displayStyle() {
return STYLE_LIST.indexOf(this.type) !== -1 ? 'default' : this.type;