tn-element-ui
Version:
element-ui二次封装
100 lines (96 loc) • 3.06 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>
.stretch-wrapper-demo {
position: fixed;
z-index: 1;
transform: translateX(400px) translateY(300px);
color: #fff;
}
.stretch-wrapper-demo .tn-stretch-wrapper {
border: 2px solid #ccc;
background: #333;
}
</style>
</head>
<body class="tn-background-normal">
<div id="app" class="tn-absolute-fit tn-flex-box" direction="column">
<h2>StretchWrapper</h2>
<hr />
<tn-v-box size="1" content-spacing>
<div>switchPostion(默认居右): {{ switchPostion || String(switchPostion) }}</div>
<div>
<el-radio-group v-model="switchPostion">
<el-radio
v-for="item in ['left', 'right', 'top', 'bottom']"
:key="item"
:label="item">{{ item }}</el-radio>
</el-radio-group>
</div>
<div>
$slots['arrow-right-icon']:
<el-switch
v-model="hasArrowRightIconSlot"
active-color="#13ce66"
inactive-color="#ff4949"
>
</el-switch>
</div>
<div
size="1"
class="tn-flex-box"
justify-content='center'
align-items='center'
v-bind:style="contentStyle"
@click="clickHandler">
click me
</div>
</tn-v-box>
<tn-stretch-wrapper
class="stretch-wrapper-demo"
:switch-postion="switchPostion"
:switch-expanded-style="switchExpandedStyle"
>
<div style="width: 300px; height: 300px; margin: 10px; border: 2px solid #ccc;">content</div>
<i v-if="hasArrowRightIconSlot" slot="arrow-right-icon" class="el-icon-caret-right"></i>
</tn-stretch-wrapper>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
switchPostion: undefined,
switchExpandedStyle: {
color: 'red'
},
contentStyle: {
backgroundColor: '#ccc',
fontSize: '100px'
},
hasArrowRightIconSlot: true
},
methods: {
clickHandler () {
this.contentStyle.backgroundColor = `#${Math.random().toString(16).substr(2, 6).toUpperCase()}`
}
}
})
</script>
</body>
</html>