342 lines
8.0 KiB
Vue
342 lines
8.0 KiB
Vue
<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 + '-fill'" :size="description ? 56 : 40" class="u-icon" :color="uIconType" :custom-style="iconStyle"></u-icon>
|
||
</view>
|
||
<view class="u-alert-content" @tap.stop="click">
|
||
<view class="u-alert-title" :class="'u-alert-tips--color--' + type" :style="[uTitleStyle]">
|
||
{{title}}
|
||
</view>
|
||
<view v-if="description" class="u-alert-desc" :class="'u-alert-tips--color--' + type" :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 辅助性文字，颜色比title浅一点，字号也小一点，可选
|
||
* @property {String} type 关闭按钮(默认为叉号icon图标)
|
||
* @property {String} icon 图标名称
|
||
* @property {Object} icon-style 图标的样式，对象形式
|
||
* @property {Object} title-style 标题的样式，对象形式
|
||
* @property {Object} desc-style 描述的样式，对象形式
|
||
* @property {String} close-able 用文字替代关闭图标，close-able为true时有效
|
||
* @property {Boolean} show-icon 是否显示左边的辅助图标
|
||
* @property {Boolean} show 显示或隐藏组件
|
||
* @event {Function} click 点击组件时触发
|
||
* @event {Function} close 点击关闭按钮时触发
|
||
*/
|
||
export default {
|
||
name: 'u-alert-tips',
|
||
props: {
|
||
// 显示文字
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 主题，success/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
|
||
},
|
||
// 左边显示的icon
|
||
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 ? 'bold' : 'normal';
|
||
// 将用户传入样式对象和style合并，传入的优先级比style高，同属性会被覆盖
|
||
return this.deepMerge(style, this.titleStyle);
|
||
},
|
||
uIcon() {
|
||
// 如果有设置icon名称就使用，否则根据type主题，推定一个默认的图标
|
||
return this.icon ? this.icon : this.type2icon(this.type);
|
||
},
|
||
uIconType() {
|
||
// 如果有设置图标的样式，优先使用，没有的话，则用type的样式
|
||
return Object.keys(this.iconStyle).length ? '' : this.type;
|
||
}
|
||
},
|
||
methods: {
|
||
deepMerge(target, source) {
|
||
if (source) {
|
||
for (var s in source) {
|
||
if (source.hasOwnProperty(s)) {
|
||
var value = source[s];
|
||
|
||
if (typeof value === 'object' && typeof target[s] === 'object') {
|
||
target[s] = this._extends({}, target[s], {}, value);
|
||
} else {
|
||
target[s] = value;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
return target;
|
||
},
|
||
type2icon(type = 'success', fill = false) {
|
||
// 如果非预置值,默认为success
|
||
if (['primary', 'info', 'error', 'warning', 'success'].indexOf(type) == -1) type = 'success';
|
||
let iconName = '';
|
||
// 目前(2019-12-12),info和primary使用同一个图标
|
||
switch (type) {
|
||
case 'primary':
|
||
iconName = 'info-circle';
|
||
break;
|
||
case 'info':
|
||
iconName = 'info-circle';
|
||
break;
|
||
case 'error':
|
||
iconName = 'close-circle';
|
||
break;
|
||
case 'warning':
|
||
iconName = 'error-circle';
|
||
break;
|
||
case 'success':
|
||
iconName = 'checkmark-circle';
|
||
break;
|
||
default:
|
||
iconName = 'checkmark-circle';
|
||
}
|
||
// 是否是实体类型,加上-fill,在icon组件库中,实体的类名是后面加-fill的
|
||
if (fill) iconName += '-fill';
|
||
return iconName;
|
||
},
|
||
_extends() {
|
||
_extends = Object.assign || function(target) {
|
||
for (var i = 1; i < arguments.length; i++) {
|
||
var source = arguments[i];
|
||
|
||
for (var key in source) {
|
||
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
||
target[key] = source[key];
|
||
}
|
||
}
|
||
}
|
||
|
||
return target;
|
||
};
|
||
|
||
return _extends.apply(this, arguments);
|
||
},
|
||
// 点击内容
|
||
click() {
|
||
this.$emit('click');
|
||
},
|
||
// 点击关闭按钮
|
||
close() {
|
||
this.$emit('close');
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import './theme.scss';
|
||
|
||
.u-alert-tips {
|
||
/* #ifndef APP-NVUE */
|
||
display: flex;
|
||
/* #endif */
|
||
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;
|
||
}
|
||
|
||
&--color--primary {
|
||
color: $u-type-primary !important;
|
||
}
|
||
|
||
&--color--info {
|
||
color: $u-type-info !important;
|
||
}
|
||
|
||
&--color--success {
|
||
color: $u-type-success !important;
|
||
}
|
||
|
||
&--color--warning {
|
||
color: $u-type-warning !important;
|
||
}
|
||
|
||
&--color--error {
|
||
color: $u-type-error !important;
|
||
}
|
||
|
||
&--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: 24rpx;
|
||
text-align: left;
|
||
color: $u-content-color;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.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>
|