☰

演示用

8/15/2020, 5:44:02 PM

  1. // ==UserScript==
  2. // @name        演示用
  3. // @namespace   Violentmonkey Scripts
  4. // @include        *
  5. // @grant       none
  6. // @version     1.0
  7. // @author      chenhonzhou
  8. // @description 8/15/2020, 5:44:02 PM
  9. // ==/UserScript==
  10.  
  11. /*
  12. ** 参考: http://caibaojian.com/pointer-events.html
  13. ** 事件参考: https://www.cnblogs.com/lyr1213/p/7122363.html
  14. */
  15.  
  16. const isObject = x => {
  17.   return typeof x === 'object' && x !== null
  18. }
  19.  
  20. // 设置 style
  21. const setEleStyle = (ele, obj) => {
  22.   if (isObject(obj)) {
  23.     try {
  24.       Object.keys(obj).forEach(item => {
  25.         const isStyle = ele.style.hasOwnProperty(item)
  26.         if (isStyle) {
  27.           const val = obj[item]
  28.           ele.style[item] = val
  29.         }
  30.       })
  31.     } catch (error) {
  32.       throw new Error(error)
  33.     }
  34.   }
  35. }
  36.  
  37. const Eid = 'clickEle'
  38.  
  39. const getClickEle = ()=>{
  40.   return document.getElementById(Eid)
  41. }
  42.  
  43. const setStyle = obj=> {
  44.   const ele = getClickEle()
  45.   if (ele) setEleStyle(ele, obj)
  46.   else {
  47.     console.warn('设置style失败, 请在vm.$nextTick中设置')
  48.   }
  49. }
  50.  
  51. let clearFlag = null
  52. let canMove = false
  53.  
  54. const runtime = options=> {
  55.   if (!isObject(options)) options = {}
  56.   if (!options.hasOwnProperty('opacity')) options.opacity = .0233
  57.   if (!options.hasOwnProperty('style')) options.style = {}
  58.   let { opacity, style } = options
  59.   let _opacity = Number(opacity)
  60.   if (Number.isNaN(_opacity) || (_opacity > 1 || _opacity < .1)) _opacity = 1
  61.   if (!isObject(style)) style = {}
  62.   return {
  63.     inserted() {
  64.       try {
  65.         let ele = document.body
  66.         if (getClickEle()) return
  67.         const Ele = document.createElement('div')
  68.         Ele.id = Eid
  69.         const beau = {
  70.           position: 'fixed',
  71.           top: 0,
  72.           left: 0,
  73.           pointerEvents: `none`,
  74.           position: `fixed`,
  75.           width: `42px`,
  76.           height: `42px`,
  77.           zIndex: 9999,
  78.           border: `2px solid rgb(147, 145, 145, .6)`,
  79.           borderRadius: `50%`,
  80.           opacity: 0,
  81.           userSelect: 'none',
  82.           transition: 'opacity .3s'
  83.         }
  84.         Object.assign(beau, style)
  85.  
  86.         setEleStyle(Ele, beau)
  87.   
  88.         const getPosition = ()=> {
  89.           const rect = Ele.getBoundingClientRect()
  90.           const border = 2
  91.           const w = rect.width / 2 - border, h = rect.height / 2 - border
  92.           const top = `calc(${ event.clientY }px - ${ w }px)`
  93.           const left = `calc(${ event.clientX }px - ${ h }px)`
  94.           return { top, left }
  95.         }
  96.   
  97.         const display = (flag = true) => {
  98.           setEleStyle(Ele, {
  99.             opacity: flag ? _opacity : 0
  100.           })
  101.         }
  102.   
  103.         ele.addEventListener('mousedown', event=> {
  104.           const { top, left } = getPosition()
  105.           setEleStyle(Ele, { top, left })
  106.           display()
  107.           canMove = true
  108.         })
  109.         ele.addEventListener('mousemove', event=> {
  110.           if (canMove) {
  111.             const { top, left } = getPosition()
  112.             let crd = { top, left }
  113.             setEleStyle(Ele, crd)
  114.             display()
  115.           }
  116.         })
  117.         ele.addEventListener('mouseup', ()=> {
  118.           clearFlag = setTimeout(()=> {
  119.             display(false)
  120.           }, 200)
  121.           canMove = false
  122.         })
  123.         ele.append(Ele)
  124.       } catch (error) {
  125.         throw new Error(error)
  126.       }
  127.     }
  128.   }
  129. }
  130.  
  131. const ctx = runtime({
  132.   'border-color': 'red'
  133. })
  134. ctx.inserted()