test.vue 2.15 KB
<template>
    <div class="test">
        <img @touchstart="gtouchstart()" @touchmove="gtouchmove()" @touchend="gtouchend()" style="width: 100%" src="https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f2ead41bb.jpg"/>
        <div id="captureId" class="capture"   v-show="firstFlag">
        </div>
        <img :src="dataURL" alt="" v-show="!firstFlag"/>
        <!--<div  style="width:100%; height: 50px; line-height: 50px; background-color: #000; font-size: 18px;color: #ffffff;text-align: center;">-->
            <!--&lt;!&ndash;保存图片&ndash;&gt;-->
        <!--</div>-->
    </div>
</template>
<script>
    import html2canvas from 'html2canvas';
    export default {
        data () {
            return {
                dataURL:'https://wjj.ys2.cnliveimg.com/769/shop/img/2020/01/06/5e12f31607200.jpg',
                firstFlag:true,
                timeOutEvent:0
            };
        },
        mounted(){

        },
        methods: {
            onimg(){
                document.documentElement.style.webkitUserSelect='none';
                document.documentElement.style.webkitTouchCallout='none';
            },
            //js
            gtouchstart () {
                // 开始触摸
                this.timeOutEvent = setTimeout(() => {
                    // 长按3秒
                    this.timeOutEvent = 0
                    if(this.isiPhone.value){
                        window.webkit.messageHandlers.CNDSCheckAllowVisitPhotoAlbumHandler.postMessage({body: {}});
                    }else {
                        if (window.obj && window.obj.CNDSCheckAllowVisitPhotoAlbumHandler) {
                            // 调取相册
                            window.obj.CNDSCheckAllowVisitPhotoAlbumHandler();
                        }
                    }
                }, 3000)
            },
            gtouchmove () {
                // 看具体需求
                // clearTimeout(this.timeOutEvent)
                // this.timeOutEvent = 0
            },
            gtouchend () {
                clearTimeout(this.timeOutEvent)
                this.timeOutEvent = 0
            }
        }
    }
</script>
<style lang='less' scoped>
</style>