先批量註冊元件指令,新建directives/index.js檔案
import copy from './copy'const directives =const install = function(vue) )
}export default install
在main.js中匯入檔案
import vue from 'vue'import directives from '@/directives/index'
vue.use(directives)
一、點選複製文字指令
新建directives/copy.js檔案
/** 實現思路
* 動態建立 textarea 標籤,並設定 readonly 屬性及移出可視區域
* 將要複製的值賦給 textarea 標籤的 value 屬性,並插入到 body
* 選中值 textarea 並複製
* 將 body 中插入的 textarea 移除
* 在第一次呼叫時繫結事件,在解綁時移除事件
*/const copy =
// 動態建立textarea標籤
const textarea = document.createelement('textarea')
// 將該textarea設為readonly防止ios下自動喚起鍵盤,同時將textarea移出可視區域
textarea.readonly = 'readonly'textarea.style.position = 'absolute'textarea.style.left = '-9999px'
// 將要copy的值賦值給textarea標籤的value屬性
textarea.value =el.$value
// 將textarea插入到body中
// 選中值
textarea.select()
// 將選中的值複製並賦值給result
const result = document.execcommand('copy')
if(result)
document.body.removechild(textarea)
}// 繫結點選事件
el.addeventlistener('click', abc)
},// 當傳進來的值更新的時候觸發
componentupdated(el, ) ,
// 指令與元素解綁的時候,移除事件繫結
unbind(el)
}export default copy
使用方法,點選p標籤就可以實現複製
複製
二、拖拽指令
新建directives/draggable.js檔案
//clientx 以瀏覽器左上頂角為原點,定位 x 軸座標
//clienty 以瀏覽器左上頂角為原點,定位y軸座標
//offsetx 以當前事件的目標物件左上角為原點,定位x軸座標
//offsety 以當前事件的目標物件左上角為原點,定位y軸座標
//pagex 以document 物件(即文字視窗)左上角為原點,定位x軸座標
//pagey 以document 物件(即文字視窗)左上角為原點,定位y軸座標
//screenx 計算機螢幕左上角為原點,定位x軸座標
//screeny 計算機螢幕左上角為原點,定位y軸座標
//layerx 最近的絕對定位的父元素(如果沒有,則為document物件)左上角為原點,定位x軸座標
//layery 最近的絕對定位的父元素(如果沒有,則為document物件)左上角為原點,定位y軸座標
const draggable =
else
if (x >maxx)
if (y < 0)
else
if (y >maxy)
el.style.left = x + 'px'el.style.top = y + 'px'}
document.onmouseup = function
() }
}}export
default draggable
使用方法
二、防抖指令
const debounce =timer = settimeout(() =>, 500)})}
}export
default debounce
使用方法
實用的AT指令
1 相關的gsm at指令 與sms有關的gsm at指令 from gsm07.05 如表1所示 表1 相關的gsm at指令 at 指令 功 能 at cmgc send an sms command 發出一條短訊息命令 at cmgd delete sms message 刪除sim卡記憶體的...
linux 實用指令
cat file awk f 001 awk f 002 sort uniq c sort rn 對檔案中的某一列求和 cat file awk awk end 對第一列求和 求資料夾下所有檔案的行數總和 find type f exec wc l awk end find type f exec ...
git實用指令
1.強制拉取遠端分支覆蓋本地 git fetch all git reset hard origin master git pull2.刪除分支 位址3.遠端分支刪除後,更新本地分支列表 git remote prune origin持續更新 4 強制推送本地到遠端 有覆蓋遠端 的風險 git pu...