vue 中 loading 状态与值为空 filter

最新推荐文章于 2024-06-21 09:33:42 发布

_let

最新推荐文章于 2024-06-21 09:33:42 发布

阅读量617

点赞数

分类专栏：前端 vue 文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_39759115/article/details/103911442

版权

前端同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

vue

17 篇文章 0 订阅

订阅专栏

vue 中 loading 状态与值为空 filter

/**
 * 值为 loading 状态时，显示 ‘-’
 *
 * @param {*} value           - 值
 * @param {boolean} isLoading - 是否为 loading 状态
 * @param {string} [loadingText='-']
 * @returns
 */
export function valueLoadingFilter (value, isLoading, loadingText = '-') {
  return isLoading ? loadingText : value
}

/**
 * 数据为空时，显示 ‘--’
 *
 * @param {*} value
 * @param {string} [emptyText='--']
 * @returns
 */
export function emptyText (value, emptyText = '--') {
  return !value || (value.constructor === Array && !value.length) || (value.constructor === Object && !Object.keys(value).length) ? emptyText : value
}

const valueLoading = {
  install: function (Vue) {
    Vue.prototype.$valueLoading = valueLoadingFilter
    Vue.filter('valueLoading', valueLoadingFilter)

    Vue.prototype.$emptyText = emptyText
    Vue.filter('emptyText', emptyText)
  }
}
export default valueLoading

// useAge:
// {{ message | valueLoading(isLoading) }}