tn-element-ui
Version:
element-ui二次封装
70 lines (67 loc) • 2.09 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 | el-form | inline</h2>
<hr />
<div>
<tn-v-box>
<el-form :inline="true" :model="formInline" class="tn-flex-box">
<el-form-item label="审批人">
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<tn-space></tn-space>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<div>content</div>
</tn-v-box>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
formInline: {
user: '',
region: ''
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
});
</script>
</body>
</html>