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

发布时间：2020-12-17 02:17:18 所属栏目：百科来源：网络整理

导读：本文介绍了基于Vue2x的图片预览插件的示例代码，分享给大家，具体如下：先来看下Demo LiveDemo 关于开发Vue插件的几种方式（具体请移步官网）Vue官网 // 2. 添加全局资源 Vue.directive('my-directive',{ bind (el,binding,vnode,oldVnode) { // 逻辑... }

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

先来看下Demo

LiveDemo

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

// 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(你的项目名称)具体操作不在赘述

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

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

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

4.如何使用（main.js）

App.vue

5.打包前的配置webpack.config.js（很重要！！！）

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

7.一切Ok准备发布！

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

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

// 发布
npm publish

// 这里我遇到一个问题，发布失败了！

什么原因呢？

9.解决了上面的问题，发布成功了！开心😊

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

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

最后总结

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!