tn-element-ui
Version:
element-ui二次封装
85 lines (82 loc) • 2.33 kB
HTML
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Example</title>
<script
type="text/javascript"
src="https://unpkg.zhimg.com/vue@2.6.12/dist/vue.js"
></script>
<!-- 引入样式 -->
<link
rel="stylesheet"
href="https://unpkg.zhimg.com/element-ui@2.15.6/lib/theme-chalk/index.css"
/>
<!-- 引入组件库 -->
<script src="https://unpkg.zhimg.com/element-ui@2.15.6/lib/index.js"></script>
<script type="text/javascript" src="../dist/tn-element-ui.js"></script>
<style>
.client-area {
background: rgba(0, 0, 0, 0.05);
}
</style>
</head>
<body class="tn-background-normal">
<div id="app">
<h2>Flex Layout</h2>
<hr />
<div>
<tn-v-box style="height: 500px">
<tn-h-box size="200px" bordered cellspacing>
<tn-flex-item
size="auto"
class="client-area"
cellspacing
></tn-flex-item>
<tn-splitter cellspacing></tn-splitter>
<tn-flex-item
size="200px"
class="client-area"
cellspacing
></tn-flex-item>
</tn-h-box>
<tn-splitter cellspacing></tn-splitter>
<tn-h-box size="auto">
<tn-flex-item
size="20%"
cellspacing
class="client-area"
bordered
></tn-flex-item>
<tn-flex-item
size="20%"
cellspacing
class="client-area"
bordered
></tn-flex-item>
<tn-flex-item
size="30%"
cellspacing
class="client-area"
bordered
></tn-flex-item>
<tn-flex-item
size="30%"
cellspacing
class="client-area"
bordered
></tn-flex-item>
</tn-h-box>
</tn-v-box>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {},
methods: {},
});
</script>
</body>
</html>