本功能适用于浏览器
正在写一个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写到元素里了...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。