vue-wdialog-plugin

使用方法

1. npm install vue-wdialog -S

2. import VueWdialog from 'vue-wdialog'

3. Vue.use(VueWdialog)

4. 通过 this.$dialog[type] 或者 this.$dialog(options)

5. options 配置

   • 目前支持使用 toast,loading,alert,confirm
   • this.$dialog.toast 和 this.$dialog({type:'toast'}) 是同样的效果

   • toast 可以使用 options

       rela      String center|top|bottom  默认 center
       template  String|HTML        默认 ''
       delay     Number             默认 2000
       effect    String rela=center 的时候可以配置 fadeIn scaleIn(默认)
                        rela=top|bottom 不可以配置，top - fadeInUp, bottom - fadeInDown
       tier      Number(0|1)    默认 1     0 覆盖当前弹窗，1 重新打开一个弹窗
       isMask    Boolean  默认 false  设置为 true 的时候会是一个空白的遮罩层

   • loading 可以使用 options

       icon      String   默认 ''  不去内部设置的 loading.gif 图片
       template  String|HTML        默认 ''
       delay     Number             默认 2000
       isMask    Boolean  默认 true  设置为 true 的时候会是一个空白的遮罩层
       loadingCss3 String css的效果  默认'' loading1-7
       当 loadingCss3 存在的时候，icon 将设置为空。
       loading6-7 的效果。effect的默认效果将是 fadeIn ，别的是 scaleIn

   • alert 可以使用 options

       template  String|HTML        默认 ''
       btns      Any    （'确定'，1，{key'确定'}, ['确定']）               默认 ['确定']
       cancelColor    String  默认 "#999"
       sureColor    String  默认 "#1e7ee4"
       cancelCb   Function 如果 cancelCb(){return false;} 则需要手动调用 this.$dialog.close() 来关闭弹窗。

   • confirm 可以使用 options

       template  String|HTML        默认 ''
       btns      Any    （'确定'，1，{key'确定'}, ['确定']）               默认 ['确定']
       cancelColor    String  默认 "#999"
       sureColor    String  默认 "#1e7ee4"
       cancelCb   Function 如果 cancelCb(){return false;} 则需要手动调用 this.$dialog.close() 来关闭弹窗。
       sureCb   Function  需要手动调用 this.$dialog.close() 来关闭弹窗。

6. 注意事项

   • 目前页面中允许出现一个弹窗，会覆盖上一个弹窗

7. 待完成

   • loading 通过 css3 来实现，通过 options 来读取不同的效果，已完成。
   • prompty 弹窗
   • action-sheet 弹窗
   • 页面展示多个弹窗，通过 options 可以手动执行覆盖或者不覆盖 （只有为 toast 的时候才会生效）
   • 优化多次点击的问题 (增加了 300ms 的防抖动，基本解决了这个问题)

vue-plugins 插件的新建、打包、上传到 npm

1. 参考资料：[https://www.cnblogs.com/wisewrong/archive/2018/12/28/10186611.html]
2. 使用 vue-cli3+ 版本实现创建
3. 打包命令

       vue-cli-service build --target 作用于文件的目录 --name 项目名字 --dest 打包文件的目录 入口文件
       eg: vue-cli-service build --target lib --name vue-wdialog --dest lib packages/dialog/index.js

npm 发布插件流程、常用命令、常见错误

1. 如果 npm 已经挂载到 淘宝 上的，需要切换为默认的服务器上。

       查看npm当前的挂载
       npm config get registry
   
       设置为淘宝镜像
       npm config set registry http://registry.npm.taobao.org
   
       设置为默认镜像
       npm config set registry http://registry.npmjs.org

2. 常用命令

   • 参考文档[https://www.cnblogs.com/leinov/p/9658110.html]

       添加用户
       npm adduser
   
       查看当前目录下安装node包
       npm ls
   
       登陆npm
       npm login
   
       删除包名
       npm unpublish 依赖包名称 --force
   
       查看当前npm用户
       npm whoami
   
       发布本地包
       npm publish
   
       查看node安装路径
       npm get prefix
   
       查看全局node包
       npm root -g
   
       npm清理缓存
       npm cache clean -f

3. 常见错误

   • 参考文档[https://www.jianshu.com/p/5ea8e50d628e]

       http fetch PUT 401 xxxxxxx
       npm whoami 时，没有登录人。
   
       verbose stack Error: 403 Forbidden - PUT http://registry.npmjs.org/xxxxx
       You cannot publish over the previously published versions: 1.0.0
       组件版本已存在，更新版本，重新npm publish
   
       http fetch PUT 403 https://registry.npm.taobao.org/xxxxxx
       当前的registry 是taobao镜像，需要改为npmjs
   
       403 Forbidden - PUT
       You do not have permission to publish "xxxxx". Are you logged in as the correct user
       你的组件名字已经被别人发布过了
   
       npm publish 提示成功后，但是npm install仍然不能安装最新包
       对应的新版本在淘宝镜像里面找不到，也就是淘宝镜像没有同步成功。需要切回到默认的，重新 install