Vue Dialog 패키지 구현
해결 방안 은 두 가지 가 있다.
<template>
<el-dialog :title="title" :visible.sync="visible" append-to-body>
<!-- -->
</el-dialog>
</template>
<script>
export default {
props: ['onOk', ' '],
data() {
return {
visible: false
}
}
}
</script>Vue 2 에서 저 는 개인 적 으로 플러그 인 으로 쓰 는 것 이 좋 을 것 같 습 니 다.다음 과 같이 실 현 됩 니 다.혼합 을 사용 하여 작업 을 하고 업무 와 결합 을 풀 었 습 니 다.
좀 안 좋 은 점 은 구성 요소 가 동적 으로 삽 입 된 것 입 니 다.Vue devtools 는 새로 고 쳐 야 구성 요 소 를 볼 수 있 습 니 다.
const mixin = {
mounted() {
document.body.appendChild(this.$el)
this.visible = true
},
watch: {
visible(value) {
//
if (value === false) {
setTimeout(() => {
this.$destroy()
if (this.$el && this.$el.parentNode) {
this.$el.parentNode.removeChild(this.$el)
}
}, 400)
}
}
}
}
export default {
install(Vue, options) {
Vue.prototype.$dialog = (name, props) => {
// ，
import('../components/dialogs/' + name)
.then(module => {
const component = module.default
const mixins = component.mixins || []
mixins.push(mixin) // ，
component.mixins = mixins
return Vue.extend(component)
})
.then(Dialog => {
const dialog = new Dialog({
propsData: props || {}
})
dialog.$mount()
})
}
}
}
this.$dialog('GroupEdit.vue', {
type: 'edit',
group: {},
onOk: () => {
this.freshList()
}
})
안 좋 은 것 은 Vue 3 의 업그레이드 Vue.extend 가 없어 졌 고$mount 도 없어 졌 기 때문에 구성 요 소 는 응용 프로그램 에서 만 렌 더 링 할 수 있 습 니 다.
모든 응용 프로그램 간 의 데 이 터 는 격 리 되 어 있 기 때문에 플러그 인 같은 것 은 다시 도입 해 야 합 니 다.또한 상호작용 을 하려 면 귀 찮 습 니 다.같은 vuex 인 스 턴 스 를 도입 하면 되 겠 지만 별로 시도 하지 않 았 습 니 다.
낮은 결합 을 위해 서 는 렌 더 링 을 마 운 트 하기 위해 새 애플 리 케 이 션 을 만 들 수 있 습 니 다.
import { createApp, defineComponent } from 'vue'
import ElementPlus from 'element-plus'
const mixin = {
mounted() {
document.body.appendChild(this.$el)
this.visible = true
},
watch: {
visible(value) {
//
if (value === false) {
setTimeout(() => {
this.$.appContext.app.unmount()
}, 400)
}
}
}
}
export default {
install(app) {
app.config.globalProperties.$dialog = (name, props) => {
import('../components/dialogs/' + name)
.then(module => {
const component = module.default
let mixins = component.mixins || []
mixins.push(mixin)
component.mixins = mixins
return defineComponent(component)
})
.then(Dialog => {
const app = createApp(Dialog, props || {})
app.use(ElementPlus)
app.mount(document.createElement('div'))
})
}
}
}
Vue 3 에서 플러그 인 버 전의 쓰기 도 요구 에 도 달 했 지만 완전히 새로운 인용 응용 프로그램 입 니 다.업무 중 this.$root,vuex,router 를 방문 하면 좀 귀 찮 습 니 다.
그래서 Vue 3 에 서 는 동적 구성 요 소 를 쓰 는 게 좋 을 것 같 아 요.
루트 구성 요소 에 동적 component 를 도입 하여 제어 변 수 를 정의 합 니 다.
<template>
<router-view></router-view>
<component :is="currentDialog" v-bind="currentDialogProps" />
</template>
<script>
export default {
data() {
return {
currentDialog: null,
currentDialogProps: null
}
}
}
</script>
const app = createApp(App)
const vm = app.mount('#app')
initDialog(app, vm)
function initDialog(app, vm) {
const mixin = {
mounted() {
this.visible = true
},
watch: {
visible(value) {
//
if (value === false) {
setTimeout(() => {
this.$root.currentDialog = null
this.$root.currentDialogProps = {}
}, 400)
}
}
}
}
app.config.globalProperties.$dialog = (name, props) => {
import('./components/dialogs/' + name).then(module => {
const component = module.default
let mixins = component.mixins || []
mixins.push(mixin)
component.mixins = mixins
// defineComponent(component)
vm.currentDialog = markRaw(component)
vm.currentDialogProps = markRaw(props || {})
})
}
}
vue 3 구성 요소 인 스 턴 스 가 져 오기 응용 인 스 턴 스
vm.$.appContext.app == app
app._instance.proxy == vm
app._instance.root.proxy == vm
app._instance.ctx.$root == vm
const app = createApp(App)
const vm = app.mount('#app')
if (process.env.NODE_ENV === 'production') {
app._instance = {
proxy: vm,
root: {
proxy: vm
},
ctx: {
$root: vm
}
}
}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
