什么是 emptykeep
emptykeep 是一个基于 Vue 的 npm 包，用于在页面中展示空状态的组件。基于 emptykeep，前端开发人员可以通过简单的配置，快速的在页面中展示空状态，如数据为空、未匹配到搜索结果等。
安装
emptykeep 可以通过 npm 安装，使用以下命令：
npm install emptykeep --save-dev
使用
在例子中，我们通过 emptykeep 展示了一个没有对应搜索结果的空状态。
首先，我们需要在页面中引入 emptykeep 组件。
import EmptyKeep from "emptykeep";
接下来，我们可以将 emptykeep 作为一个组件包含到我们的页面中，使用以下代码：
<template>
<div>
<EmptyKeep
:emptyData="{ message: '暂无搜索结果'}"
:keepBtn="{ text: '返回搜索', href: 'http://www.example.com' }"
/>
</div>
</template>上述代码中，我们为 emptykeep 组件传入了两个参数：
emptyData：空状态消息数据对象，包含message属性，该属性用于展示空状态的内容。keepBtn：操作按钮数据对象，包含text和href两个属性，分别表示操作按钮的文本和跳转链接。
定制
emptykeep 支持在组件的样式和文案上进行定制，可以满足不同项目的不同需求。
- 样式定制：emptykeep 支持通过 CSS 文件进行自定义样式的修改。
- 文案定制：可以通过参数的形式，传入自定义的文案内容，从而满足不同语言、不同项目的个性化需求。
示例代码
-- -------------------- ---- -------
----------
-----
----------
------------- -------- ----------
----------- ----- ------- ----- ------------------------ --
--
------
-----------
--------
------ --------- ---- ------------
------ ------- -
----------- -
---------
-
--
---------
------ ------------------------------总结
通过 emptykeep，我们可以快速地实现页面中空状态的展示。通过定制空状态的样式和文案，可以满足不同项目、不同语言的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e20a563576b7b1ecde0