vue项目中使用字典

  需求说明:这个是在之前的公司参与开发的一个系统中,发现在别人构建的项目中有一个字典翻译功能,在工作中经常使用到:比如列表页的状态翻译、不同状态对应不同颜色等等,因为有的时候后端返回的接口可能只有状态值,没有状态说明,这时候添加字典就很有用,只要在配置文件中设置好状态值对应的说明,以及状态值对应的颜色,通过简单调用就可以实现想要的效果

 

一、如何使用

(1)首先在项目的src目录下创建一个dictionary.js的文件,然后在文件中写入状态字段对象,然后将内容暴露出去如下:

// 本地字典
export default {
  // 修改记录审批状态
  approvalStatus: {
    0: '待审批',
    1: '审批通过',
    2: '审批驳回',
    3: '取消申请'
  },
  // 审批状态字体颜色
  approvalColor: {
    0: '#00FFFF',
    1: '#00FF00',
    2: '#FF2A00',
    3: '#cccccc'
  }
}

这里面的approvalStatus和approvalColor是状态值对应的描述说明对象和状态值对应的颜色说明对象,在页面使用时会用到

 

(2)然后在项目的入口文件main.js中,引入配置好的字典文件,这里我是配合全局过滤器一起使用,将状态值对应的状态说明返回,代码如下:

import dictionary from '@/dictionary.js'


// 全局过滤器,配合本地字典一起使用
Vue.filter('dict', function (filterStr, filterNm) {
  let getStr = String(filterStr)
  let returnVal = ''
  const dicAry = Object.entries(dictionary)
  if (!getStr.includes(',')) {
    dicAry.forEach(item => {
      if (filterNm === item[0]) {
        Object.entries(item[1]).forEach(forItem => {
          if (getStr === forItem[0]) {
            returnVal = forItem[1]
          }
        })
      }
    })
  } else {
    // 这里是如果返回的状态存在多个,以逗号','返回的状态说明就是多个说明拼接起来的
    let strAry = getStr.split(',')
    strAry.forEach(item => {
      dicAry.forEach(item2 => {
        if (filterNm === item2[0]) {
          Object.entries(item2[1]).forEach(forItem => {
            if (item === forItem[0]) {
              returnVal += forItem[1]
            }
          })
        }
      })
    })
  }
  return returnVal
})

下面的else部分代码,是因为我的接口里面有返回的状态值是多个,然后以逗号‘,’分隔,状态对应的值是①②③这样的,UI想要的效果是①②这样连接的,所以我做了拼接处理,这里可以根据自己项目需求进行改动即可

 

(3)最后则是如何在vue组件中使用了,代码如下:

// 在data()中定义并引入全局过滤器 
dict: Vue.filter('dict')

html部分:
<span
    class="ctr-li-nm"
    style="width: 200px"
    :style="{'color': dict(item.status, 'approvalColor')}"
    >
    {{ item.status | dict("approvalStatus") }}
</span>

 

  这样就可以对列表的状态进行翻译以及不同状态的样式处理了,我个人认为,表格中的数据会非常多,如果在行上面用v-if或者:class这些来判断当前的状态说明和样式,如果只有两三种状态还好,有的状态有十来个状态值,都写判断的话会让页面的代码有点乱,通过添加字典配合过滤属性处理,可以方便快捷的实现想要的效果。

  这个是我自己查了一些资料,参考一些开发博主的全局过滤器效果,思考改变思路后实现的,也已经用在项目里面,可以达到我想要的效果,写一下留个记录,希望可以给遇到这样需求的开发小伙伴们提供个思路。

posted @ 2022-05-19 16:26  secretAngel  阅读(5487)  评论(0编辑  收藏  举报