zx_bms_uni/miniprogram_npm/@vant/weapp/notice-bar/index.vue

<template>
    <view
        v-if="show"
        :class="'custom-class ' + utils.bem('notice-bar', { withicon: mode, wrapable })"
        :style="'color: ' + color + '; background-color: ' + backgroundColor + ';'"
        @tap="onClick"
    >
        <van-icon v-if="leftIcon" size="16px" :name="leftIcon" class="van-notice-bar__left-icon" />
        <slot v-else name="left-icon" />

        <view class="van-notice-bar__wrap">
            <view :class="'van-notice-bar__content ' + (!scrollable && !wrapable ? 'van-ellipsis' : '')" :animation="animationData">
                {{ text }}
            </view>
        </view>

        <van-icon v-if="mode === 'closeable'" class="van-notice-bar__right-icon" name="cross" @tap.native.stop.prevent="onClickIcon" />
        <navigator v-else-if="mode === 'link'" :url="url" :open-type="openType">
            <van-icon class="van-notice-bar__right-icon" name="arrow" />
        </navigator>
        <slot v-else name="right-icon" />
    </view>
</template>
<script module="utils" lang="wxs" src="@/miniprogram_npm/@vant/weapp/wxs/utils.wxs"></script>
<script>
'use strict';
Object.defineProperty(exports, '__esModule', {
    value: true
});
var component_1 = require('../common/component');
var FONT_COLOR = '#ed6a0c';
var BG_COLOR = '#fffbe8';
component_1.VantComponent({
    props: {
        text: {
            type: String,
            value: '',
            observer: function () {
                var that = this;
                this.$nextTick(function () {
                    that.init();
                });
            }
        },
        mode: {
            type: String,
            value: ''
        },
        url: {
            type: String,
            value: ''
        },
        openType: {
            type: String,
            value: 'navigate'
        },
        delay: {
            type: Number,
            value: 1
        },
        speed: {
            type: Number,
            value: 50,
            observer: function () {
                var that = this;
                this.$nextTick(function () {
                    that.init();
                });
            }
        },
        scrollable: {
            type: Boolean,
            value: true
        },
        leftIcon: {
            type: String,
            value: ''
        },
        color: {
            type: String,
            value: FONT_COLOR
        },
        backgroundColor: {
            type: String,
            value: BG_COLOR
        },
        wrapable: Boolean
    },
    data: {
        show: true
    },
    created: function () {
        this.resetAnimation = uni.createAnimation({
            duration: 0,
            timingFunction: 'linear'
        });
    },
    destroyed: function () {
        if (this.timer) {
            clearTimeout(this.timer);
        }
    },
    methods: {
        init: function () {
            var that = this;
            Promise.all([this.getRect('.van-notice-bar__content'), this.getRect('.van-notice-bar__wrap')]).then(function (rects) {
                var contentRect = rects[0];
                var wrapRect = rects[1];
                if (contentRect == null || wrapRect == null || !contentRect.width || !wrapRect.width) {
                    return;
                }
                var _a = that;
                var speed = _a.speed;
                var scrollable = _a.scrollable;
                var delay = _a.delay;
                if (scrollable && wrapRect.width < contentRect.width) {
                    var duration = (contentRect.width / speed) * 1000;
                    that.wrapWidth = wrapRect.width;
                    that.contentWidth = contentRect.width;
                    that.duration = duration;
                    that.animation = uni.createAnimation({
                        duration: duration,
                        timingFunction: 'linear',
                        delay: delay
                    });
                    that.scroll();
                }
            });
        },
        scroll: function () {
            var that = this;
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = null;
            this.setData({
                animationData: this.resetAnimation.translateX(this.wrapWidth).step().export()
            });
            setTimeout(function () {
                that.setData({
                    animationData: that.animation.translateX(-that.contentWidth).step().export()
                });
            }, 20);
            this.timer = setTimeout(function () {
                that.scroll();
            }, this.duration);
        },
        onClickIcon: function () {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = null;
            this.setData({
                show: false
            });
        },
        onClick: function (event) {
            this.$emit('click', event);
        }
    }
});
</script>
<style>
@import './index.css';
</style>