|
|
@@ -0,0 +1,288 @@
|
|
|
+<template>
|
|
|
+ <u-transition mode="fade-down" :show="show">
|
|
|
+ <view
|
|
|
+ class="u-custom-alert"
|
|
|
+ :class="[`u-custom-alert--${type}--${effect}`]"
|
|
|
+ @tap.stop="clickHandler"
|
|
|
+ >
|
|
|
+ <view class="u-custom-alert__icon" v-if="showIcon">
|
|
|
+ <u-icon :name="iconName" size="18" :color="iconColor"></u-icon>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="u-custom-alert__content"
|
|
|
+ :style="[
|
|
|
+ {
|
|
|
+ paddingRight: closable ? '20px' : 0
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <text
|
|
|
+ class="u-custom-alert__content__title"
|
|
|
+ v-if="title"
|
|
|
+ :style="[
|
|
|
+ {
|
|
|
+ fontSize: $u.addUnit(fontSize),
|
|
|
+ textAlign: center ? 'center' : 'left'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ :class="[
|
|
|
+ effect === 'dark'
|
|
|
+ ? 'u-custom-alert__text--dark'
|
|
|
+ : `u-custom-alert__text--${type}--light`
|
|
|
+ ]"
|
|
|
+ >{{ title }}</text
|
|
|
+ >
|
|
|
+ <view class="u-custom-alert__content__row-space-end">
|
|
|
+ <text
|
|
|
+ class="u-custom-alert__content__desc"
|
|
|
+ v-if="description"
|
|
|
+ :style="[
|
|
|
+ {
|
|
|
+ fontSize: $u.addUnit(fontSize),
|
|
|
+ textAlign: center ? 'center' : 'left'
|
|
|
+ }
|
|
|
+ ]"
|
|
|
+ :class="[
|
|
|
+ effect === 'dark'
|
|
|
+ ? 'u-custom-alert__text--dark'
|
|
|
+ : `u-custom-alert__text--${type}--light`
|
|
|
+ ]"
|
|
|
+ >{{ description }}</text
|
|
|
+ >
|
|
|
+ <text class="u-custom-alert__content__more"> 更多》</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view
|
|
|
+ class="u-custom-alert__close"
|
|
|
+ v-if="closable"
|
|
|
+ @tap.stop="closeHandler"
|
|
|
+ >
|
|
|
+ <u-icon name="close" :color="iconColor" size="15"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-transition>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+/**
|
|
|
+ * 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-custom-alert',
|
|
|
+ props: {
|
|
|
+ // 显示文字
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: uni.$u.props.alert.title
|
|
|
+ },
|
|
|
+ // 主题,success/warning/info/error
|
|
|
+ type: {
|
|
|
+ type: String,
|
|
|
+ default: uni.$u.props.alert.type
|
|
|
+ },
|
|
|
+ // 辅助性文字
|
|
|
+ description: {
|
|
|
+ type: String,
|
|
|
+ default: uni.$u.props.alert.description
|
|
|
+ },
|
|
|
+ // 是否可关闭
|
|
|
+ closable: {
|
|
|
+ type: Boolean,
|
|
|
+ default: uni.$u.props.alert.closable
|
|
|
+ },
|
|
|
+ // 是否显示图标
|
|
|
+ showIcon: {
|
|
|
+ type: Boolean,
|
|
|
+ default: uni.$u.props.alert.showIcon
|
|
|
+ },
|
|
|
+ // 浅或深色调,light-浅色,dark-深色
|
|
|
+ effect: {
|
|
|
+ type: String,
|
|
|
+ default: uni.$u.props.alert.effect
|
|
|
+ },
|
|
|
+ // 文字是否居中
|
|
|
+ center: {
|
|
|
+ type: Boolean,
|
|
|
+ default: uni.$u.props.alert.center
|
|
|
+ },
|
|
|
+ // 字体大小
|
|
|
+ fontSize: {
|
|
|
+ type: [String, Number],
|
|
|
+ default: uni.$u.props.alert.fontSize
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show: true
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ iconColor() {
|
|
|
+ // return this.effect === 'light' ? this.type : '#fff';
|
|
|
+ return '#fff';
|
|
|
+ },
|
|
|
+ // 不同主题对应不同的图标
|
|
|
+ iconName() {
|
|
|
+ switch (this.type) {
|
|
|
+ case 'success':
|
|
|
+ return 'checkmark-circle-fill';
|
|
|
+ break;
|
|
|
+ case 'error':
|
|
|
+ return 'close-circle-fill';
|
|
|
+ break;
|
|
|
+ case 'warning':
|
|
|
+ return 'warning-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() {
|
|
|
+ console.log('closeHandler', '------------------------- ');
|
|
|
+ this.show = false;
|
|
|
+ this.$emit('close');
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.u-custom-alert {
|
|
|
+ position: relative;
|
|
|
+ padding: 8px 10px;
|
|
|
+ align-items: center;
|
|
|
+ border-top-left-radius: 16rpx;
|
|
|
+ border-top-right-radius: 16rpx;
|
|
|
+ border-bottom-left-radius: 16rpx;
|
|
|
+ border-bottom-right-radius: 16rpx;
|
|
|
+ pointer-events: auto;
|
|
|
+
|
|
|
+ &--primary--dark {
|
|
|
+ }
|
|
|
+
|
|
|
+ &--primary--light {
|
|
|
+ background-color: #ecf5ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--error--dark {
|
|
|
+ }
|
|
|
+
|
|
|
+ &--error--light {
|
|
|
+ background-color: #fef0f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--success--dark {
|
|
|
+ }
|
|
|
+
|
|
|
+ &--success--light {
|
|
|
+ background-color: #f5fff0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--warning--dark {
|
|
|
+ }
|
|
|
+
|
|
|
+ &--warning--light {
|
|
|
+ background-color: rgba(238, 172, 25, 0.8);
|
|
|
+ }
|
|
|
+
|
|
|
+ &--info--dark {
|
|
|
+ }
|
|
|
+
|
|
|
+ &--info--light {
|
|
|
+ background-color: #f4f4f5;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__icon {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__content {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ &__title {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__desc {
|
|
|
+ font-size: 14px;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__more {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__row-space-end {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__title--dark,
|
|
|
+ &__desc--dark {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__text--primary--light,
|
|
|
+ &__text--primary--light {
|
|
|
+ }
|
|
|
+
|
|
|
+ &__text--success--light,
|
|
|
+ &__text--success--light {
|
|
|
+ }
|
|
|
+
|
|
|
+ &__text--warning--light,
|
|
|
+ &__text--warning--light {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__text--error--light,
|
|
|
+ &__text--error--light {
|
|
|
+ }
|
|
|
+
|
|
|
+ &__text--info--light,
|
|
|
+ &__text--info--light {
|
|
|
+ }
|
|
|
+
|
|
|
+ &__close {
|
|
|
+ position: absolute;
|
|
|
+ top: 11px;
|
|
|
+ right: 10px;
|
|
|
+ z-index: 12;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|