子组件
<template>
<div class="BannerForm">
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai" />
<el-option label="区域二" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker v-model="form.date1" type="date" placeholder="选择日期" style="width: 100%;" />
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker v-model="form.date2" placeholder="选择时间" style="width: 100%;" />
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery" />
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type" />
<el-checkbox label="地推活动" name="type" />
<el-checkbox label="线下主题活动" name="type" />
<el-checkbox label="单纯品牌曝光" name="type" />
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助" />
<el-radio label="线下场地免费" />
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input v-model="form.desc" type="textarea" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'BannerForm',
data() {
return {
msg: '',
form: {
name: '',
img64: '',
link: '',
number: '',
state: ''
}
}
},
mounted() {
},
methods: {
onSubmit() {
console.log(this.form)
}
}
}
</script>
<style scoped>
</style>
注册组件
import Vue from 'vue'
import BannerForm from './form'
Vue.component(BannerForm.name, BannerForm)
引用组件页面
```javascript
<template>
<div class="app-container">
<transition name="transition">
<div v-if="mask == true" class="mask" />
</transition>
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="顶部轮播图" name="first">
<el-button type="primary" @click="changemask">添加轮播图</el-button>
<transition name="transition">
<div v-if="mask == true" class="formbox" @click="ResetMask">
<div class="form" @click="StopResetMask">
<bannerform>此处引用组件</bannerform>
</div>
</div></transition>
<el-table
:data="tableData"
height="250"
border
style="width: 100%"
>
<el-table-column
prop="number"
label="排序"
width="100"
/>
<el-table-column
prop="name"
label="名称"
width="180"
/>
<el-table-column
prop="address"
label="链接地址"
width="180"
/>
<el-table-column
prop="image"
label="图片"
width="400"
/>
<el-table-column
prop="lasttime"
label="最后操作时间"
width="180"
/>
<el-table-column
prop="state"
label="状态"
width="180"
/>
<el-table-column
prop="edit"
label="操作"
width="180"
/>
</el-table>
</el-tab-pane>
<el-tab-pane label="底部导航" name="second">底部导航</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
activeName: 'first',
msg: '',
mask: false,
// form表单数据
form: {
name: '',
img64: '',
link: '',
number: '',
state: ''
}
}
},
created() {
},
mounted() {
},
methods: {
handleClick(tab, event) {
console.log(tab, event)
console.log(process.env.VUE_APP_BASE_API)
},
changemask() {
console.log(this)
this.mask = true
console.log(this.mask)
},
ResetMask() {
this.mask = false
},
StopResetMask(e) {
e.stopPropagation()
}
}
}
</script>
```
