fix:是否修改

quanyawei

2023-11-30 f4991944d13b94355fb8aaf03dad7d60ca530ee9

 uni_modules/uview-ui/components/u-alert/u-alert.vue

New file
@@ -0,0 +1,243 @@
<template>
   <u-transition
       mode="fade"
       :show="show"
   >
      <view
          class="u-alert"
          :class="[`u-alert--${type}--${effect}`]"
          @tap.stop="clickHandler"
          :style="[$u.addStyle(customStyle)]"
      >
         <view
             class="u-alert__icon"
             v-if="showIcon"
         >
            <u-icon
                :name="iconName"
                size="18"
                :color="iconColor"
            ></u-icon>
         </view>
         <view
             class="u-alert__content"
             :style="[{
               paddingRight: closable ? '20px' : 0
            }]"
         >
            <text
                class="u-alert__content__title"
                v-if="title"
               :style="[{
                  fontSize: $u.addUnit(fontSize),
                  textAlign: center ? 'center' : 'left'
               }]"
                :class="[effect === 'dark' ? 'u-alert__text--dark' : `u-alert__text--${type}--light`]"
            >{{ title }}</text>
            <text
                class="u-alert__content__desc"
               v-if="description"
               :style="[{
                  fontSize: $u.addUnit(fontSize),
                  textAlign: center ? 'center' : 'left'
               }]"
                :class="[effect === 'dark' ? 'u-alert__text--dark' : `u-alert__text--${type}--light`]"
            >{{ description }}</text>
         </view>
         <view
             class="u-alert__close"
             v-if="closable"
             @tap.stop="closeHandler"
         >
            <u-icon
                name="close"
                :color="iconColor"
                size="15"
            ></u-icon>
         </view>
      </view>
   </u-transition>
</template>

<script>
   import props from './props.js';
   /**
    * Alert  警告提示
    * @description 警告提示，展现需要关注的信息。
    * @tutorial https://www.uviewui.com/components/alertTips.html
    * 
    * @property {String}         title       显示的文字 
    * @property {String}         type        使用预设的颜色  （默认 'warning' ）
    * @property {String}         description 辅助性文字，颜色比title浅一点，字号也小一点，可选  
    * @property {Boolean}         closable    关闭按钮(默认为叉号icon图标)  （默认 false ）
    * @property {Boolean}         showIcon    是否显示左边的辅助图标   （ 默认 false ）
    * @property {String}         effect      多图时，图片缩放裁剪的模式  （默认 'light' ）
    * @property {Boolean}         center      文字是否居中  （默认 false ）
    * @property {String | Number}   fontSize    字体大小  （默认 14 ）
    * @property {Object}         customStyle   定义需要用到的外部样式
    * @event    {Function}        click       点击组件时触发
    * @example  <u-alert :title="title"  type = "warning" :closable="closable" :description = "description"></u-alert>
    */
   export default {
      name: 'u-alert',
      mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
      data() {
         return {
            show: true
         }
      },
      computed: {
         iconColor() {
            return this.effect === 'light' ? this.type : '#fff'
         },
         // 不同主题对应不同的图标
         iconName() {
            switch (this.type) {
               case 'success':
                  return 'checkmark-circle-fill';
                  break;
               case 'error':
                  return 'close-circle-fill';
                  break;
               case 'warning':
                  return 'error-circle-fill';
                  break;
               case 'info':
                  return 'info-circle-fill';
                  break;
               case 'primary':
                  return 'more-circle-fill';
                  break;
               default: 
                  return 'error-circle-fill';
            }
         }
      },
      methods: {
         // 点击内容
         clickHandler() {
            this.$emit('click')
         },
         // 点击关闭按钮
         closeHandler() {
            this.show = false
         }
      }
   }
</script>

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

   .u-alert {
      position: relative;
      background-color: $u-primary;
      padding: 8px 10px;
      @include flex(row);
      align-items: center;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;

      &--primary--dark {
         background-color: $u-primary;
      }

      &--primary--light {
         background-color: #ecf5ff;
      }

      &--error--dark {
         background-color: $u-error;
      }

      &--error--light {
         background-color: #FEF0F0;
      }

      &--success--dark {
         background-color: $u-success;
      }

      &--success--light {
         background-color: #f5fff0;
      }

      &--warning--dark {
         background-color: $u-warning;
      }

      &--warning--light {
         background-color: #FDF6EC;
      }

      &--info--dark {
         background-color: $u-info;
      }

      &--info--light {
         background-color: #f4f4f5;
      }

      &__icon {
         margin-right: 5px;
      }

      &__content {
         @include flex(column);
         flex: 1;

         &__title {
            color: $u-main-color;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            margin-bottom: 2px;
         }

         &__desc {
            color: $u-main-color;
            font-size: 14px;
            flex-wrap: wrap;
            color: #fff;
         }
      }

      &__title--dark,
      &__desc--dark {
         color: #FFFFFF;
      }

      &__text--primary--light,
      &__text--primary--light {
         color: $u-primary;
      }

      &__text--success--light,
      &__text--success--light {
         color: $u-success;
      }

      &__text--warning--light,
      &__text--warning--light {
         color: $u-warning;
      }

      &__text--error--light,
      &__text--error--light {
         color: $u-error;
      }

      &__text--info--light,
      &__text--info--light {
         color: $u-info;
      }

      &__close {
         position: absolute;
         top: 11px;
         right: 10px;
      }
   }
</style>