赞
踩
<template>
<view>
<uni-popup ref="popup" type="bottom">
<view class="popup-content">
<view>{{title}}</view>
<input v-model="value" type="text">
<view>
<view class="btn-click" @click="handleConfirm">确定</view>
<view class="btn-click" @click="handleCancel">取消</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
},
},
data() {
return {
value: null
}
},
methods: {
show() {
this.$refs.popup.open('top')
},
handleCancel() {
this.value = null;
this.$emit('onClickCancel', 'cancel')
this.$refs.popup.close();
},
handleConfirm() {
this.$emit('onClickConfirm', this.value);
this.value = null;
this.$refs.popup.close();
}
}
}
</script>
<style lang="scss">
.popup-content {
background-color: #fff;
padding: 40rpx;
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
>view:nth-of-type(1) {
font-size: 36rpx;
font-weight: 800;
}
>input {
margin-top: 30rpx;
background-color: #eee;
font-size: 40rpx;
padding: 20rpx;
}
>view:nth-of-type(2) {
display: flex;
margin-top: 20rpx;
>view {
flex: 1;
text-align: center;
padding: 20rpx 0rpx;
color: #fff;
border-radius: 10rpx;
}
>view:nth-of-type(1) {
margin-right: 10rpx;
background-color: #376ec1;
}
>view:nth-of-type(2) {
margin-left: 10rpx;
background-color: #FA8888;
}
}
}
.btn-click:active {
opacity: 0.5;
transform: scale(0.95);
}
</style>
import MSPopup from '@/components/ms-popup/ms-popup.vue'
components: {
MSPopup,
},
<ms-popup ref='popup' title="测试标题" @onClickConfirm="confirm"></ms-popup>
this.$refs['popup'].show();
confirm(value){
console.log(value)
}
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。