vue开发中经常使用的代码片段

屋昂仼

已于 2023-05-16 17:21:45 修改

阅读量638

点赞数

文章标签： vue.js javascript 前端

于 2023-03-15 11:09:49 首次发布

本文链接：https://blog.csdn.net/jmszl1991/article/details/129546151

版权

vue开发中高频次使用到的一些代码片段，方便以后ctrl+C ctrl+v。

请注意，文中代码并不能直接无脑CV，有些只是示例代码，需要结合自己需求进行个性化修改。

第一，导出文件

一个导出excel的例子。

// 第一： vue 内部方法

exportExcel () {
    requestExport(id).then(res => {
        // 注意这个地方的type 根据需要导出文件的类型填写
        const href = window.URL.createObjectURL(new Blob([res.data], {type: xxxxx}));
        const link = document.createElement('a');
        link.style.display = 'none';
        link.href = href;
        // 这里的文件名 后台数据中返回 就取出来，否则就写一个固定名称就可以
        let contentDisposition = decodeURI(res.headers['content-disposition']);
        let filename = contentDisposition .substring(contentDisposition.indexOf('=') + 1).trim().replace("utf-8''", '');
        link.setAttribute('download', filename);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(href);
    }).catch(err => {
        console.log('导出报错', err);
    })
}



// 第二： 接口 注意 responseType要为blob。
export function requestExport (id) {
    return axios({
        url: 'xxx',
        method: 'get',
        responseType: 'blob' // 很重要
    })
}


// 第三：如果封装了axios，需要再响应拦截中返回整个response。
// 如果是二进制数据 需要整日返回 response
if (res.requset.responseType == 'blob' || res.requset.responseType == 'arrayBuffer') {
    return res;
}

第二，文件上传

一个上传图片和视频的例子。

// 第一：el-upload 上传
<el-upload
  class="upload-demo"
  action="#"
  :auto-upload="false"
  multiple
  :limit="5"
  accept=".png, .jpg, .jpeg, .gif, .bmp, .mp4, .avi"  
  list-type="picture-card">
  <i slot="default" class="el-icon-plus"></i>
  <div slot="tip" class="el-upload__tip">只能上传图片和视频文件，且不超过10MB</div>
  <div slot="file" slot-scope="{file}">
    <img :src="file.url" v-if="如果是图片的话显示这个缩略图"/>
    <img :src="视频的封面图片" v-if="如果是视频的话显示这个缩略图"/>
    <span class="el-upload-list__item-actions">
        <span class="el-upload-list__item-preview"         
        @click="handlePictureCardPreview(file)">
            <i class="el-icon-zoom-in"></i>
        </span>
        <span class="el-upload-list__item-delete"         
        @click="handleRemove(file)">
            <i class="el-icon-delete"></i>
        </span>
    </span>
  </div>
</el-upload>

// 图片视频预览
<el-dialog append-to-body :visible.sync="imgdialogVisible">
    <img v-if="如果是图片" width="100%" :src="dialogImageUrl" alt=""/>
    <video
    v-else
    width="100%"
    height="450"
    controls
    :src="dialogImageUrl"
    ></video>
</el-dialog>


// 第二：上传方法
handlePictureCardPreview (file) {
    if (图片) {
        this.showIMG = true;
    } else {
        this.showIMG = false;
    }
    this.dialogImageUrl = file.url;
    this.imgdialogVisible = true;
},


// 上传图片
submitImgs () {
    // 判断格式和尺寸是否符合需求
    const FORMAT = this.$refs.imgUpload.uploadFiles.every(item => [.png, .jpg, .jpeg, .gif, .bmp, .mp4, .avi].includes(item.name.slice(item.name.indexOf('.'))))
    if (!FORMAT) {
        this.$message({
            type: 'warning',
            message: '格式不对'
        })
        this.$refs.imgUpload.clearFiles();
        return
    }

    const SIZE = this.$refs.imgUpload.uploadFiles.some(item => item.size > 1024 * 1024 * 10)

    if (SIZE) {
        this.$message({
            type: 'warning',
            message: '大小不能超出10MB'
        })
        this.$refs.imgUpload.clearFiles();
        return
    }

    let list = this.$refs.imgUpload.uploadFiles.map(item => item.raw);

    let formdata = new FormData();

    list.forEach(file => {
        formdata.append('fileList', file)
    })
    
    // 然后调用方法 传递formdata上传即可
    
},

