nvue引入圖示坑

強本而節用，則天不能貧。——荀況

今天把原來的

vue

頁面改為

nvue

發現之前的圖示怎麼都引不進去，搞了半天，後來通過

debug

發現，我引入的方式是使用添加對應的

class

給它加了個

::before

僞元素

知道了這個就很簡單了，我們按照官方文檔引入字型

首先我在

App.vue

中寫入

css

代碼：

/* 加載圖示字型 - 條件編譯模式 */
/* #ifdef APP-PLUS-NVUE */
.my-iconfont {
	font-family: myIconfont;
}
/* #endif */           

複制

然後在對應的

nvue

頁面中，在

beforeCreate

生命周期裡調用

addRule

beforeCreate() {
	// #ifdef APP-PLUS-NVUE
	const domModule = uni.requireNativePlugin('dom');
	domModule.addRule('fontFace', {
		fontFamily: 'myIconfont',
		src: "url('/iconfont/iconfont.ttf')"
	});
	// #endif
},           

複制

然後最重要的就是我們引入的

icon

需要是這樣寫：

<text class="my-iconfont">&#xe7b3;</text>           

複制

說實話，感覺

nvue

坑好多。。。