🎉推荐一款前端工具库@jinming6/ming-tool前言日常开发任务中，经常会遇见字段映射、文件流导出、空值替

前言

日常开发任务中，经常会遇见字段映射、文件流导出、空值替换等需求，为了提高开发效率，所以封装了@jinming6/ming-tool

阅读文档

下面我将分场景进行API介绍。

字段映射

描述

实现一个文章列表展示模块，要求能根据状态筛选。
状态包含：发布、审核、驳回。

效果

Kapture 2024-04-17 at 14.33.39.gif

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.7.0/dist/index.min.css">
  <style>
    .status {
      width: 150px;
    }
    .statusText {
      color: #0078d4;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-form inline :model="form">
      <el-form-item label="状态" prop="status">
        <el-select v-model="form.status" class="status" @change="getData">
          <el-option v-for="item in option.options" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" v-loading="loading" height="440px">
      <el-table-column prop="title" label="标题" width="180"></el-table-column>
      <el-table-column prop="desc" label="简介" width="180"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          <span class="statusText">{{option.labelMap[row.status]}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@3.4.23/dist/vue.global.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@jinming6/ming-tool@1.1.0/dist/ming-tool.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-plus@2.7.0/dist/index.full.min.js"></script>
  <script>
    const { createApp, ref, reactive, onMounted } = Vue
    const { Option } = window['@jinming6/mingTool'];

    const app = createApp({
      setup() {
        const tableData = ref([])
        const option = new Option({
          dataSource: [
            {
              label: '发布',
              value: '1'
            },
            {
              label: '审核',
              value: '2'
            },
            {
              label: '驳回',
              value: '3'
            },
          ]
        })
        const form = reactive({
          status: '1'
        })
        const loading = ref(false);
        const getData = () => {
          loading.value = true;
          const data = new Array(10).fill(0).map((_, index) => {
            return {
              title: `文章${index}`,
              desc: `文章${index}新特性`,
              status: form.status
            }
          })
          setTimeout(() => {
            tableData.value = data;
            loading.value = false;
          }, 500)
        }

        onMounted(() => {
          getData()
        })

        return {
          tableData,
          option,
          form,
          getData,
          loading
        }
      }
    })
    app.use(ElementPlus)
    app.mount('#app')
  </script>
</body>

</html>

下载文件流

描述

点击导出，后端接口返回文件流，前端进行文件的下载。

效果

Kapture 2024-04-17 at 14.41.35.gif

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.7.0/dist/index.min.css">
</head>

<body>
  <div id="app">
    <el-button @click="handleExport">导出</el-button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@3.4.23/dist/vue.global.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@jinming6/ming-tool@1.1.0/dist/ming-tool.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-plus@2.7.0/dist/index.full.min.js"></script>
  <script>
    const { createApp } = Vue
    const { downloadFile } = window['@jinming6/mingTool'];

    const app = createApp({
      setup() {
        const handleExport = () => {
          /* 根据文件流进行下载，文件流一般从接口返回(例如excel导出)，这里是前端模拟的。 */
          const str = '大道泛兮，其可左右。';
          const encoder = new TextEncoder();
          const encodedData = encoder.encode(str);
          const buffer = new ArrayBuffer(encodedData.byteLength);
          const uint8Array = new Uint8Array(buffer);
          uint8Array.set(encodedData);
          downloadFile({
            inputType: 'arrayBuffer',
            arrayBuffer: buffer,
            filename: 'example.txt',
          })
        }

        return {
          handleExport
        }
      }
    })
    app.use(ElementPlus)
    app.mount('#app')
  </script>
</body>

</html>

空值替换

描述

表格中的空值替换为“--”

效果

截屏2024-04-17 14.49.44.png

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-plus@2.7.0/dist/index.min.css">
</head>

<body>
  <div id="app">
    <el-table :data="tableData" style="width: 100%" v-loading="loading" height="440px">
      <el-table-column prop="title" label="标题" width="180"></el-table-column>
      <el-table-column prop="desc" label="简介" width="180">
        <template #default="{ row }">
          <span>{{replaceEmpty(row.desc)}}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@3.4.23/dist/vue.global.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@jinming6/ming-tool@1.1.0/dist/ming-tool.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/element-plus@2.7.0/dist/index.full.min.js"></script>
  <script>
    const { createApp, ref, reactive, onMounted } = Vue
    const { replaceEmpty } = window['@jinming6/mingTool'];

    const app = createApp({
      setup() {
        const tableData = ref([])
        const loading = ref(false);
        const getData = () => {
          loading.value = true;
          const data = new Array(10).fill(0).map((_, index) => {
            return {
              title: `文章${index}`,
              desc: index % 2 ? `文章${index}简介` : null,
            }
          })
          setTimeout(() => {
            tableData.value = data;
            loading.value = false;
          }, 500)
        }

        onMounted(() => {
          getData()
        })

        return {
          tableData,
          getData,
          loading,
          replaceEmpty
        }
      }
    })
    app.use(ElementPlus)
    app.mount('#app')
  </script>
</body>

</html>