vuetify.js的对话框显示/关闭原理
2020-01-03 本文已影响0人
mark_x
vuetify提供了<v-dialog v-model="show">对话框组件，一个很有意思的事情是，通过在父组件设置show，就可以控制对话框的弹出和关闭。
这里给出了一个模拟实现，通过父组件按钮，控制子组件的显示和关闭。
“弹窗展示”就相当于对话框，也就相当于<v-dialog>组件。通过点击切换可以修改父组件的show变量，该变量传递给了子组件，注意不是通过v-bind的方式，而是v-model。子组件获得该变量，就可以用于显示、关闭的判断。
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button v-on:click="myswitch">切换</button>
<c-demo v-model="show"></c-demo>
</div>
<script type="text/javascript">
Vue.component('c-demo', {
props: ['show'],
model: {
prop: 'show'
},
template: "<div v-if='show'>弹窗展示</div>"
})
new Vue({
el: "#app",
data: {
show: true
},
methods: {
myswitch: function() {
this.show = !this.show
}
}
})
</script>
<style type="text/css"></style>
</body>
</html>
