1. 上拉加载和下拉刷新

const onLoad = () => {
  state.loading = true
  getserverList(state.params).then(res => {
    // 直接判断接口数据错误
    if ((!res || !res.data || !res.data.list) && state.params.page !== 1) {
      state.finished = true
      return
    }
    if (state.refreshing) {
      state.list = [] //根据需要去加这行
      state.refreshing = false
    }
    ++state.params.page
    state.list =
      state.params.page === 1
        ? res.data.list
        : _.uniqBy(state.list.concat(res.data.list), 'id')

    // 根据长度判断没有数据了
    if (
      (!resList.length || resList.length < state.params.pageSize) &&
      state.params.page !== 1
    ) {
      state.finished = true
    }

    // 根据后端返回判断没有数据了
    if (state.params.page > res.data.totalPage) {
      state.finished = true //没有更多
    }

    state.loading = false
  })
}

const onRefresh = () => {
  state.finished = false
  state.loading = true
  state.params.page = 1
  onLoad()
}

2. popup 封装

1. 子组件封装

<template>
  <van-popup
    v-model:show="showPopup"
    position="bottom"
    teleport="#myContainer"
    :round="round"
    @close="close"
  >
    <slot name="content" />
  </van-popup>
</template>

<script>
import { reactive, toRefs, getCurrentInstance } from 'vue'
export default {
  props: {
    showPopup: {
      type: Boolean,
      default: false
    },
    round: {
      type: String,
      default: 'round'
    }
  },
  setup() {
    let { proxy } = getCurrentInstance()
    let data = reactive({
      close: () => {
        proxy.$emit('update:showPopup', false)
      }
    })
    return {
      ...toRefs(data)
    }
  }
}
</script>

2. 父组件使用
<vant-popup v-model:showPopup="showBonus">
    <template v-slot:content>
       <div>插入的内容</div>
    </template>
</vant-popup>

3. van-action-sheet

<template>
  <div class="vant_sheet">
    <van-action-sheet
      v-model:show="isSheet"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @cancel="onCancel"
      @select="onSelect"
      @close="onCancel"
    />
  </div>
</template>

<script>
import { ref, defineComponent, getCurrentInstance } from 'vue'
import { ActionSheet } from 'vant'
export default defineComponent({
  components: {
    [ActionSheet.name]: ActionSheet
  },
  props: {
    showSheet: {
      type: Boolean,
      default: true
    },
    actions: {
      type: Array,
      default: [{ name: '菜单1' }, { name: '菜单二' }]
    }
  },
  setup() {
    let { proxy } = getCurrentInstance()
    let isSheet = ref(proxy.showSheet) // 由于vant这个组件的原因必须要使用响应式声明
    const onCancel = () => {
      proxy.$emit('update:showSheet', false)
    }

    function onSelect(item, index) {
      proxy.$emit('update:showSheet', false)
    }

    return {
      onCancel,
      onSelect,
      isSheet
    }
  }
})
</script>

4. van-image(头像，图片)

<template>
  <van-image
    :src="src"
    :lazy-load="lazy"
    :round="round"
    :width="width"
    :height="height"
    fit="cover"
    @click="path ? $router.push(path) : ''"
  >
    <template v-slot:loading v-if="src">
      <van-loading type="spinner" :size="loadingSize" />
    </template>
  </van-image>
</template>

<script>
import { Image as VanImage, Loading, Lazyload } from 'vant'
export default {
  components: {
    [VanImage.name]: VanImage,
    [Loading.name]: Loading,
    [Lazyload.name]: Lazyload
  },
  props: {
    path: {
      type: String,
      default: ''
    },
    src: {
      type: String,
      default: ''
    },
    lazy: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    width: {
      type: [String, Number],
      default: 50
    },
    height: {
      type: [String, Number],
      default: 50
    },
    loadingSize: {
      type: [String, Number],
      default: 20
    }
  }
}
</script>

使用
<vant-image :src="item.imgUrl" width="100%" height="100%" />

5. Dialog 封装

<script>
import { getCurrentInstance } from 'vue'
import { Dialog } from 'vant'
export default {
  components: {
    [Dialog.Component.name]:Dialog.Component
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
  },
  setup() {
    let { proxy } = getCurrentInstance()
    const onCancel = () => {
      proxy.$emit("update:showDialog", false);
    }

    const onConfirm = (value) => {
      console.log('点击了关闭')
      proxy.$emit("onConfirm", value)
      onCancel()
    }
    return {
      onCancel,
      onConfirm
    }
  },
}
</script>