<template>
<view class="box" :style="{ width: isConfirming ? comfirmWidth : '152rpx' }">
<template v-if="isConfirming">
<text>{{ comfirmTip }}</text>
<view class="yes-no" @click="isConfirming = false">取消</view>
<view class="yes-no" @click="comfirm">确定</view>
</template>
<view v-else class="btn" @click="isConfirming = true">{{ cancelText }}</view>
</view>
</template>
<script>
export default {
name: 'comfirmButton',
props: {
cancelText: {
type: String,
default: '取消加载'
},
comfirmTip: {
type: String,
default: '确定取消加载?'
},
comfirmWidth: {
type: String,
default: '560rpx'
}
},
data () {
return {
isConfirming: false,
}
},
methods: {
comfirm () {
this.isConfirming = false
this.$emit('comfirm')
}
}
}
</script>
<style lang="scss" scoped>
.box {
transition: width 0.5s ease-in-out;
height: 64rpx;
line-height: 64rpx;
text-align: right;
font-size: 28rpx;
color: #0081ff;
border: 1rpx solid #0081ff;
border-radius: 36rpx;
overflow: hidden;
white-space: nowrap;
text {
vertical-align: top;
margin-left: 10rpx;
}
.btn {
width: 152rpx;
height: 64rpx;
line-height: 64rpx;
text-align: center;
}
}
.yes-no {
text-align: center;
display: inline-block;
width: 152rpx;
height: 50rpx;
line-height: 46rpx;
color: #fff;
border: 1rpx solid #0081ff;
background-color: #0081ff;
margin: 6rpx 6rpx 6rpx 10rpx;
border-radius: 25rpx;
}
</style>
uni-app封装二次确认按钮cus-comfirm-button
最新推荐文章于 2024-07-17 10:27:18 发布