2020年宅在家快一個(gè)月了，也在家遠(yuǎn)程上班將近十八天蕴轨，今天照舊港谊，趁著休息時(shí)間，發(fā)一點(diǎn)東西尺棋。
分享一些常用到的東西
復(fù)制功能 clipboard 官網(wǎng)
- 先安裝 clipboard 模塊
npm install clipboard --save
或者
yarn add clipboard --save
在main.js中引入
import Clipboard from 'clipboard'在需要復(fù)制的地方加上方法
/**
* 復(fù)制功能
*/
copy () {
var clipboard = new Clipboard('.code')
clipboard.on('success', e => {
console.log('復(fù)制成功', e)
Toast({
message: '復(fù)制成功'
})
// 釋放內(nèi)存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持復(fù)制
Toast({
message: '手機(jī)權(quán)限不支持復(fù)制功能'
})
console.log('該瀏覽器不支持自動(dòng)復(fù)制')
// 釋放內(nèi)存
clipboard.destroy()
})
},
vue 項(xiàng)目中 圖片的預(yù)覽 以及鼠標(biāo)滾動(dòng)封锉、點(diǎn)擊放大、縮小圖片 功能 (插件v-viewer) 官網(wǎng)
- 安裝 v-viewer
npm install v-viewer -soryarn add v-viewer - 在main.js中引入
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999
}
})
Viewer.setDefaults({
Options: {
"inline": true, // 是否啟動(dòng)inline模式
"button": true, // 是否顯示右上角關(guān)閉按鈕
"navbar":true, // 是否顯示縮略圖導(dǎo)航
"title": true, // 是否顯示當(dāng)前圖片的標(biāo)題
"toolbar": true, // 是否顯示工具欄
"tooltip": true, // 是否顯示縮放百分比
"movable": true, // 圖片是否可移動(dòng)
"zoomable": true, // 圖片是否可縮放
"rotatable": true, // 圖片是否可旋轉(zhuǎn)
"scalable": true, // 圖片是翻轉(zhuǎn)
"transition": true, // 是否使用css3過渡
"fullscreen": true, // 播放時(shí)是否全屏
"keyboard": true, // 是否支持鍵盤
"url": "data-source" // 設(shè)置大圖片的url
}
});
- HTML中
<viewer :images="selectInfoPics" class="viewer" ref="viewer">
<img v-for="src of selectInfoPics" :src="src" :key="src" width="300">
</viewer>
// selectInfoPics 圖片路徑組成的數(shù)組
省區(qū)市的聯(lián)動(dòng) 這個(gè)就不細(xì)說了 快速通道
