Javascript Vue.js模态组件显示在组件列表中,但模态组件不';我没有真正表现出来
我试图在点击一个按钮时显示一个项目详细信息,我已经将数据正确地发送到模式,但是我似乎无法让模式真正显示出来。我在模板中尝试了不同的模式实现,我得到的结果是按下按钮时会出现灰色屏幕。我在这一点上不知所措,因为我尝试的每一个modals教程似乎都不适合我。我正在使用VUE CLI版本2 Home.vueJavascript Vue.js模态组件显示在组件列表中,但模态组件不';我没有真正表现出来,javascript,html,vue.js,Javascript,Html,Vue.js,我试图在点击一个按钮时显示一个项目详细信息,我已经将数据正确地发送到模式,但是我似乎无法让模式真正显示出来。我在模板中尝试了不同的模式实现,我得到的结果是按下按钮时会出现灰色屏幕。我在这一点上不知所措,因为我尝试的每一个modals教程似乎都不适合我。我正在使用VUE CLI版本2 Home.vue <template> <div class="home"> <Navbar /> <Ordertiles @chil
<template>
<div class="home">
<Navbar />
<Ordertiles @childToParent="onClickChild"/>
<div v-if="showModal">
<Modal @close="toggleModal" :header="item.header" :text="item.text" :image="item.img"/>
</div>
</div>
</template>
<script>
// @ is an alias to /src
import Navbar from '@/components/Navbar.vue'
import Ordertiles from '@/components/Ordertiles.vue'
import Modal from '@/components/Modal.vue'
export default {
name: 'Home',
components: {
Navbar,
Ordertiles,
Modal
},
data() {
return {
item: '',
showModal: false
}
},
methods: {
toggleModal() {
this.showModal = !this.showModal
},
onClickChild(item) {
this.item = item
console.log(this.item)
this.toggleModal()
}
}
}
</script>
//@是/src的别名
从“@/components/Navbar.vue”导入导航栏
从“@/components/Ordertiles.vue”导入Ordertiles
从“@/components/Modal.vue”导入模态
导出默认值{
姓名:'家',
组成部分:{
导航栏,
订单瓷砖,
情态动词
},
数据(){
返回{
项目:“”,
showModal:错误
}
},
方法:{
toggleModal(){
this.showmodel=!this.showmodel
},
onClickChild(项目){
this.item=项目
console.log(this.item)
this.toggleModal()
}
}
}
Modal.vue
<template>
<div class="modal">
<div class="container">
<div class="modal__title">Direction</div>
<p>{{header}}</p>
<img v-bind:src="image">
<p> {{text}} </p>
<button class="mt-3 border-b border-teal font-semibold">Close</button>
</div>
</div>
</template>
<script>
export default {
props: ['header', 'text', "image"],
methods: {
close () {
this.$emit('close')
}
}
}
</script>
<style lang="css" scoped>
.modal {
background-color: rgba(0, 0, 0, 0.7);
}
</style>
<template>
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
props: ['header', 'text', "image"],
methods: {
close () {
this.$emit('close')
}
},
components: {
}
}
</script>
<style lang="css" scoped>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: table;
transition: opacity 0.3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
方向
{{header}}
{{text}}
接近
导出默认值{
道具:['header','text','image'],
方法:{
结束(){
此.$emit('关闭')
}
}
}
.莫代尔{
背景色:rgba(0,0,0,0.7);
}
为什么不使用其他npm模式软件包,如vue模式。我强烈保证此软件包易于使用和理解。这将为您节省大量时间,因为您不必重新发明车轮。查看此链接我发现了一个实际适用于我的模态示例 Modal.vue
<template>
<div class="modal">
<div class="container">
<div class="modal__title">Direction</div>
<p>{{header}}</p>
<img v-bind:src="image">
<p> {{text}} </p>
<button class="mt-3 border-b border-teal font-semibold">Close</button>
</div>
</div>
</template>
<script>
export default {
props: ['header', 'text', "image"],
methods: {
close () {
this.$emit('close')
}
}
}
</script>
<style lang="css" scoped>
.modal {
background-color: rgba(0, 0, 0, 0.7);
}
</style>
<template>
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
<script>
export default {
props: ['header', 'text', "image"],
methods: {
close () {
this.$emit('close')
}
},
components: {
}
}
</script>
<style lang="css" scoped>
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: table;
transition: opacity 0.3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
transition: all 0.3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
.modal-enter {
opacity: 0;
}
.modal-leave-active {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
</style>
默认标题
默认主体
默认页脚
好啊
导出默认值{
道具:['header','text','image'],
方法:{
结束(){
此.$emit('关闭')
}
},
组成部分:{
}
}
.模态掩码{
位置:固定;
z指数:9998;
排名:0;
左:0;
宽度:100%;
身高:100%;
背景色:rgba(0,0,0,0.5);
显示:表格;
过渡:不透明度0.3s;
}
.模态包装器{
显示:表格单元格;
垂直对齐:中间对齐;
}
.集装箱{
宽度:300px;
保证金:0px自动;
填充:20px 30px;
背景色:#fff;
边界半径:2px;
盒影:0 2px 8px rgba(0,0,0,0.33);
过渡:所有0.3秒缓解;
字体系列:Helvetica、Arial、无衬线字体;
}
.模态头h3{
边际上限:0;
颜色:#42b983;
}
.模态体{
利润率:20px0;
}
.模式默认按钮{
浮动:对;
}
.模态输入{
不透明度:0;
}
.调休有效{
不透明度:0;
}
.modal输入.modal容器,
.modal保持活动状态。modal容器{
-webkit转换:比例(1.1);
转换:比例(1.1);
}
我刚刚尝试使用Vue模式,但仍然出现同样的问题。模态组件将显示,但不显示任何内容。当我在dev tools中将鼠标悬停在模态组件上时,它也不会显示模态的位置。对于vue模态,您是否使用调用模态的show方法的函数?我不太想将显示模态的方法放在哪里,目前,我想要的每个按钮/项都在orderTiles组件中。我将数据发送回Home.vue,然后将div与if toggle model一起使用。我真的找不到一个好位置来放置它。$refs.myRef.open()。问题很可能是我太笨了。我最终找到了解决模态问题的方法,谢谢你的帮助!