第三，合并单元格

一个合并所有具有相同值列的例子。

// 第一：表格
<el-table
  :data="data"
  :span-method="(...arg) => strategySpanMethod(...arg, data)"
  v-loading="loading"
  size="mini"
  border
  highlight-current-row="true"
>


// 第二: 表格方法
// 合并单元格函数
strategySpanMethod: function (
  { row, column, rowIndex, columnIndex },
  data
) {
  // data 就是从这里动态传过来的, column.property是表头的key
  var spanArr = this.getSpanArr(data, column.property);
  const _row = spanArr[rowIndex];
  const _col = _row > 0 ? 1 : 0;
  return {
    rowspan: _row,
    colspan: _col,
  };
},


// 处理合并行的数据
getSpanArr(data, spanKey) {
  var spanArr = [];
  var pos = "";
  for (var i = 0; i < data.length; i++) {
    if (i === 0) {
      spanArr.push(1);
      pos = 0;
    } else {
      // 判断当前元素与上一个元素是否相同
      if (data[i][spanKey] === data[i - 1][spanKey]) {
        spanArr[pos] += 1;
        spanArr.push(0);
      } else {
        spanArr.push(1);
        pos = i;
      }
    }
  }
  return spanArr;
},

第四，表格，分页，筛选

// 第一： 表格，分页和筛选

// 筛选

<el-form :model="filterForm">
    <el-row :gutter="10">
        <el-col :span="5">
            <el-input v-model="filterForm.name"></el-input>
        </el-col>
        <el-col :span="5">
            <el-select v-model="filterForm.id">
                <el-option 
                v-for="dict in dicts" 
                :key="dict.value" 
                :label="dict.label"
                :value="dict.value">                
                </el-option>
            </el-select>
        </el-col>
    </el-row>
</el-form>

// 表格
<el-table>

// 分页组件
<page 
v-show="total > 0"
:total="total"
:page.sync="query.pageNum"
:limit.sync="query.pageSize"
@pagination="getList"
/>

// page组件封装
<div>
    <el-pagination 
    :background="background"
    :current-page.sync="currentPage"
    :page-size.sync="pageSize"
    :layout="layout"
    :page-sizes="pageSizes"
    :page-count="pagerCount"
    :total="total"
    v-bind="$attrs"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    />
</div>
props: {
    total: {
        required: true,
        type: Number,
    },
    page: {
        
        type: Number,
        default: 1
    },
    limit: {
        default: 20
        type: Number,
    },
    pageSizes: {
        type: Array,
        default () {
            return [10, 20, 30, 50]
        }
    },
    pagerCount: {
        type: Number,
        default: document.body.clientWidth < 992 ? 5 : 7;
    },
    layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
    },
    background: { 
        type: Boolean,
        default: true
    },
    hidden: {
        type: Boolean,
        default: false
   }
}

computed: {
    currentPage: {
        get () {
            return this.page
        },
        set (val) {
            this.$emit('update:page', val)
        },
    },
    pageSize: {
        get () {
            return this.limit
        },
        set (val) {
            this.$emit('update:limit', val)
        },
    }
},
handleSizeChange (val) {
    this.$eimt('pagination', {page: this.currentPage, limit: val})
},

handleCurrentChange (val) {
    this.$eimt('pagination', {page: val, limit: this.pageSIze})
},


// 第二：搜索和重置的方法
handleQuery () {
    this.getTableList();
}

handleReset () {
    this.filterForm = this.$options.data().filterForm;
    this.getTableList();
}

未完待更新......