uni-Identify-quality/tm-vuetify/components/tm-alerts/tm-alerts.vue

<template>
	<!-- 提示框 -->
	<view :animation="animation" v-if="show" @click="onclick" @tap="onclick" class="tm-alerts  text-size-n "
		:class="[color_tmeme,(outlined||outlined=='true')?'outlined':'','round-'+round,black_tmeme?'bk':'',
		text=='true'||text?'text':'',
		`mx-${margin[0]} my-${margin[1]} shadow-${color_tmeme}-${shadow}`
		]" 
		 >
		<view  class=" flex-start" :class="[dense===true||dense=='true'?'py-16 px-32':'py-32 px-32']">
			
			<view v-if="leftIcon&&leftIcon!='true'" class="body-left ">
				<tm-icons :color="(text||outlined)?color_tmeme:iconColor" :dense="true" :name="leftIcon" size="32"></tm-icons>
			</view>
			
			<view v-if="valueType===true" @click.stop="openUrl(label)" class="body-center text-overflow">{{label[rangKey]?label[rangKey]:label}}</view>
			<view v-if="valueType===false"  class="tm--alerts--id body-center" :style="{height:sliderwidth.height}">
				<swiper v-if="sliderwidth.width"  :vertical="vertical" :style="{height:sliderwidth.height,width:sliderwidth.width}" :interval="interval_vs" circular autoplay :duration="duration_vs" >
					<swiper-item @click.stop="openUrl(item)"  v-for="(item,index) in label" :key="index" class="body-center text-overflow" style="line-height: 50upx;" :style="{height:sliderwidth.height}">
						{{item[rangKey]?item[rangKey]:item}}
					</swiper-item>
				</swiper>
			</view>
			<view v-if="url && !close" class="body-right text-align-right">
				<tm-icons :color="(text||outlined)?color_tmeme:iconColor" :dense="true" :name="rightIcon" size="28"></tm-icons>
			</view>
			<view v-if="close" class="body-right text-align-right">
				<tm-icons  @click="closeview" :color="(text||outlined)?color_tmeme:iconColor" :dense="true" name="icon-times" size="28"></tm-icons>
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 消息提示框
	 * @property {String | Boolean} dense = [true|false] 默认：true，是否减小边距。
	 * @property {Array} margin = [] 默认：[32,24]，边距。
	 * @property {String|Number} shadow = [] 默认：6，投影
	 * @property {String|Number} round = [] 默认：4，圆角
	 * @property {String|Number} duration = [] 默认：500，轮播速度。
	 * @property {String|Number} interval = [] 默认：1500，轮播间隙。
	 * @property {String | Boolean} outlined = [true|false] 默认：false，是否为边框样式
	 * @property {String | Boolean} text = [true|false] 默认：false，是否为文本模式，即减淡背景颜色。
	 * @property {String | Array} label = [true|false] 默认：""，当为数组时，自动变成轮播信息。
	 * @property {String | Boolean} black = [true|false] 默认：false，是否开启暗黑模式
	 * @property {String} color = [] 默认：primary，主题颜色名称
	 * @property {String} icon-color = [] 默认：white，图标的主题颜色名称
	 * @property {Boolean} url = [true|false] 默认：false，是否显示打开链接图标
	 * @property {String} left-icon = [] 默认："icon-lightbulb"，左边图标名称
	 * @property {String} right-icon = [] 默认："icon-angle-right"，右边图标名称
	 * @property {String} rang-key = [] 默认："text"，当label娄数组时需要提供此值。
	 * @property {String | Boolean} ani = [true|false] 默认：false，是否禁用动画，
	 * @property {String | Boolean} vertical = [true|false] 默认：false，是否是纵向。
	 * @property {String | Boolean} close = [true|false] 默认：false， 是否显示关闭图标，
	 * @property {Function} click 整个组件点击事件
	 * @example <tm-alerts  label="9"></tm-alerts>
	 */
	import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"

	export default {
		components:{tmIcons},
		name:"tm-alerts",
		model:{
			prop:'value',
			event:'input'
		},
		props: {
			// 是否减小边距。
			dense: {
				type: String | Boolean,
				default: true
			},
			// 是否为边框样式，
			outlined: {
				type: String | Boolean,
				default: false
			},
			// 边距。
			margin: {
				type: Array,
				default: ()=>{
					return [32,24];
				}
			},
			shadow: {
				type: String|Number,
				default: 4
			},
			round: {
				type: String|Number,
				default: 3
			},
			// 是否为文本模式，即减淡背景颜色。
			text: {
				type: String | Boolean,
				default: false
			},
			// 当为数组时，自动变成轮播信息。
			label:{
				type:String | Array,
				default:""
			},
			// 当label娄数组时需要提供此值。
			rangKey:{
				type:String,
				default:"text"
			},
			// 是否开启暗黑模式
			black: {
				type: String | Boolean,
				default: null
			},
			// 主题颜色名称
			color: {
				type: String,
				default: 'primary'
			},
			// 图标主题颜色名称
			iconColor: {
				type: String,
				default: 'white'
			},
			// 是否显示为打开链接的消息提醒。
			url: {
				type: Boolean,
				default: false
			},
			// 左边图标名称
			leftIcon: {
				type: String,
				default: 'icon-lightbulb'
			},
			// 右边图标名称
			rightIcon: {
				type: String,
				default: 'icon-angle-right'
			},
			//是否禁用动画，
			ani: {
				type: Boolean,
				default: false
			},
			// 是否显示关闭图标
			close: {
				type: Boolean,
				default: false
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			},
			duration:{
				type:Number,
				default:1000
			},
			vertical:{
				type:Boolean,
				default:false
			},
			//间隔，单位ms
			interval:{
				type:Number,
				default:1500
			},
			value: {
				type: Boolean|String,
				default: true
			},
		},
		data() {
			return {
				
				animation: null,
				outid: 'alert-88',
				sliderwidth:{height:0,width:0},
			};
		},
		computed:{
			// valueType:true,//默认是string.
			valueType:function(){
				
				if(Array.isArray(this.label)){
					 return false;
				}
				
				return true;
			},
			black_tmeme: function() {
				if (this.black !== null) return this.black;
				return this.$tm.vx.state().tmVuetify.black;
			},
			color_tmeme:function(){
				if(this.$tm.vx.state().tmVuetify.color!==null&&this.$tm.vx.state().tmVuetify.color && this.fllowTheme){
					return this.$tm.vx.state().tmVuetify.color;
				}
				return this.color;
			},
			duration_vs:function () {
				return this.duration;
			},
			interval_vs:function () {
				return this.interval;
			},
			show:{
				get:function(){
					return this.value;
				},
				set:function(val){
					this.$emit('input',val)
					this.$emit('update:value',val)
				},
			},
		},
		mounted() {
			let t= this;
			this.$Querey('.tm--alerts--id',this,50).then(res=>{
				let wh = res[0];
				t.sliderwidth = {
					height:uni.upx2px(50)+'px',width:(wh.width||0)+'px'
				}
			}).catch(e=>{})
			
		},
		methods: {
			onclick(e) {
				this.$emit('click', e);
			},
			openUrl(e) {
				this.$emit('click', e);
				if(typeof e !== 'object' || !e['url']) return;
				
				let urls = getCurrentPages();
				let url = e.url;
				if (urls.length >= 5) {
					uni.redirectTo({
						url:url,
						fail: e => {
							console.error(e);
						}
					});
				} else {
					uni.navigateTo({
						url: url,
						fail: e => {
							console.error(e);
						}
					});
				}
			},
			closeview(e) {
				let t  = this;
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease'
				});
				this.animation = animation;
				animation
					.scale(0.7, 0.7)
					.opacity(0)
					.step();
				this.outid = setTimeout(() => {
					t.show = false;
					t.animation = null;
				}, 500);
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tm-alerts {
		
		.gs {
			width: 50upx;
			min-width: 70upx;
		}

		.body-left,
		.body-right {
			@extend .gs;
		}

		.body-center {
			width: 100%;
			
		}
	}
</style>