基于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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
js 操作符实例代码
Oct 24 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
javascript中的取反再取反~~没有意义
Apr 06 Javascript
vue双向绑定的简单实现
Dec 22 Javascript
如何使用bootstrap框架 bootstrap入门必看!
Apr 13 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
webpack3之loader全解析
Oct 26 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
javascript 函数的暂停和恢复实例详解
Apr 25 Javascript
js+canvas实现五子棋小游戏
Aug 02 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
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
二进制交叉权限微型php类分享
2014/02/07 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
JQuery Mobile实现导航栏和页脚
2016/03/09 Javascript
原生JS实现层叠轮播图
2017/05/17 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
2019/12/25 jQuery
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
Django日志模块logging的配置详解
2017/02/14 Python
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
python实现八大排序算法(2)
2017/09/14 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
python爬虫工具例举说明
2020/11/30 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
语文高效课堂实施方案
2014/05/03 职场文书
大学生就业求职信
2014/06/12 职场文书
关于读书的演讲稿300字
2014/08/27 职场文书
教育见习报告范文
2014/11/03 职场文书
高考学习决心书
2015/02/04 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
《彼得与狼》教学反思
2016/02/20 职场文书
创业计划书之服装
2019/10/07 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS