在 uni-app 項(xiàng)目中，很多時(shí)候我們都需要一些全局統(tǒng)一樣式的交互效果，比如 loading 及各種彈窗交互提示等。當(dāng)然，大部分的項(xiàng)目我們都會(huì)使用 uni 自帶 API 如：

uni.showLoading({title: '加載中',mask: true });

這些 API 我們稍加封裝就可以用的很 happy 了，如：

this.$loading('加載中', true)

但是實(shí)際上，有時(shí)候這個(gè) loading 效果并不是我們想要的。除了 loading ，還有 toast 、model 。這些自帶的交互效果編譯到各端后的效果并不一樣，顯然這并不是我們想要的。而且即使是開(kāi)發(fā)某一端，比如小程序。有時(shí)候我們也需要自定義這些交互效果。

比如 UI 設(shè)計(jì)的 loading 是一張 Gif 動(dòng)圖。產(chǎn)品希望 loading 開(kāi)始結(jié)束時(shí)有淡入淡出效果。而且整個(gè) App 所有的 loading 是統(tǒng)一的。當(dāng)然更有時(shí)候除了loading，甚至toast 、model 等交互效果都是如此。

以 loading 舉例。我們通常的做法是，在 components 文件夾中定義一個(gè)組件，在需要的地方調(diào)用。比如這里叫：custom-loading，同時(shí)在里面定義了 show/hide 方法：

<template><view v-if="isShow" class="custom-loading"><image src="../../loading.gif"></image></view> </template><script>export default {data() {return {isShow: false};},methods: {show() {this.isShow = true},hide() {this.isShow = false}}} </script><style lang="scss" scoped>.custom-loading {top: 0;left: 0;right: 0;bottom: 0;z-index: 2;display: flex;position: fixed;align-items: center;justify-content: center;image {width: 98px;height: 98rpx;}} </style>

使用時(shí)只需要在 template 中聲明：

<custom-loading ref="custom-loading" />

在需要的時(shí)候調(diào)用：

this.$refs['custom-loading'].show()

到這里，一切都沒(méi)有問(wèn)題。當(dāng)然，聰明的你一定知道像這種使用頻率比較高的組件。最好將其定義為全局組件，就可以省略組件內(nèi)的 import 。但是在使用時(shí)，還是需要在 template 中聲明：

<template><!-- ... --><custom-loading ref="custom-loading" /><!-- ... --> </template>

那如果還有 custom-toast、custom-model 等，而且需要用到這些公共組件的頁(yè)面會(huì)有很多。比如... 100多個(gè)。難道要在每個(gè)頁(yè)面的 template 中都寫(xiě)上：

<custom-loading ref="custom-loading" /> <custom-toast ref="custom-toast" /> <custom-model ref="custom-model" />

很明顯，這些代碼是多次重復(fù)的。如果你不想敲，可以用 plop 幫你生成帶有以上代碼的 tamplate。但是在我看來(lái)，這些代碼實(shí)際上并不需要出現(xiàn)在 template 中，但是最好還能實(shí)現(xiàn)其相應(yīng)的功能。

簡(jiǎn)單的說(shuō)，就是我沒(méi)有在 template 中寫(xiě)：

<custom-loading ref="custom-loading" />

但是卻能在 methods 中調(diào)用：

this.$refs['custom-loading'].show()

它不在那里，實(shí)際上它在那里。

amazing ？ 其實(shí)很簡(jiǎn)單。看標(biāo)題你可能也猜到了：

custom-loading 組件實(shí)際是在 vue-template-compiler 的 compile 方法編譯一個(gè) template 前手動(dòng)將 <custom-loading ref="custom-loading"/> 插入到 template 中。

好了，謎底已經(jīng)揭曉，看看怎么使用吧，其實(shí)很簡(jiǎn)單。

如果你比較細(xì)心，在 vue-cli 文檔中關(guān)于 webpakc 的配置中有這么一個(gè)例子：

// vue.config.js module.exports = {chainWebpack: config => {config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {// 修改它的選項(xiàng)...return options})} }

這里我們將 options 打印出來(lái)一睹真容：

沒(méi)錯(cuò)，options 里面竟然有 vue-template-compiler 對(duì)象！！！

注意：這種情況只有在 uni-app 中才會(huì)發(fā)生。非 uni-app 項(xiàng)目的 options 沒(méi)有這種情況

既然能拿到 compiler 對(duì)象。我們就可以在 vue-template-compiler 將 template 模板轉(zhuǎn)換為 AST 樹(shù)之前往 template 中加點(diǎn)料。而將 template 模板轉(zhuǎn)換為 AST 樹(shù)的執(zhí)行者就是 compiler 對(duì)象中的 compile 方法。因此，只要重寫(xiě) compile 方法。

其實(shí)這種事情，還是比較常見(jiàn)的。Vue 2.X 對(duì)數(shù)組類(lèi)型的數(shù)據(jù)結(jié)構(gòu)的監(jiān)聽(tīng)就是用重新數(shù)組原型方法實(shí)現(xiàn)的。

有了思路，實(shí)現(xiàn)起來(lái)就很快了：

// vue.config.js module.exports = {chainWebpack: config => {config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {const compile = options.compiler.compileoptions.compiler.compile = (template, ...args) => {if (args[0].resourcePath.match(/^pages/)) {template = template.replace(/[sS]+?<[dD]+?>/, _ => `${_}<custom-loading ref="custom-loading" />`)}return compile(template, ...args)}return options})} }

好了。這樣配置之后，所有頁(yè)面的 template 中都無(wú)需寫(xiě)：<custom-loading ref="custom-loading"/> ，也可以通過(guò) $ref 拿到。但是前提是要將 custom-loading 注冊(cè)為全局組件或遵循 easycom 。

最后，你當(dāng)然可以把調(diào)用 loading 的操作再次封裝：

this.$refs['custom-loading'].show() // => this._$loading()

好了，這就是 vue-template-compiler 在 uniapp 中我個(gè)人的一次使用。個(gè)人覺(jué)得還是非常方便。當(dāng)然關(guān)于 vue-loader 和 vue-template-compiler 的使用網(wǎng)上已經(jīng)有很多文章了，這里就不展開(kāi)了。最后，這里有一個(gè)我個(gè)人用 uniapp 寫(xiě)的小程序，里面已經(jīng)用到了這種方式。源碼在：https://github.com/yinchengnuo/templateWxappUniapp 歡迎 start

與50位技術(shù)專(zhuān)家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的vue 非template模式_vue-template-compiler 还能这么用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。