|
|
@@ -0,0 +1,141 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="tui-alert-class tui-alert-box" :class="[show?'tui-alert-show':'tui-alert-hide']" @touchmove.stop.prevent="discard">
|
|
|
+ <image src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/08/aa%402x.png" mode="" @click.stop="handleClick"></image>
|
|
|
+ <text class="iconfont icon-iconfontguanbi" @click.stop="handleClickCancel"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ name:"tuiAlert",
|
|
|
+ props: {
|
|
|
+ //控制显示
|
|
|
+ show: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ //提示信息字体大小
|
|
|
+ size: {
|
|
|
+ type: Number,
|
|
|
+ default: 30
|
|
|
+ },
|
|
|
+ //提示信息字体颜色
|
|
|
+ color: {
|
|
|
+ type: String,
|
|
|
+ default: "#333"
|
|
|
+ },
|
|
|
+ //按钮字体颜色
|
|
|
+ btnColor: {
|
|
|
+ type: String,
|
|
|
+ default: "#EB0909"
|
|
|
+ },
|
|
|
+ btnText:{
|
|
|
+ type: String,
|
|
|
+ default: ""
|
|
|
+ },
|
|
|
+ //点击遮罩 是否可关闭
|
|
|
+ maskClosable: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleClick(e) {
|
|
|
+ console.log(e);
|
|
|
+ if (!this.show) return;
|
|
|
+ this.$emit('click',false);
|
|
|
+ },
|
|
|
+ handleClickCancel() {
|
|
|
+ this.$emit('cancel',false);
|
|
|
+ },
|
|
|
+ discard(){
|
|
|
+ //丢弃
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .tui-alert-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ background: rgba(0,0,0,.5);
|
|
|
+ z-index: 99990;
|
|
|
+ image{
|
|
|
+ width: 560rpx;
|
|
|
+ height: 784rpx;
|
|
|
+ margin-top: 100rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-alert-show {
|
|
|
+ top: 0;
|
|
|
+ opacity: 1;
|
|
|
+ animation:rundtop 0.5s;
|
|
|
+ }
|
|
|
+ .tui-alert-hide{
|
|
|
+ top: 100%;
|
|
|
+ opacity: 0;
|
|
|
+ animation:rundbottom 0.5s;
|
|
|
+ }
|
|
|
+ .icon-iconfontguanbi{
|
|
|
+ display: block;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 10%;
|
|
|
+ left: 50%;
|
|
|
+ font-size: $font-size-48;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: -50rpx;
|
|
|
+ }
|
|
|
+ .tui-alert-mask-show {
|
|
|
+ visibility: visible;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ .tui-alert-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 90rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ background-color: #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ }
|
|
|
+ .tui-alert-btn-hover {
|
|
|
+ background-color: #f7f7f7;
|
|
|
+ }
|
|
|
+ .tui-alert-btn::before {
|
|
|
+ width: 100%;
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ border-top: 1rpx solid #E0E0E0;
|
|
|
+ -webkit-transform: scaleY(0.5);
|
|
|
+ transform: scaleY(0.5);
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ @keyframes rundtop{
|
|
|
+ 0%{top: 100%;opacity: 0;}
|
|
|
+ 100%{top:0;opacity: 1;}
|
|
|
+ }
|
|
|
+ @keyframes rundbottom{
|
|
|
+ 0%{top: 0;opacity: 1;}
|
|
|
+ 100%{top:100%;opacity: 0;}
|
|
|
+ }
|
|
|
+</style>
|
