From d1448cb0ef10f358bb7bddb4e1ec268515e0b787 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期二, 15 七月 2025 11:46:57 +0800
Subject: [PATCH] 项目初始化
---
uni_modules/uview-ui/components/u-alert/u-alert.vue | 243 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 243 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-alert/u-alert.vue b/uni_modules/uview-ui/components/u-alert/u-alert.vue
new file mode 100644
index 0000000..81f7d43
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-alert/u-alert.vue
@@ -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 杈呭姪鎬ф枃瀛楋紝棰滆壊姣攖itle娴呬竴鐐癸紝瀛楀彿涔熷皬涓�鐐癸紝鍙��
+ * @property {Boolean} closable 鍏抽棴鎸夐挳(榛樿涓哄弶鍙穒con鍥炬爣) 锛堥粯璁� 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>
--
Gitblit v1.9.3