Blame view

components/thorui/tui-msg/tui-msg.vue 1.53 KB
46b6767c   刘淇   init 提交到库
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
  <template>
  	<view class="tui-msg__box">
  		<view class="tui-msg__icon">
  			<icon :color="getColor" :type="type" :size="size" v-if="type && !src"></icon>
  			<image class="thorui-msg__img" :style="{ width: width, height: height }" :src="src" mode="aspectFit"
  				v-if="src" />
  		</view>
  		<view class="tui-msg__title" v-if="title">{{ title }}</view>
  		<view class="tui-msg__desc" v-if="desc">{{ desc }}</view>
  		<slot></slot>
  	</view>
  </template>
  
  <script>
  	export default {
  		name: "tuiMsg",
  		props: {
  			title: {
  				type: String,
  				default: ''
  			},
  			type: {
  				type: String,
  				default: ''
  			},
  			color: {
  				type: String,
  				default: ''
  			},
  			//icon size
  			size: {
  				type: Number,
  				default: 64
  			},
  			src: {
  				//设置src 之后,type失效
  				type: String,
  				default: ''
  			},
  			width: {
  				type: String,
  				default: '180rpx'
  			},
  			height: {
  				type: String,
  				default: '180rpx'
  			},
  			desc: {
  				type: String,
  				default: ''
  			}
  		},
  		computed: {
  			getColor() {
  				return this.color || (uni && uni.$tui && uni.$tui.color.success) || '#07c160'
  			}
  		}
  
  	};
  </script>
  
  <style scoped>
  	.tui-msg__box {
  		width: 100%;
  		padding-top: 100rpx;
  		display: flex;
  		flex-direction: column;
  		align-items: center;
  	}
  
  	.tui-msg__icon {
  		padding-bottom: 44rpx;
  	}
  
  	.tui-msg__title {
  		font-weight: 700;
  		font-size: 44rpx;
  	}
  
  	.tui-msg__desc,
  	.tui-msg__title {
  		margin-bottom: 32rpx;
  		color: #333;
  		word-wrap: break-word;
  		word-break: break-all;
  	}
  
  	.tui-msg__desc {
  		font-size: 32rpx;
  		text-align: center;
  	}
  </style>