mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] SwipeItem: jsx (#2652)
This commit is contained in:
parent
76e23aefc6
commit
70caee3dd5
35
packages/swipe-item/index.js
Normal file
35
packages/swipe-item/index.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { use } from '../utils';
|
||||||
|
|
||||||
|
const [sfc, bem] = use('swipe-item');
|
||||||
|
|
||||||
|
export default sfc({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
offset: 0
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
beforeCreate() {
|
||||||
|
this.$parent.swipes.push(this);
|
||||||
|
},
|
||||||
|
|
||||||
|
destroyed() {
|
||||||
|
this.$parent.swipes.splice(this.$parent.swipes.indexOf(this), 1);
|
||||||
|
},
|
||||||
|
|
||||||
|
render(h) {
|
||||||
|
const { vertical } = this.$parent;
|
||||||
|
|
||||||
|
const style = {
|
||||||
|
width: this.computedWidth + 'px',
|
||||||
|
height: vertical ? this.computedHeight + 'px' : '100%',
|
||||||
|
transform: `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div class={bem()} style={style}>
|
||||||
|
{this.$slots.default}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
@ -1,42 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
:class="b()"
|
|
||||||
:style="style"
|
|
||||||
>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import create from '../utils/create';
|
|
||||||
|
|
||||||
export default create({
|
|
||||||
name: 'swipe-item',
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
offset: 0
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
style() {
|
|
||||||
const { vertical, computedWidth, computedHeight } = this.$parent;
|
|
||||||
|
|
||||||
return {
|
|
||||||
width: computedWidth + 'px',
|
|
||||||
height: vertical ? computedHeight + 'px' : '100%',
|
|
||||||
transform: `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`
|
|
||||||
};
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
beforeCreate() {
|
|
||||||
this.$parent.swipes.push(this);
|
|
||||||
},
|
|
||||||
|
|
||||||
destroyed() {
|
|
||||||
this.$parent.swipes.splice(this.$parent.swipes.indexOf(this), 1);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
Loading…
x
Reference in New Issue
Block a user