Vue3?重構(gòu)函數(shù)透傳示例解析

更新時(shí)間：2023年02月17日 11:48:24 作者：SoaringHeart

這篇文章主要為大家介紹了Vue3?重構(gòu)函數(shù)透傳示例解析

一、來源

之前做 vue 手機(jī)端需求開發(fā)時(shí)，遇到多個(gè)相似列表頁面：

列表頁面+下拉刷新和上拉加載+占位圖（無數(shù)據(jù)+斷網(wǎng)）...

就想能不能復(fù)用同一個(gè)頁面，傳入不同的數(shù)據(jù)和單元格即可；經(jīng)過一個(gè)多月的思考（查詢js 的特性 + Vue3官方文檔），最終在官方文檔：

找到解決辦法： 屬性透傳方法

原理如下：

二、使用示例

1、VRefreshListDemo.vue

<template>
  <navbar
    class="navbar"
    isleftarrow
    navBarTitle="數(shù)據(jù)透傳"
    closeWebview
    isFixed
  />
  <VRefreshList
    :requestFC="requestFC"
    :requestErrorFC="requestErrorFC"
    :requestParamsChange="tag"
    :pageIndexInitial="pageIndexInitial"
  >
    <template v-slot="slotProps">
      <MessageInteractiveCell 
        class="page-view__cell"
        v-for="(e, index) in slotProps.list" :key="index"
        :imgUrl="deliverDataObj(e)?.activityUserIcon"
        :imgUrlRight="getResizedAliOSSImageUrl(e, 64)"
        :text="formatContentTitle(e)"
        :detailText="formatContentDetails(e)"
        :tag="formatDateNoYear(e.pushTime)"
        @click="clickCell(e)"
      >
      </MessageInteractiveCell>
    </template>
  </VRefreshList>
</template>
<script setup>
import navbar from '@/components/navbar.vue';
import VRefreshList from './VRefreshList.vue';
import MessageInteractiveCell from '@/views/message/components/MessageInteractiveCell.vue';
import { getCurrentInstance, ref, reactive, computed, watch, onMounted, onActivated} from 'vue';
import { onBeforeRouteLeave } from 'vue-router';
import { Toast } from 'vant';
import { useStore } from 'vuex';
import { DropdownMenu, DropdownItem } from 'vant';
import { NET_MSG_ERROR } from '@/service/request/apiMessage';
import { hasNet, goToPage, goToPageForResult } from '@/utils/uplusApi';
import * as RQ from '@/service/request/request.js';
import * as MessageContant from '@/views/message/MessageContant.js';
import { 
  formatDateWithYear,
  formatDateNoYear,
  jumpURL, 
  getResizedAliOSSImageUrl, 
  deliverDataObj,
} from '@/views/message/MessageCommonUtil';
import icon_interactive from '@/assets/images/icon_interactive_base64';
import icon_like from '@/assets/images/icon_like_base64';
import icon_evaluation from '@/assets/images/icon_evaluation_base64';
const store = useStore();
const currentInstance = getCurrentInstance();
const { $platform, $vtoast, $debounce, $gio} = currentInstance.appContext.config.globalProperties;
onBeforeRouteLeave(() => {
  $vtoast.clear();
});
// 初始創(chuàng)建頁面剛進(jìn)來加載一次
onMounted(() => {
  // console.log('MessageList -> onMounted');
  // $vtoast.loading({});
  // onRefresh();
});
onActivated(() => {
  console.log('ContentList.vue -> onActivated');
  // $vtoast.loading({});
  // onMore();
});
const businessType = ref(store.getters.msgType || '0');
const pageIndexInitial = ref(1);
/// 獲取歷史消息
async function requestFC(options) {
  const {isRefresh, page, pageSize, lastObj} = options;
  console.log(`VRefreshListDemo requestFC:${JSON.stringify(isRefresh)},${page}`);
  const timestamp = Date.now();
  let msgTime = formatDateWithYear(timestamp);
  if (!isRefresh && lastObj) {
    msgTime = lastObj.pushTime;
  }
  const params = {
    msgTime: msgTime,
    queryTag: 1,
    querySize: pageSize,
    businessType: businessType.value,
  };
  if (['20'].includes(businessType.value) && 
  store.getters.msgBelong && 
  store.getters.msgBelongType) {
    params.belong = store.getters.msgBelong;
    params.belongType = store.getters.msgBelongType;
  }
  const items = await RQ.getMsgHistory(params);
  return items;
}
async function requestErrorFC(error) {
  Toast(JSON.stringify(error));
}
const clickCell = (obj) => {
  if (!hasNet.value) {
    Toast(NET_MSG_ERROR);
    return;
  }
  const url = formatContentReviewPage(obj);
  jumpURL(url);
};
function formatContentTitle(e) {
  const activityUserObj = deliverDataObj(e);
  // const result = decodeURIComponent(activityUserObj?.activityUserNickName ?? '');
  const result = decodeURIComponent(e.message.data.body.view?.title ?? '-');
  return result;
}
function formatContentDetails(e) {
  const result = decodeURIComponent(e.message.data.body.view?.title ?? '-');
  return result;
}
function formatContentReviewPage(e) {
  const result = e.message.data.body.extData?.reviewPage;
  return result;
}
</script>
<style scoped lang='scss'>
.page-view{
  position: relative;
  margin-top: 46px;
  height: calc(100vh - 46px);
  overflow: scroll;
}
.navbar{
  height: 46px;
}
:deep .van-pull-refresh{
  top: 46px;
}
</style>

2、VRefreshList.vue 源碼

