如何创建一个Vue方法,从列表中动态选择相应扩展名的图标?

时间:2018-02-21 15:27:16

标签: vue.js vuejs2

我试图根据文件的类型显示正确的图标。

我有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>是要显示的图标名称)

DIV

{{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-elsevalue: "generic_icon"中的[0])来查找与列表中的任何项目不匹配的所有扩展程序?

1 个答案:

答案 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>