Vue-wdialog NPM

vue-wdialog-plugin

使用方法

npm install vue-wdialog -S
import VueWdialog from 'vue-wdialog'
Vue.use(VueWdialog)
通过 this.$dialogtype 或者 this.$dialog(options)

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() 来关闭弹窗。

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

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

参考资料：https://www.cnblogs.com/wisewrong/archive/2018/12/28/10186611.html
使用 vue-cli3+ 版本实现创建

打包命令

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

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

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

    查看npm当前的挂载
    npm config get registry

    设置为淘宝镜像
    npm config set registry http://registry.npm.taobao.org

    设置为默认镜像
    npm config set registry http://registry.npmjs.org

常用命令

参考文档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

常见错误

参考文档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