tn-element-ui
Version:
element-ui二次封装
85 lines (82 loc) • 2.59 kB
HTML
<html lang="zh">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>visual-ui__time-axis-player</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" class="tn-absolute-fit tn-flex-box" direction="column">
<h2>time-axis-player</h2>
<hr />
<el-form :inline="true" :model="formInline" class="tn-flex-box">
<el-form-item label="默认展示">
<el-switch
v-model="timeAxisPlayerVisible"
active-color="#13ce66"
inactive-color="#ff4949"
></el-switch>
</el-form-item>
<el-form-item label="开始时间">
<el-date-picker
v-model="formInline.rangeStart"
type="date"
format="yyyy-MM-dd"
placeholder="选择日期">
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间">
<el-date-picker
v-model="formInline.rangeEnd"
type="datetime"
placeholder="选择日期"
></el-date-picker>
</el-form-item>
</el-form>
<div size="1" style="background: #333; padding-top: 40px;border: 4px solid #4aaaef;">
<tn-time-axis-play-bar
:visible.sync="timeAxisPlayerVisible"
:range-start="formInline.rangeStart"
:range-end="formInline.rangeEnd"
v-on:load-date="loadDate"
></tn-time-axis-play-bar>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data () {
return {
formInline: {
rangeStart: new Date(),
rangeEnd: undefined
},
timeAxisPlayerVisible: true,
}
},
methods: {
loadDate (data) {
console.log('[loadDate]', data)
}
}
});
</script>
</body>
</html>