cyt_log/components/y-json-view/y-json-view.vue

<template>
	<view class="jsonview">
		<view @click="toggleClose" :class="['angle', isShow ? 'closed' : '']" v-if="length"></view>
		<view class="first-line">
			<view v-if="jsonKey" class="json-key">"{{ jsonKey }}":</view>
			<view v-if="length" class="json-fold">{{ prefix }} {{ isShow ? '...' + subfix : '' }}</view>
			<view v-if="!length">{{ isArray ? '[]' : '{}' }}</view>
		</view>
		<view class="json-body" v-if="!isShow && length" v-for="(item, index) in items">
			<y-json-view v-if="item.isJSON" :key="index" 
			:json="item.value" :jsonKey="item.key"
			 :isLast="index === items.length - 1"></y-json-view>
			<view class="json-item" v-else>
				<view class="json-index" v-if="isArray">{{ index }}</view>
				<view class="json-key" v-else>{{ '"' + item.key + '"' }}</view>
				<view class="json-colon"><view>:</view></view>
				<view class="json-value">{{ item.value + (index === items.length - 1 ? '' : ',') }}</view>
			</view>
		</view>
		<view v-if="!isShow && length" class="last-line">
			<view>{{ subfix }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'y-json-view',
	props: {
		json: {
			type: [Object, Array],
			default: null
		},
		jsonKey: {
			type: String,
			default: '' //第一个键
		},
		isLast: {
			type: Boolean,
			default: true
		},
		closed: {
			type: Boolean,
			default: false
		}
	},
	mounted() {
		this.isShow = this.closed;
	},
	watch: {
		closed:function() {
			this.isShow = this.closed;
		},
	},
	data() {
		return {
			isShow: true
		};
	},
	methods: {
		isObjectOrArray(source) {
			const type = Object.prototype.toString.call(source);
			const res = type === '[object Array]' || type === '[object Object]';
			return res;
		},
		toggleClose() {
			if (this.isShow) {
				this.isShow = false;
			} else {
				this.isShow = true;
			}
		}
	},
	computed: {
		isArray() {
			return Object.prototype.toString.call(this.json) === '[object Array]';
		},
		length() {
			//返回数组长度或对象的属性个数
			return this.isArray ? this.json.length : Object.keys(this.json).length;
		},
		subfix() {
			return (this.isArray ? ']' : '}') + (this.isLast ? '' : ',');
		},
		prefix() {
			return this.isArray ? '[' : '{';
		},
		items() {
			const json = this.json;
			if (this.isArray) {
				return this.json.map(item => {
					const isJSON = this.isObjectOrArray(item);
					//console.log(item)
					return {
						value: item, // isJSON ? item : JSON.stringify(item),
						isJSON, //相当于isJson:isJson
						key: ''
					};
				});
			} else {
				return Object.keys(json).map(key => {
					const item = json[key];
					const isJSON = this.isObjectOrArray(item);
					return {
						value: item, // isJSON ? item : JSON.stringify(item),
						isJSON,
						key
					};
				});
			}
		}
	}
};
</script>
<style lang="scss">
$tab:40upx;//缩进
$font-size:16px;
$colon-size:7px;//冒号两边的间隔
$arrow-size:7px;
$arrow-color:#333;
$key-color:#c35e00;
$index-color:#0000ff;
$vaule-color:#42c800;
.jsonview {
	line-height:$font-size * 1.62;
	font-size:$font-size;
	margin: 0;
	padding-left: $tab;
	white-space: nowrap;
}
.first-line {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	.json-key {
		color:$key-color;
	}
	.json-fold {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
}
.json-body {
	position: relative;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: row;
	.json-item {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		text-align: center;
		margin: 0;
		padding-left: $tab;
		.json-index {
			color:$index-color;
		}
		.json-colon {
			padding:0 $colon-size;
		}
		.json-key {
			color:$key-color;
		}
		.json-value {
			color:$vaule-color;
		}
	}
}
.last-line {
	display: flex;
	flex-direction: row;
	padding-left: 0;
}
.angle {
	position: absolute;
	display: block;
	left: 0;
	text-align: center;

	&::after {
		content: '';
		display: inline-block;
		width: 0;
		height: 0;
		vertical-align: middle;
		border-style: solid;
		border-color:transparent;
		border-top-color: $arrow-color;
		border-width:$arrow-size;
	}
	&.closed::after {
		border-style: solid;
		border-color:transparent;
		border-left-color: $arrow-color;
		border-width:$arrow-size;
	}
	//}
}
</style>