前端,自己封装一个若依的字典

后端,发来的数据,大概长这样

 

页面内容

item4.serveBy是一个数字,

然后为了查这个数字,对应的用户名字,然后显示

<view>{{userDictionary(item4.serveBy)  || ""}}</view>
//字典,获取,翻译
import { getDicts,selectDictLabel } from "@/api/system/dict/data.js";
computed:{
		    //用户字典
		    userDictionary(){
		      return (dataNum) => {
		        return selectDictLabel(this.dictSys_user,dataNum);
		      }    
		    }
}

字典dict.js内容

// 根据字典类型查询字典数据信息
export function getDicts(dictType) {
  return uni.$u.http.get('/system/dict/data/type/' + dictType)
}

// 回显数据字典
export function selectDictLabel(datas, value) {
  if (value === undefined) {
    return "";
  }
  var actions = [];
  Object.keys(datas).some((key) => {
    if (datas[key].dictValue == ('' + value)) {
      actions.push(datas[key].dictLabel);
      return true;
    }
  })
  if (actions.length === 0) {
    actions.push(value);
  }
  return actions.join('');
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以帮你解决这个问题。首先,为了更好地封装字典,我们可以创建一个Vue插件。 1. 创建Vue插件 在创建Vue插件之前,我们需要先了解一下Vue插件的概念。Vue插件是一个可以被Vue.use()方法安装的JavaScript对象。一个Vue插件通常会暴露一个install方法,该方法接收Vue构造函数作为第一个参数,并且可以接收其他可选参数。 下面是创建Vue插件的代码: ```javascript const MyPlugin = { install(Vue, options) { // 插件代码 } } ``` 在该代码中,我们定义了一个名为MyPlugin的对象,它包含一个install方法。该方法接收Vue构造函数作为第一个参数,并且可以接收其他可选参数。 2. 封装字典 有了Vue插件的概念,我们可以开始封装字典了。我们可以将字典存储在一个JavaScript对象中,并将其添加到Vue实例的原型中,以便在整个应用程序中都可以使用。 下面是封装字典的代码: ```javascript const MyPlugin = { install(Vue, options) { const dictionary = { // 字典内容 }; Vue.prototype.$dictionary = dictionary; } } ``` 在该代码中,我们定义了一个名为dictionary的JavaScript对象,并将其添加到Vue实例的原型中。这意味着我们可以使用this.$dictionary在整个应用程序中访问该字典。 3. 使用字典 现在我们已经成功地封装字典,让我们看看如何在Vue应用程序中使用它。 在Vue组件中,我们可以使用this.$dictionary访问字典。例如: ```javascript export default { name: 'MyComponent', mounted() { console.log(this.$dictionary); } } ``` 在该代码中,我们在mounted钩子中使用this.$dictionary访问字典并将其打印到控制台中。 4. 完整代码 下面是完整的Vue插件代码: ```javascript const MyPlugin = { install(Vue, options) { const dictionary = { // 字典内容 }; Vue.prototype.$dictionary = dictionary; } } export default MyPlugin; ``` 你可以在Vue应用程序中使用该插件,如下所示: ```javascript import Vue from 'vue'; import MyPlugin from './my-plugin'; Vue.use(MyPlugin); new Vue({ // Vue实例代码 }); ``` 希望这个答案能够解决你的问题,如果还有其他问题,请随时提出。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值