【vue3】 封装数字字典列表接口调用

在写vue3后台管理系统，有字典管理功能，将字典管理增删改查页面接口写完，在其他页面使用数字字典，将接口封装方便使用，

接口数据展示：

 

 

第一步：创建utils文件，新建dict.js

import { ref, toRefs } from 'vue';
import { getDictList } from '@/api/sys' //引入封装数字字典接口

/**
 * 获取字典数据
 */
export function getDict(...args) {
    const res = ref({});
    return (() => {
        args.forEach((d, index) => {
            res.value[d] = [];
            getDictList(d).then(result => {
                res.value[d] = result.data.body.map(p => ({ label: p.dictLabel, value: p.dictValue, elTagType: p.dictType }));
            })
        })
        return toRefs(res.value);
    })()
}

第二步：组件封装，componeents文件下创建DictTag文件，新建index.vue

<template>
  <div>
    //循环字典接口数据
    <template v-for="(item, index) in options">
      <template v-if="values.includes(item.value)">
        <span
          v-if="
            item.elTagType == 'default' || item.elTagType == '' || tag == false
          "
          :key="item.value"
          :index="index"
          :class="item.elTagType"
          >{{ item.label }}</span
        >

        <el-tag
          v-else
          :disable-transitions="true"
          :key="item.value + ''"
          :index="index"
          :type="item.elTagType === 'primary' ? '' : item.elTagType"
          :class="item.elTagType"
          >{{ item.label }}</el-tag
        >
      </template>
    </template>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  // 数据
  options: {
    type: Array,
    default: null,
  },
  tag: false,
  // 当前的值
  value: [Number, String, Array],
});

const values = computed(() => {
  if (props.value !== null && typeof props.value !== "undefined") {
    return Array.isArray(props.value) ? props.value : [String(props.value)];
  } else {
    return [];
  }
});
</script>

<style scoped>
.el-tag + .el-tag {
  margin-left: 10px;
}
</style>

第三步：在main.ts全局引用

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "@/style/border.less";
import ElementPlus from "element-plus";
import "element-plus/lib/theme-chalk/index.css";
import request from "@/request/index";
import * as ELIcons from "@element-plus/icons-vue";
//import dict from "@/utils/dict";
import { getDict } from '@/utils/dict'                //  1，  引入字典封装接口

import auth from "@/api/auth";

// 字典标签组件
import DictTag from '@/components/DictTag/index'

// 这里监听请求的错误统一处理（做弹窗提示提示）
request.on("HttpStatusFaild", () => {
  console.log("Capture status");
  alert("请求失败，请检查接口问题");
});

const app = createApp(App);
app.config.globalProperties.$dict = getDict;          // 2，引入字典封装
app.config.globalProperties.$auth = auth;             // 2，引入字典封装

app
  .use(store)
  .use(router)
  .use(ElementPlus)
  .mount("#app");
// // 注册全局组件
for (const name in ELIcons) {
  app.component(name, (ELIcons as any)[name]);
}

app.component('DictTag', DictTag);                     // 3，字典全局组件挂载    

第四步：在页面使用

<template>
  <div class="home">
    <h2>欢迎使用后台管理系统</h2>

     //列表渲染方法
    测试tag：<dict-tag :options="items_type" :value="1" :tag="true" />
    测试span：<dict-tag :options="items_type" :value="1" :tag="false" />

    <el-form>

       //使用element puls组件渲染字典数据
      <el-form-item label="组别">
        <el-radio-group v-model="form.sex">
          <el-radio v-for="dict in sex" :key="dict.value" :label="dict.value">{{
            dict.label
          }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="指标类别" label-width="100px" prop="indexType">
        <el-select
          v-model="form.indexType"
          placeholder="请输入指标类别"
          style="width: 200px"
        >
          <el-option
            v-for="dict in indexType"
            :key="dict.value"
            :label="dict.value"
            >{{ dict.label }}</el-option
          >
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

//这个地方写法注意，如果setup是在里面要将里面的const声明的return
<script setup>
import { getCurrentInstance, reactive } from "vue";

const { proxy } = getCurrentInstance();

const form = reactive({
  sex: "",
  indexType: "",
});


const { sex } = proxy.$dict("sex");
const { indexType } = proxy.$dict("indexType");
// console.log(items_type);
</script>
<style lang="less">
.home {
  // text-align: center;
  line-height: 24px;
}
.height {
  height: 999px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

第四步：效果图