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移動端去模擬演示效果