Vue 计算属性函数传参
vue中计算属性无法直接进行传参,如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)。<template><div class="bg-color-white bg-shadow-block pd16 mg-t-8"><div class="tong-title clearf"><div class="f...
·
vue中计算属性无法直接进行传参,如果有传参数的需求比如说做数据筛选功能可以使用闭包函数(也叫匿名函数)。
<template>
<div class="bg-color-white bg-shadow-block pd16 mg-t-8">
<div class="tong-title clearf">
<div class="fn-left">
<em></em>
<small>{{title}}</small>
<h-tooltip :content="tipContent" placement="top" class="tip-text-black v-baseline">
<h-icon name="help-circled" class="v-middle" color="#CCCCCC" :size="18"></h-icon>
</h-tooltip>
</div>
</div>
<div class="important-trade">
<!-- 缴款到期 -->
<dl v-for="(expiring,index) in eventList.expirings" :key="index">
<dt>
<p>缴款即将到期</p>
<em>{{expiring.custname}}</em>
</dt>
<dd class="clearf">
<div class="fn-left">
预约金额:
<small>{{expiring.balance}}万</small>
</div>
<div class="fn-right">
距离到期:
<small>{{countDownText(index)}}</small>
</div>
</dd>
</dl>
</div>
</div>
</template>
<script>
import { invokeApi } from "@src/seaj.base/api";
export default {
name: "ImportantEventList",
props: {
title: String, //"重要交易事件"
tipContent: String // "多行的样式,提示的文字信息提示的文字信息"
},
data() {
return {
timer: null,
now: null,
eventList: {
expirings: [
//缴款到期
{
custid: "", //客户编号
custname: "恒生软件有限公司", //客户名称
reservevaliddate: 20200327000000, //预约有效日期,Integer,YYYYMMDDhhmmss
balance: 300, //预约金额
requestno: "" //交易申请号
},
{
custid: "", //客户编号
custname: "恒生软件有限公司", //客户名称
reservevaliddate: 20200328000000, //预约有效日期,Integer,YYYYMMDDhhmmss
balance: 600.55, //预约金额
requestno: "" //交易申请号
}
],
excesscaptials: [
//超额到账
{
custid: "", //客户编号
custname: "恒生软件有限公司", //客户名称
capitalbalance: 450, // 到账金额
balance: 300, //交易金额
ratio: "50%" //超额百分比
},
{
custid: "", //客户编号
custname: "恒生软件有限公司", //客户名称
capitalbalance: 200, // 到账金额
balance: 100, //交易金额
ratio: "100%" //超额百分比
}
]
}
};
},
mounted: function() {
this.timer = setInterval(() => {
this.now = new Date();
}, 1000);
},
computed: {
countDownText: function() {
return function(index) {
const endStr = this.eventList.expirings[index].reservevaliddate + "";
const year = endStr.substr(0, 4);
const month = endStr.substr(4, 2);
const day = endStr.substr(6, 2);
const hour = endStr.substr(8, 2);
const minute = endStr.substr(10, 2);
const second = endStr.substr(12, 2);
// 2020-03-27T10:30:00
let endFormat = `${year}-${month}-${day}T${hour}:${minute}:${second}`;
const end = Date.parse(endFormat); //到期时间
let lefttime = parseInt((end - this.now) / 1000);
if (lefttime <= 0) {
return "00小时00分00秒";
}
let h = parseInt(lefttime / (60 * 60));
let m = parseInt((lefttime / 60) % 60);
let s = parseInt(lefttime % 60);
//补零
s = s < 10 ? "0" + s : s;
m = m < 10 ? "0" + m : m;
h = h < 10 ? "0" + h : h;
return `${h}小时${m}分${s}秒`;
};
}
},
distroyed: function() {
clearInterval(this.timer);
}
};
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)