Adam / gulu-vue

Blame view

src/components/UniPopup/uni-popup-message.vue 2.18 KB
edit raw normal view history
863d3aa95   BigBoss   新增验光数据页面 
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
  <template>
  	<view class="uni-popup-message" :class="'uni-popup__'+[type]">
  		<text class="uni-popup-message-text" :class="'uni-popup__'+[type]+'-text'">{{message}}</text>
  	</view>
  </template>
  
  <script>
  	
  	/**
  	 * PopUp 弹出层-消息提示
  	 * @description 弹出层-消息提示
  	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
  	 * @property {String} type = [success|warning|info|error] 主题样式
  	 *  @value success 成功
  	 * 	@value warning 提示
  	 * 	@value info 消息
  	 * 	@value error 错误
  	 * @property {String} message 消息提示文字
  	 * @property {String} duration 显示时间，设置为 0 则不会自动关闭
  	 */
  	
  	export default {
  		name: 'UniPopupMessage',
  		props: {
  			/**
  			 * 主题 success/warning/info/error	  默认 success
  			 */
  			type: {
  				type: String,
  				default: 'success'
  			},
  			/**
  			 * 消息文字
  			 */
  			message: {
  				type: String,
  				default: ''
  			},
  			/**
  			 * 显示时间，设置为 0 则不会自动关闭
  			 */
  			duration: {
  				type: Number,
  				default: 3000
  			}
  		},
  		inject: ['popup'],
  		data() {
  			return {}
  		},
  		created() {
  			this.popup.childrenMsg = this
  		},
  		methods: {
  			open() {
  				if (this.duration === 0) return
  				clearTimeout(this.popuptimer)
  				this.popuptimer = setTimeout(() => {
  					this.popup.close()
  				}, this.duration)
  			},
  			close() {
  				clearTimeout(this.popuptimer)
  			}
  		}
  	}
  </script>
  <style lang="scss" scoped>
  	.uni-popup-message {
  		/* #ifndef APP-NVUE */
  		display: flex;
  		/* #endif */
  		flex-direction: row;
  		background-color: #e1f3d8;
  		padding: 10px 15px;
  		border-color: #eee;
  		border-style: solid;
  		border-width: 1px;
  	}
  	.uni-popup-message-text {
  		font-size: 14px;
  		padding: 0;
  	}
  
  	.uni-popup__success {
  		background-color: #e1f3d8;
  	}
  
  	.uni-popup__success-text {
  		color: #67C23A;
  	}
  
  	.uni-popup__warn {
  		background-color: #faecd8;
  	}
  
  	.uni-popup__warn-text {
  		color: #E6A23C;
  	}
  
  	.uni-popup__error {
  		background-color: #fde2e2;
  	}
  
  	.uni-popup__error-text {
  		color: #F56C6C;
  	}
  
  	.uni-popup__info {
  		background-color: #F2F6FC;
  	}
  
  	.uni-popup__info-text {
  		color: #909399;
  	}
  </style>