tn-element-ui
Version:
element-ui二次封装
66 lines (63 loc) • 2.02 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></style>
</head>
<body class="tn-background-normal">
<div id="app">
<h2>el-tab-pane</h2>
<hr />
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">
<span slot="label">
<span>定时任务补偿</span>
<el-badge :value="tasksCount"></el-badge>
</span>
定时任务补偿 tasksCount：{{ tasksCount }}
<el-button
icon="el-icon-minus"
circle
@click="tasksCount--"
></el-button>
<el-button
icon="el-icon-plus"
circle
@click="tasksCount++"
></el-button>
</el-tab-pane>
</el-tabs>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
activeName: 'fourth',
tasksCount: 15,
},
methods: {
handleClick(tab, event) {
console.log(tab, event)
},
},
})
</script>
</body>
</html>