card-wx-user/components/thorui/tui-alerts/tui-alerts.vue

<template>
	<view class="tui-alert__wrap"
		:style="{backgroundColor:backgroundColor?backgroundColor:getColor(type),borderRadius:radius,paddingTop:padding[0] || 0,paddingRight:padding[1]||0,paddingBottom:padding[2] || padding[0]||0,paddingLeft:padding[3] || padding[1]||0}">
		<view class="tui-alert__shrink" @tap.stop="leftClick">
			<slot name="left"></slot>
			<icon :type="type" :size="iconSize" :color="iconColor" v-if="!isLeft"></icon>
		</view>
		<view class="tui-alert__content" :class="{'tui-text__p-left':!isLeft,'tui-text__p-right':closable}"
			@tap.stop="onClick">
			<text class="tui-alert__text" :style="{fontSize:size,color:color}" v-if="title">{{title}}</text>
			<text class="tui-alert__text tui-desc__padding" :class="{'tui-alert__single':single}"
				:style="{fontSize:descSize,color:descColor}" v-if="desc">{{desc}}</text>
			<slot name="content"></slot>
		</view>
		<view class="tui-alert__shrink">
			<slot name="right"></slot>
		</view>
		<icon @tap.stop="close" type="cancel" :size="closeSize" :color="closeColor" v-if="closable"
			:class="{'tui-alert__icon-close':desc}">
		</icon>
	</view>
</template>

<script>
	export default {
		name: "tui-alerts",
		emits: ['leftClick','click','close'],
		props: {
			//info, success, warn, waiting,clear
			type: {
				type: String,
				default: 'info'
			},
			//背景色，如果设置type对应颜色失效
			backgroundColor: {
				type: String,
				default: ''
			},
			//nvue不支持简写，['20rpx','30rpx','20rpx','30rpx']=>[上，右，下，左]
			padding: {
				type: Array,
				default () {
					return ['20rpx', '30rpx']
				}
			},
			radius: {
				type: String,
				default: '6rpx'
			},
			iconColor: {
				type: String,
				default: '#fff'
			},
			//icon字体大小，px
			iconSize: {
				type: Number,
				default: 24
			},
			closable: {
				type: Boolean,
				default: false
			},
			closeColor: {
				type: String,
				default: '#fff'
			},
			//关闭icon字体大小，px
			closeSize: {
				type: Number,
				default: 24
			},
			//是否自定义左侧内容
			isLeft: {
				type: Boolean,
				default: false
			},
			isRight:{
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#fff'
			},
			size: {
				type: String,
				default: '14px'
			},
			desc: {
				type: String,
				default: ''
			},
			descColor: {
				type: String,
				default: '#fff'
			},
			descSize: {
				type: String,
				default: '12px'
			},
			//描述文字单行展示，超出隐藏
			single: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			getColor(type) {
				const color = "#5677fc"
				const colors = {
					'success': '#19be6b',
					'warn': '#ff7900',
					'clear': '#EB0909'
				}
				return colors[type] ? colors[type] : color;
			},
			leftClick() {
				this.$emit('leftClick', {})
			},
			onClick() {
				this.$emit('click', {})
			},
			close() {
				this.$emit('close', {})
			}
		}
	}
</script>

<style scoped>
	.tui-alert__wrap {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		width: 100%;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		align-items: center;
		position: relative;
	}

	.tui-alert__shrink {
		/* #ifndef APP-NVUE */
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		/* #endif */
	}

	.tui-alert__content {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
	}

	.tui-alert__text {
		/* #ifndef APP-NVUE */
		word-break: break-all;
		display: block;
		box-sizing: border-box;
		/* #endif */
	}
	.tui-desc__padding{
		padding-top: 3px;
	}

	.tui-text__p-left {
		padding-left: 20rpx;
	}

	.tui-text__p-right {
		padding-right: 60rpx;
	}

	.tui-alert__single {
		/* #ifdef APP-NVUE */
		lines: 1;
		/* #endif */
		/* #ifndef APP-NVUE */
		display: block;
		width: 100%;
		white-space: nowrap;
		/* #endif */
		flex-direction: row;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-alert__icon-close {
		position: absolute;
		right: 30rpx;
		top: 16rpx;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}
</style>