vuetify v-chip 关闭图标未显示

Posted 2023-02-23

【中文标题】vuetify v-chip 关闭图标未显示

【英文标题】：vuetify v-chip close icon not showing

【发布时间】：2020-03-25 15:19:52

【问题描述】：

我刚刚将 vuetify 从 1.5 升级到最新的 2.1.12。 我的 v-chips 现在缺少它们的关闭图标。它们根本不可见。

即使我创建了一个非常简单的 v-chip，我也看不到图标。 这是一个芯片的例子：

<v-chip close>No close icon, why?</v-chip>

在 vuetify 的 1.5 版中，我可以看到“close”道具使 html 在芯片内呈现一个带有“v-chip__close”类的 div，但在 v2.1.12 中没有这样的 html 芯片因此我没有查看关闭按钮。

此外，数据表标题中的“排序箭头图标”和“下一页/上一页图标”也未显示。我有点怀疑这是出于同样的原因.. 但是在这种情况下，表格是可排序的，并且可以切换页面，至少“更改页面”图标在那里但不可见..

更新： 复选框和单选按钮也不可见。它们在那里，可点击但不可见..

app.js：

import Vue from "vue";
import axios from "axios";
import router from "./router/index";
import store from "./store/store";
import  sync  from "vuex-router-sync";
import App from "components/app-root";
import  FontAwesomeIcon  from "./icons";
//import  FontAwesomeIcon  from '@fortawesome/vue-fontawesome' // Ensure you are using css-loader
import Editor from "@tinymce/tinymce-vue"
import globalMixins from "./components/common/mxins/global";

Vue.component("icon", FontAwesomeIcon);
Vue.component("tinymce-editor", Editor)

// axios now available globally in vue components (use "this.$http")
Vue.prototype.$http = axios;
sync(store, router);
Vue.mixin(globalMixins);

//import Vuetify from "vuetify/lib";
import Vuetify from 'vuetify'  // For full install, DO NOT use "vuetify/lib"
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);
const vuetify = new Vuetify(
  icons: 
    iconfont: 'fa4',
  ,
  theme: 
    themes: 
      light: 
        my1: "#2196F3",
      ,
      dark: 
        my2: "#2196F3",
      
    
  
);

Vue.use(require("vue-shortkey"));

Vue.filter('formatSize', function (size) 
  if (size > 1024 * 1024 * 1024 * 1024) 
    return (size / 1024 / 1024 / 1024 / 1024).toFixed(2) + ' TB'
   else if (size > 1024 * 1024 * 1024) 
    return (size / 1024 / 1024 / 1024).toFixed(2) + ' GB'
   else if (size > 1024 * 1024) 
    return (size / 1024 / 1024).toFixed(2) + ' MB'
   else if (size > 1024) 
    return (size / 1024).toFixed(2) + ' KB'
  
  return size.toString() + ' B'
);

var VueCookie = require('vue-cookie');
Vue.use(VueCookie);    

Vue.use(require('vue-moment'));

const app = new Vue(
  vuetify,
  store,
  router,
  ...App
);

export  app, router, store ;

有什么建议我可以测试或更改以使其正常工作吗？

更新 由于没有使用 fontawesome（可能是以前的开发人员在某个阶段添加的），我完全删除了文件 icons.js 并评论了导入。 不过，标准图标仍然没有显示..

更新了 app.js（注释了 fontawesome-stuff）

import Vue from "vue";
import axios from "axios";
import router from "./router/index";
import store from "./store/store";
import  sync  from "vuex-router-sync";
import App from "components/app-root";
//import  FontAwesomeIcon  from "./icons";
//import  FontAwesomeIcon  from '@fortawesome/vue-fontawesome' // Ensure you are using css-loader
import Editor from "@tinymce/tinymce-vue"

//Vue.component("icon", FontAwesomeIcon);
Vue.component("tinymce-editor", Editor)

Vue.prototype.$http = axios;
sync(store, router);
import globalMixins from "./components/common/mxins/global";
Vue.mixin(globalMixins);
import Vuetify from 'vuetify'  // For full install, DO NOT use `vuetify/lib`
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);
const vuetify = new Vuetify(
  icons: 
    //iconfont: 'fa4',
  ,
  theme: 
    themes: 
      light: 
        st1: "#2196F3"
      ,
      dark: 
        st2: "#2196F3"
      
    
  
);

Vue.use(require("vue-shortkey"));
var VueCookie = require('vue-cookie');
Vue.use(VueCookie);
Vue.use(require('vue-moment'));

const app = new Vue(
  vuetify,
  store,
  router,
  ...App
);

export  app, router, store ;

更新解决方案 我将此添加到我的 app.js 中，现在它似乎可以正常工作了：

const vuetify = new Vuetify(
      icons: 
        iconfont: 'fmd',
      ,

【问题讨论】：

请分享App.vue 和main.js 文件。我们必须看看 Vueitfy 2.0 是否安装正确并导入到您的项目中。

你好 Ankit！我只有一个 app.js。没有main.js 我的帖子现在更新了，谢谢！

我浏览了您正在使用的库的文档：github.com/FortAwesome/vue-fontawesome 您icons.js 中的导入语句似乎是错误的。您可以交叉检查版本号并使用正确的导入语句吗？

您是否删除了正在创建 vuetify 变量的行中的 icons 键？因为这是图标不会出现的唯一方式。您也可以在您的问题中发布更新的app.js 吗？一个没有很棒的东西。

谢谢，看来我得把iconfont改成“md”了，没有你的输入是想不通的，一百万谢谢！！

【参考方案1】：

我建议你这样导入font-awesome：

import  library  from '@fortawesome/fontawesome-svg-core'
import  faEnvelope, faGraduationCap, faHome, faTags, faList, faSpinner  from '@fortawesome/free-solid-svg-icons'
import  FontAwesomeIcon  from '@fortawesome/vue-fontawesome'

library.add(faEnvelope, faGraduationCap, faHome,faTags, faList, faSpinner)

Vue.component('font-awesome-icon', FontAwesomeIcon)

【讨论】：

感谢您的输入，但事实证明没有使用 font awesome，所以我将其删除。标准图标仍未显示..

那么你是在尝试使用 Vuetify v-icon 组件吗？

【参考方案2】：

由于我的输入，问题得以解决。我必须使用“md”作为图标字体，请参阅第一篇文章。