element

7.0 KiB

Raw Blame History

Statistic

Used to highlight a certain number or group of numbers, such as showing a numerical value, such as a dollar amount, ranking, etc.

Countdown mode

Basic usage

The component provides a thousandth place display, but you can use rate to set the 10,000th place, and so on :::demo

<template>
  <div >
      <el-row :gutter="20">
        <el-col :span="6">
          <div>
            <el-statistic groupSeparator="," :precision="2" :value="value2" :title="title"></el-statistic>
          </div>
        </el-col>
            <el-col :span="6">
          <div>
            <el-statistic  title="Gender Distribution">
              <template slot="formatter">
                  456/2
              </template>

            </el-statistic>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-statistic groupSeparator="," :precision="2" decimalSeparator="." :value="value1" :title="title">
              <template slot="prefix">
                <i class="el-icon-s-flag" style="color: red"></i>
              </template>
              <template slot="suffix">
                <i class="el-icon-s-flag" style="color: blue"></i>
              </template>
            </el-statistic>
          </div>
    
    </el-col>
    <el-col :span="6">
      <div>
        <el-statistic :value="like ? 521 : 520" title="Feedback">
          <template slot="suffix">
            <span @click="like = !like" class="like">
              <i class="el-icon-star-on" style="color:red" v-show="!!like"></i>
              <i class="el-icon-star-off"  v-show="!like"></i>
            </span> </template>
        </el-statistic>
      </div>
    </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      like: true,
      value1: 4154.564,
      value2: 2222,
      title: "Growth this year",
      input: "Hello Element UI!",
    };
  },
};
</script>
<style lang="scss" >
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
</style>

:::

倒计时

:::warning Suspend is tentative, it ** just pauses the countdown, not the time, because value points to a future time node **

If you need to add time to the original, please note that the overall time (the amount of time added and the original time) must be a ** future ** time node, otherwise it is still the end of the countdown ::: :::demo Providing a future time via 'value' will enable the countdown function

<template>
  <div >
    <el-row :gutter="20">
  <el-col :span="14">
     <div style="width: 100%; display: inline-block; ">
      <el-statistic :value="deadline2"  timeIndices title="商品降价">
        <template slot="suffix">
          The rush is about to begin
        </template>
      </el-statistic>
    </div>
    <div style="width: 100%; display: inline-block; margin-top: 50px; ">
      <el-statistic @finish="hilarity" :value="deadline3"   timeIndices title="The Value of Time">
        <template slot="suffix">
          <el-button type="primary " size="small" @click="add">add 10 second</el-button>
        </template>
      </el-statistic>
    </div>
  
  </el-col>
  <el-col :span="10">
        <el-card  shadow="hover"  style="width: 100%;">
  <div slot="header" class="clearfix">
    <span>文嘉《明日歌》</span>
    <el-button style="float: right; padding: 3px 0" type="text" @click="clickFn">暂停</el-button>
  </div>
  <div style="font-size: 18px;text-align: center; " >明日复明日</div>
  <div style="font-size: 18px;text-align: center;" >明日何其多</div>

  <div style="font-size: 18px;text-align: center;" >我生待明日</div>

  <div style="font-size: 18px;text-align: center;" >万事成蹉跎</div>
<div style="margin-top: 40px;"></div>
  <el-statistic ref="statistic" @finish="hilarity" :value="deadline4" title="Distance to Tomorrow:" timeIndices > </el-statistic>
</el-card>
  </el-col>
</el-row>
 
  </div>
</template>

<script>
export default {
  data() {
    return {
      format:'HH小时:mm:ss:SSS',
      deadline: Date.now() + 1000 * 60 * 60 * 24 * 2,
      deadline2: Date.now() + 1000 * 60 * 60 * 8,
      deadline3: Date.now() + 1000 *  60 *30,
        deadline4: Date.now() + (new Date().setHours(23,59,59)-Date.now()) ,
    };
  },
  methods: {
    hilarity() {
      this.$notify({
          title: 'Prompt',
          message: "Time is up, do you know that an inch of gold can't buy an inch of time?",
          duration: 0
        });
    },
        clickFn(){
       this.$refs.statistic.suspend( this.stop)
         this.stop=!this.stop
    },
    add(){
      this.deadline3= this.deadline3+ 1000 * 10
    }
  }
};
</script>
<style lang="scss" >
.like {
  cursor: pointer;
  font-size: 25px;
  display: inline-block;
}
</style>

:::

Statistic Attributes

Attribute	Description	Type	Accepted Values	Default
value	Numerical content	string \| number	-	-
decimalSeparator	Setting the decimal point	string	-	.
formatter	Custom numerical presentation	v-slot \|({value}) => VNode	-	-
groupSeparator	Sets the thousandth identifier	string	-	,
precision	numerical precision	number	-	0
prefix	Sets the prefix of a number	string \| v-slot	-	-
suffix	Sets the suffix of a number	string \| v-slot	-	-
title	Numeric titles	string \| v-slot	-	-
valueStyle	Styles numeric values	style	-	-
rate	Set the ratio	number	-	1000

Statistic Slots

Name	Description
prefix	Numeric prefix
suffix	Suffixes for numeric values
formatter	Numerical content
title	Numeric titles

Statistic.Countdown Attributes

Attribute	Description	Type	Options	Default
timeIndices	Whether to enable the countdown function	boolean	true\|false	false
value	Required value, enter the bound value	string	—	—
format	Formatting the countdown display	string	—	'HH:mm:ss'

Statistic.Countdown Events

Method	Description	Parameters
change	Enable in the 'countdown' function	(value: Date)
finish	Launched after the 'countdown' is complete	(value: boolean)

Statistic Methods

Method	Description	Parameters	CallBack
suspend	Pause the countdown	(value:boolean)	(value: Date)

7.0 KiB Raw Blame History