背景
npm i -S view-design
当前老项目使用view-design这个组件库，但是当我们去官网查看该组件库最新版本，竟然发现没有博主想用的image/ImagePreivew这两个基础组件
说实话，有点离谱了哈！！
自己造轮子？
貌似为了一天的小需求，不太可能，直接找view-design的弟弟view-ui-plus它的这两个基础组件，然后整合进去
进入主题
- 先给大家介绍一个vs-code的插件，这样大家操作起来会简单点（好有爱的博主！！）
然后利用这个插件，把viewuiplus的源码打开，找到这image/ImagePreivew两个组件的代码，
接下来我会说一下，我们需要更改的部分
- 当你把源码放到项目，那么你项目中就会多出这两个组件的文件夹，就想这样
由于view-design是基于vue2.x版本封装的组件，而view-ui-plus是基于vue3.x写的。拷贝之后，代码中会出现很多新的api和组件使用，我们要一一替换成vue2.x版本的写法。
替换写法【要先初步看看这两个组件的代码哈】
.vue文件
文件中出现的getCurrentInstance()的api，是vue3组合api中用来获取vue实例的，所以我们在vue2中，直接this就可以, 用代码表述意思就是
// vue3
import { getCurrentInstance } from 'vue';
// 获取组件实例
const global = getCurrentInstance().appContext.config.globalProperties;
// vue2
this
但是，这里直接采用固定的默认值就行，举个栗子【其他的同理改】
transfer: {
type: Boolean,
default () {
const global = getCurrentInstance().appContext.config.globalProperties;
return !global.$VIEWUI || global.$VIEWUI.transfer === '' ? false : global.$VIEWUI.transfer;
}
},
替换成
transfer: {
type: Boolean,
default () {
return false;
}
},
image-preview.js
默认都是vue3的写法，它直接使用了vue库中提供的createApp、h、getCurrentInstance, 以及mount方法， 我们改写成vue2写法：
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代码，其他不用的就删掉了
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;
修改导入
// 下面导入可以直接用
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实现了同样的功能，所以就直接用自带的啦
<teleport to="body" :disabled="!transfer">
...
</teleport>
更改为：
<div v-transfer-dom :data-transfer="transfer">
...
</div>
写到最后
使用方式同view-ui-plus的Image/ImagePreview组件, 直接查看使用即可。
如果帮助到大家，帮忙点个免费的赞就行啦，让博主知道帮到了大家开心开心！！！
