<template>
    <div id="page">
            <div class="move-box" v-move >左自定义指令{{demo}}</span></div>
    
    </div>
</template>

<script>
    export default {
        name: "pageDirective",
        data() {
            return {
                demo : 1
            }
        },
        update(){},
/定义使用///
        directives : {
            move: {
                bind(el,bingding){
                    console.log('bind')
                    
                },
                update(el,binding){
                    console.log('update')
                    console.log(el.innerHTML)
                    console.log('当前值：'+binding.value)
                    console.log('旧值：'+binding.oldValue) 
                    
                },
                componentUpdated(el,binding){//对比nextTick
                    console.log('componentUpdated')
                    console.log(el.innerHTML)
                },
                inserted: function (el,binding) {
                    console.log('inserted')
                    console.log(binding.value)
                    var _d = binding.modifiers.left ? '-' : '';
                    var startX = 0;
                    var _x = 0;
                    el.addEventListener('touchstart', function(e){
                        _x = startX = e.touches[0].pageX;
                    }, false);
                    el.addEventListener('touchmove', function(e){
                        _x = e.touches[0].pageX;
                    }, false);
                    el.addEventListener('touchend', function(){
                        if(startX >= _x){
                            el.style.transform = "translateX("+'-'+180+"px)";   
                        } else{
                            el.style.transform = "translateX(0)";
                        }                       
                    }, false);
                }
            }
        },
        mounted(){
            console.log(1)
            setTimeout(function(){
                this.demo = 2;
            }.bind(this),1000)
        }

    }
</script>

<style scoped>
    #page{overflow: hidden;}
    .move-box{
        transition: all .5s;
        height: 80px;
        width: 100%;
        background-color: #eee;
        line-height: 80px;
        color: #444;
        font-size: 14px;
        padding: 0 10px;
        box-sizing: border-box;
        text-align: left;
        margin: 10px 0
    }   
</style>