0

模仿实现消息提示框组件,最后一步是用$mount手动挂载,然后将$el append到body里面去,但是打印出来的$el是 <!--function (e,n,r,i){return re(t,e,n,r,i,!0)}-->,而不是模板中的div。
代码如下:

message.vue代码:

<template>
  <div class="cl-message">
    <div class="cl-message__icon iconfont icon-tishi"></div>
    <div class="cl-message__content">{{content}}</div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        content: ''
      }
    }
  }
</script>

message.js代码:

import Vue from 'vue'
// 创建构造器
let Constructor = Vue.extend(require('./message.vue'))
let func = (mes) => {
  if (Vue.prototype.$isServer) return
  // 创建 constructor 的实例,没有el选项则模板会渲染为文档之外的元素,后面需通过原生api插入到文档中
  let instance = new Constructor({
    data: {
      content: mes
    }
  })
  instance.vm = instance.$mount()
  document.body.appendChild(instance.vm.$el)
  console.log(instance.vm.$el)    // 打印的结果是 <!--function (e,n,r,i){return re(t,e,n,r,i,!0)}-->
  return instance.vm
}

export default func

index.vue代码:

<template>
  <section class="container">
    <button @click="open">按钮</button>
  </section>
</template>

<script>
import Vue from 'vue'
import func from '~/components/common/message.js'
Vue.prototype.$message = func

export default {
  methods: {
    open () {
      this.$message('这是一条提示提示')
    }
  }
}
</script>

贴一下instance.vm.$el的内容:

怎么才能使这个$el为message.vue中template的dom结构呢?有哪个地方写的不对吗?

另外我用的是nuxt的框架,不知道这个问题跟配置有没有关系,贴一下配置文件:
nuxt.config.js:

module.exports = {
  head: {
    title: 'nuxt-exercise',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  loading: { color: '#3B8070' },
  build: {
    extend (config, ctx) {
      if (ctx.dev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
        ***config.resolve.alias.vue$ = 'vue/dist/vue.min.js'***
      }
    }
  },
  css: [
    { src: '~assets/css/common.scss', lang: 'sass' }
  ]
}

这个配置文件跟nuxt提供的相比,只添加了 config.resolve.alias.vue$ = 'vue/dist/vue.min.js' ,添加这个是由于报错:Failed to mount component: template or render function not defined.

3个回答

0

已采纳

自己用vue-cli的框架又试了一下,最后把vue-loader的版本从13降到12.0.2就好了。。

0

我看了半天没发现有问题
然后自己动手试了下,发现打印出来的就是一个dom元素呀,并没有问题

而且你说$el打印出来是一个函数,那为什么后面贴的图$el是一个对象呢,而且看这个对象应该就是一个dom节点。如果你用console.dir打印一个dom节点就会显示这样的结果

0

这个怎么做的,我也想弄,哪里有教程呀。

撰写答案