wardrobe/tm-vuetify/components/tm-banners/tm-banners.vue

<!-- 横幅消息提醒。故名思义，即悬浮在顶部的消息条，只有点关闭才会消失，一般用来重要的中断提醒。 -->
<!-- 和tm-alerts有点类似，但作用不同 -->
<template>
	<view :animation="animation" v-if="show"  class="tm-banners  text-size-n "
		:class="[dense===true||dense=='true'?'dense-32':'',black_tmeme?'bk':'',color_tmeme,
		outlined||outlined=='true'?'outlined':'','round-'+round,text?'text':'']" 
		
		:style="widths"
		>
		<view class=" flex-start" :class="[dense===true||dense=='true'?'py-16 px-32 ':'py-32 px-32']">
			<view class="body-left ">
				<tm-icons :black="black_tmeme" :color="(text||outlined)?color_tmeme:iconColor" :dense="true" :name="leftIcon" size="32"></tm-icons>
			</view>
			<view  @click="onclick" @tap="onclick" class="body-center " :class="['text-overflow-'+col]">{{label}}</view>
			
			<view @click.stop="closeview" v-if="close" class="body-right text-align-right">
				<tm-icons :black="black_tmeme" :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 {String | Boolean} outlined = [true|false] 默认：false，是否为边框样式
	 * @property {String} position = [top|bottom] 默认：top，位置
	 * @property {String | Boolean} text = [true|false] 默认：false，是否为文本模式，即减淡背景颜色。
	 * @property {String | Array} label = [true|false] 默认：""，当为数组时，自动变成轮播信息。
	 * @property {String | Boolean} black = [true|false] 默认：false，是否开启暗黑模式
	 * @property {String} color = [primary|blue|red|green|yellow|orange] 默认：primary，主题颜色名称
	 * @property {String} icon-color = [primary|blue|red|green|yellow|orange] 默认：primary，图标主题颜色名称
	 * @property {String} left-icon = [icon-lightbulb] 默认："icon-lightbulb"，左边图标名称
	 * @property {String | Boolean} ani = [true|false] 默认：false，是否禁用动画，
	 * @property {String | Boolean} close = [true|false] 默认：false， 是否显示关闭图标，
	 * @property { Number|String} y = [] 默认：0， 距离顶部的偏移量。
	 * @property { Number|String} width = [] 默认：'90%'， 宽度，数字，或者百度比。数字的单位是upx
	 * @property { Number|String} col = [] 默认：1， 多行模式。默认为1行，可选最多3行。
	 * @property { Number|String} round = [] 默认：2， 圆角。
	 * @property {Function} click 整个组件点击事件
	 * @example <tm-banners label="瞪村槈李厚厚霖无可奈何需"></tm-banners>
	 */
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"
export default {
	components:{tmIcons},
		name:'tm-banners',
		model:{
			prop:'value',
			event:'input'
		},
		props: {
			// 是否减小边距。
			dense: {
				type: String | Boolean,
				default: true
			},
			// 是否为边框样式，
			outlined: {
				type: String | Boolean,
				default: false
			},
			// 是否为文本模式，即减淡背景颜色。
			text: {
				type: String | Boolean,
				default: false
			},
			// 当为数组时，自动变成轮播信息。
			label:{
				type:String | Array,
				default:""
			},
			// 是否开启暗黑模式
			black: {
				type: String | Boolean,
				default: null
			},
			// 主题颜色名称
			color: {
				type: String,
				default: 'primary'
			},
			iconColor:{
				type: String,
				default: 'white'
			},
			// 左边图标名称
			leftIcon: {
				type: String,
				default: 'icon-lightbulb'
			},
			//是否禁用动画，
			ani: {
				type: Boolean,
				default: false
			},
			// 是否显示关闭图标
			close: {
				type: Boolean,
				default: true
			},
			// 距离顶部的偏移量。
			y: {
				type: Number|String,
				default: 16
			},
			// 距离顶部的偏移量。
			position: {
				type: String,
				default: 'top' //top|bottom
			},
			// 宽度，数字，或者百度比。数字的单位是upx
			width: {
				type: Number|String,
				default: '90%'
			},
			// 圆角
			round: {
				type: Number|String,
				default: '3'
			},
			// 多行模式。默认为1行，可选最多3行。
			col:{
				type: Number|String,
				default: 1
			},
			// 跟随主题色的改变而改变。
			fllowTheme:{
				type:Boolean|String,
				default:true
			},
			value: {
				type: Boolean|String,
				default: true
			},
		},
		data() {
			return {
				
				animation: null,
				outid: 'alert-88',
				
			};
		},
		computed:{
			show:{
				get:function(){
					return this.value;
				},
				set:function(val){
					this.$emit('input',val)
					this.$emit('update:value',val)
				},
			},
			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;
			},
			widths:function(){
				let topoffset = 0 + uni.upx2px(parseInt(this.y));
				
				
				if(isNaN(parseInt((this.width)))){
					return this.$tm.objToString({
						width:'100%',
						left:'0px',
						top:this.position=='bottom'?'inherit':`${topoffset}px`,
						bottom:this.position=='top'?'inherit':`${topoffset}px`
					});
				}
				if(String(this.width).indexOf('%')>-1||String(this.width).indexOf('vw')>-1){
					
					let num = parseFloat(this.width.replace(/(\%|vw|)/g,''));
					let blv = this.width.replace(/[\.|a-zA-Z0-9]/g,'');
					
					return this.$tm.objToString({
						width:this.width,
						left:(100-num)/2 + blv,
						top:this.position=='bottom'?'inherit':`${topoffset}px`,
						bottom:this.position=='top'?'inherit':`${topoffset}px`
					});
				}
				let sysinfo = uni.getSystemInfoSync();
				let wid = uni.upx2px(parseFloat(this.width));
				let lf = (sysinfo.windowWidth - wid) / 2;
				return this.$tm.objToString({
					width:uni.upx2px(parseFloat(this.width))+'px',
					left:lf+'px',
					top:this.position=='bottom'?'inherit':`${topoffset}px`,
					bottom:this.position=='top'?'inherit':`${topoffset}px`
				});
				
			}
		},
		mounted() {
			
			
		},
		methods: {
			onclick(e) {
				this.$emit('click', 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-banners {
		width: calc(100% - 32upx);
		left: 32upx;
		&.dense-32{
			width: calc(100% - 64upx);
		}
		position: fixed;
		z-index: 500;
		// color: #fff;
		.gs {
			width: 50upx;
			min-width: 70upx;
		}

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

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