vue小toast插件报错runtine-only
var Toast={};
Toast.install = function (Vue, options) {
let opt = {
defaultType:'bottom', // 默认显示位置
duration:'2500' // 持续时间
}
if(options){
console.log(JSON.stringify(options))
for(let property in options){
opt[property] = options[property]; // 使用 options 的配置
}
}
// 1. 添加全局方法或属性
Vue.prototype.toast = function (tips) {
if(document.getElementsByClassName('vue-toast').length){
// 如果toast还在，则不再执行
return;
}
let toastTpl = Vue.extend({
template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>'
});
let tpl = new toastTpl().$mount().$el;
document.body.appendChild(tpl);
setTimeout(function () {
document.body.removeChild(tpl);
}, opt.duration)
}
}
export default Toast;
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
(found in <Root>)
main.js中：
import Toast from '@/utils/toast/'
Vue.use(Toast,{aa:'1',bb:'---'})
某处：this.toast("11111")
不行XXXXXXXXX啊。这个写法只适用于那种不需要编译，runtine.vue.js 这种。
解决方法一：
var Toast={};
Toast.install = function (Vue, options) {
let opt = {
defaultType:'bottom', // 默认显示位置
duration:'2500' // 持续时间
}
if(options){
console.log(JSON.stringify(options))
for(let property in options){
opt[property] = options[property]; // 使用 options 的配置
}
}
// 1. 添加全局方法或属性
Vue.prototype.toast = function (tips) {
if(document.getElementsByClassName('vue-toast').length){
// 如果toast还在，则不再执行
return;
}
// let toastTpl = Vue.extend({
// template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>'
// });
// let tpl = new toastTpl().$mount().$el;
let toastTpl = new Vue({
render (h) {
return h('div', tips)
}
})
let tpl = toastTpl.$mount().$el;
document.body.appendChild(tpl);
setTimeout(function () {
document.body.removeChild(tpl);
}, opt.duration)
}
}
export default Toast;
能解决，但是添加css不方便，所以另外想办法。
最后还是用这种方法：
var Toast={};
Toast.install = function (Vue, options) {
let opt = {
defaultType:'bottom', // 默认显示位置
duration:'2500' // 持续时间
}
if(options){
console.log(JSON.stringify(options))
for(let property in options){
opt[property] = options[property]; // 使用 options 的配置
}
}
// 1. 添加全局方法或属性
Vue.prototype.toast = function (tips) {
if(document.getElementsByClassName('vue-toast').length){
// 如果toast还在，则不再执行
return;
}
/**
* 需要编译器
*/
// let toastTpl = Vue.extend({
// template: '<div class="vue-toast toast-'+opt.defaultType+'">' + tips + '</div>'
// });
// let tpl = new toastTpl().$mount().$el;
/**
* 不需要编译器
*/
/**
* 对不同构建版本的解释:
* 完整版：同时包含编译器和运行时的版本。完整版 vue.js vue.common.js vue.esm.js
* 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。只包含运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js
* 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
* https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6
* 运行时 + 编译器 vs. 只包含运行时
如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：
// 需要编译器
new Vue({
template: '<div>{{ hi }}</div>'
})
// 不需要编译器
new Vue({
render (h) {
return h('div', this.hi)
}
})
当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用运行时版本即可。
因为运行时版本相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要在打包工具里配置一个别名：
webpack
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
}
}
*/
let toastTpl = new Vue({
render (createElement) {
if (tips) {
return createElement('div',{
style:{
position: 'fixed',
top: '0',
left: '0',
height: '100%',
width: '100%',
},
},[
createElement('div', {
props:{icon:'search'},
style:{
backgroundColor:'red',
border: 'none',
fontSize: '21px',
margin: '0px 10px 6px 0px',
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translateX(-50%) translateY(-50%)',
},
on:{
click:()=>{
console.log('fff')
}
}
},tips)
])
}
}
})
let tpl = toastTpl.$mount().$el;
document.body.appendChild(tpl);
setTimeout(function () {
document.body.removeChild(tpl);
}, opt.duration)
}
}
export default Toast;
https://cn.vuejs.org/v2/guide/render-function.html#%E5%AE%8C%E6%95%B4%E7%A4%BA%E4%BE%8B
https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6
好好看看吧
