<template>
	<!-- 用于包含markdown 文件 -->
	<div class="demo-block-container" :class="blockClass" @mouseover="isShow = true" @mouseout="isShow = false">
		<div class="demo-block-source">
			<slot name="source"></slot>
		</div>
		<!-- 显示代码 -->
		<div v-show="showCode" class="demo-block-code">
			<slot name="highlight"></slot>
		</div>
		<!-- 点击显示 -->
		<div class="demo-block-meta" :class="[isShow ? 'meta' : '']" @click="showCode = !showCode">
			<transition name="icon">
				<!-- 这个name 要换的， 动态绑定 -->
				<i class="icon" :class="showCode ? 'icon-up2' : 'icon-down2'"></i>
			</transition>
			<transition name="text">
				<span v-show="isShow" v-text="showCode? '隐藏代码': '显示代码'"></span>
			</transition>
		</div>
	</div>
</template>
<script>
    import DemoBlock from './demo-block';
    export default DemoBlock;
</script>

<style lang="scss" scoped>
	@import './demo-block';
</style>
