动态创建 V 图标

Question

我想用javascript动态创建v-icon。所以这是我的代码：

const icon = document.createElement('v-icon');
icon.innerHTML = 'folder_open';

但是它不起作用。它只显示文本而不是 V 图标。我该怎么做？

Answer 1

v-icon不是

有效的HTML元素。v-icon组件将被转换为具有特定类的 html 有效i -tag 。Vuetify 图标利用 Google 的 Material Icons 字体库。因此，要动态创建伪v-icon元素，您必须创建一个i元素并将material-icons icon作为类分配给它。最后，您将图标的名称添加到内部 html 中，就像您已经做的那样。

例：

const icon = document.createElement('i');
icon.className = "material-icons icon";
icon.innerHTML = "folder_open";
var main = document.getElementById('main');
main.appendChild(icon);

小提琴：https://jsfiddle.net/mqyxbg1k/