Element-UI MCP Server

## Statistic 统计数值 用于突出某个或某组数字时，如显示数值，如金额，排名等。 倒计时模式 ### 基础用法 组件提供千分位的展示，不过可以通过 rate 来设置相应万分位等 :::demo ```html <template> <div> <el-row :gutter="20"> <el-col :span="6"> <div> <el-statistic group-separator="," :precision="2" :value="value2" :title="title" ></el-statistic> </div> </el-col> <el-col :span="6"> <div> <el-statistic title="男女比"> <template slot="formatter"> 456/2 </template> </el-statistic> </div> </el-col> <el-col :span="6"> <div> <el-statistic group-separator="," :precision="2" decimal-separator="." :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: 1314, title: "增长人数", }; }, }; </script> <style lang="scss"> .like { cursor: pointer; font-size: 25px; display: inline-block; } </style> ``` ::: ### 倒计时 :::warning 如果需要在原基础上添加时间，请注意：整体的时间（添加的时间量和原定时间）必须是**未来**的时间节点，否则依旧是倒计时结束 ::: :::demo 通过 `value` 提供未来的时间，将开启倒计时功能 ```html <template> <div> <el-row :gutter="20"> <el-col :span="14"> <el-card shadow="hover" style="width: 100%;"> <div style="width: 100%; display: inline-block; "> <el-statistic :value="deadline2" time-indices title="🎉商品降价🎉"> <template slot="suffix"> 抢购即将开始 </template> </el-statistic> </div> </el-card> <el-card shadow="hover" style="width: 100%;margin-top: 20px; "> <div style="width: 100%; display: inline-block; "> <el-statistic @finish="hilarity" :value="deadline3" time-indices title="时间游戏" > <template slot="suffix"> <el-button type="primary " size="mini" @click="add" >add 10s</el-button > </template> </el-statistic> </div> </el-card> <el-card shadow="hover" style="width: 100%;margin-top: 20px; "> <div style="width: 100%; display: inline-block;"> <el-statistic format="DD天HH小时mm分钟" :value="deadline5" time-indices title="🚩距离立夏还有：" > </el-statistic> </div> </el-card> </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; margin-top: 35px;"> 明日复明日 </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: 35px;"></div> <el-statistic ref="statistic" @finish="hilarity" format="HH:mm:ss" :value="deadline4" title="距离明日：" time-indices > </el-statistic> </el-card> </el-col> </el-row> </div> </template> <script> export default { data() { return { deadline2: Date.now() + 1000 * 60 * 60 * 8, deadline3: Date.now() + 1000 * 60 * 30, deadline4: Date.now() + (new Date().setHours(23, 59, 59) - Date.now()), deadline5: new Date("2023-05-06"), stop: true, }; }, methods: { hilarity() { this.$notify({ title: "提示", message: "时间已到", duration: 0, }); }, clickFn() { this.$refs.statistic.suspend(this.stop); this.stop = !this.stop; }, add() { this.deadline3 = this.deadline3 + 1000 * 10; }, }, }; </script> ``` ::: | 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------ | ------------------ | ------- | ----------- | ---------- | | time-indices | 是否开启倒计时功能 | boolean | true\|false | false | | value | 必填值，输入绑定值 | string | — | — | | format | 格式化倒计时展示 | string | — | 'HH:mm:ss' | ### Statistic.Countdown Events | 事件名称 | 说明 | 回调参数 | | -------- | ---------------------- | ---------------- | | change | 在`倒计时`的功能中开启 | (value: Date) | | finish | 在`倒计时` 完成后启动 | (value: boolean) |