web/plugins/bind-phone-mobile

@jy/plugin-bind-phone

移动端绑定手机号弹框插件，可通过指令、vue实例调用

目录结构

├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── api
│   ├── assets
│   ├── components  // 项目业务组件
│   ├── router
│   ├── utils
│   └── views
├── vite.config.js
└── yarn.lock

引入方式

1. web项目内通过package.json工作空间引入

   "@jy/plugin-bind-phone": "workspace:*"
   
   // 注册
   import TestBindPhone from '@jy/plugin-bind-phone'
   Vue.use(TestBindPhone)
   

2. jy项目通过build后放置/common-module/plugins/目录下引入

   <script src="/common-module/plugins/js/jy-bind-phone.umd.js"></script>
   // 引入后注册(必须在new Vue()前注册)
   Vue.use(BindPhone)
   

3.其它项目通过install私有包引入

pnpm add @jy/plugin-bind-phone@1.0.0

import TestBindPhone from '@jy/plugin-bind-phone'
Vue.use(TestBindPhone)

Example

<template>
  <div>
    <button v-bound-phone="bindPhone()">指令触发</button>
    <button @click="handle">手动实例触发</button>
  </div>
</template>
<script>
export default {
  methods: {
    bindPhone() {
      return {
        props: {
          name: '触发位置名称(统计需要)'
        },
        next: () => {
          <!-- 绑定成功/已绑定 下一步操作 -->
        },
        bound: () => {
          // 绑定成功 下一步操作
          // 当绑定完手机号操作与next不一致时需要传入，一致时只需传入next即可
        },
        close: () => {
          <!-- 关闭弹框 -->
        }
      }
    },
    handle() {
      this.$testBindPhone({
        props: {
          visible: true,
          name: '测试弹框-全局方法触发'
        },
        next: () => {
          this.$toast('next')
        }
      })
    }
  }
}
</script>

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

配置package.json

指定打包路径
"main": "./dist/jy-bind-phone.umd.js",
"module": "./dist/jy-bind-phone.mjs",

配置私有库地址

pnpm set registry http://172.20.100.235:14873/

注册私有库

pnpm adduser --registry http://172.20.100.235:14873/

登录私有库

pnpm login --registry http://172.20.100.235:14873/

修改版本号

手动修改package.json版本号
"version": "1.0.3",

发布私有库

pnpm publish --no-git-checks