在components文件夹里创建zz-prompt文件夹,再在下面创建index.vue
<!--通知弹窗index.vue-->
<template>
<view class="prompt-box" v-if="visible" @touchmove="true">
<view class="prompt">
<view class="prompt-top">
<text class="prompt-title">{{title}}</text>
<!-- <input v-if="!isMutipleLine" class="prompt-input" :style="inputStyle" type="text" :placeholder="placeholder" v-model="value">
<textarea v-else class="prompt-input" :style="inputStyle" type="text" :placeholder="placeholder" v-model="value"></textarea> -->
<!-- <view class="prompt-context">{{context}}</view> -->
</view>
<slot></slot>
<view class="prompt-buttons">
<!-- <button class="prompt-cancle" :style="'color:' + mainColor" @click="close">取消</button> -->
<button class="prompt-confirm" :style="'background:' + mainColor" @click="confirm">关闭</button>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
visible: {
type: Boolean,
default: false,
required: true,
},
title: {
type: String,
default: '提示',
},
// context: {
// type: String,
// default: '内容',
// },
placeholder: {
type: String,
default: '请输入内容',
},
mainColor: {
type: String,
default: '#e74a39',
},
defaultValue: {
type: String,
default: '',
},
inputStyle: {
type: String,
default: '',
},
// 是否多行输入的textarea
isMutipleLine: {
type: Boolean,
default: false,
}
},
data () {
return {
value: '',
}
},
watch: {
visible (val) {
if (val) {
this.value = this.defaultValue
}
}
},
mounted () {
this.value = this.defaultValue === 'true' ? '' : this.defaultValue
},
methods: {
close () {
this.$emit('update:visible', false)
},
confirm () {
this.$emit('confirm', this.value)
this.value = ''
},
}
}
</script>
<style scoped>
view,
button,
input {
box-sizing: border-box;
}
.prompt-box {
position: fixed;
left: 0;
top: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.2);
transition: opacity 0.2s linear;
}
.prompt {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 600rpx;
min-height: 300rpx;
background: white;
border-radius: 20rpx;
overflow: hidden;
}
.prompt-top {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.prompt-title {
margin: 20rpx 0;
color: #333;
font-weight: 900;
font-size: 32rpx;
}
.prompt-context {
margin: 30rpx;
color: #333;
}
.prompt-input {
width: 520rpx;
min-height: 72rpx;
padding: 8rpx 16rpx;
border: 2rpx solid #ddd;
border-radius: 8rpx;
font-size: 28rpx;
text-align: left;
}
.prompt-buttons {
display: flex;
justify-content: center;
width: 100%;
box-shadow: 0 0 2rpx 2rpx #eee;
}
.prompt-buttons button:after {
border-radius: 0;
}
button {
width: 50%;
background: white;
border-radius: 0;
}
.prompt-cancle {
background: white;
}
.prompt-confirm {
width: 100%;
color: white;
}
</style>
在单页面home.vue里引入通知弹窗组件
//html
<!-- 通知弹窗 -->
<prompt :visible.sync="promptVisible" @confirm="clickPromptConfirm" title="通知标题" mainColor="#3490F9">
<!-- 这里放入slot内容-->
<view style=" margin:30rpx;">
这里是内容
</view>
</prompt>
//data
import Prompt from '@/components/zz-prompt/index.vue' // 通知弹窗组件
export default {
components: {
Prompt
},
data() {
return {
......
// 控制弹框输入框显示
promptVisible: false,
};
},
//js
onLoad: function () {
let that = this
that.promptVisible = true // 通知弹窗打开
}
methods: {
/**
* 关闭按钮
*/
clickPromptConfirm () {
this.promptVisible = false // 通知弹窗关闭
},
}
上一篇文章,