基于Vue2x的图片预览插件的示例代码


Posted in Javascript onMay 14, 2018

本文介绍了基于Vue2x的图片预览插件的示例代码,分享给大家,具体如下:

先来看下Demo

LiveDemo

基于Vue2x的图片预览插件的示例代码

关于开发Vue插件的几种方式 (具体请移步官网)Vue官网

MyPlugin.install = function (Vue, options) {
 // 1. 添加全局方法或属性
 Vue.myGlobalMethod = function () {
  // 逻辑...
 }

 // 2. 添加全局资源
 Vue.directive('my-directive', {
  bind (el, binding, vnode, oldVnode) {
   // 逻辑...
  }
  ...
 })

 // 3. 注入组件
 Vue.mixin({
  created: function () {
   // 逻辑...
  }
  ...
 })

 // 4. 添加实例方法
 Vue.prototype.$myMethod = function (methodOptions) {
  // 逻辑...
 }
}

我采用第一种方式来编写这个插件

1.第一步创建项目

vue init webpack-simple youProjectName(你的项目名称)具体操作不在赘述

基于Vue2x的图片预览插件的示例代码

2.开始插件开发,编写index.js

import vuePictureViewer from './vue-picture-viewer'
const pictureviewer = {
 install (Vue, options) {
  Vue.component(vuePictureViewer.name, vuePictureViewer)
 }
}

if (typeof window !== 'undefined' && window.Vue) { // 这段代码很重要
 window.Vue.use(pictureviewer)
}
export default pictureviewer

3.编写vue-picture-viewer.vue也挺简单(具体可以去看源码)

4.如何使用(main.js)

import vuePictureViewer from './lib/index.js'
Vue.use(vuePictureViewer)

App.vue

<template>
 <div id="app">
  <vue-picture-viewer :imgData="imgUrl" :switch="true" v-if="imgUrl"></vue-picture-viewer>
 </div>
</template>

<script>
export default {
 name: 'app',
 data () {
  return {
   imgUrl: [{
     url:'http://p8ny46w8x.bkt.clouddn.com/test1.jpg',
     name: 'test1.jpg'
    },
    {
     url: 'http://p8ny46w8x.bkt.clouddn.com/test2.jpg',
     name: 'test2.jpg'
    }, {
     url: 'http://p8ny46w8x.bkt.clouddn.com/test3.jpg',
     name: 'test3.jpg'
    },
    {
     url: 'http://p8ny46w8x.bkt.clouddn.com/test4.jpg',
     name: 'test4.jpg'
    }]
  }
 }
}
</script>

<style>
* {
 margin: 0;
 padding: 0;
}
html, body {
 width: 100%;
 height: 100%;
}
</style>

5.打包前的配置webpack.config.js(很重要!!!)

module.exports = {
 entry: './src/lib/index.js',
 output: {
  path: path.resolve(__dirname, './dist'),
  publicPath: '/dist/',
  // filename: 'build.js',
  filename: 'vue-picture-viewer.js',
  library: 'pictureViewer',
  libraryTarget: 'umd',
  umdNamedDefine: true
 },

6.打包成功,配置package.json

"license": "MIT", // 许可证
 "private": false, // 默认是true 私人的 需要改为false, 不然发布不成功!
 "main": "dist/vue-picture-viewer.js", 这个超级重要 决定了你 import xxx from “vue-picture-viewer” 它默认就会去找 dist下的vue-picture-viewer 文件
 "repository": {
  "type": "git",
  "url": "https://github.com/sangcz/vue-picture-viewer" // github项目地址
 },

7.一切Ok准备发布!

8.首先注册好npm后 添加用户

npm adduser 
Username: your name 
Password: your password 
Email: yourmail

// 查看一下登录的是不是你自己
npm whoami

// 发布
npm publish

// 这里我遇到一个问题,发布失败了!

什么原因呢?

基于Vue2x的图片预览插件的示例代码

9.解决了上面的问题,发布成功了!开心?

10.记得写一下README.md(比如像我的一样,写的越详细越好!)

11.这个插件其实很简单的,主要是要把开发到发布都来了一遍,还是有收获的

最后总结

插件还有一点问题,放大缩小的操作也没有加动画,不兼容移动端,看起来比较生硬!第二版的时候给加上动画兼容一下移动端!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
js两行代码按指定格式输出日期时间
Oct 21 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
js简单网速测试方法完整实例
Dec 15 Javascript
jQuery mobile 移动web(6)
Dec 20 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
详解Vue.js使用Swiper.js在iOS
Sep 10 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 Javascript
在vue中利用全局路由钩子给url统一添加公共参数的例子
Nov 01 Javascript
vue组件中的数据传递方法
May 14 #Javascript
vue如何在自定义组件中使用v-model
May 14 #Javascript
JavaScript常用数学函数用法示例
May 14 #Javascript
JavaScript中常见内置函数用法示例
May 14 #Javascript
纯js封装的ajax功能函数与用法示例
May 14 #Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 #Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 #Javascript
You might like
PHP中set error handler函数用法小结
2015/11/11 PHP
thinkPHP多语言切换设置方法详解
2016/11/11 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
Vue 理解之白话 getter/setter详解
2019/04/16 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
微信小程序缓存过期时间的使用详情
2019/05/12 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python计算回文数的方法
2015/03/11 Python
Python进程通信之匿名管道实例讲解
2015/04/11 Python
详解python单例模式与metaclass
2016/01/15 Python
Python中操作符重载用法分析
2016/04/29 Python
Python获取当前公网ip并自动断开宽带连接实例代码
2018/01/12 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
python远程邮件控制电脑升级版
2019/05/23 Python
python频繁写入文件时提速的方法
2019/06/26 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
加拿大领先的时尚和体育零售商:Sporting Life
2019/12/15 全球购物
资料员的岗位职责
2013/11/20 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
教师自查自纠材料
2014/10/14 职场文书
预备党员介绍人意见
2015/06/01 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
车辆挂靠协议书
2016/03/23 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android