2

I use DevExtreme with Vue.js

I am working on converting the Vuetify UI component to the DevExtreme UI component

I want to add a pop-up in the page, but the pop-up doesn't work normally.

A pop-up tag was created, but the content was empty inside the tag.

I tried many ways, but I couldn't find a solution. help me

This is tag state

<div data-app="true" class="v-application--is--ltr theme--light" id="app">
  <div class="v-application--wrap"> ...page content... </div>

  <!-- popup -->
  <div>
    <div class="dx-overlay dx-popup dx-widget dx-visibility-change-handler">
      <div class="dx-overlay-content dx-popup-nomal" tabindex="0" style="width: 800px; height: 600px;">
        <div class="dx-popup-content"></div>
      </div>
    </div>
  </div>

</div>

This is code

<dx-popup v-model="isOpen" :visible="isOpen" :width="width" :height="height" :show-title="false" :show-close-button="false">
    <div ref="dialog" class="u-dialog">
        <u-layout height="*">
            <u-layout ref="dialogTitle" class="u-dialog-header">
                <div class="pa-0 text-right">
                    <v-btn depressed small icon class="mr-1" color="transparent"
                        v-if="isFullScreen && fullScreen"
                        @click="setFullScreen()"
                    >
                        <v-icon color="white">fullscreen_exit</v-icon>
                    </v-btn>
                    <v-btn depressed small icon class="mr-1" color="transparent"
                        v-if="!isFullScreen && fullScreen"
                        @click="setFullScreen()"
                    >
                        <v-icon color="white">fullscreen</v-icon>
                    </v-btn>
                    <v-btn depressed small icon class="mr-1" color="transparent" @click="closeButtonClick()">
                        <v-icon color="white">close</v-icon>
                    </v-btn>
                </div>
            </u-layout>
            <u-layout ref="dialogContent" height="*" class="u-dialog-content">
                <component ref="comp" :is="loader" :param="paramData" :code-map="popup.codeMap" @resolve="resolve" @reject="reject"/>
            </u-layout>
        </u-layout>
    </div>
</dx-popup>
전지영
  • 21
  • 2

0 Answers0