feat: add NumberInfo, Ellipsis components

Author: sendya

src/components/Ellipsis/Ellipsis.vue

@@ -0,0 +1,63 @@
+<script>
+  import Tooltip from 'ant-design-vue/es/tooltip'
+  import { cutStrByFullLength, getStrFullLength } from '@/components/_util/StringUtil'
+/*
+  const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
+
+  const TooltipOverlayStyle = {
+    overflowWrap: 'break-word',
+    wordWrap: 'break-word',
+  };
+*/
+
+  export default {
+    name: 'Ellipsis',
+    components: {
+      Tooltip
+    },
+    props: {
+      prefixCls: {
+        type: String,
+        default: 'ant-pro-ellipsis'
+      },
+      tooltip: {
+        type: Boolean
+      },
+      length: {
+        type: Number,
+        required: true
+      },
+      lines: {
+        type: Number,
+        default: 1
+      },
+      fullWidthRecognition: {
+        type: Boolean,
+        default: false
+      }
+    },
+    methods: {
+      getStrDom (str) {
+        return (
+          <span>{ cutStrByFullLength(str, this.length) + '...' }</span>
+        )
+      },
+      getTooltip ( fullStr) {
+        return (
+          <Tooltip>
+            <template slot="title">{ fullStr }</template>
+            { this.getStrDom(fullStr) }
+          </Tooltip>
+        )
+      }
+    },
+    render () {
+      const { tooltip, length } = this.$props
+      let str = this.$slots.default.map(vNode => vNode.text).join("")
+      const strDom = tooltip && getStrFullLength(str) > length ? this.getTooltip(str) : this.getStrDom(str);
+      return (
+        strDom
+      )
+    }
+  }
+</script>

src/components/Ellipsis/index.js

@@ -0,0 +1,3 @@
+import Ellipsis from './Ellipsis'
+
+export default Ellipsis

src/components/NumberInfo/NumberInfo.vue

@@ -0,0 +1,54 @@
+<template>
+  <div :class="[prefixCls]">
+    <slot name="subtitle">
+      <div :class="[`${prefixCls}-subtitle`]">{{ typeof subTitle === 'string' ? subTitle : subTitle() }}</div>
+    </slot>
+    <div class="number-info-value">
+      <span>{{ total }}</span>
+      <span class="sub-total">
+        {{ subTotal }}
+        <icon :type="`caret-${status}`" />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Icon from 'ant-design-vue/es/icon'
+
+  export default {
+    name: 'NumberInfo',
+    props: {
+      prefixCls: {
+        type: String,
+        default: 'ant-pro-number-info'
+      },
+      total: {
+        type: Number,
+        required: true
+      },
+      subTotal: {
+        type: Number,
+        required: true
+      },
+      subTitle: {
+        type: [String, Function],
+        default: ''
+      },
+      status: {
+        type: String,
+        default: 'up'
+      }
+    },
+    components: {
+      Icon
+    },
+    data () {
+      return {}
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  @import "index";
+</style>

src/components/NumberInfo/index.js

@@ -0,0 +1,3 @@
+import NumberInfo from './NumberInfo'
+
+export default NumberInfo

src/components/NumberInfo/index.less

@@ -0,0 +1,55 @@
+@import "../index";
+
+@numberInfo-prefix-cls: ~"@{ant-pro-prefix}-number-info";
+
+.@{numberInfo-prefix-cls} {
+
+  .ant-pro-number-info-subtitle {
+    color: @text-color-secondary;
+    font-size: @font-size-base;
+    height: 22px;
+    line-height: 22px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+  }
+
+  .number-info-value {
+    margin-top: 4px;
+    font-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: nowrap;
+
+    & > span {
+      color: @heading-color;
+      display: inline-block;
+      line-height: 32px;
+      height: 32px;
+      font-size: 24px;
+      margin-right: 32px;
+    }
+
+    .sub-total {
+      color: @text-color-secondary;
+      font-size: @font-size-lg;
+      vertical-align: top;
+      margin-right: 0;
+      i {
+        font-size: 12px;
+        transform: scale(0.82);
+        margin-left: 4px;
+      }
+      :global {
+        .anticon-caret-up {
+          color: @red-6;
+        }
+        .anticon-caret-down {
+          color: @green-6;
+        }
+      }
+    }
+  }
+}

src/components/_util/StringUtil.js

@@ -0,0 +1,25 @@
+
+export const getStrFullLength = (str = '') =>
+  str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0)
+    if (charCode >= 0 && charCode <= 128) {
+      return pre + 1
+    }
+    return pre + 2
+  }, 0)
+
+export const cutStrByFullLength = (str = '', maxLength) => {
+  let showLength = 0
+  return str.split('').reduce((pre, cur) => {
+    const charCode = cur.charCodeAt(0)
+    if (charCode >= 0 && charCode <= 128) {
+      showLength += 1
+    } else {
+      showLength += 2
+    }
+    if (showLength <= maxLength) {
+      return pre + cur
+    }
+    return pre
+  }, '')
+}

