#打开浮动固定窗口 * 调用方式 ~~~ <view @click="fun_floatbox" data-status="true" data-OP="input" data-SP="逻辑接口路径" data-width="30" data-height="60" data-update_user="true">按钮</view> ~~~ * 参数说明 | 参数名称 | 状态 | 参数说明 | | --- | --- | --- | | fun_floatbox | 必填 | 窗口操作函数 | | status | 必填 | 窗口开关( true | false ) | | title | 必填 | 窗口标题 | | OP | 必填 | 调用模板标识 | | SP | 必填 | 逻辑接口路径 | | width | 选填 | 窗口宽度,默认50 | | height | 选填 | 窗口最大高度,默认60 | | update_user | 选填 | 更新用户缓存(true是 false否) | * 载入组件 ~~~ import Temp_FloatBox from '@/components/sbh-temp/main/float_box/pc.vue'; //>浮动框 ~~~ * 载入模板 ~~~ <!-- 浮动层 --> <Temp_FloatBox :fun_floatbox="fun_floatbox" v-if="floatbox_show" v-bind:OP="floatbox_op" v-bind:width="floatbox_width" v-bind:height="floatbox_height" v-bind:NETDATA="floatbox_data" v-bind:update_user="update_user"></Temp_FloatBox> ~~~ * 声明组件 ~~~ components: { Temp_FloatBox, } ~~~ * 初始化组件值 ~~~ data(){ arr.floatbox_show = false; //>弹框状态 arr.floatbox_op = ''; //>弹框调用模板 arr.floatbox_width = 50; //>弹框宽度百分比 arr.floatbox_height = 60; //>弹框高度百分比 arr.floatbox_data = {}; //>弹窗网络请求数据 arr.update_user = false; //>用户数据缓存更新 } ~~~ * 定义函数 ~~~ //>浮动框 - 加载页面 //>传入参 //>status 窗口开关 title 窗口标题 OP 调用模板标识 SP 逻辑接口路径 width 窗口看宽度 height 窗口最大高度 user_update 用户数据更新 fun_floatbox(e){ //>若浮动框打开时为启动更新状态则将缓存同步至节点数据中 this.update_user ? this.node_sbh_user = uni.getStorageSync('sbh_user') : null; let update_user = e.currentTarget.dataset.update_user; this.update_user = update_user ? true : false; //>是否更新用户数据缓存 let status = e.currentTarget.dataset.status; this.floatbox_show = status; //>窗口开关 if(!status){ return false; } //>窗口关闭时则打断点 let OP = e.currentTarget.dataset.op; this.floatbox_op = OP; //>加载模板标识 this.floatbox_title = e.currentTarget.dataset.title; //>弹框标题 let width = e.currentTarget.dataset.width; width ? this.floatbox_width = width : null; //>弹框自定义宽度 let height = e.currentTarget.dataset.height; height ? this.floatbox_height = height : null; //>弹框自定义最大高度 //>网络请求数据 let that = this; let SP = e.currentTarget.dataset.sp.split(':'); //>执行系统逻辑接口 let data = {}; data.T = SP[1]; Net.Net(SP[0],data).then(res => { if(!res.succeed){ return false; } this.floatbox_data = res; }); }, ~~~ 调用出错记录 ~~~ 1.调用模板是需把代码放在template>view内 ~~~