zoukankan      html  css  js  c++  java
  • vuepress

    以前就看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- 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移动端去模拟演示效果

  • 相关阅读:
    JAVA-Map学习
    javaweb--cc1分析(1)
    thinkphp5.0.24 unserialize
    Windows API hook技术
    javaweb-JNDI注入
    了解WMI
    了解PSexec
    Exchange- (CVE-2021-26855)SSRF分析
    递归-实现省市区三级联动
    golang random string
  • 原文地址:https://www.cnblogs.com/cisum/p/14906704.html
Copyright © 2011-2022 走看看