vue-elemen实现抽屉功能

​​​​

前言

参考了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>

五、效果如图所示：

点击按钮导出，出现如下效果