@extscreen/es-protocol-dialog-vue3
v1.0.8
Published
ExtScreen framework
Downloads
592
Readme
npm config set access public ————— 设置为公共库 rollup -c rollup.config.js —————— 生成dist 文件,这步报错提示不能使用import就在package 里加 "type": "module" npm publish —————— 发布 Vue2项目集成 1、引入依赖
"@extscreen/es-protocal-dialog-vue3": "1.0.0"
2、在App.vue中引入组件
//协议弹窗组件
import {EsProtocolDialog} from '@extscreen/es-protocal-dialog-vue3;
import '@extscreen/es-protocal-dialog-vue3/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>