欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中使用layer弹窗功能,弹出子组件,解决遇到的一些坑

程序员文章站 2022-05-31 13:28:32
...

1.首先要引入jquery和layer(使用layer需要用jquery进行简化操作)
可以使用网上大多数的办法:使用npm插件安装,具体我就不细聊了,贴一下安装命令和代码

layer安装:

npm install vue-layer --save

main.js引入:

import layer from 'vue-layer'
Vue.prototype.$layer = layer(Vue);

jquery安装:

npm install jquery --save

main.js引入:

import $ from jquery

随便写一个子组件child-component,里面随便显示一些html

//child-component.vue
<template>
  <div class="aaa">
      我是子组件
  </div>
</template>

在父组件father-component.vue里,引入子组件,随便找个地方放下子组件,弄一个按钮触发弹窗事件,注意我代码中的注释

<template>
  <div>
    <button @click="popup">弹窗</button>
    <!-- 给一个id,并且隐藏子组件v-show="false" -->
    <childComponent id="childComponent" v-show="false"></childComponent>
  </div>
</template>
<script>
import childComponent from "./child-component.vue";
export default {
  data() {
    return {};
  },
  components: {
    childComponent,
  },
  methods: {
    popup() {
        //layer参数参考官网或其他网上教程
      layer.open({
        title: "弹窗标题",
        type: 1,//类型,必填,否则弹窗会出现[object:object]的字,还有一些问题
        content: $("#childComponent"),//这里使用jquery引用上面的组件
        area: ["400px", "400px"],
        btn: ["确定", "取消"],
      });
    },
  },
};
</script>

点击父组件弹窗按钮:
vue中使用layer弹窗功能,弹出子组件,解决遇到的一些坑
就能出现下面效果:

vue中使用layer弹窗功能,弹出子组件,解决遇到的一些坑
layer参数参考官网或其他网上教程,一定要仔细看,否则会出现一些很奇怪的错误

相关标签: vue 前端 vue.js