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>
点击父组件弹窗按钮:
就能出现下面效果:
layer参数参考官网或其他网上教程,一定要仔细看,否则会出现一些很奇怪的错误