VRefreshCustom 是“上拉刷新和下拉加載+占位圖”的封裝

<template>
  <VRefreshCustom
    v-model:refreshing="refreshing"
    v-model:loading="loading"
    :onRefresh="onRefresh"
    :loadMore="onMore"
    :finished="finished"
    :loadingText="loadingText"	
    :finishedText="finishedText"
    :netStatus="netStatus"
    :clickVNet="clickVNet"
    :isSuccess="isSuccess"
  >
    <slot :list="list"></slot>
  </VRefreshCustom>
</template>
<script setup>
import VRefreshCustom from './VRefreshCustomNew.vue';
import { getCurrentInstance, ref, reactive, computed, watch, onMounted, onActivated} from 'vue';
import { onBeforeRouteLeave } from 'vue-router';
import { Toast } from 'vant';
import { NET_MSG_ERROR } from '@/service/request/apiMessage';
import { hasNet, goToPage, goToPageForResult } from '@/utils/uplusApi';
const currentInstance = getCurrentInstance();
const { $platform, $vtoast, } = currentInstance.appContext.config.globalProperties;
onBeforeRouteLeave(() => {
  $vtoast.clear();
  console.log('離開 MessageInteractivePage.vue');
});
const props = defineProps({
  requestFC: {
    type: Function,
    required: true,
    description: '接口請(qǐng)求方法',
  },
  requestErrorFC: {
    type: Function,
    description: '接口請(qǐng)求錯(cuò)誤回調(diào)方法',
  },
  pageIndexInitial: {
    type: Number,
    default: 1,
  },
  pageSize: {
    type: Number,
    default: 30,
  },
  requestParamsChange: {
    type: String,
  },
  loadingText: {
    type: String,
    default: '',
  },
  finishedText: {
    type: String,
    default: '',
  },
});
const pageIndex = ref(props.pageIndexInitial);
const refreshing = ref(false);
const isSuccess = ref(false);
const loading = ref(false);
const finished = ref(false);
/// -1 請(qǐng)求失敗; 0無數(shù)據(jù); 1 正常列表,有數(shù)據(jù);
const netStatus = ref(1);
const list = reactive([]);
const clickVNet = () => {
  $vtoast.loading({});
  onRefresh();
};
///下拉刷新
const onRefresh = async () => {
  console.log('VRefreshList onRefresh');
  pageIndex.value = props.pageIndexInitial;
  if (!hasNet.value) {
    // netStatus.value = -1;
    refreshing.value = false;// 下拉刷新加載狀態(tài)結(jié)束
    isSuccess.value = false;// 下拉刷新成功失敗
    loading.value = false;// 加載狀態(tài)結(jié)束
    finished.value = true;// 數(shù)據(jù)全部加載完成
    $vtoast.clear();
    Toast(NET_MSG_ERROR);
    return;
  }
  refreshing.value = true;
  loading.value = false;
  requestList(true);
};
// 上拉獲取更多
const onMore = async () => {
  console.log('VRefreshList onMore');
  pageIndex.value++;
  refreshing.value = false;
  loading.value = true;
  requestList(false);
};
/// 獲取歷史消息
const requestList = async () => {
  try {
    netStatus.value = 1;
    const params = {
      isRefresh: refreshing.value,
      page: pageIndex.value,
      pageSize: props.pageSize,
      lastObj: list.length > 0 ? list[list.length - 1] : undefined,
    };
    const items = await props.requestFC(params);
    // console.log(`VRefreshList items:${items.length}`);
    if (refreshing.value) {
      list.splice(0, list.length);
    }
    if (list.length === 0 && items.length === 0) {
      refreshing.value = false;
      isSuccess.value = true;
      loading.value = false;// 加載狀態(tài)結(jié)束
      finished.value = true;// 數(shù)據(jù)全部加載完成
      netStatus.value = 0;
      return;
    }
    if (items.length) {
      list.push(...items);
    }
    console.log(`${location.hash} list:${list.length}, items:${items.length}`);
    loading.value = false;// 加載狀態(tài)結(jié)束
    finished.value = (items.length < props.pageSize);// 數(shù)據(jù)全部加載完成
    if(refreshing.value){
      isSuccess.value = true;
    }
    netStatus.value = list.length === 0 ? 0 : 1;
  } catch (error) {
    console.log(`${location.hash} error: ${JSON.stringify(error)}, 
    refreshing: ${refreshing.value},
    hasNet.value:${hasNet.value}`);
    finished.value = true;// 數(shù)據(jù)全部加載完成
    isSuccess.value = false;// 下拉刷新成功失敗
    if (!hasNet.value) {
      netStatus.value = -1;
    } else {
      netStatus.value = 0;
    }
    if (!error) {
      return;
    }
    props.requestErrorFC && await props.requestErrorFC(error);
  } finally {
    $vtoast.clear();
    refreshing.value = false;
    loading.value = false;// 加載狀態(tài)結(jié)束
  }
};
watch(() => props.requestParamsChange, (newValue, oldValue) => {
  console.log('watch requestParamsChange', newValue, oldValue);
  if (newValue !== oldValue) {
    scrollToTop(listEl);
    onRefresh();
  }
});
watch(() => hasNet.value, (newValue, oldValue) => {
  // console.log('hasNet.value', newValue, oldValue);
  if (newValue) {
    onRefresh();
  }
});
let listEl;
onMounted(() => {
  listEl = document.getElementById('van-list');
  // console.log(listEl);
});
const scrollToTop = (e) => e.scrollIntoView({ block: 'start' });
</script>