欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3與elementui封裝一個(gè)便捷Loading

 更新時(shí)間:2022年09月19日 09:37:49   作者:Daiyaosei???????  
這篇文章主要介紹了vue3與elementui封裝一個(gè)便捷Loading,,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下

前言

因?yàn)楹笈_(tái)管理,總要寫很多l(xiāng)oading狀態(tài)的變量,然后控制開啟和關(guān)閉。。我個(gè)人很討厭寫這種重復(fù)的代碼。。所以為了少寫點(diǎn)這種變量,所以突發(fā)奇想封裝一個(gè),目前感覺還是挺好用的,沒出啥bug。。。在表格中也能運(yùn)用自如。。喜歡的話,可以復(fù)制到你自己的項(xiàng)目拿去用,記得點(diǎn)個(gè)贊噢

實(shí)際使用

代碼實(shí)現(xiàn)

import { reactive } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { isArray } from 'lodash-es'
// 過濾表單
import { filterForm } from '@/utils'

interface SubmitType {
  loading?: string
  params?: any
  successText?: string
  errorText?: string
  message?: string
  title?: string
}

interface SubmitParamsType {
  loadingText?: string
  params?: any
  api: Function
  success?: string
  error?: string
  submitMessage?: string
}

interface UpdateType {
  loading?: string
  params?: any
  api?: Function
  successText?: string
  errorText?: string
}

interface CrudLoadingType {
  [_submitLoading: string]: boolean
}

interface UpdateLoadingType {
  [_updateLoading: string]: boolean
}

const submitDataHook = (context: SubmitType) => {
  const {
    loading = '_submitLoading',
    successText = '操作成功',
    errorText = '操作失敗',
    message = '是否進(jìn)行提交',
    title = '溫馨提示'
  } = context
  const submitLoading = reactive({}) as CrudLoadingType
  const submitHook = ({
    params,
    api,
    loadingText = loading,
    success = successText,
    error = errorText,
    submitMessage = message
  }: SubmitParamsType) => {
    return new Promise((resolve, reject) => {
      submitLoading[loadingText as string] = true
      ElMessageBox.confirm(submitMessage, title)
        .then(() => {
          return api(isArray(params) ? params : filterForm(params))
            .then((data) => {
              ElMessage.success(success)
              resolve(data)
              return data
            })
            .catch((res) => {
              reject(res)
              if (res.code === '1' && !res.msg) {
                ElMessage.error(error)
              }
            })
        })
        .catch(() => {
          reject()
          ElMessage.warning('取消操作')
        })
        .finally(() => {
          submitLoading[loadingText as string] = false
        })
    })
  }
  return {
    submitHook,
    submitLoading
  }
}

const updateData = (context: UpdateType) => {
  const { loading = '_updateLoading', successText = '操作成功', errorText = '操作失敗' } = context
  const updateLoading = reactive({ [loading]: false }) as UpdateLoadingType
  const updateHook = ({
    params,
    api,
    success = successText,
    error = errorText,
    loadingText = loading
  }: SubmitParamsType) => {
    updateLoading[loadingText] = true
    return api(isArray(params) ? params : filterForm(params))
      .then((data) => {
        ElMessage.success(success)
        return data
      })
      .catch((e) => {
        ElMessage.error(error)
        throw e
      })
      .finally(() => {
        updateLoading[loadingText] = false
      })
  }
  return {
    updateHook,
    updateLoading
  }
}

export { submitDataHook, updateData }

到此這篇關(guān)于vue3與elementui封裝一個(gè)便捷Loading的文章就介紹到這了,更多相關(guān)vue3封裝Loading內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue結(jié)合el-upload實(shí)現(xiàn)騰訊云視頻上傳功能

    vue結(jié)合el-upload實(shí)現(xiàn)騰訊云視頻上傳功能

    這篇文章主要介紹了vue結(jié)合el-upload實(shí)現(xiàn)騰訊云視頻上傳功能,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-07-07
  • Vue生命周期實(shí)例分析總結(jié)

    Vue生命周期實(shí)例分析總結(jié)

    Vue的生命周期就是vue實(shí)例從創(chuàng)建到銷毀的全過程,也就是new Vue()開始就是vue生命周期的開始。Vue實(shí)例有?個(gè)完整的?命周期,也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模版、掛載Dom->渲染、更新->渲染、卸載等?系列過程,稱這是Vue的?命周期
    2022-10-10
  • vue中component組件的props使用詳解

    vue中component組件的props使用詳解

    本篇文章主要介紹了vue中component組件的props使用詳解,這里整理了詳細(xì)的用法,具有一定的參考價(jià)值,有興趣的可以了解一下
    2017-09-09
  • vue3使用defineModel實(shí)現(xiàn)父子組件雙向綁定

    vue3使用defineModel實(shí)現(xiàn)父子組件雙向綁定

    這篇文章主要個(gè)給大家介紹了在vue3中使用defineModel進(jìn)行父子組件中的雙向綁定,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
    2024-01-01
  • Vue.js圖片滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例

    Vue.js圖片滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例

    為了防止有人惡意使用腳本進(jìn)行批量操作,會(huì)設(shè)置圖片滑動(dòng)驗(yàn)證,本文就介紹了Vue.js圖片滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例,感興趣的可以了解一下
    2023-05-05
  • 一文了解Vue中的nextTick

    一文了解Vue中的nextTick

    Vue中的 nextTick 涉及到Vue中DOM的異步更新,感覺很有意思,特意了解了一下。其中關(guān)于 nextTick 的源碼涉及到不少知識(shí),很多不太理解,暫且根據(jù)自己的一些感悟介紹下 nextTick
    2019-05-05
  • vue3.2新增指令v-memo的基本使用教程

    vue3.2新增指令v-memo的基本使用教程

    ue3.2新增了一個(gè)指令v-memo,引入這個(gè)指令的目的是幫助大家更好的為我們的應(yīng)用做性能優(yōu)化,下面這篇文章主要給大家介紹了關(guān)于vue3.2新增指令v-memo基本使用的相關(guān)資料,需要的朋友可以參考下
    2022-09-09
  • vue 條件渲染v-if和v-show

    vue 條件渲染v-if和v-show

    這篇文章主要介紹了vue 條件渲染v-if和v-show,在模板中,可以根據(jù)條件進(jìn)行渲染。條件用到的是v-if、v-else-if以及v-else來組合實(shí)現(xiàn)的,有時(shí)候我們想要在一個(gè)條件中加載多個(gè)html元素,那么我們可以通過template元素上實(shí)現(xiàn),下面就來看看具體實(shí)現(xiàn)吧
    2021-10-10
  • 詳解vue組件基礎(chǔ)

    詳解vue組件基礎(chǔ)

    本篇文章給大家總結(jié)了vue組件基礎(chǔ)的相關(guān)知識(shí)點(diǎn)以及代碼實(shí)例,有需要的朋友可以學(xué)習(xí)參考下。
    2018-05-05
  • Vue組件設(shè)計(jì)-滾動(dòng)置頂設(shè)計(jì)案例

    Vue組件設(shè)計(jì)-滾動(dòng)置頂設(shè)計(jì)案例

    這篇文章主要介紹了Vue組件設(shè)計(jì)-滾動(dòng)置頂設(shè)計(jì)案例,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-04-04

最新評(píng)論