vuepress - 简答演示如何导入UI演示组件

以前就看Element UI 和 微信小程序的UI组件在网页上运行，就觉得很不可思议！

目前自己需要做一套基于UNIAPP框架的UI演示，发现实现的原理无外乎2种：

 

1. 在H5重新实现一遍，比如Element UI 

 

下面是 s-button.vue 组件内容 ， 仅做一个简单示例

<template>
	<button :class="type">{{ text }}</button>
</template>

<script>
export default {
	name: 's-button',
	props: {
		type: {
			type: String,
			default: 's-blue'
		},
		text: {
			type: String,
			default: '蓝色按钮'
		}
	},
	data() {
		return {};
	}
};
</script>

<style scoped>
.s-blue {
	padding: 6px;
	min-width: 100px;
	border: #999;
	background: #6196cc;
	color: white;
	border-radius: 5px;
	margin-right: 10px;
}
</style>

 

 

vuepress会自动识别组件并且导入， 如果还需要在页面显示代码还需要加入

```
<<<@/filepath
```

 

 

 

 

 

 

2. 使用iframe 嵌入H5端演示页面，通过观察uview 官方文档可以看出来

<iframe data-v-16de2a8a="" scrolling="auto" frameborder="0" src="https://h5.uviewui.com/#/" id="demo-modal" class="iframe"></iframe>

　　

 

 

 

因为小程序的框架实现各有不同，所以只能通过H5移动端去模拟演示效果