From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-alert-tips/u-alert-tips.vue | 256 +++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 256 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-alert-tips/u-alert-tips.vue b/uview-ui/components/u-alert-tips/u-alert-tips.vue
new file mode 100644
index 0000000..e81fc37
--- /dev/null
+++ b/uview-ui/components/u-alert-tips/u-alert-tips.vue
@@ -0,0 +1,256 @@
+<template>
+ <view class="u-alert-tips" v-if="show" :class="[
+ !show ? 'u-close-alert-tips': '',
+ type ? 'u-alert-tips--bg--' + type + '-light' : '',
+ type ? 'u-alert-tips--border--' + type + '-disabled' : '',
+ ]" :style="{
+ backgroundColor: bgColor,
+ borderColor: borderColor
+ }">
+ <view class="u-icon-wrap">
+ <u-icon v-if="showIcon" :name="uIcon" :size="description ? 40 : 32" class="u-icon" :color="uIconType" :custom-style="iconStyle"></u-icon>
+ </view>
+ <view class="u-alert-content" @tap.stop="click">
+ <view class="u-alert-title" :style="[uTitleStyle]">
+ {{title}}
+ </view>
+ <view v-if="description" class="u-alert-desc" :style="[descStyle]">
+ {{description}}
+ </view>
+ </view>
+ <view class="u-icon-wrap">
+ <u-icon @click="close" v-if="closeAble && !closeText" hoverClass="u-type-error-hover-color" name="close" color="#c0c4cc"
+ :size="22" class="u-close-icon" :style="{
+ top: description ? '18rpx' : '24rpx'
+ }"></u-icon>
+ </view>
+ <text v-if="closeAble && closeText" class="u-close-text" :style="{
+ top: description ? '18rpx' : '24rpx'
+ }">{{closeText}}</text>
+ </view>
+</template>
+
+<script>
+ /**
+ * alertTips 璀﹀憡鎻愮ず
+ * @description 璀﹀憡鎻愮ず锛屽睍鐜伴渶瑕佸叧娉ㄧ殑淇℃伅
+ * @tutorial https://uviewui.com/components/alertTips.html
+ * @property {String} title 鏄剧ず鐨勬爣棰樻枃瀛�
+ * @property {String} description 杈呭姪鎬ф枃瀛楋紝棰滆壊姣攖itle娴呬竴鐐癸紝瀛楀彿涔熷皬涓�鐐癸紝鍙��
+ * @property {String} type 鍏抽棴鎸夐挳(榛樿涓哄弶鍙穒con鍥炬爣)
+ * @property {String} icon 鍥炬爣鍚嶇О
+ * @property {Object} icon-style 鍥炬爣鐨勬牱寮忥紝瀵硅薄褰㈠紡
+ * @property {Object} title-style 鏍囬鐨勬牱寮忥紝瀵硅薄褰㈠紡
+ * @property {Object} desc-style 鎻忚堪鐨勬牱寮忥紝瀵硅薄褰㈠紡
+ * @property {String} close-able 鐢ㄦ枃瀛楁浛浠ｅ叧闂浘鏍囷紝close-able涓簍rue鏃舵湁鏁�
+ * @property {Boolean} show-icon 鏄惁鏄剧ず宸﹁竟鐨勮緟鍔╁浘鏍�
+ * @property {Boolean} show 鏄剧ず鎴栭殣钘忕粍浠�
+ * @event {Function} click 鐐瑰嚮缁勪欢鏃惰Е鍙�
+ * @event {Function} close 鐐瑰嚮鍏抽棴鎸夐挳鏃惰Е鍙�
+ */
+ export default {
+ name: 'u-alert-tips',
+ props: {
+ // 鏄剧ず鏂囧瓧
+ title: {
+ type: String,
+ default: ''
+ },
+ // 涓婚锛宻uccess/warning/info/error
+ type: {
+ type: String,
+ default: 'warning'
+ },
+ // 杈呭姪鎬ф枃瀛�
+ description: {
+ type: String,
+ default: ''
+ },
+ // 鏄惁鍙叧闂�
+ closeAble: {
+ type: Boolean,
+ default: false
+ },
+ // 鍏抽棴鎸夐挳鑷畾涔夋枃鏈�
+ closeText: {
+ type: String,
+ default: ''
+ },
+ // 鏄惁鏄剧ず鍥炬爣
+ showIcon: {
+ type: Boolean,
+ default: false
+ },
+ // 鏂囧瓧棰滆壊锛屽鏋滃畾涔変簡color鍊硷紝icon浼氬け鏁�
+ color: {
+ type: String,
+ default: ''
+ },
+ // 鑳屾櫙棰滆壊
+ bgColor: {
+ type: String,
+ default: ''
+ },
+ // 杈规棰滆壊
+ borderColor: {
+ type: String,
+ default: ''
+ },
+ // 鏄惁鏄剧ず
+ show: {
+ type: Boolean,
+ default: true
+ },
+ // 宸﹁竟鏄剧ず鐨刬con
+ icon: {
+ type: String,
+ default: ''
+ },
+ // icon鐨勬牱寮�
+ iconStyle: {
+ type: Object,
+ default() {
+ return {}
+ }
+ },
+ // 鏍囬鐨勬牱寮�
+ titleStyle: {
+ type: Object,
+ default() {
+ return {}
+ }
+ },
+ // 鎻忚堪鏂囧瓧鐨勬牱寮�
+ descStyle: {
+ type: Object,
+ default() {
+ return {}
+ }
+ },
+ },
+ data() {
+ return {
+ }
+ },
+ computed: {
+ uTitleStyle() {
+ let style = {};
+ // 濡傛灉鏈夋弿杩版枃瀛楃殑璇濓紝鏍囬杩涜鍔犵矖
+ style.fontWeight = this.description ? 500 : 'normal';
+ // 灏嗙敤鎴蜂紶鍏ユ牱寮忓璞″拰style鍚堝苟锛屼紶鍏ョ殑浼樺厛绾ф瘮style楂橈紝鍚屽睘鎬т細琚鐩�
+ return this.$u.deepMerge(style, this.titleStyle);
+ },
+ uIcon() {
+ // 濡傛灉鏈夎缃甶con鍚嶇О灏变娇鐢紝鍚﹀垯鏍规嵁type涓婚锛屾帹瀹氫竴涓粯璁ょ殑鍥炬爣
+ return this.icon ? this.icon : this.$u.type2icon(this.type);
+ },
+ uIconType() {
+ // 濡傛灉鏈夎缃浘鏍囩殑鏍峰紡锛屼紭鍏堜娇鐢紝娌℃湁鐨勮瘽锛屽垯鐢╰ype鐨勬牱寮�
+ return Object.keys(this.iconStyle).length ? '' : this.type;
+ }
+ },
+ methods: {
+ // 鐐瑰嚮鍐呭
+ click() {
+ this.$emit('click');
+ },
+ // 鐐瑰嚮鍏抽棴鎸夐挳
+ close() {
+ this.$emit('close');
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ @import "../../libs/css/style.components.scss";
+
+ .u-alert-tips {
+ @include vue-flex;
+ align-items: center;
+ padding: 16rpx 30rpx;
+ border-radius: 8rpx;
+ position: relative;
+ transition: all 0.3s linear;
+ border: 1px solid #fff;
+
+ &--bg--primary-light {
+ background-color: $u-type-primary-light;
+ }
+
+ &--bg--info-light {
+ background-color: $u-type-info-light;
+ }
+
+ &--bg--success-light {
+ background-color: $u-type-success-light;
+ }
+
+ &--bg--warning-light {
+ background-color: $u-type-warning-light;
+ }
+
+ &--bg--error-light {
+ background-color: $u-type-error-light;
+ }
+
+ &--border--primary-disabled {
+ border-color: $u-type-primary-disabled;
+ }
+
+ &--border--success-disabled {
+ border-color: $u-type-success-disabled;
+ }
+
+ &--border--error-disabled {
+ border-color: $u-type-error-disabled;
+ }
+
+ &--border--warning-disabled {
+ border-color: $u-type-warning-disabled;
+ }
+
+ &--border--info-disabled {
+ border-color: $u-type-info-disabled;
+ }
+ }
+
+ .u-close-alert-tips {
+ opacity: 0;
+ visibility: hidden;
+ }
+
+ .u-icon {
+ margin-right: 16rpx;
+ }
+
+ .u-alert-title {
+ font-size: 28rpx;
+ color: $u-main-color;
+ }
+
+ .u-alert-desc {
+ font-size: 26rpx;
+ text-align: left;
+ color: $u-content-color;
+ }
+
+ .u-close-icon {
+ position: absolute;
+ top: 20rpx;
+ right: 20rpx;
+ }
+
+ .u-close-hover {
+ color: red;
+ }
+
+ .u-close-text {
+ font-size: 24rpx;
+ color: $u-tips-color;
+ position: absolute;
+ top: 20rpx;
+ right: 20rpx;
+ line-height: 1;
+ }
+</style>
--
Gitblit v1.9.3