基于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 相关文章推荐
JavaScript中令你抓狂的魔术变量
Nov 30 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 Javascript
用jQuery获取table中行id和td值的实现代码
May 19 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
JS实现横向跑马灯效果代码
Apr 20 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
JS+CSS实现动态时钟
Feb 19 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
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
php使用PDO方法详解
2014/12/27 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
jQuery插件编写步骤详解
2016/06/03 Javascript
jquery插入兄弟节点的操作方法
2016/12/07 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
十分钟带你快速了解React16新特性
2017/11/10 Javascript
js实现动态改变radio状态的方法
2018/02/28 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
Python import自定义模块方法
2015/02/12 Python
Python Requests安装与简单运用
2016/04/07 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
python 利用jieba.analyse进行 关键词提取
2020/12/17 Python
玩具反斗城葡萄牙官方商城:Toys"R"Us葡萄牙
2016/10/21 全球购物
俄罗斯优惠券网站:BIGLION
2017/05/21 全球购物
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
护理专业应届毕业生推荐信
2013/11/15 职场文书
好人好事事迹材料
2014/02/12 职场文书
售后求职信范文
2014/03/15 职场文书
年度考核自我鉴定
2014/03/19 职场文书
出国导师推荐信
2015/03/25 职场文书
python 实现体质指数BMI计算
2021/05/26 Python