本文主要是介绍vue自定义组件dialog，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
自定义组件 dialog.vue源码：
<template>
<div class="dialog" v-show="showMask">
<div class="dialog-container">
<div class="dialog-title">{{title}}</div>
<div class="content" v-html="content"></div>
<div class="btns">
<div v-if="type != 'confirm'" class="default-btn" @click="closeBtn">
{{cancelText}}
</div>
<div v-if="type == 'danger'" class="danger-btn" @click="dangerBtn">
{{dangerText}}
</div>
<div v-if="type == 'confirm'" class="confirm-btn" @click="confirmBtn">
{{confirmText}}
</div>
</div>
<div class="close-btn" @click="closeMask"><i class="iconfont icon-close"></i></div>
</div>
</div>
</template>
<script>
export default {
props: {
value: {},
// 类型包括 defalut 默认， danger 危险， confirm 确认，
type:{
type: String,
default: 'default'
},
content: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
cancelText: {
type: String,
default: '取消'
},
dangerText: {
type: String,
default: '删除'
},
confirmText: {
type: String,
default: '确认'
},
},
data(){
return{
showMask: false,
}
},
methods:{
closeMask(){
this.showMask = false;
},
closeBtn(){
this.$emit('cancel');
this.closeMask();
},
dangerBtn(){
this.$emit('danger');
this.closeMask();
},
confirmBtn(){
this.$emit('confirm');
this.closeMask();
}
},
mounted(){
this.showMask = this.value;
},
watch:{
value(newVal, oldVal){
this.showMask = newVal;
},
showMask(val) {
this.$emit('input', val);
}
},
}
</script>
<style lang="less" scoped>
.dialog{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 9999;
.dialog-container{
width: 500px;
height: 380px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
position: relative;
.dialog-title{
width: 100%;
height: 60px;
font-size: 18px;
color: #696969;
font-weight: 600;
padding: 16px 50px 0 20px;
box-sizing: border-box;
}
.content{
color: #797979;
line-height: 26px;
padding: 0 20px;
box-sizing: border-box;
}
.inp{
margin: 10px 0 0 20px;
width: 200px;
height: 40px;
padding-left: 4px;
border-radius: 4px;
border: none;
background: #efefef;
outline: none;
&:focus{
border: 1px solid #509EE3;
}
}
.btns{
width: 100%;
height: 60px;
// line-height: 60px;
position: absolute;
bottom: 0;
left: 0;
text-align: right;
padding: 0 16px;
box-sizing: border-box;
& > div{
display: inline-block;
height: 40px;
line-height: 40px;
padding: 0 14px;
color: #ffffff;
background: #f1f1f1;
border-radius: 8px;
margin-right: 12px;
cursor: pointer;
}
.default-btn{
color: #787878;
&:hover{
color: #509EE3;
}
}
.danger-btn{
background: #EF8C8C;
&:hover{
background: rgb(224, 135, 135);
}
&:active{
background: #EF8C8C;
}
}
.confirm-btn{
color: #ffffff;
background: #509EE3;
&:hover{
background: #6FB0EB;
}
}
}
.close-btn{
position: absolute;
top: 16px;
right: 16px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 18px;
cursor: pointer;
&:hover{
font-weight: 600;
}
}
}
}
</style>
自定义组件使用：
<template>
<div class="main">
<div @click="openMask">打开弹窗</div>
<dialog-bar v-model="sendVal" type="danger" title="我是标题" content="我是内容"
v-on:cancel="clickCancel()" @danger="clickDanger()"
@confirm="clickConfirm()" dangerText="Delete">
</dialog-bar>
</div>
</template>
<script>
import dialogBar from './components/fly-ui-libs/dialog/dialog.vue'
export default {
components:{
'dialog-bar': dialogBar,
},
data(){
return{
sendVal: false,
}
},
methods:{
openMask(index){
this.sendVal = true;
},
clickCancel(){
console.log('点击了取消');
},
clickDanger(){
console.log('这里是danger回调')
},
clickConfirm(){
console.log('点击了confirm');
}
}
}
</script>
<style lang="less" scoped>
</style>
这篇关于vue自定义组件dialog的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
