本功用适用于浏览器
正在写一个web app，常常用到comfirm，为了UI的团体一致，照样想本身写一个component。
第一次尝试，觉得是个失利阅历了……
要领一
代码以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.mdtransition-enter-active,
.mdtransition-leave-active {
transition: all 0.8s;
}
.mdtransition-enter,
.mdtransition-leave-active {
opacity: 0;
}
</style>
</head>
<body>
<div id="example">
<pop-up :ishow="isShow" @hide="showDialog" @del="del" style="position:absolute;"></pop-up>
<button @click="showDialog">show del !</button>
</div>
<script src="https://unpkg.com/vue@2.2.4/dist/vue.js"></script>
<script>
var popUpComponent = Vue.component('pop-up', {
props: ['ishow'],
template: `
<transition appear
name="mdtransition"
>
<div style="
height:100vh;
width:100vw;
background-color:rgba(0,0,0,0.3);
display: flex;
justify-content:center;
align-items:center;
"
@click="hide"
v-if="ishow"
>
<div style="
background-color:#fff;
padding:10px;
"
@click="del"
>Are you sure to delete this item?</div>
</div>
</transition>
`,
data:function(){
return {
}
},
methods:{
hide:function(){
this.$emit('hide');
},
del:function(){
this.$emit('del');
}
}
})
var vm = new Vue({
el: '#example',
data:{
isShow:false
},
methods:{
showDialog:function(){
this.isShow = !this.isShow;
},
del:function(){
console.log('del');
}
}
})
</script>
</body>
</html>与子组件交换，一开始就想到了用props
动态绑定isShow到子组件的props——ishow
<pop-up :ishow="isShow"></pop-up>如许做我们可以很轻易在父组件经由过程转变isShow从而让dialog显现
然则怎样让dialog消逝？
组件实例的作用域是伶仃的。这意味着不能(也不应该)在子组件的模板内直接援用父组件的数据。要让子组件运用父组件的数据，我们须要经由过程子组件的props选项。
以上来自官网
不能直接在子组件转变prop这就有点麻烦了…
须要用this.$emit(‘hide’)触发hide事宜，然后在组件上@hide=”showDialog”监听hide事宜，再然后触发父组件的showDialog要领
假如选项有两个，就要把上面的步骤再反复一次
完整超出了我的估计，本来想复用，然则用一次写这么一大堆东西怎样复用呢…
所以照样另找方法吧OTL
要领二
代码以下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,body{
margin: 0;padding: 0;
}
.mdtransition-enter-active,
.mdtransition-leave-active {
transition: all 0.8s;
}
.mdtransition-enter,
.mdtransition-leave-active {
opacity: 0;
}
</style>
</head>
<body>
<div id="example">
<modal ref="modal" style="position:absolute;" word="Yes Or No?"></modal>
<button @click="showDialog">show del !</button>
</div>
<script src="https://unpkg.com/vue@2.2.4/dist/vue.js"></script>
<script>
Vue.component('modal', {
template: `
<transition appear
name="mdtransition"
>
<div style="
height:100vh;
width:100vw;
background-color:rgba(0,0,0,0.3);
display: flex;
justify-content:center;
align-items:center;
flex-direction: column;
"
@click="hide"
v-if="isShow"
>
<div style="
background-color:#fff;
padding:10px;
"
>
<p>{{ word }}</p>
<div style="
display: flex;
justify-content:Space-around;
">
<button @click="yes">Y</button>
<button @click="no">N</button>
</div>
</div>
</div>
</transition>
`,
props:['word'],
data:function(){
return {
isShow:false,
yescb:'',
nocb:''
}
},
methods:{
hide:function(){
this.isShow = false;
},
show:function(yescb,nocb){
this.isShow = true;
this.yescb = yescb;
this.nocb = nocb;
},
yes:function(){
this.yescb();
},
no:function(){
this.nocb();
}
}
})
var vm = new Vue({
el: '#example',
methods:{
showDialog:function(){
this.$refs.modal.show(function(){
console.log('yes');
},function(){
console.log('no');
});
}
}
})
</script>
</body>
</html>厥后，发明竟然另有这个东西！！
只管有 props 和 events ，然则偶然依然须要在 JavaScript 中直接接见子组件。为此可以运用 ref 为子组件指定一个索引 ID 。
ref 被用来给元素或子组件注册援用信息。援用信息将会注册在父组件的 $refs 对象上。假如在一般的 DOM 元素上运用，援用指向的就是 DOM 元素; 假如用在子组件上，援用就指向组件实例
以上来自官网
<modal ref="modal"></modal>this.$refs.modal竟然可以直接接见子组件！那直接在子组件处置惩罚统统不就好了啊！
点击触发dialog的函数就可以像是如许
this.$refs.modal.show(function(){
console.log('yes');//这是挑选yes的回调函数
},function(){
console.log('no');//这是挑选no的回调函数
});剩下的东西子组件本身处理！
hide:function(){
this.isShow = false;
},
show:function(yescb,nocb){
this.isShow = true;
this.yescb = yescb;
this.nocb = nocb;
},
yes:function(){
this.yescb();
},
no:function(){
this.nocb();
}还很不完善，愿望列位能给点发起OTL
PS：这个自用的comfirm为了在引入的时刻少写东西，我就只管吧css写到元素里了…
