import MyDirective from './directive/myDirective' 
const directives = { 
  MyDirective 
}
export default { 
  install(app) {
    // 遍歷、注冊
   Object.keys(directives).forEach((key) => {    
    app.directive(key, directives[key])  
   })
  }
}

export default {
  directives: {
    myDirective: {
      inserted: function (el) {
        //
      }
    }
  }
}

<input v-myDirective>

<div v-myDirective="{ color: 'white', text: 'hello!' }"></div>
app.directive('myDirective', (el, binding) => {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text) // => "hello!"
})

const myDirective = {
  // 在綁定元素的 attribute 前
  // 或事件監(jiān)聽器應用前調用
  created(el, binding, vnode) {
    // 下面會介紹各個參數的細節(jié)
  },
  // 在元素被插入到 DOM 前調用
  beforeMount(el, binding, vnode) {},
  // 在綁定元素的父組件
  // 及他自己的所有子節(jié)點都掛載完成后調用
  mounted(el, binding, vnode) {},
  // 綁定元素的父組件更新前調用
  beforeUpdate(el, binding, vnode, prevVnode) {},
  // 在綁定元素的父組件
  // 及他自己的所有子節(jié)點都更新后調用
  updated(el, binding, vnode, prevVnode) {},
  // 綁定元素的父組件卸載前調用
  beforeUnmount(el, binding, vnode) {},
  // 綁定元素的父組件卸載后調用
  unmounted(el, binding, vnode) {}
}

const copy = {
  bind(el, { value }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) {
        // 值為空的時候，給出提示?？筛鶕椖縐I仔細設計
        console.log('無復制內容')
        return
      }
      // 動態(tài)創(chuàng)建 textarea 標簽
      const textarea = document.createElement('textarea')
      // 將該 textarea 設為 readonly 防止 iOS 下自動喚起鍵盤，同時將 textarea 移出可視區(qū)域
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 將要 copy 的值賦給 textarea 標簽的 value 屬性
      textarea.value = el.$value
      // 將 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 選中值并復制
      textarea.select()
      const result = document.execCommand('Copy')
      if (result) {
        console.log('復制成功') 
      }
      document.body.removeChild(textarea)
    }
    // 綁定點擊事件
    el.addEventListener('click', el.handler)
  },
  // 當傳進來的值更新的時候觸發(fā)
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令與元素解綁的時候，移除事件綁定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}
export default copy

const longpress = {
  bind(el, binding) {
    if (typeof binding.value!== 'function') {
      throw new Error('Callback must be a function');
    }
    let pressTimer = null;
    // 鼠標(左鍵)按下、移動端按下 且 按下持續(xù)時間超過 1s 時，觸發(fā)
    const start = (e) => {
      if (
        (e.type === 'mousedown' && e.button!== 0) ||
        (e.type === 'touchstart' && e.touches.length > 1)
      ) {
        return;
      }
      pressTimer = setTimeout(() => {
        binding.value(e);
      }, 1000);
    };
    // 鼠標(左鍵)抬起、移動端抬起 或 按下時間小于 1s 時，移除定時器
    const cancel = () => {
      if (pressTimer!== null) {
        clearTimeout(pressTimer);
        pressTimer = null;
      }
    };
    // 事件監(jiān)聽
    el.addEventListener('mousedown', start);
    el.addEventListener('touchstart', start);
    el.addEventListener('click', cancel);
    el.addEventListener('mouseout', cancel);
    el.addEventListener('touchend', cancel);
    el.addEventListener('touchcancel', cancel);
  },
  // 指令與元素解綁的時候，移除事件綁定
  unbind(el) {
    el.removeEventListener('mousedown', start);
    el.removeEventListener('touchstart', start);
    el.removeEventListener('click', cancel);
    el.removeEventListener('mouseout', cancel);
    el.removeEventListener('touchend', cancel);
    el.removeEventListener('touchcancel', cancel);
  },
};
export default longpress

function addWaterMarker(str, parentNode, font, textColor) {
  // 水印文字，父元素，字體，文字顏色
  var can = document.createElement('canvas')
  parentNode.appendChild(can)
  can.width = 200
  can.height = 150
  can.style.display = 'none'
  var cans = can.getContext('2d')
  cans.rotate((-20 * Math.PI) / 180)
  cans.font = font || '16px Microsoft JhengHei'
  cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'
  cans.textAlign = 'left'
  cans.textBaseline = 'Middle'
  cans.fillText(str, can.width / 10, can.height / 2)
  parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
}
const waterMarker = {
  bind: function (el, binding) {
    addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
  },
}
export default waterMarker