我试图根据文件的类型显示正确的图标。
我有library(tidyverse)
Cs <- df1 %>%
rowid_to_column %>%
gather(,,-1) %>%
separate(key,c("letter","number")) %>%
spread(letter,value) %>%
filter(A==1) %>%
group_by(rowid) %>%
slice(1) %>%
select(rowid,C=B)
df1$C <- NA
df1$C[Cs$rowid] <- Cs$C
显示:
图片
或div
组件(其中<v-icon>
是要显示的图标名称)
{{ext.value}}
<div>
<img v-if="isImg(props.item.path)" :src="props.item.path">
<v-icon v-else v-for="ext in extensionsList" :key="ext.id">
{{ext.value}} <=== should put a corresponding value if matches any extension
</v-icon>
</div>
我可以使用此方法获取文件扩展名:
data () {
return {
extensionsList: [
{value: "generic_icon", extension: ['.ini', '.dll']},
{value: "code_icon", extension: ['.json', '.py']},
{value: "text_icon", extension: '.txt'}
]
}
}
getExtension (value) {
return path.extname(value)
}
是一个包含文件属性的对象,因此我将其作为输入传递给props.item
,并返回如下内容:path.extname()
或'.ini'
如何使这项工作?当'.jpg'
branch为true时,我不知道如何调用方法,我是否使用方法,计算属性?
如何确保它使用通用文件图标v-else
(value: "generic_icon"
中的[0]
)来查找与列表中的任何项目不匹配的所有扩展程序?
答案 0 :(得分:3)
我只想制作一个返回相关图标的方法:
methods: {
getIcon(ext) {
let icon = this.extensionsList.find((item) => {
let { extension } = item;
if (Array.isArray(extension)) {
return extension.includes(ext);
} else if (typeof extension === 'string') {
return extension === ext;
}
}) || {};
return icon.value || "generic_icon";
}
}
然后在模板中调用它:
<div>
<img v-if="isImg(props.item.path)" :src="props.item.path">
<v-icon v-else>
{{ getIcon(getExtension(props.item.path)) }}
</v-icon>
</div>