feats

package.json

@@ -13,12 +13,12 @@
   "dependencies": {
     "animate.css": "^4.1.1",
     "core-js": "^3.6.4",
-    "dialog-polyfill": "^0.5.6",
     "lib-flexible": "^0.3.2",
     "lodash": "^4.17.15",
     "regenerator-runtime": "^0.13.5",
     "swiper": "6.8.4",
     "vue": "^2.6.11",
+    "vue-js-modal": "^2.0.1",
     "vue-router": "^3.2.0"
   },
   "devDependencies": {

src/components/Modal/index.vue

@@ -1,41 +1,36 @@
 <template>
-  <dialog>
+  <modal :name="name" :clickToClose="false" :width="width" :height="height">
     <slot></slot>
-  </dialog>
+  </modal>
 </template>
 
 <script>
-import dialogPolyfill from 'dialog-polyfill'
-
 export default {
-  name: 'Modal',
-  // props: {
-  //   visible: Boolean
-  // },
-  // watch: {
-  //   visible(val) {
-  //     if (this.$el) {
-  //       if (val) {
-  //         this.$el.showModal()
-  //       } else {
-  //         this.$el.close()
-  //       }
-  //     }
-  //   }
-  // },
-  mounted() {
-    this.$nextTick(() => {
-      dialogPolyfill.registerDialog(this.$el)
-      this.$el.showModal()
-    })
+  name: 'YZModal',
+  props: {
+    visible: Boolean,
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    }
+  },
+  watch: {
+    visible(val) {
+      if (val) {
+        this.$modal.show(this.name)
+      } else {
+        this.$modal.hide(this.name)
+      }
+    }
+  },
+  data() {
+    return {
+      name: `modal-${Math.random().toString(36).substring(2)}`
+    }
   }
 }
 </script>
-
-<style lang="scss">
-dialog {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
-</style>

src/main.js

@@ -4,6 +4,7 @@ import 'core-js/stable'
 import 'regenerator-runtime/runtime'
 
 import Vue from 'vue'
+import VModal from 'vue-js-modal'
 import Modal from '@/components/Modal'
 import Swiper from '@/components/Swiper'
 import SwiperSlide from '@/components/SwiperSlide'
@@ -25,7 +26,8 @@ import 'lib-flexible/flexible.js'
 import './filters'
 Vue.config.productionTip = false
 
-Vue.component('modal', Modal)
+Vue.use(VModal)
+Vue.component('yz-modal', Modal)
 Vue.component('swiper', Swiper)
 Vue.component('swiper-slide', SwiperSlide)
 

src/views/apartment.vue

@@ -4,24 +4,27 @@
     <pure-image :bg-image="require('@/assets/images/apartment/1.jpg')"></pure-image>
     <apartment-navi class="apartment-navi" @goto="handleGoto" />
     <div v-for="(item, index) in list" :key="item.image">
-      <modal v-if="visible[index]" class="apartment-modal">
+      <yz-modal :visible="visible[index]" class="apartment-modal">
         <pure-image :bg-image="item.image"></pure-image>
         <div class="back-sign" @click="cancelShow(index)">
-          <img :src="require('@/assets/images/apartment/backSign.png')" alt="">
+          <img :src="item.backSign" alt="">
         </div>
-      </modal>
+      </yz-modal>
     </div>
-    <modal v-if="visible[5]" class="apartment-modal">
+    <yz-modal :visible="visible[5]" class="apartment-modal">
       <swiper-image :list="houseList"></swiper-image>
       <div class="back-sign" @click="cancelShow(5)">
-        <img :src="require('@/assets/images/apartment/backSign.png')" alt="">
+        <img :src="backSignImg" alt="">
       </div>
-    </modal>
+    </yz-modal>
   </div>
 </template>
 
 <script>
 
+const backSignImg = require('@/assets/images/apartment/backSign.png')
+const backSignImg2 = require('@/assets/images/apartment/backSign-2.png')
+
 export default {
   components: {
     PureImage: () => import('./components/PureImage.vue'),
@@ -30,27 +33,34 @@ export default {
   },
   data() {
     return {
+      backSignImg,
+      backSignImg2,
       visible: Array(6).fill(false),
       list: [
         {
           image: require('@/assets/images/apartment/2-2.jpg'),
-          color: '#f0f0f0'
+          color: '#f0f0f0',
+          backSign: backSignImg
         },
         {
           image: require('@/assets/images/apartment/3-1.jpg'),
-          color: '#f0f0f0'
+          color: '#f0f0f0',
+          backSign: backSignImg2
         },
         {
           image: require('@/assets/images/apartment/4-1.jpg'),
-          color: '#f0f0f0'
+          color: '#f0f0f0',
+          backSign: backSignImg
         },
         {
           image: require('@/assets/images/apartment/6-1.jpg'),
-          color: '#f0f0f0'
+          color: '#f0f0f0',
+          backSign: backSignImg
         },
         {
           image: require('@/assets/images/apartment/5-1.jpg'),
-          color: '#f0f0f0'
+          color: '#f0f0f0',
+          backSign: backSignImg
         }
       ],
       houseList: [
@@ -109,8 +119,8 @@ export default {
 
   .apartment-modal {
     position: absolute;
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     bottom: 0;
     left: 0;
   }

src/views/components/ApartmentNavi.vue

@@ -2,29 +2,29 @@
   <div>
     <div class="flex-box">
       <div class="flex-box-item">
-        <img :src="require('@/assets/images/apartment/1-2.png')" style="height: 64px; display: block; margin: 0 auto" alt="">
+        <img :src="require('@/assets/images/apartment/1-2.png')" style="height: 64px;" alt="">
       </div>
     </div>
     <div class="flex-box" style="margin-top: 10px">
       <div class="flex-box-item">
-        <img :src="require('@/assets/images/apartment/2-1.png')" style="height: 78px" alt="" @click="handleClick(1)">
+        <img :src="require('@/assets/images/apartment/2-1.png')" alt="" @click="handleClick(1)">
       </div>
       <div class="flex-box-item">
-        <img :src="require('@/assets/images/apartment/3.png')" style="height: 78px" alt="" @click="handleClick(2)">
+        <img :src="require('@/assets/images/apartment/3.png')" alt="" @click="handleClick(2)">
       </div>
       <div class="flex-box-item">
-        <img :src="require('@/assets/images/apartment/4.png')" style="height: 78px" alt="" @click="handleClick(3)">
+        <img :src="require('@/assets/images/apartment/4.png')" alt="" @click="handleClick(3)">
       </div>
     </div>
     <div class="flex-box" style="margin-top: 20px">
       <div class="flex-box-item">
-        <img :src="require('@/assets/images/apartment/5.png')" style="height: 78px" alt="" @click="handleClick(4)">
+        <img :src="require('@/assets/images/apartment/5.png')" alt="" @click="handleClick(4)">
       </div>
       <div class="flex-box-item">
-        <img :src="require('@/assets/images/apartment/6.png')" style="height: 78px" alt="" @click="handleClick(5)">
+        <img :src="require('@/assets/images/apartment/6.png')" alt="" @click="handleClick(5)">
       </div>
       <div class="flex-box-item">
-        <img :src="require('@/assets/images/apartment/7.png')" style="height: 78px" alt="" @click="handleClick(6)">
+        <img :src="require('@/assets/images/apartment/7.png')" alt="" @click="handleClick(6)">
       </div>
     </div>
   </div>
@@ -51,6 +51,12 @@ export default {
 
   &-item {
     flex: 1;
+
+    img {
+      display: block;
+      height: 78px;
+      margin: 0 auto;
+    }
   }
 }
 </style>

src/views/components/IndexImage.vue

@@ -61,6 +61,7 @@ export default {
   height: 100%;
   display: flex;
   align-items: center;
+  overflow: hidden;
 
   .bg-image {
     width: 100%;

src/views/components/PureImage.vue

@@ -27,8 +27,8 @@ export default {
 
 <style lang="scss" scoped>
 .pure-image {
-  background-position: center;
-  background-size: 100%;
+  background-position: center center;
+  background-size: cover;
   background-repeat: no-repeat;
   width: 100%;
   height: 100%;