vue封装公共方法、组件

最新推荐文章于 2024-05-04 19:29:41 发布

早起的小笨鸡

最新推荐文章于 2024-05-04 19:29:41 发布

阅读量3.7k

点赞数 2

分类专栏： vue js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_47783830/article/details/125718959

版权

在这段时间工作中，有需求要封装一些公共的方法和组件，下面就介绍一下我的解决方案。

1.在创建public文件夹/pubTool.js文件
在文件中引入vue实例

import Vue from 'vue'
import { Message, MessageBox, Loading } from 'element-ui';

2.使用vue.extend()构造相对于组件的子类，例如：我现在有一个公共页面，图片裁剪页面，主要用来进行图片裁剪上传。代码如下：

<template>
    <div>
        <el-dialog :title="'编辑'+funcName" :visible="visible" style="overflow:hidden;" width="900px" top="5%" :before-close='function(){ visible=false }' :append-to-body="true" :close-on-click-modal="false">
            <div v-loading="loading" :element-loading-text="loadingTitle" :element-loading-spinner="loadingIcon">
                <div style="height:600px">
                    <div class="vue-cropper-box" style="height:500px; ">
                        <div class="vue-cropper-content">
                            <div style="margin-bottom:5px;font-size:12px;color:#999">
                                小贴士：可通过鼠标滚轮放大或缩小图片哦
                            </div>
                            <vueCropper ref="cropper"
                                        @realTime="realTime"
                                        :img="option.img"
                                        :outputSize="option.outputSize"
                                        :outputType="option.outputType"
                                        :canScale="option.canScale"
                                        :autoCrop="option.autoCrop"
                                        :autoCropWidth="option.autoCropWidth"
                                        :autoCropHeight="option.autoCropHeight"
                                        :fixed="option.fixed"
                                        :fixedBox="option.fixedBox"
                                        :fixedNumber="option.fixedNumber"></vueCropper>
                            <el-upload class="avatar-uploader"
                                       action="#"
                                       :auto-upload="false"
                                       :accept="$pubTool.UPLOADIMGFORMAT"
                                       :on-change="(file) => { selectedFile(file, 'coverPath', option.folder, 0, 0,1, 'NONE', true);updateImage()}"
                                       :show-file-list="false">
                                <el-button type="primary" style="margin-top:10px;">重新选择{
  {funcName}}</el-button>
                            </el-upload>
                        </div>
                        <div style="flex:1;box-sizing:border-box;margin-top:17px">
                            <d