#打開浮動固定窗口 * 調用方式 ~~~ <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內 ~~~