tn-element-ui
Version:
element-ui二次封装
67 lines (64 loc) • 1.92 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>
.horn-container-wrapper,
.horn-container {
height: 100px;
}
.horn-container-wrapper {
position: relative;
}
</style>
</head>
<body class="tn-background-normal">
<div id="app">
<h2>v-horn</h2>
<hr />
<h4>v-horn</h4>
<div class="horn-container tn-bordered" v-horn></div>
<h4>v-horn.click</h4>
<div class="horn-container tn-bordered" v-horn.click></div>
<h4>v-horn="expression"</h4>
<h5>
<span>showHorn: {{ isShowHorn }}</span>
<el-switch
v-model="isShowHorn"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</h5>
<div class="horn-container tn-bordered" v-horn="isShowHorn"></div>
<h4>v-horn container style has position</h4>
<div class="tn-bordered horn-container-wrapper" cellpadding>
<div class="tn-absolute-fit" bordered v-horn>
命中`[class^="tn-"][bordered]`选择器
</div>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
isShowHorn: false,
},
methods: {},
})
</script>
</body>
</html>