pingpu_H5/components/ui-state/ui-state.vue

<template>
	<!-- 全局设备状态 -->
	<view class="w-state" :class="classNmae(state)">{{states[state]}}</view>
</template>

<script>
	/**
	 * 设备状态
	 * @property {String|Number} state 状态值 1： 在线，0：离线
	 * @description 设备状态通用组件
	 * @example <w-state state="1"></w-state>
	 */
	export default {
		name: 'io-state',
		data() {
			return {
				// 状态键值对
				states: {
					1: '在线',
					0: '离线'
				}
			}
		},
		props: {
			state: {
				type: [String, Number],
				default: 1,
			}
		},
		methods: {
			// 設置狀態類名
			classNmae() {
				const names = {
					1: 'on',
					0: 'off'
				}
				return names[this.state];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.w-state {
		width: 94rpx;
		height: 40rpx;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 4rpx;
		font-size: 28rpx;

		&.on {
			background-color: rgba(49, 122, 253, .3);
			color: #3377FE;
		}

		&.off {
			background-color: rgba(233, 63, 39, .3);
			color: #E93F27;
		}
	}
</style>