首先,要写一个弹窗的confirm组件:
<template>
<transition name="confirm-fade">
<div class="confirm">
<div class="confirm-wrapper">
<div class="confirm-content">
<p class="text"></p>
<div class="operate">
<div class="operate-btn left"></div>
<div class="operate-btn"></div>
</div>
</div>
</div>
</div>
</transition>
</template>
<style lang="stylus" scoped>
@import "~common/stylus/variable"
.confirm
position fixed
left 0
right 0
top 0
bottom 0
z-index 999
background-color: $color-background-d
&.confirm-fade-enter-active
animation: confirm-fadein 0.3s
.confirm-content
animation: confirm-zoom 0.3s
.confirm-wrapper
position: absolute
top: 50%
left: 50%
transform: translate(-50%, -50%)
z-index: 1000
.confirm-content
width: 270px
border-radius: 13px
background: $color-highlight-background
.text
padding: 19px 15px
line-height: 22px
text-align: center
font-size: $font-size-large
color: $color-text-l
.operate
display: flex
align-items: center
text-align: center
font-size: $font-size-large
.operate-btn
flex: 1
line-height: 22px
padding: 10px 0
border-top: 1px solid $color-background-d
color: $color-text-d
&.left
border-right: 1px solid $color-background-d
@keyframes confirm-fadein
0%
opacity: 0
100%
opacity: 1
@keyframes confirm-zoom
0%
transform: scale(0)
50%
transform: scale(1.1)
100%
transform: scale(1)
</style>
然后在需要的组件里面调用
<confirm ref="confirm"></confirm>
confirm的组件的显示和隐藏需要由自身来控制,所以,要在他里面定义一个data:
data () {
return {
showFlag: false
}
}
再定义两个方法供外部使用:
methods: {
show () {
this.showFlag = true
},
hide () {
this.showFlag = false
}
}
然后点击垃圾桶的时候,调用子组件的show方法:
showConfirm () {
this.$refs.confirm.show()
},
confirm接收三个文本的值
props: {
text: {
type: String,
default: '确定删除吗?'
},
cancelBtnText: {
type: String,
default: '取消'
},
confirmBtnText: {
type: String,
default: '确认'
}
},
给confirm上面的按钮添加点击事件:
<div class="operate-btn left" @click="cancel">{{cancelBtnText}}</div>
<div class="operate-btn" @click="confirm">{{confirmBtnText}}</div>
cancel () {
this.hide()
this.$emit('cancel')
},
confirm () {
this.hide()
this.$emit('confirm')
}
取消事件的派发有助于统计。
然后在父组件里面监听:
<confirm ref="confirm" :text="'是否清空所有'" @confirm="clearSearch"></confirm>
clearSearch () {
this.clearSearchHistory()
},
到这里,逻辑就都实现了。