网站栏目策划方案,杭州经济技术开发区建设局网站,网站建设合作签约报道,辽宁工业大学教务管理系统背景
npm i -S view-design当前老项目使用view-design这个组件库#xff0c;但是当我们去官网查看该组件库最新版本#xff0c;竟然发现没有博主想用的image/ImagePreivew这两个基础组件
说实话#xff0c;有点离谱了哈#xff01;#xff01;
自己造轮子#xff1f; …背景
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 tobody :disabled!transfer.../teleport更改为
div v-transfer-dom :data-transfertransfer...
/div写到最后
使用方式同view-ui-plus的Image/ImagePreview组件, 直接查看使用即可。
如果帮助到大家帮忙点个免费的赞就行啦让博主知道帮到了大家开心开心
