vue中使用layui

<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="https://www.layuicdn.com/layui/layui.js"></script>

這裏 我在index.html 中直接加載了線上的layui

 

configureWebpack: config => {
      config.externals = {
        layui: "window.layui",
      }
  },

在 vue.config.js  中這樣寫  大概是讓vue 加載這個對象吧   

router.beforeEach((to, from, next) => {

  console.log(to,from);

  layui.use(["table", "laydate", "tree"], function() { 

    Vue.prototype.$layui = layui;

    next();

  })

})

這裏利用路由攔截  把layui的對象擴展到vue 的對象 

layui.use  沒有找到同步的方法  0感覺這種方式不太好   但是目前沒有其他的方法 暫時先這樣 

 

在執行render 之前要 this.$nextTick(() => {}  不然會找不到dom

this.$layui.laydate.render({})

如果封裝了 組件的話 要傳不同id