Explorar el Código

删除NumberInfo组件

萤火科技 hace 3 años
padre
commit
7964a4b3cb

+ 0 - 54
src/components/NumberInfo/NumberInfo.vue

@@ -1,54 +0,0 @@
-<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>

+ 0 - 3
src/components/NumberInfo/index.js

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

+ 0 - 55
src/components/NumberInfo/index.less

@@ -1,55 +0,0 @@
-@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;
-        }
-      }
-    }
-  }
-}

+ 0 - 43
src/components/NumberInfo/index.md

@@ -1,43 +0,0 @@
-# NumberInfo 数据文本
-
-常用在数据卡片中,用于突出展示某个业务数据。
-
-
-
-引用方式:
-
-```javascript
-import NumberInfo from '@/components/NumberInfo'
-
-export default {
-    components: {
-        NumberInfo
-    }
-}
-```
-
-
-
-## 代码演示  [demo](https://pro.loacg.com/test/home)
-
-```html
-<number-info
-    :sub-title="() => { return 'Visits this week' }"
-    :total="12321"
-    status="up"
-    :sub-total="17.1"></number-info>
-```
-
-
-
-## API
-
-参数 | 说明 | 类型 | 默认值
-----|------|-----|------
-title | 标题 | ReactNode\|string | -
-subTitle | 子标题 | ReactNode\|string | -
-total | 总量 | ReactNode\|string | -
-subTotal | 子总量 | ReactNode\|string | -
-status | 增加状态 | 'up \| down' | -
-theme | 状态样式 | string | 'light'
-gap | 设置数字和描述之间的间距(像素)| number | 8

+ 0 - 2
src/components/index.js

@@ -16,7 +16,6 @@ import AvatarList from '@/components/AvatarList'
 import CountDown from '@/components/CountDown'
 import Ellipsis from '@/components/Ellipsis'
 import FooterToolbar from '@/components/FooterToolbar'
-import NumberInfo from '@/components/NumberInfo'
 import DescriptionList from '@/components/DescriptionList'
 // import Tree from '@/components/Tree/Tree'
 import Trend from '@/components/Trend'
@@ -52,7 +51,6 @@ export {
   CountDown,
   Ellipsis,
   FooterToolbar,
-  NumberInfo,
   DescriptionList,
   // 兼容写法,请勿继续使用
   DescriptionList as DetailList,

+ 0 - 215
src/views/Home.vue

@@ -1,215 +0,0 @@
-<template>
-  <div class="home">
-    <div class="banner">
-      <img alt="Vue logo" style="width: 64px; height: 64px" src="../assets/logo.png">
-      <h3 style="margin-top: 1rem">Welcome to Your Vue.js App</h3>
-    </div>
-
-    <br/>
-
-    <h2># Trend 组件 </h2>
-
-    <a-divider> 正常 </a-divider>
-
-    <a-card>
-
-      <trend flag="up" style="margin-right: 16px;">
-        <span slot="term">工资</span>
-        5%
-      </trend>
-      <trend flag="up" style="margin-right: 16px;">
-        <span slot="term">工作量</span>
-        50%
-      </trend>
-      <trend flag="down">
-        <span slot="term">身体状态</span>
-        50%
-      </trend>
-
-    </a-card>
-
-    <a-divider> 颜色反转 </a-divider>
-
-    <a-card style="margin-bottom: 3rem">
-
-      <trend flag="up" :reverse-color="true" style="margin-right: 16px;">
-        <span slot="term">工资</span>
-        5%
-      </trend>
-      <trend flag="down" :reverse-color="true" style="margin-right: 16px;">
-        <span slot="term">工作量</span>
-        50%
-      </trend>
-
-    </a-card>
-
-    <h2># AvatarList 组件 </h2>
-
-    <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" />
-        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-
-      </avatar-list>
-
-      <a-divider type="vertical" style="margin: 0 16px" />
-
-      <avatar-list size="mini">
-        <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" />
-        <avatar-list-item tips="Niko" src="https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png" />
-      </avatar-list>
-    </a-card>
-
-    <h2># CountDown 组件 </h2>
-
-    <a-divider> CountDown </a-divider>
-    <a-card style="margin-bottom: 3rem">
-      <count-down
-        style="font-size: 2rem"
-        :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 style="margin-bottom: 3rem">
-      <number-info
-        :sub-title="() => { return 'Visits this week' }"
-        :total="12321"
-        status="up"
-        :sub-total="17.1"></number-info>
-    </a-card>
-
-    <h2># TagSelect 组件 </h2>
-
-    <a-divider> TagSelect </a-divider>
-    <a-card style="margin-bottom: 3rem">
-      <tag-select>
-        <tag-select-option value="cat1">类目1</tag-select-option>
-        <tag-select-option value="cat2">类目2</tag-select-option>
-        <tag-select-option value="cat3">类目3</tag-select-option>
-        <tag-select-option value="cat4">类目4</tag-select-option>
-        <tag-select-option value="cat5">类目5</tag-select-option>
-        <tag-select-option value="cat6">类目6</tag-select-option>
-        <tag-select-option value="cat7">类目7</tag-select-option>
-      </tag-select>
-    </a-card>
-
-    <h2># DescriptionList 组件 </h2>
-
-    <a-divider> DescriptionList </a-divider>
-    <a-card style="margin-bottom: 3rem">
-      <description-list title="组名称" size="small">
-        <description-list-item term="负责人">林东东</description-list-item>
-        <description-list-item term="角色码">1234567</description-list-item>
-        <description-list-item term="所属部门">XX公司-YY部</description-list-item>
-        <description-list-item term="过期时间">2018-08-08</description-list-item>
-        <description-list-item term="描述">这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...</description-list-item>
-      </description-list>
-    </a-card>
-
-    <a-divider> TagCloud </a-divider>
-    <a-card style="margin-bottom: 3rem">
-      <tag-cloud :tag-list="tagCloudData"></tag-cloud>
-    </a-card>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-
-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'
-import TagSelect from '@/components/TagSelect'
-import { DescriptionList, TagCloud } from '@/components/'
-
-const AvatarListItem = AvatarList.AvatarItem
-const TagSelectOption = TagSelect.Option
-
-const DescriptionListItem = DescriptionList.Item
-
-export default {
-  name: 'Home',
-  components: {
-    NumberInfo,
-    Ellipsis,
-    CountDown,
-    Trend,
-    AvatarList,
-    AvatarListItem,
-    TagSelect,
-    TagSelectOption,
-    TagCloud,
-    DescriptionList,
-    DescriptionListItem
-  },
-  data () {
-    return {
-      targetTime: new Date().getTime() + 3900000,
-      tagCloudData: []
-    }
-  },
-  created () {
-    this.getTagCloudData()
-  },
-  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.'
-      })
-    },
-    getTagCloudData () {
-      this.$http.get('/data/antv/tag-cloud').then(res => {
-        this.tagCloudData = res.result
-      })
-    }
-  }
-}
-</script>
-
-<style scoped>
-  .home {
-    width: 900px;
-    margin: 0 auto;
-    padding: 25px 0;
-  }
-  .home > .banner {
-    text-align: center;
-    padding: 25px 0;
-    margin: 25px 0;
-  }
-</style>