@extscreen/es-protocal-dialog

npm config set access public ————— 设置为公共库 rollup -c rollup.config.js —————— 生成dist 文件，这步报错提示不能使用import就在package 里加 "type": "module" npm publish —————— 发布 Vue2项目集成 1、引入依赖

"@extscreen/es-protocal-dialog": "1.0.20"

2、在App.vue中引入组件

//协议弹窗组件
import {EsProtocolDialog} from '@extscreen/es-protocal-dialog';
import '@extscreen/es-protocal-dialog/dist/index.css';

export default {
components: {
EsProtocolDialog
},
data:{
protocolDialogProps:{
//协议配置接口地址，可以为空，默认请求正式环境
domain:'',
//快应用包名
packageName:BuildConfig.packageName,
//快应用名称
appName:__CONFIG__.esAppName,
//用于控制何时显示
initFinish:false,
//控制是否展示
hidden:false,
//牌照方编码
bcCode:'',
//协议跳转的路由地址
webViewRouter:'load_web_view'
}
}
}

3、集成组件，替换原先的协议弹窗

<template>
...
<es-protocol-dialog
:domain="protocolDialogProps.domain"
:packageName="protocolDialogProps.packageName"
:appName="protocolDialogProps.appName"
:initFinish="protocolDialogProps.initFinish"
:hidden="protocolDialogProps.hidden"
:bcCode="protocolDialogProps.bcCode"
:webViewRouter="protocolDialogProps.webViewRouter"
@onNoProtocol="onNoProtocol"
@onAgreeClick="onAgreeClick"
/>
...
</template>
<script>
export default{
  methods:{
    onESCreate(params){
      
      //在需要协议弹窗显示的位置，初始化数据
      // 需要赋值bcCode，domain，等可能变化的参数，domain不含/api/，如果无特殊需要，可以不传
      // 组件内部有默认值https://api.extscreen.com/extscreenapi
      const baseUrl=BuildConfig.TEST_ENV ? __CONFIG__.baseTestUrl :BuildConfig.hostUrl
      this.protocolDialogProps.domain=baseUrl.replace(/\/api$/g,'')
      this.protocolDialogProps.bcCode=BuildConfig.bcCode
      //由于协议跳转是拉起快应用实现，下面的逻辑必须写上，否则协议会无法跳转
      this.protocolDialogProps.hidden=params.params?.isHideXieYi==1
      this.protocolDialogProps.initFinish=true
    },
    onNoProtocol(){
      //无协议弹窗时出触发的内容，例如弹消息弹窗
    },
    onAgreeClick(){
      //有协议弹窗，点确定触发的内容
    }
  }
}
</script>