前言
参考了element组件的抽屉部分,实现了点击按钮,抽屉展开的效果,使用的工具是vs code,希望对大家有用。
一、首先在components文件夹里新建文件夹,再在文件夹里新建一个vue文件,如图所示:
二、里面的内容可以参考element相关文档,这里附上网址:Element - The world's most popular Vue UI framework
这里是我自己的内容,请参考:
<template>
<div id="exportbutton">
<el-form :model="form" class="form" ref="form" label-width="100px">
<el-form-item label="文件名称">
<el-input v-model="form.filename" placeholder="请输入文件名最大30位" maxlength="30"></el-input>
</el-form-item>
<el-form-item label="文件标签">
<el-select v-model="form.filetitle" placeholder="待处理订单">
<el-option label="待处理订单" value="dai"></el-option>
<el-option label="我的订单" value="wode"></el-option>
<el-option label="已完成订单" value="yiwancheng"></el-option>
</el-select>
</el-form-item>
<el-form-item label="导出字段">
<el-card>
<el-row>
<el-col :span="2"></el-col>
<el-col :span="4">
<div>机票订单信息</div>
</el-col>
<el-col :span="5"> </el-col>
<el-col :span="5"> </el-col>
<el-col :span="4">
<el-button type="warning" v-model="changeSelect" @click="selectAllCities">全选</el-button>
</el-col>
<el-col :span="4">
<div>
<el-button v-model="changeReset" @click="resetAllCities" type="warning">清空</el-button>
</div>
</el-col>
</el-row>
<el-row >
<el-checkbox-group v-model="checkedCities">
<el-col :span="4" v-for="city in cities" :label="city" :key="city">
<el-checkbox :label="city">{{city}}</el-checkbox>
</el-col>
</el-checkbox-group>
</el-row>
</el-card>
</el-form-item>
<el-form-item label="">
<el-card>
<el-row>
<el-col :span="2"></el-col>
<el-col :span="4">
<div>机票订单航程信息</div>
</el-col>
<el-col :span="5"> </el-col>
<el-col :span="5"> </el-col>
<el-col :span="4">
<el-button type="warning" v-model="changeSelect2" @click="selectAllCities2">全选</el-button>
</el-col>
<el-col :span="4">
<div>
<el-button v-model="changeReset2" @click="resetAllCities2" type="warning">清空</el-button>
</div>
</el-col>
</el-row>
<el-row >
<el-checkbox-group v-model="checkedCities2">
<el-col :span="4" v-for="city2 in cities2" :label="city2" :key="city2">
<el-checkbox :label="city2">{{city2}}</el-checkbox>
</el-col>
</el-checkbox-group>
</el-row>
</el-card>
</el-form-item>
<el-form-item label="">
<el-card>
<el-row>
<el-col :span="2"></el-col>
<el-col :span="4">
<div>机票订单明细信息</div>
</el-col>
<el-col :span="5"> </el-col>
<el-col :span="5"> </el-col>
<el-col :span="4">
<el-button type="warning" v-model="changeSelect3" @click="selectAllCities3">全选</el-button>
</el-col>
<el-col :span="4">
<div>
<el-button v-model="changeReset3" @click="resetAllCities3" type="warning">清空</el-button>
</div>
</el-col>
</el-row>
<el-row >
<el-checkbox-group v-model="checkedCities3">
<el-col :span="4" v-for="city3 in cities3" :label="city3" :key="city3">
<el-checkbox :label="city3">{{city3}}</el-checkbox>
</el-col>
</el-checkbox-group>
</el-row>
</el-card>
</el-form-item>
<el-form-item>
<el-row>
<el-col :span="8"></el-col>
<el-col :span="6"></el-col>
<el-col :span="10">
<el-button @click="onSubmit00">取消</el-button>
<el-button type="danger" @click="onSubmit">立即导出</el-button>
<el-button type="danger" @click="onSubmit0">任务导出</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
</div>
</template>
<script>
const cityOptions = ['订单状态', 'PNR', '啊实打实的', '深大', '哦i解耦', '哦就你', '爱的','撒旦','阿斯顿','爬服里',
'萨蒂','广东省','土豆粉', 'sad'
];
const cityOptions2 = ['鞥态', 'PNR', '看过回复', '深大', '哦i解耦', '哦就你', '爱的','撒旦','阿斯顿','爬服里',
'萨蒂','广东省','土豆粉', '发啊发'
];
const cityOptions3 = ['鞥态', 'PNR', '看过回复', '深大', '哦i解耦', '哦就你', '爱的','撒旦','阿斯顿','爬服里',
'萨蒂','广东省','土豆粉', '发啊发'
];
export default {
name: 'exportbutton',
data() {
return{
changeSelect: false,
cities: cityOptions,
checkedCities: ['订单状态', 'PNR'],
changeSelect2: false,
cities2: cityOptions2,
checkedCities2: ['土豆粉', '撒旦'],
changeSelect3: false,
cities3: cityOptions3,
checkedCities3: ['爬服里', '撒旦'],
form: {
filename: '',
filetitle: ''
},
}
},
watch: {
},
methods: {
selectAllCities() {
this.checkedCities = this.cities;
},
resetAllCities(){
this.checkedCities = [];
},
selectAllCities2() {
this.checkedCities2 = this.cities2;
},
resetAllCities2(){
this.checkedCities2 = [];
},
selectAllCities3() {
this.checkedCities3 = this.cities3;
},
resetAllCities3(){
this.checkedCities3 = [];
},
}
}
</script>
<style lang="scss" scoped>
.el-row {
margin-bottom: 2px;
&:last-child {
margin-bottom: 0;
}
}
.el-col {
border-radius: 4px;
}
.row-bg {
padding: 10px 0;
background-color: #f9fafc;
}
</style>
三、在你的主页面上的script部分添加如下代码,导入之前创建的组件
import exportbutton from '@/components/exportcomponent/exportbutton.vue';
export default {
components: { exportbutton },
并在data下添加
return{
name: 'App',
components: {
exportbutton
},
}
四、在你需要的按钮下添加如下代码,设置抽屉,有需要可以进行微调
<el-button type="warning" class="botton1" @click="drawer = true">导出</el-button>
<el-drawer
title="我是标题"
size= 50%
:visible.sync="drawer"
:with-header="false">
<div id="App">
<exportbutton></exportbutton>
</div>
</el-drawer>
五、效果如图所示:
点击按钮导出,出现如下效果