You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

117 lines
2.1 KiB

<template>
<view class="tui-nodata-box" :class="[fixed?'tui-nodata-fixed':'']">
<image v-if="imgUrl" :src="imgUrl" class="tui-tips-icon" :style="{width:imgWidth+'rpx',height:imgHeight+'rpx'}"></image>
<view class="tui-tips-content">
<slot></slot>
</view>
<view class="tui-tips-btn" hover-class="tui-btn__hover" :hover-stay-time="150" :style="{width:btnWidth+'rpx',height:btnHeight+'rpx',background:backgroundColor,borderRadius:radius,fontSize:size+'rpx'}" v-if="btnText" @tap="handleClick">{{btnText}}</view>
</view>
</template>
<script>
export default {
name: "tuiNoData",
props: {
//是否垂直居中
fixed: {
type: Boolean,
default: true
},
//图片地址,没有则不显示
imgUrl: {
type: String,
default: ""
},
//图片宽度
imgWidth: {
type: Number,
default: 200
},
//图片高度
imgHeight:{
type: Number,
default: 200
},
//按钮宽度
btnWidth:{
type: Number,
default: 200
},
btnHeight:{
type: Number,
default: 60
},
//按钮文字,没有则不显示
btnText:{
type:String,
default: ""
},
//按钮背景色
backgroundColor:{
type:String,
default: "#EB0909"
},
size:{
type:Number,
default:28
},
radius:{
type:String,
default:'8rpx'
}
},
methods: {
handleClick(e) {
this.$emit('click', {});
}
}
}
</script>
<style scoped>
.tui-nodata-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.tui-nodata-fixed {
width: 90%;
position: fixed;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.tui-tips-icon {
display: block;
flex-shrink: 0;
width: 280rpx;
height: 280rpx;
margin-bottom: 40rpx;
}
.tui-tips-content {
text-align: center;
color: #666666;
font-size: 28rpx;
padding: 0 50rpx 28rpx 50rpx;
box-sizing: border-box;
word-break: break-all;
word-wrap: break-word;
}
.tui-tips-btn {
color: #fff;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.tui-btn__hover{
opacity: 0.5;
}
</style>