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邏輯部分,樣式你們自定義就好