畅想网络网站建设推广_中国设计联盟官网_电商网站建设定制_网站建设网站

在点退出按钮的时候，本质就是在修改isShow的值，为 false还是 true

BaseDialog

<template><div class="base-dialog-wrap"><div class="base-dialog"><div class="title"><h3>温馨提示：</h3><button class="close">x</button></div><div class="content"><p>你确认要退出本系统么？</p></div><div class="footer"><button>确认</button><button>取消</button></div></div></div>
</template><script>
export default {}
</script><style scoped>
.base-dialog-wrap {width: 300px;height: 200px;box-shadow: 2px 2px 2px 2px #ccc;position: fixed;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 0 10px;
}
.base-dialog .title {display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #000;
}
.base-dialog .content {margin-top: 38px;
}
.base-dialog .title .close {width: 20px;height: 20px;cursor: pointer;line-height: 10px;
}
.footer {display: flex;justify-content: flex-end;margin-top: 26px;
}
.footer button {width: 80px;height: 40px;
}
.footer button:nth-child(1) {margin-right: 10px;cursor: pointer;
}
</style>

App.vue

<template><div class="app"><button>退出按钮</button><BaseDialog></BaseDialog></div>
</template><script>
import BaseDialog from "./components/BaseDialog.vue"
export default {data() {return {}},methods: {},components: {BaseDialog,},
}
</script><style>
</style>

如果父组件从传递给子组件的数据不是 value类的，而是类似以上visible，就要使用 .sync

058-sync修饰符_哔哩哔哩_bilibili