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逻辑部分,样式你们自定义就好