.

2019-11-21 13:05:43 +08:00
parent 27c678ce50
commit 7b824eccec
43 changed files with 1993 additions and 0 deletions
--- a/Empty/1.png
+++ b/Empty/1.png
--- a/Empty/2.png
+++ b/Empty/2.png
--- a/Empty/3.png
+++ b/Empty/3.png
--- a/Empty/4.png
+++ b/Empty/4.png
--- a/Empty/README.md
+++ b/Empty/README.md
@@ -0,0 +1,91 @@
+# 1. 前言
+
+在日常开发中，页面上肯定有展示数据的需求，但是当某些时候该展示数据的地方此时数据为空时，就会留下一片空白，对用户体验不是很好，那么接下来我们就封装一个空数据时的占位展示图，告诉用户此时用户为空，并非数据没有加载出来，不用让用户盲目的等待。
+
+# 2. 使用示例
+
+该组件可以直接引入到项目中使用，示例如下：
+
+```vue
+<template>
+  <div id="app">
+    <div v-if="content.length"></div>  
+    <Empty v-else></Empty>
+  </div>
+  </div>
+</template>
+
+<script>
+import Empty from './Empty'
+export default {
+  name: 'app',
+  components: { Empty},
+  data() {
+    return {
+      content:[]
+    }
+  }
+}
+</script>
+```
+
+在上面代码中，假设你需要展示的内容是`content`，那么你就可以判断当内容有值时展示内容，当内容为空时展示空数据时的占位展示图。效果如下：
+![](./1.png)
+# 3. 组件可选属性
+
+该组件除了可以直接使用外，还提供过了一些可选属性供个性化配置，提供可选属性如下：
+
+|  属性名称   |         描述         |  类型  | 是否必须 |  默认值  |
+| :---------: | :------------------: | :----: | :------: | :------: |
+| description |    自定义描述内容    | String |    否    | 暂无数据 |
+|    image    | 自定义显示图片的路径 | String |    否    | 默认图片 |
+| imageStyle  | 自定义显示图片的样式 | Object |    否    |    -     |
+
+组件提供了3个可选属性，你可以这样去使用它们：
+
+- 自定义描述内容
+
+  ```html
+  <Empty description="我是自定义内容"></Empty>
+  ```
+![](./2.png)
+- 显示自定义图片
+
+  ```html
+  <Empty description="显示网络图片" image="https://www.baidu.com/img/bd_logo1.png"></Empty>
+  ```
+  ![](./3.png)
+  
+  
+
+  ```javascript
+  <Empty description="显示项目资源图片" :image="require('@/assets/images/warn.png')"></Empty>
+  ```
+  ![](./4.png)
+
+- 自定义显示图片样式
+
+  ```html
+  <template>
+      <Empty 
+         description="显示网络图片" 
+         image="https://www.baidu.com/img/bd_logo1.png" 
+         :imageStyle="imageStyle">
+      </Empty>
+  </template>
+  <script>
+      data() {
+          return {
+            imageStyle:{
+              width:'10px'
+            }
+      }
+  </script>
+  ```
+
+# 4. 组件代码
+
+完整代码请戳☞[Vue-Components-Library/Empty](https://github.com/NLRX/Vue-Components-Library/tree/master/Empty)
+
+（完）
+
--- a/Empty/index.vue
+++ b/Empty/index.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="empty">
+    <div class="image">
+      <img :alt="description" :src="image" v-if="image" :style="imageStyle"/>
+      <svg v-else width="184" height="152" viewBox="0 0 184 152" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fillRule="evenodd">
+          <g transform="translate(24 31.67)">
+            <ellipse fillOpacity=".8" fill="#F5F5F7" cx="67.797" cy="106.89" rx="67.797" ry="12.668" />
+            <path
+              d="M122.034 69.674L98.109 40.229c-1.148-1.386-2.826-2.225-4.593-2.225h-51.44c-1.766 0-3.444.839-4.592 2.225L13.56 69.674v15.383h108.475V69.674z"
+              fill="#AEB8C2"
+            />
+            <path
+              d="M101.537 86.214L80.63 61.102c-1.001-1.207-2.507-1.867-4.048-1.867H31.724c-1.54 0-3.047.66-4.048 1.867L6.769 86.214v13.792h94.768V86.214z"
+              fill="url(#linearGradient-1)"
+              transform="translate(13.56)"
+            />
+            <path
+              d="M33.83 0h67.933a4 4 0 0 1 4 4v93.344a4 4 0 0 1-4 4H33.83a4 4 0 0 1-4-4V4a4 4 0 0 1 4-4z"
+              fill="#F5F5F7"
+            />
+            <path
+              d="M42.678 9.953h50.237a2 2 0 0 1 2 2V36.91a2 2 0 0 1-2 2H42.678a2 2 0 0 1-2-2V11.953a2 2 0 0 1 2-2zM42.94 49.767h49.713a2.262 2.262 0 1 1 0 4.524H42.94a2.262 2.262 0 0 1 0-4.524zM42.94 61.53h49.713a2.262 2.262 0 1 1 0 4.525H42.94a2.262 2.262 0 0 1 0-4.525zM121.813 105.032c-.775 3.071-3.497 5.36-6.735 5.36H20.515c-3.238 0-5.96-2.29-6.734-5.36a7.309 7.309 0 0 1-.222-1.79V69.675h26.318c2.907 0 5.25 2.448 5.25 5.42v.04c0 2.971 2.37 5.37 5.277 5.37h34.785c2.907 0 5.277-2.421 5.277-5.393V75.1c0-2.972 2.343-5.426 5.25-5.426h26.318v33.569c0 .617-.077 1.216-.221 1.789z"
+              fill="#DCE0E6"
+            />
+          </g>
+          <path
+            d="M149.121 33.292l-6.83 2.65a1 1 0 0 1-1.317-1.23l1.937-6.207c-2.589-2.944-4.109-6.534-4.109-10.408C138.802 8.102 148.92 0 161.402 0 173.881 0 184 8.102 184 18.097c0 9.995-10.118 18.097-22.599 18.097-4.528 0-8.744-1.066-12.28-2.902z"
+            fill="#DCE0E6"
+          />
+          <g transform="translate(149.65 15.383)" fill="#FFF">
+            <ellipse cx="20.654" cy="3.167" rx="2.849" ry="2.815" />
+            <path d="M5.698 5.63H0L2.898.704zM9.259.704h4.985V5.63H9.259z" />
+          </g>
+        </g>
+      </svg>
+    </div>
+    <p class="description">{{description}}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Empty',
+  props:{
+    description:{
+      required: false,
+      type: String,
+      default:'暂无数据'
+    },
+    image:{
+      required: false,
+      type: String,
+    },
+    imageStyle: {
+      required: false,
+      type: Object
+    },
+  },
+  data() {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style scoped>
+  .empty {
+    margin: 0 8px;
+    font-size: 14px;
+    line-height: 22px;
+    text-align: center;
+  }
+  .image {
+    height: 100px;
+    margin-bottom: 8px;
+  }
+  .image img{
+    height: 100%;
+  }
+  .image svg{
+    height: 100%;
+    margin: auto;
+  }
+  .description {
+    margin: 0;
+    color:rgba(0,0,0,0.5)
+  }
+</style>