mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-08-06 19:07:25 +08:00
升级Vue3，iView替换ElementPlus
- 删除babel配置、更新依赖与入口初始化 - 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本
This commit is contained in:
lifenlong
@@ -1,49 +1,57 @@
|
||||
import Vue from 'vue'
|
||||
import Clickoutside from 'element-ui/src/utils/clickoutside'
|
||||
function onClickOutside(el, binding) {
|
||||
const handler = (e) => {
|
||||
if (!el.contains(e.target)) {
|
||||
binding.value(e);
|
||||
}
|
||||
};
|
||||
el.__clickOutsideHandler__ = handler;
|
||||
document.addEventListener("click", handler);
|
||||
}
|
||||
|
||||
// 自定义聚焦指令
|
||||
Vue.directive('focus', {
|
||||
inserted(el) {
|
||||
el.focus()
|
||||
},
|
||||
})
|
||||
function offClickOutside(el) {
|
||||
if (el.__clickOutsideHandler__) {
|
||||
document.removeEventListener("click", el.__clickOutsideHandler__);
|
||||
delete el.__clickOutsideHandler__;
|
||||
}
|
||||
}
|
||||
|
||||
// 自定义粘贴指令
|
||||
Vue.directive('paste', {
|
||||
bind(el, binding, vnode) {
|
||||
el.addEventListener('paste', function(event) {
|
||||
//这里直接监听元素的粘贴事件
|
||||
binding.value(event)
|
||||
})
|
||||
},
|
||||
})
|
||||
export function registerDirectives(app) {
|
||||
app.directive("focus", {
|
||||
mounted(el) {
|
||||
el.focus();
|
||||
},
|
||||
});
|
||||
|
||||
// 自定义拖拽指令
|
||||
Vue.directive('drag', {
|
||||
bind(el, binding, vnode) {
|
||||
// 因为拖拽还包括拖动时的经过事件，离开事件，和进入事件，放下事件，
|
||||
// 浏览器对于拖拽的默认事件的处理是打开拖进来的资源，
|
||||
// 所以要先对这三个事件进行默认事件的禁止
|
||||
el.addEventListener('dragenter', function(event) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
})
|
||||
el.addEventListener('dragover', function(event) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
})
|
||||
el.addEventListener('dragleave', function(event) {
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
})
|
||||
el.addEventListener('drop', function(event) {
|
||||
// 这里阻止默认事件，并绑定事件的对象，用来在组件上返回事件对象
|
||||
event.stopPropagation()
|
||||
event.preventDefault()
|
||||
binding.value(event)
|
||||
})
|
||||
},
|
||||
})
|
||||
app.directive("paste", {
|
||||
mounted(el, binding) {
|
||||
el.addEventListener("paste", (event) => {
|
||||
binding.value(event);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// 点击其他地方隐藏指令
|
||||
Vue.directive('outside', Clickoutside)
|
||||
app.directive("drag", {
|
||||
mounted(el, binding) {
|
||||
const stop = (event) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
};
|
||||
el.addEventListener("dragenter", stop);
|
||||
el.addEventListener("dragover", stop);
|
||||
el.addEventListener("dragleave", stop);
|
||||
el.addEventListener("drop", (event) => {
|
||||
stop(event);
|
||||
binding.value(event);
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
app.directive("outside", {
|
||||
mounted(el, binding) {
|
||||
onClickOutside(el, binding);
|
||||
},
|
||||
unmounted(el) {
|
||||
offClickOutside(el);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import Vue from "vue";
|
||||
import {
|
||||
AudioMessage,
|
||||
CodeMessage,
|
||||
@@ -16,22 +15,29 @@ import {
|
||||
VoteMessage,
|
||||
LoginMessage,
|
||||
} from "@/components/chat/messaege";
|
||||
|
||||
Vue.component(AudioMessage.name, AudioMessage);
|
||||
Vue.component(CodeMessage.name, CodeMessage);
|
||||
Vue.component(ForwardMessage.name, ForwardMessage);
|
||||
Vue.component(ImageMessage.name, ImageMessage);
|
||||
Vue.component(TextMessage.name, TextMessage);
|
||||
Vue.component(VideoMessage.name, VideoMessage);
|
||||
Vue.component(VoiceMessage.name, VoiceMessage);
|
||||
Vue.component(SystemTextMessage.name, SystemTextMessage);
|
||||
Vue.component(FileMessage.name, FileMessage);
|
||||
Vue.component(InviteMessage.name, InviteMessage);
|
||||
Vue.component(RevokeMessage.name, RevokeMessage);
|
||||
Vue.component(VisitCardMessage.name, VisitCardMessage);
|
||||
Vue.component(ReplyMessage.name, ReplyMessage);
|
||||
Vue.component(VoteMessage.name, VoteMessage);
|
||||
Vue.component(LoginMessage.name, LoginMessage);
|
||||
|
||||
import UserCard from "@/components/user/user-card/index";
|
||||
Vue.use(UserCard);
|
||||
|
||||
const messageComponents = [
|
||||
AudioMessage,
|
||||
CodeMessage,
|
||||
ForwardMessage,
|
||||
ImageMessage,
|
||||
TextMessage,
|
||||
VideoMessage,
|
||||
VoiceMessage,
|
||||
SystemTextMessage,
|
||||
FileMessage,
|
||||
InviteMessage,
|
||||
RevokeMessage,
|
||||
VisitCardMessage,
|
||||
ReplyMessage,
|
||||
VoteMessage,
|
||||
LoginMessage,
|
||||
];
|
||||
|
||||
export function registerGlobalComponents(app) {
|
||||
messageComponents.forEach((component) => {
|
||||
app.component(component.name, component);
|
||||
});
|
||||
app.use(UserCard);
|
||||
}
|
||||
|
||||
@@ -1,22 +1,21 @@
|
||||
/**
|
||||
* Custom icon list
|
||||
* All icons are loaded here for easy management
|
||||
*
|
||||
* 自定义图标加载表
|
||||
* 所有图标均从这里加载，方便管理
|
||||
*/
|
||||
import SvgMentionDown from '@/icons/svg/mention-down.svg?inline' // path to your '*.svg?inline' file.
|
||||
import SvgNotFount from '@/icons/svg/not-fount.svg?inline' // path to your '*.svg?inline' file.
|
||||
import SvgNote from '@/icons/svg/note.svg?inline' // path to your '*.svg?inline' file.
|
||||
import SvgNoteBook from '@/icons/svg/note-book.svg?inline' // path to your '*.svg?inline' file.
|
||||
import SvgNotData from '@/icons/svg/not-data.svg?inline' // path to your '*.svg?inline' file.
|
||||
import SvgZhuangFa from '@/icons/svg/zhuangfa.svg?inline' // path to your '*.svg?inline' file.
|
||||
import { h } from "vue";
|
||||
|
||||
export {
|
||||
SvgMentionDown,
|
||||
SvgNotFount,
|
||||
SvgNote,
|
||||
SvgNoteBook,
|
||||
SvgNotData,
|
||||
SvgZhuangFa,
|
||||
function createSvgIcon(name) {
|
||||
return {
|
||||
name: `SvgIcon_${name}`,
|
||||
inheritAttrs: false,
|
||||
render() {
|
||||
return h("svg-icon", {
|
||||
iconClass: name,
|
||||
...this.$attrs,
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export const SvgMentionDown = createSvgIcon("mention-down");
|
||||
export const SvgNotFount = createSvgIcon("not-fount");
|
||||
export const SvgNote = createSvgIcon("note");
|
||||
export const SvgNoteBook = createSvgIcon("note-book");
|
||||
export const SvgNotData = createSvgIcon("not-data");
|
||||
export const SvgZhuangFa = createSvgIcon("zhuangfa");
|
||||
|
||||
@@ -1,88 +0,0 @@
|
||||
import Vue from 'vue'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
|
||||
import {
|
||||
Notification,
|
||||
Popover,
|
||||
Switch,
|
||||
Dropdown,
|
||||
DropdownMenu,
|
||||
DropdownItem,
|
||||
Message,
|
||||
Container,
|
||||
Header,
|
||||
Aside,
|
||||
Main,
|
||||
Footer,
|
||||
Menu,
|
||||
Submenu,
|
||||
MenuItem,
|
||||
MenuItemGroup,
|
||||
Button,
|
||||
Image,
|
||||
Loading,
|
||||
Row,
|
||||
Col,
|
||||
MessageBox,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
Divider,
|
||||
Link,
|
||||
Tooltip,
|
||||
Autocomplete,
|
||||
Scrollbar,
|
||||
Avatar,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Progress,
|
||||
Dialog,
|
||||
Checkbox,
|
||||
Tag
|
||||
} from 'element-ui'
|
||||
|
||||
Vue.use(Popover)
|
||||
Vue.use(Switch)
|
||||
Vue.use(Dropdown)
|
||||
Vue.use(DropdownMenu)
|
||||
Vue.use(DropdownItem)
|
||||
Vue.use(Container)
|
||||
Vue.use(Header)
|
||||
Vue.use(Aside)
|
||||
Vue.use(Main)
|
||||
Vue.use(Footer)
|
||||
Vue.use(Menu)
|
||||
Vue.use(Submenu)
|
||||
Vue.use(MenuItem)
|
||||
Vue.use(MenuItemGroup)
|
||||
Vue.use(Button)
|
||||
Vue.use(Image)
|
||||
Vue.use(Row)
|
||||
Vue.use(Col)
|
||||
Vue.use(Input)
|
||||
Vue.use(Form)
|
||||
Vue.use(FormItem)
|
||||
Vue.use(Divider)
|
||||
Vue.use(Link)
|
||||
Vue.use(Tooltip)
|
||||
Vue.use(Autocomplete)
|
||||
Vue.use(Scrollbar)
|
||||
Vue.use(Avatar)
|
||||
Vue.use(Radio)
|
||||
Vue.use(Checkbox)
|
||||
Vue.use(RadioGroup)
|
||||
Vue.use(Progress)
|
||||
Vue.use(Dialog)
|
||||
Vue.use(Tag)
|
||||
Vue.use(Loading.directive)
|
||||
|
||||
Vue.prototype.$notify = Notification
|
||||
Vue.prototype.$message = Message
|
||||
Vue.prototype.$confirm = MessageBox.confirm
|
||||
Vue.prototype.$prompt = MessageBox.prompt
|
||||
Vue.prototype.$alert = MessageBox.alert
|
||||
|
||||
import Contextmenu from 'vue-contextmenujs'
|
||||
Vue.use(Contextmenu)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user