美文网首页
vue 实现点击复制 、图片放大缩小 、 省市区三级联动

vue 实现点击复制 、图片放大缩小 、 省市区三级联动

作者: 杨同学a | 来源:发表于2020-02-18 17:28 被阅读0次

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 or yarn 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 图片路径组成的数组

省区市的联动 这个就不细说了 快速通道

相关文章

网友评论

      本文标题:vue 实现点击复制 、图片放大缩小 、 省市区三级联动

      本文链接:https://www.haomeiwen.com/subject/rdzgfhtx.html