From 659d09ec24dab6c451220c8f3bb3943b0fdb3ba1 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Mon, 08 Jan 2024 16:16:12 +0800 Subject: [PATCH] fix:地图导航 --- uni_modules/uview-ui/components/u-column-notice/u-column-notice.vue | 160 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 160 insertions(+), 0 deletions(-) diff --git a/uni_modules/uview-ui/components/u-column-notice/u-column-notice.vue b/uni_modules/uview-ui/components/u-column-notice/u-column-notice.vue new file mode 100644 index 0000000..fc39532 --- /dev/null +++ b/uni_modules/uview-ui/components/u-column-notice/u-column-notice.vue @@ -0,0 +1,160 @@ +<template> + <view + class="u-notice" + @tap="clickHandler" + > + <slot name="icon"> + <view + class="u-notice__left-icon" + v-if="icon" + > + <u-icon + :name="icon" + :color="color" + size="19" + ></u-icon> + </view> + </slot> + <swiper + :disable-touch="disableTouch" + :vertical="step ? false : true" + circular + :interval="duration" + :autoplay="true" + class="u-notice__swiper" + @change="noticeChange" + > + <swiper-item + v-for="(item, index) in text" + :key="index" + class="u-notice__swiper__item" + > + <text + class="u-notice__swiper__item__text u-line-1" + :style="[textStyle]" + >{{ item }}</text> + </swiper-item> + </swiper> + <view + class="u-notice__right-icon" + v-if="['link', 'closable'].includes(mode)" + > + <u-icon + v-if="mode === 'link'" + name="arrow-right" + :size="17" + :color="color" + ></u-icon> + <u-icon + v-if="mode === 'closable'" + name="close" + :size="16" + :color="color" + @click="close" + ></u-icon> + </view> + </view> +</template> + +<script> + import props from './props.js'; + /** + * ColumnNotice ������������������������������ ������������ + * @description ������������������������������������������������������������������ + * @tutorial https://www.uviewui.com/components/noticeBar.html + * @property {Array} text ��������������������������� + * @property {String} icon ��������������������������������� ��� ������ 'volume' ��� + * @property {String} mode ���������������link-������������������closable-������������������������ + * @property {String} color ������������������������������������������������ ��� ������ '#f9ae3d' ��� + * @property {String} bgColor ������������ ��� ������ '#fdf6ec' ��� + * @property {String | Number} fontSize ���������������������px ��� ������ 14 ��� + * @property {String | Number} speed ������������������������������������������������������px(rpx)��������������������������������������������������������������������������� ��� ������ 80 ��� + * @property {Boolean} step direction = row������������������������������������ ��� ������ false ��� + * @property {String | Number} duration ���������������������������������������ms ��� ������ 1500 ��� + * @property {Boolean} disableTouch ������������������������������ ������HX2.6.11������������App 2.5.5+���H5 2.5.5+��������������������������������������������� ��� ������ true ��� + * @example + */ + export default { + mixins: [uni.$u.mpMixin, uni.$u.mixin,props], + watch: { + text: { + immediate: true, + handler(newValue, oldValue) { + if(!uni.$u.test.array(newValue)) { + uni.$u.error('noticebar������direction���column������������text���������������������') + } + } + } + }, + computed: { + // ��������������������� + textStyle() { + let style = {} + style.color = this.color + style.fontSize = uni.$u.addUnit(this.fontSize) + return style + }, + // ������������������������ + vertical() { + if (this.mode == 'horizontal') return false + else return true + }, + }, + data() { + return { + index:0 + } + }, + methods: { + noticeChange(e){ + this.index = e.detail.current + }, + // ��������������� + clickHandler() { + this.$emit('click', this.index) + }, + // ������������������ + close() { + this.$emit('close') + } + } + }; +</script> + +<style lang="scss" scoped> + @import "../../libs/css/components.scss"; + + .u-notice { + @include flex; + align-items: center; + justify-content: space-between; + + &__left-icon { + align-items: center; + margin-right: 5px; + } + + &__right-icon { + margin-left: 5px; + align-items: center; + } + + &__swiper { + height: 16px; + @include flex; + align-items: center; + flex: 1; + + &__item { + @include flex; + align-items: center; + overflow: hidden; + + &__text { + font-size: 14px; + color: $u-warning; + } + } + } + } +</style> -- Gitblit v1.8.0