mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Overlay: jsx (#2559)
This commit is contained in:
parent
a5c39425e8
commit
1f1d55eab2
36
packages/overlay/index.js
Normal file
36
packages/overlay/index.js
Normal file
@ -0,0 +1,36 @@
|
||||
import { use } from '../utils';
|
||||
|
||||
const [sfc, bem] = use('overlay');
|
||||
|
||||
export default sfc({
|
||||
props: {
|
||||
zIndex: Number,
|
||||
visible: Boolean,
|
||||
className: String,
|
||||
customStyle: Object
|
||||
},
|
||||
|
||||
render(h) {
|
||||
const style = {
|
||||
zIndex: this.zIndex,
|
||||
...this.customStyle
|
||||
};
|
||||
|
||||
return (
|
||||
<transition name="van-fade">
|
||||
<div
|
||||
v-show={this.visible}
|
||||
style={style}
|
||||
class={[bem(), this.className]}
|
||||
onTouchmove={event => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
}}
|
||||
onClick={event => {
|
||||
this.$emit('click', event);
|
||||
}}
|
||||
/>
|
||||
</transition>
|
||||
);
|
||||
}
|
||||
});
|
@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<transition name="van-fade">
|
||||
<div
|
||||
v-show="visible"
|
||||
class="van-overlay"
|
||||
:class="className"
|
||||
:style="style"
|
||||
@touchmove.prevent.stop
|
||||
@click="$emit('click', $event)"
|
||||
/>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'overlay',
|
||||
|
||||
props: {
|
||||
zIndex: Number,
|
||||
visible: Boolean,
|
||||
className: String,
|
||||
customStyle: Object
|
||||
},
|
||||
|
||||
computed: {
|
||||
style() {
|
||||
return {
|
||||
zIndex: this.zIndex,
|
||||
...this.customStyle
|
||||
};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
Loading…
x
Reference in New Issue
Block a user