vue實用指令

2022-06-15 10:18:11 字數 2415 閱讀 7637

先批量註冊元件指令,新建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...