195 lines
3.8 KiB
Vue
195 lines
3.8 KiB
Vue
<template>
|
||
<view>
|
||
<view class="popupClick" @click="onPopupShow()"><slot></slot></view>
|
||
<view class="popupMask" v-if="popupShow" @click="onPopupHide"></view>
|
||
<view class="popupContentBox" v-if="popupShow">
|
||
<view class="close" @click="onPopupHide">×</view>
|
||
<view class="title">{{ popupConfig.title }}</view>
|
||
<view class="popupContent">
|
||
<view class="introduce">{{ popupConfig.tips }}</view>
|
||
<input
|
||
class="input"
|
||
:type="popupConfig.inputType"
|
||
adjust-position="true"
|
||
:password="popupConfig.password"
|
||
v-model="popupInput"
|
||
:placeholder="popupConfig.placeholder"
|
||
:maxlength="popupConfig.maxlength"
|
||
focus="true"
|
||
placeholder-style="color:#999"
|
||
:confirm-type="popupConfig.confirmType"
|
||
/>
|
||
<view v-if="options=='nickname'">Tips: The user name should be no more than 30 characters.</view>
|
||
</view>
|
||
<view class="popupBut">
|
||
<button @click="onConfirm">{{ popupConfig.confirmText }}</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
props: {
|
||
value: {
|
||
type: String,
|
||
default: function() {
|
||
return '';
|
||
}
|
||
},
|
||
options: {
|
||
type: Object,
|
||
default: function() {
|
||
return {};
|
||
}
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
popupConfig: {
|
||
title: 'Operate',
|
||
tips: "Enter",
|
||
confirmText: 'confirm',
|
||
placeholder: '',
|
||
password: false,
|
||
inputType: 'text',
|
||
maxlength: 140,
|
||
confirmType: "done"
|
||
},
|
||
popupInput: '',
|
||
popupShow: false
|
||
};
|
||
},
|
||
//第一次加载
|
||
created() {
|
||
if(this.value){
|
||
this.popupInput = this.value;
|
||
}
|
||
if(this.options && typeof(this.options) == "object"){
|
||
this.popupConfig = Object.assign(this.popupConfig, this.options);
|
||
}
|
||
},
|
||
watch:{
|
||
value(val){
|
||
this.popupInput = val;
|
||
},
|
||
options(val){
|
||
if(val && typeof(val) == "object"){
|
||
this.popupConfig = Object.assign(this.popupConfig, val);
|
||
}
|
||
}
|
||
},
|
||
//方法
|
||
methods: {
|
||
//打开弹窗
|
||
onPopupShow(value,options) {
|
||
if(value){
|
||
this.popupInput = value;
|
||
}
|
||
if(options && typeof(options) == "object"){
|
||
this.popupConfig = Object.assign(this.popupConfig, options);
|
||
}
|
||
this.popupShow = true;
|
||
},
|
||
//关闭弹窗
|
||
onPopupHide() {
|
||
this.popupShow = false;
|
||
},
|
||
onConfirm() {
|
||
if (this.popupInput == '') {
|
||
uni.showToast({
|
||
title: 'Enter',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
this.$emit('confirm', {
|
||
close:() => {
|
||
this.popupShow = false;
|
||
},
|
||
value:this.popupInput
|
||
});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import '@/style/mixin.scss';
|
||
.popupMask {
|
||
position: fixed;
|
||
top: 0upx;
|
||
left: 0upx;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
z-index: 510;
|
||
animation: popupMask 0.4s;
|
||
}
|
||
.popupContentBox {
|
||
position: fixed;
|
||
top: 30%;
|
||
left: 10%;
|
||
width: 80%;
|
||
transform: translateY(-50%);
|
||
background-color: #fff;
|
||
z-index: 511;
|
||
animation: popupContentBox 0.4s;
|
||
}
|
||
.popupContentBox .close {
|
||
position: absolute;
|
||
top: 10upx;
|
||
right: 15upx;
|
||
color: #999;
|
||
font-size: 42upx;
|
||
line-height: 40upx;
|
||
}
|
||
.popupContentBox .title {
|
||
text-align: center;
|
||
height: 80upx;
|
||
line-height: 80upx;
|
||
font-size: 34upx;
|
||
color: #666;
|
||
}
|
||
.popupContentBox .popupContent {
|
||
padding: 30upx 40upx;
|
||
}
|
||
.popupContentBox .popupContent .input {
|
||
width: 100%;
|
||
border-radius: 10upx;
|
||
border: 1px solid #eee;
|
||
height: 80upx;
|
||
font-size: 30upx;
|
||
padding: 0 20upx;
|
||
box-sizing: border-box;
|
||
}
|
||
.popupContentBox .popupContent .introduce {
|
||
font-size: 28upx;
|
||
color: #999;
|
||
padding-bottom: 10upx;
|
||
}
|
||
.popupContentBox .popupBut {
|
||
padding: 20upx 20upx 20upx 20upx;
|
||
}
|
||
.popupContentBox .popupBut button {
|
||
background-color:$themeColor;
|
||
color: #fff;
|
||
}
|
||
@keyframes popupMask {
|
||
0% {
|
||
opacity: 0;
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
@keyframes popupContentBox {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translateY(-60%);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
transform: translateY(-50%);
|
||
}
|
||
}
|
||
</style>
|