fix:立行立改Uniapp小程序新建项目

quanyawei

2023-10-20 d8b41fff43a2cee6a8f714ffa807623b15803786

 uni_modules/uview-ui/components/u-swiper-indicator/u-swiper-indicator.vue

New file
@@ -0,0 +1,110 @@
<template>
   <view class="u-swiper-indicator">
      <view
         class="u-swiper-indicator__wrapper"
         v-if="indicatorMode === 'line'"
         :class="[`u-swiper-indicator__wrapper--${indicatorMode}`]"
         :style="{
            width: $u.addUnit(lineWidth * length),
            backgroundColor: indicatorInactiveColor
         }"
      >
         <view
            class="u-swiper-indicator__wrapper--line__bar"
            :style="[lineStyle]"
         ></view>
      </view>
      <view
         class="u-swiper-indicator__wrapper"
         v-if="indicatorMode === 'dot'"
      >
         <view
            class="u-swiper-indicator__wrapper__dot"
            v-for="(item, index) in length"
            :key="index"
            :class="[index === current && 'u-swiper-indicator__wrapper__dot--active']"
            :style="[dotStyle(index)]"
         >

         </view>
      </view>
   </view>
</template>

<script>
   import props from './props.js';
   /**
    * SwiperIndicator 轮播图指示器
    * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
    * @tutorial https://www.uviewui.com/components/swiper.html
    * @property {String | Number}   length               轮播的长度（默认 0 ）
    * @property {String | Number}   current               当前处于活动状态的轮播的索引（默认 0 ）
    * @property {String}         indicatorActiveColor   指示器非激活颜色
    * @property {String}         indicatorInactiveColor   指示器的激活颜色
    * @property {String}         indicatorMode         指示器模式（默认 'line' ）
    * @example   <u-swiper :list="list4" indicator keyName="url" :autoplay="false"></u-swiper>
    */
   export default {
      name: 'u-swiper-indicator',
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {
            lineWidth: 22
         }
      },
      computed: {
         // 指示器为线型的样式
         lineStyle() {
            let style = {}
            style.width = uni.$u.addUnit(this.lineWidth)
            style.transform = `translateX(${ uni.$u.addUnit(this.current * this.lineWidth) })`
            style.backgroundColor = this.indicatorActiveColor
            return style
         },
         // 指示器为点型的样式
         dotStyle() {
            return index => {
               let style = {}
               style.backgroundColor = index === this.current ? this.indicatorActiveColor : this.indicatorInactiveColor
               return style
            }
         }
      },
   }
</script>

<style lang="scss" scoped>
   @import "../../libs/css/components.scss";

   .u-swiper-indicator {

      &__wrapper {
         @include flex;

         &--line {
            border-radius: 100px;
            height: 4px;

            &__bar {
               width: 22px;
               height: 4px;
               border-radius: 100px;
               background-color: #FFFFFF;
               transition: transform 0.3s;
            }
         }

         &__dot {
            width: 5px;
            height: 5px;
            border-radius: 100px;
            margin: 0 4px;

            &--active {
               width: 12px;
            }
         }

      }
   }
</style>