记一次高版本view-design的组件迁移到自身项目的低版本

背景

bash 复制代码
npm i -S view-design

当前老项目使用view-design这个组件库,但是当我们去官网查看该组件库最新版本,竟然发现没有博主想用的image/ImagePreivew这两个基础组件

说实话,有点离谱了哈!!

自己造轮子?

貌似为了一天的小需求,不太可能,直接找view-design的弟弟view-ui-plus它的这两个基础组件,然后整合进去

进入主题

  1. 先给大家介绍一个vs-code的插件,这样大家操作起来会简单点(好有爱的博主!!)

然后利用这个插件,把viewuiplus的源码打开,找到这image/ImagePreivew 两个组件的代码,

接下来我会说一下,我们需要更改的部分

  1. 当你把源码放到项目,那么你项目中就会多出这两个组件的文件夹,就想这样

由于view-design是基于vue2.x版本封装的组件,而view-ui-plus是基于vue3.x写的 。拷贝之后,代码中会出现很多新的api和组件使用,我们要一一替换成vue2.x版本的写法。

替换写法【要先初步看看这两个组件的代码哈】

.vue文件

文件中出现的getCurrentInstance()的api,是vue3组合api中用来获取vue实例的,所以我们在vue2中,直接this就可以, 用代码表述意思就是

javascript 复制代码
// vue3
import { getCurrentInstance } from 'vue';

// 获取组件实例
const global = getCurrentInstance().appContext.config.globalProperties;
javascript 复制代码
// vue2
this

但是,这里直接采用固定的默认值就行,举个栗子【其他的同理改】

javascript 复制代码
transfer: {
    type: Boolean,
    default () {
        const global = getCurrentInstance().appContext.config.globalProperties;
        return !global.$VIEWUI || global.$VIEWUI.transfer === '' ? false : global.$VIEWUI.transfer;
    }
},

替换成

javascript 复制代码
transfer: {
    type: Boolean,
    default () {
        return false;
    }
},

image-preview.js

默认都是vue3的写法,它直接使用了vue库中提供的createApphgetCurrentInstance, 以及mount方法, 我们改写成vue2写法:

javascript 复制代码
ImagePreview.newInstance = properties => {
    if (!isClient) return;
	...

    const Instance = new Vue({
        ...
        render () {
            return h => h(ImagePreview, Object.assign({}, _props, {
                ...
            }));
        },
       ...
        created () {
            _instance = this.$el;
        }
    });

    ...
    Instance.$mount(container);
    ...
};

export default ImagePreview;

迁移一部分工具代码

以下的方法需要自己把源码(在utils中)拷过来,然后导入即可

  • isClient;搬用人家的方法
  • downloadFile; 搬用人家的方法
  • keyCode

// keycode代码,其他不用的就删掉了

javascript 复制代码
const KeyCode = {
    /**
     * ESC
     */
    ESC: 27,
    /**
     * SPACE
     */
    SPACE: 32,
    /**
     * LEFT
     */
    LEFT: 37, // also NUM_WEST
    /**
     * UP
     */
    UP: 38, // also NUM_NORTH
    /**
     * RIGHT
     */
    RIGHT: 39, // also NUM_EAST
    /**
     * DOWN
     */
    DOWN: 40, // also NUM_SOUTH
};

export default KeyCode;

修改导入

javascript 复制代码
// 下面导入可以直接用
import { on, off } from "view-design/src/utils/dom";
import throttle from "lodash.throttle";
// 按照上面的迁移哦
import { isClient, downloadFile } from "../../utils";
// 按照上面的迁移哦
import KeyCode from "../../utils/keyCode";
import { transferIndex, transferIncrease } from "view-design/src/utils/transfer-queue";
import TransferDom from 'view-design/src/directives/transfer-dom';

特殊说明:image-preview.vue

teleport组件是vue3的内置组件,这里起初我用了适合vue2的自定义teleport的组件(感兴趣的可以看看vue2-teleport库 的实现),但是发现view-design中有自定义指令TransferDom实现了同样的功能,所以就直接用自带的啦

javascript 复制代码
 <teleport to="body" :disabled="!transfer">
   ...
 </teleport>

更改为:

javascript 复制代码
<div v-transfer-dom :data-transfer="transfer">
  ...
</div>

写到最后

使用方式同view-ui-plus的Image/ImagePreview组件, 直接查看使用即可。

如果帮助到大家,帮忙点个免费的赞就行啦,让博主知道帮到了大家开心开心!!!

相关推荐
拖孩1 小时前
【Nova UI】十三、打造组件库之按钮组件(中):样式雕琢全攻略
前端·javascript·vue.js
洪洪呀2 小时前
uni-app vue3 实现72小时倒计时功能
vue.js·uni-app
萌萌哒草头将军9 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中9 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊10 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿10 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui
敲厉害的燕宝10 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
麦麦大数据11 小时前
vue+neo4j+flask 音乐知识图谱推荐系统
vue.js·mysql·flask·知识图谱·neo4j·推荐算法·音乐推荐
GUIQU.13 小时前
【Vue】单元测试(Jest/Vue Test Utils)
前端·vue.js
前端张三13 小时前
vue3中ref在js中为什么需要.value才能获取/修改值?
前端·javascript·vue.js