vue+slot+transition+v-model实现淡入淡出弹窗效果

1.首先说一下v-model,印象中只有input标签使用?太天真,它是进行双向数据绑定的,有了它再不用多写代码了.

v-model是   :value和@input的语法糖

使用v-model时:

<input v-model="sth"/>

等效于

使用:value和@input时:

<input :value="sth" @input="sth=$event.target.value"/>

 

2.喜闻乐见的代码环节

1)dialog1.vue

<template>
    <div id="dialog-wrapper">
        <div id="dialog-content">
            弹窗内容
            <button @click="close">关闭弹窗</button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'DialogOne',
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        close() {
            this.$emit('input',false)
        }
    }
}
</script>
<style lang="stylus" scoped>
#dialog-wrapper
    position absolute
    top 0
    left 0
    right 0
    bottom 0
    background: rgba(0,0,0,0.5)
    display flex
    justify-content center
    align-items center
    #dialog-content
        color red

</style>

 

2)dialog目录下的index.vue(主要是使用了transition动画和slot插槽)

<template>
    <transition>
        <slot></slot>
    </transition>
</template>
<script>
export default {
    name: 'VDialog'
}
</script>
<style lang="stylus" scoped>
//淡入淡出的效果
.v-enter, .v-leave-to
    opacity: 0
.v-enter-active, .v-leave-active
    transition: opacity .5s
</style>

3)在app.vue中使用

<template>
  <div id="app">
    <button @click="showDialog()">出现弹窗</button>
    <v-dialog>
      <dialog-one v-if="ifShow" v-model="ifShow"></dialog-one>
    </v-dialog>
    <router-view/>
  </div>
</template>
<script>
import VDialog from '@/components/common/dialog'
import DialogOne from '@/components/common/dialog/dialog1'
export default {
  components: {
    VDialog,
    DialogOne
  },
  data() {
    return {
      ifShow: false
    }
  },
  methods: {
    showDialog() {
      this.ifShow = true
    }
  }
}
</script>
<style lang="stylus">
html 
  font-size 20px
</style>

重要的是js逻辑部分,样式你们自定义就好