vue消息提示组件封装

代码已上传至github
github代码地址：https://github.com/Miofly/mio.git

 

使用示例

<template>
    <view class="bg-white padding">
        <!--顶部消息-->
        <messTip ref="toast" v-if="index==0"></messTip>
        <!--居中消息-->
        <messTip position="center" ref="toast" v-if="index==1"></messTip>
        <!--底部消息-->
        <messTip position="bottom" ref="toast" v-if="index==2"></messTip>

        <view class="mio-subsection">
            <view :class="[index==0?'mio-active':'']" @tap="switchTabs" data-index="0">顶部提示</view>
            <view :class="[index==1?'mio-active':'']" @tap="switchTabs" data-index="1">居中提示</view>
            <view :class="[index==2?'mio-active':'']" @tap="switchTabs" data-index="2">底部提示</view>
        </view>

        <view class="flex flex-direction">
            <button class="cu-btn line-black margin-top round" data-index="0" @tap="showTips">一般提示</button>
            <button class="cu-btn line-black margin-top round" data-index="1" @tap="showTips">成功提示</button>
            <button class="cu-btn line-black margin-top round" data-index="2" @tap="showTips">警告提示</button>
            <button class="cu-btn line-black margin-top round" data-index="3" @tap="showTips">错误提示</button>
            <button class="cu-btn line-black margin-top round" data-index="4" @tap="showTips">其他提示</button>
            <button class="cu-btn line-black margin-top round" data-index="5" @tap="showTips">长文字消息提示</button>
            <button class="cu-btn line-black margin-top round" data-index="6" @tap="showTips">自定义时间消息提示</button>
        </view>

    </view>
</template>

<script>
    export default {
        data () {
            return {
                basicData: [{
                    type: 'translucent',
                    msg: '一般消息提示~'
                }, {
                    type: 'green',
                    msg: '成功消息提示~'
                }, {
                    type: 'warning',
                    msg: '警告消息提示~'
                }, {
                    type: 'danger',
                    msg: '错误消息提示~'
                }, {
                    type: 'primary',
                    msg: '其他消息提示~'
                }, {
                    type: 'primary',
                    msg: '长文字消息提示，看不完信息？可自定义设置显示时间，建议提示信息不要过长'
                }, {
                    type: 'translucent',
                    msg: '4S后关闭提示框',
                    duration: 4000
                }],
                index: 0
            }
        },
        methods: {
            showTips: function (e) {
                const index = e.currentTarget.dataset.index
                const options = {
                    msg: this.basicData[index].msg,
                    duration: this.basicData[index].duration || 2000,
                    type: this.basicData[index].type
                }
                this.$refs.toast.showTips(options)
            },
            switchTabs: function (e) {
                this.index = e.currentTarget.dataset.index
            }
        }
    }
</script>

<style>
    .mio-subsection {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20upx 0 80upx 0;
        border-radius: 10upx;
        overflow: hidden;
        border: 0;
        position: relative;
    }

    .mio-subsection::after {
        content: "";
        position: absolute;
        width: 200%;
        height: 200%;
        border: 1px solid #5677fc;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        -webkit-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        left: 0;
        top: 0;
        border-radius: 20upx;
        z-index: -1;
    }

    .mio-subsection view {
        flex: 1;
        font-size: 28upx;
        text-align: center;
        padding: 10upx 30upx;
        color: #5677fc;
        position: relative;
    }

    .mio-subsection view::after {
        content: "";
        position: absolute;
        height: 100%;
        width: 1px;
        border-right: 1px solid #5677fc;
        -webkit-transform-origin: 100% 0;
        transform-origin: 100% 0;
        -webkit-transform: scaleX(0.5);
        transform: scaleX(0.5);
        right: 0;
        top: 0;
    }

    .mio-subsection view:last-child::after {
        border-right: 0;
    }

    .mio-subsection view.mio-active {
        background: #5677fc;
        color: #fff;
    }
</style>

组件代码

<template>
	<view v-if="position=='top'">
		<view class='mio-tips-class mio-toptips'
              :class="['mio-'+type,show?'mio-top-show':'']">
            {{msg}}
        </view>
	</view>
	<view v-else>
		<view class='mio-tips-class mio-toast'
              :class="[position=='center'?'mio-centertips':'mio-bottomtips',show?'mio-toast-show':'']">
			<view class="mio-tips-content" :class="['mio-'+type]">
				{{msg}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'mioTips',
		props: {
			// top bottom center
			position: {
				type: String,
				default: 'top'
			}
		},
		data () {
			return {
				timer: null,
				show: false,
				msg: '无法连接到服务器~',
				// translucent,primary,green,warning,danger
				type: 'translucent'
			}
		},
		methods: {
			showTips (options) {
				const {
					type = 'translucent',
						duration = 2000
				} = options
				clearTimeout(this.timer)
				this.show = true
				// this.duration = duration < 2000 ? 2000 : duration;
				this.type = type
				this.msg = options.msg
				this.timer = setTimeout(() => {
					this.show = false
					clearTimeout(this.timer)
					this.timer = null
				}, duration)
			}
		}
	}
</script>