@minix-iot/ui/dist/packages/swiperitem/swiperitem.jsx

基于Vue的移动端轻量级UI组件库

import { Namespace } from "../../utils/namespace";
import { namespace as namespace_parent } from "../swiper/swiper.jsx";
import { mixChildren } from "../../mixins/relation/children";
import { Touch } from "../../utils/touch";

const namespace = Namespace.Create('swiper-item')

export default {
    name: namespace.name,
    mixins:[
        mixChildren(namespace_parent.name)
    ],
    data(){
        return {
            offset:0,
            startTime: -1,
            touch: Touch.Create(),
        }
    },
    props: {
        duration: {
            type: Number,
            default: 200
        },
    },
    computed:{
        vertical(){
            return this.$parent.vertical;
        },
        cls(){
            return namespace.derive()
        },
        style(){
            const style = {};
            const vertical  = this.parent.vertical;

            if (this.parent.size) {
                style[vertical ? 'height' : 'width'] = `${this.parent.size}px`;
            }

            if (this.offset) {
                style.transform = `translate${vertical ? 'Y' : 'X'}(${this.offset}px)`;
            }

            return style;
        },
        delta(){
            return this.$parent.delta;
        },
    },
    methods:{
        setOffset(offset){
            this.offset = offset
        },
        onTouchStart(e) {
            this.touch.start(e)
            this.startTime = e.timeStamp;
        },
        onTouchMove(e) {
            this.touch.move(e);
            e.preventDefault();
        },
        onTouchEnd(e) {
            const timeStamp = e.timeStamp - this.startTime;
            if (timeStamp < this.duration && Math.abs(this.delta) < Touch.MIN_DISTANCE) {
                this.$emit('click',e);
            }
        },
       
    },
    render(){
        return (
            <div class={this.cls} style={this.style} onTouchmove={this.onTouchMove} onTouchstart={this.onTouchStart} onTouchend={this.onTouchEnd}>
                {this.$slots.default}
            </div>
        )
    }
}