vue 插件

①图片预览(查看大图)

1. 先安装插件 npm install vue-photo-preview --save
2. 在main.js内引入并注册调用

   import preview from 'vue-photo-preview'
   import 'vue-photo-preview/dist/skin.css'
   Vue.use(preview)

　　　3. 代码中使用

　　　　

<img v-for="src in imgs" :src="src.url" :key="src.title" :preview="src.preview" :preview-text="src.title">

　　// preview 预览的图片

　　// preview-text 预览图片的描述

②图片预览(缩放 查看大图[可拖拽])

1. 先安装 npm install v-viewer --save
2. 在main.js中引入并注册调用

   import Viewer from 'v-viewer'
   import 'viewerjs/dist/viewer.css'
   Vue.use(Viewer)
   
   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
     }
   })

3. 代码实现

   <viewer :images="image">
     <h1>preview图片预览插件</h1>
     <img v-for="src in imgs" :src="图片" :key="图片的唯一标识">
   </viewer>

 

③复制

1. 首先安装 npm install clipboard --save
2. 在需要的页面引入

   import Clipboard from 'clipboard'

3. 代码

   <template>
     <div style="margin-right: auto;margin-left: auto; 800px">
       <el-table :data="list">
         <el-table-column label="搜索引擎" prop="name"></el-table-column>
         <el-table-column label="链接" prop="url"></el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
             <el-button @click="copyLink(scope.row)" class="tag">复制链接</el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
   </template>
   
   <script>
   import Clipboard from 'clipboard'
   export default {
     name: 'ClipboardTest',
     data () {
       return {
         list: [
           { name: '百度', url: 'https://www.baidu.com/' },
           { name: '谷歌', url: 'https://www.google.com.hk/' },
           { name: '360搜索', url: 'https://www.so.com/' }
         ]
       }
     },
     methods: {
       copyLink (data) {
         console.log(1)
         var clipboard = new Clipboard('.tag', {
           text: function () {
             return data.url
           }
         })
         clipboard.on('success', e => {
           this.$message({ message: '复制成功', showClose: true, type: 'success' })
           // 释放内存
           clipboard.destroy()
         })
         clipboard.on('error', e => {
           this.$message({ message: '复制失败,', showClose: true, type: 'error' })
           clipboard.destroy()
         })
       }
     }
   }
   </script>