北京晚报阴三儿,好孩子推车说明书,gps汽车防盗器
对于新手们来说，如何写一个可以多用的组件，还是有点难度的，组件如何重用，如何传值这些在实际使用中，是多少会存在一些障碍的，所以今天特意写一个最常用的模态框组件提供给大家，希望能帮助到您！
懒癌患者直接复制粘贴即可
modal.vue组件
我要评论
<template>
<!-- 过渡动画 -->
<transition name="modal-fade">
<!-- 关闭模态框事件 和 控制模态框是否显示 -->
<div class="modal-backdrop" @click="$emit('closemodal')" v-show="show">
<div class="modal">
<img class="img" :src="imgadress" alt="">
<div class="modal-body" id="modaldescription">
<li></li>
<!-- 状态提示文字的插槽 -->
<slot name="status">{{statustext}}</slot>
<li></li>
</div>
<!-- 模态框内容文字 可有可无 -->
<div class="modal-content" v-if="contenttext">
{{contenttext}}
<span v-if="idlist" v-for="item in idlist" :key="item.id">{{item.paymoney}}
<i>{{item.yuan}}</i>
</span>
</div>
<ul>
<!-- 模态框按钮 可选单个确定按钮 和 两个确定、取消按钮 -->
<!-- 单个确定按钮 -->
<li v-if="alert" :class="buttonbackground" @click.stop="$emit('button')">确定</li>
<!-- 确定和取消按钮 -->
<li v-else class="confirm">
<div>取消</div>
<div :class="buttonbackground" @click.stop="$emit('confirm')">{{sure}}</div>
</li>
</ul>
</div>
</div>
</transition>
</template>
<script>
export default {
name:'modal',
// 通过 props 传值
props: {
imgadress:string,
title:string, //标题文字
show:{ //显示取消
type:boolean,
default:false
},
statustext:string, //状态文字
contenttext:string, //描述文字
idlist:array, //id 列表
paymoney:number,
yuan:string,
buttonbackground:string, //按钮背景色
alert:string, //判断一个还是两个按钮
sure:string, //第二个按钮的提示文字
},
data(){
return{
closemodal:"close",
// ismodalvisible:false,
// 确定和取消按钮的两种颜色
red:'redbackground',
blue:'bluebackground'
}
},
methods:{
// 关闭模态框事件
close(){
this.$emit('close')
},
}
}
</script>
<style lang="scss" scoped>
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,.3);
display: flex;
justify-content: center;
align-items: center;
z-index: 12;
.modal {
background-color: #fff;
box-shadow: 2px 2px 20px 1px;
overflow-x:auto;
display: flex;
flex-direction: column;
width: 11.8rem;
position: relative;
border-radius: 0.2rem;
.img{
width: 3.6rem;
height: 3.6rem;
margin: 0.8rem 4.1rem;
}
.modal-header{
padding: 0.6rem 4.1rem;
width: 3.6rem;
height: 3.6rem;
box-sizing: border-box;
.img{
width: 100%;
height: 100%;
}
div{
width: 100%;
height: 100%;
background: #000;
}
}
.modal-body{
width: 100%;
height: 0.48rem;
padding: 0rem 1.6rem;
margin-bottom: 0.8rem;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
li{
width: 2rem;
height: 0.04rem;
background: #eeeee5;
}
}
.modal-content{
width: 100%;
// height: 0.6rem;
margin-bottom: 0.8rem;
text-align: center;
color: #34304b;
span{
color: #32b8b9;
i{
color: #4f4f4f;
}
}
}
ul{
li{
width: 100%;
height: 1.52rem;
line-height: 1.52rem;
text-align: center;
color: #fff;
font-size: 0.56rem;
letter-spacing: 0.4rem;
}
.confirm{
display: flex;
div:nth-child(1){
flex: 1;
background: #dedede;
color: #bcbbbf;
}
div:nth-child(2){
flex: 1;
color: #fff;
}
}
}
.bluebackground{
background: #21a6df;
}
.redbackground{
background: #ff4046;
}
}
}
/* 动画 */
.modal-fade-enter,.modal-fade-leave-active{
opacity: 0;
}
.modal-fade-enter-active, .modal-fade-leave-active{
transition: opacity 0.5s ease;
}
</style>
新建一个index.js文件，在其中全局引入组件，全局引入之后，就不用在每个调用的组件里面单独引入了，可以直接使用
import modalfrom "./modal.vue";
const components = {
install: function (vue) {
vue.component('modal', modal);
}
}
//导出组件
export default components;
index.vue中调用
<template>
<div class="index">
<!-- 提交成功模态框 -->
<modal
ref="modal"
:imgadress="imgadress"
v-show="ismodalvisible"
statustext="提交成功"
@closemodal="closemodal"
contenttext="index.vue"
:idlist="idlist"
:buttonbackground="red"
sure="确定"
@confirm="confirm"
>
<!-- :paymoney="paymoney"
yuan="元" -->
</modal>
<button @click="showmodel">支付成功模态框</button>
</div>
</template>
<script>
export default {
name: 'index',
data(){
return{
// 模态框
imgadress:require('./../../assets/img/success.png'),
ismodalvisible:false,
show: false,
showtoast: false,
thisindex:0,
green:'green',
blue:'',
red:'',
idlist:[
{paymoney:23456,yuan:'、'},
{paymoney:23456,yuan:'、'},
{paymoney:23456,yuan:'、'},
{paymoney:23456,yuan:'、'},
{paymoney:23456,yuan:'、'},
{paymoney:23456,yuan:'、'},
{paymoney:23456,yuan:'、'},
],
paymoney:99,
}
},
methods:{
// 提示模态框
showmodel(){
this.ismodalvisible = true;
this.blue = this.$refs.model.blue
this.red = this.$refs.model.red
},
closemodal(){
this.ismodalvisible = false
},
confirm(){
console.log(11111111111);
},
}
}
</script>
效果如图
模态框-1.gif
如果只需要一个确定按钮，只需要在调用的时候，这么写就好了
<template>
<div class="index">
<!-- 提交成功模态框 -->
<modal
ref="modal"
:imgadress="imgadress"
v-show="ismodalvisible"
statustext="提交成功"
@closemodal="closemodal"
contenttext="index.vue"
:idlist="idlist"
:buttonbackground="blue"
@button="closemodal"
sure="确定"
alert="1"
>
</modal>
<button @click="showmodel">支付成功模态框</button>
</div>
</template>
如图
模态框-2.gif
可能并不是特别完美，如果您发现有缺点，还请不吝赐教！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论