2020年宅在家快一个月了,也在家远程上班将近十八天,今天照旧,趁着休息时间,发一点东西。
分享一些常用到的东西
复制功能 clipboard 官网
- 先安装 clipboard 模块
npm install clipboard --save
或者
yarn add clipboard --save
-
在main.js中引入
import Clipboard from 'clipboard'
-
在需要复制的地方加上方法
/**
* 复制功能
*/
copy () {
var clipboard = new Clipboard('.code')
clipboard.on('success', e => {
console.log('复制成功', e)
Toast({
message: '复制成功'
})
// 释放内存
clipboard.destroy()
})
clipboard.on('error', e => {
// 不支持复制
Toast({
message: '手机权限不支持复制功能'
})
console.log('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
},
vue 项目中 图片的预览 以及鼠标滚动、点击放大、缩小图片 功能 (插件v-viewer) 官网
- 安装 v-viewer
npm install v-viewer -s
oryarn 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, // 是否启动inline模式
"button": true, // 是否显示右上角关闭按钮
"navbar":true, // 是否显示缩略图导航
"title": true, // 是否显示当前图片的标题
"toolbar": true, // 是否显示工具栏
"tooltip": true, // 是否显示缩放百分比
"movable": true, // 图片是否可移动
"zoomable": true, // 图片是否可缩放
"rotatable": true, // 图片是否可旋转
"scalable": true, // 图片是翻转
"transition": true, // 是否使用css3过渡
"fullscreen": true, // 播放时是否全屏
"keyboard": true, // 是否支持键盘
"url": "data-source" // 设置大图片的url
}
});
- HTML中
<viewer :images="selectInfoPics" class="viewer" ref="viewer">
<img v-for="src of selectInfoPics" :src="src" :key="src" width="300">
</viewer>
// selectInfoPics 图片路径组成的数组
省区市的联动 这个就不细说了 快速通道
网友评论