src/views/Home.vue

@@ -2,7 +2,7 @@
   <div class="home">
     <div class="banner">
       <img alt="Vue logo" style="width: 64px; height: 64px" src="../assets/logo.png">
-      <h3>Welcome to Your Vue.js App</h3>
+      <h3 style="margin-top: 1rem">Welcome to Your Vue.js App</h3>
     </div>
 
     <br/>
@@ -30,7 +30,7 @@
 
     <a-divider> 颜色反转 </a-divider>
 
-    <a-card>
+    <a-card style="margin-bottom: 3rem">
 
       <trend flag="up" :reverse-color="true" style="margin-right: 16px;">
         <span slot="term">工资</span>
@@ -43,9 +43,10 @@
 
     </a-card>
 
-    <a-divider> AvatarList </a-divider>
+    <h2># AvatarList 组件 </h2>
 
-    <a-card>
+    <a-divider> AvatarList </a-divider>
+    <a-card style="margin-bottom: 3rem">
       <avatar-list :max-length="3">
         <avatar-list-item tips="Jake" src="https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png" />
         <avatar-list-item tips="Andy" src="https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png" />
@@ -66,14 +67,44 @@
       </avatar-list>
     </a-card>
 
-    <a-divider> CountDown </a-divider>
+    <h2># CountDown 组件 </h2>
 
-    <a-card>
+    <a-divider> CountDown </a-divider>
+    <a-card style="margin-bottom: 3rem">
       <count-down
         style="font-size: 2rem"
-        :target="new Date().getTime() + 3000"
+        :target="new Date().getTime() + 3000000"
         :on-end="onEndHandle">
       </count-down>
+
+      <a-divider type="vertical" style="margin: 0 16px" />
+
+      <count-down
+        style="font-size: 2rem"
+        :target="new Date().getTime() + 10000"
+        :on-end="onEndHandle2">
+      </count-down>
+    </a-card>
+
+    <h2># Ellipsis 组件 </h2>
+
+    <a-divider> Ellipsis </a-divider>
+    <a-card style="margin-bottom: 3rem">
+      <ellipsis :length="100" tooltip>
+        There were injuries alleged in three cases in 2015, and a
+        fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
+      </ellipsis>
+    </a-card>
+
+    <h2># NumberInfo 组件 </h2>
+
+    <a-divider> NumberInfo </a-divider>
+    <a-card>
+      <number-info
+        :sub-title="() => { return 'Visits this week' }"
+        :total="12321"
+        status="up"
+        :sub-total="17.1"></number-info>
     </a-card>
   </div>
 </template>
@@ -84,12 +115,16 @@
   import Trend from '@/components/Trend'
   import AvatarList from '@/components/AvatarList'
   import CountDown from '@/components/CountDown/CountDown'
+  import Ellipsis from '@/components/Ellipsis'
+  import NumberInfo from '@/components/NumberInfo'
 
   const AvatarListItem = AvatarList.AvatarItem
 
   export default {
     name: 'Home',
     components: {
+      NumberInfo,
+      Ellipsis,
       CountDown,
       Trend,
       AvatarList,
@@ -103,6 +138,12 @@
     methods: {
       onEndHandle () {
         this.$message.success('CountDown callback!!!')
+      },
+      onEndHandle2 () {
+        this.$notification.open({
+          message: 'Notification Title',
+          description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
+        });
       }
     }
   }