vue计算属性传参(computed)
计算属性默认是无法传递参数的主要用于对当前文件组件的数据(data/props),进行操作,缓存当前计算属性的依赖而有些情况需要使用到计算属性来传递参数,可以使用闭包函数:computed: {// 获取数据进行操作computedValue() {return function(val) {console.log(val);};}}举一个具体例子,项目需要发送文件消息,需要根据文件类型显示文件图
·
计算属性默认是无法传递参数的
主要用于对当前文件组件的数据(data/props),进行操作,缓存当前计算属性的依赖
而有些情况需要使用到计算属性来传递参数,可以使用闭包函数:
computed: {
// 获取数据进行操作
computedValue() {
return function(val) {
console.log(val);
};
}
}
举一个具体例子,项目需要发送文件消息,需要根据文件类型显示文件图标类型,更需要处理文件名称,使用计算属性传参:
页面:
<!-- 文件 文档类型样式 -->
<div class="typeDoc"
:style="{backgroundColor: item.sender == $store.state.userUID?'rgba(2,134,223,0.1)':'rgba(255,255,255,0.5)'}"
v-else-if="item.msgType == 'LINK'&& !item.msgcustom">
<img
src="@/assets/documents/icon-im-doc-zip.png"
v-if="item.fileIcon === 'zip'"
/>
<img
src="@/assets/documents/icon-im-doc-img.png"
v-else-if="item.fileIcon === 'img'"
/>
<img
src="@/assets/documents/icon-im-doc-mp4.png"
v-else-if="item.fileIcon === 'audio'"
/>
<img
src="@/assets/documents/icon-im-doc-pdf.png"
v-else-if="item.fileIcon === 'pdf'"
/>
<img
src="@/assets/documents/icon-im-doc-ppt.png"
v-else-if="item.fileIcon === 'ppt'"
/>
<img
src="@/assets/documents/icon-im-doc-txt.png"
v-else-if="item.fileIcon === 'txt'"
/>
<img
src="@/assets/documents/icon-im-doc-xls.png"
v-else-if="item.fileIcon === 'xls'"
/>
<img src="@/assets/documents/icon-im-doc-default.png" v-else />
<a class="inner__doc__link" :href="SetLinkFileNameAndPath(item,'path')">{{
SetLinkFileNameAndPath(item,'name')
}}</a>
</div>
computed: {
SetLinkFileNameAndPath() {// 动态加载文件名称路径及图标
return function(item,n) {
if(item) {
if(n == 'name') {
if(item.text.constructor === Object && item.text.constructor !== String) {
let indexO = item.text.fileName.lastIndexOf(".");
item.fileIcon = this.docIcon(item.text.fileName.slice(indexO + 1));
return item.text.fileName;
} else if(item.text.constructor === String && item.text.indexOf("{") != -1) {
let indexS = JSON.parse(item.text).fileName.lastIndexOf(".");
item.fileIcon = this.docIcon(JSON.parse(item.text).fileName.slice(indexS + 1));
return JSON.parse(item.text).fileName;
} else {
let indexP = item.text.split("|")[1].lastIndexOf(".");
item.fileIcon = this.docIcon(item.text.split("|")[1].slice(indexP + 1));
return item.text.split("|")[1];
}
} else if(n == 'path') {
if(item.text.constructor === Object && item.text.constructor !== String) {
return item.text.filePath;
} else if(item.text.constructor === String && item.text.indexOf("{") != -1) {
return JSON.parse(item.text).filePath;
} else {
return item.text.split("|")[0];
}
}
}
}
}
}
methods: {
//文档图标
docIcon(val) {
if (["jpg", "png", "jpeg", "gif", "bmp"].includes(val)) {
return "img";
} else if (["zip", "rar", "7z", "jar", "cab"].includes(val)) {
return "zip";
} else if (["ppt", "pptx"].includes(val)) {
return "ppt";
} else if (["txt", "docx", "doc"].includes(val)) {
return "txt";
} else if (["pdf"].includes(val)) {
return "pdf";
} else if (["mp4"].includes(val)) {
return "audio";
} else if (["xls", "xlsx"].includes(val)) {
return "xls";
} else {
return "default";
}
},
}
具体的数据操作是可以忽略的,理解具体的使用情景即可。
点击阅读全文
更多推荐
所有评论(0)