SelectDialog.vue

public/index.html

@@ -6,6 +6,34 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <style>
+        .fade-in {
+            animation: fade-in .3s;
+        }
+
+        .fade-out {
+            animation: fade-out .4s;
+        }
+
+        @keyframes fade-in {
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
+        }
+
+        @keyframes fade-out {
+            from {
+                opacity: 1;
+            }
+            to {
+                opacity: 0;
+                display: none;
+            }
+        }
+    </style>
     <script crossorigin="anonymous"
             integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
             src="https://lib.baomitu.com/jquery/3.6.0/jquery.min.js"></script>

src/components/SelectDialog.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="SelectDialog " @click="$emit('cancel')">
+    <div class="content">
+      <div class="item" v-for="item in list" @click.stop="$emit('ok',item)">{{ item.name }}</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "SelectDialog",
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    list: {
+      type: Array,
+      default() {
+        return []
+      }
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+
+.SelectDialog {
+  z-index: 10;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #000000bb;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+
+  .content {
+    background: white;
+    width: 80%;
+    padding: .5rem 0;
+    border-radius: 2px;
+    box-sizing: border-box;
+
+    .item {
+      font-size: 1.5rem;
+      padding: 1.5rem 2rem;
+      transition: all .2s;
+
+      &:active {
+        background: darkgray;
+      }
+    }
+
+  }
+
+}
+</style>

src/pages/me/userinfo/AddSchool.vue

@@ -55,6 +55,7 @@ import {mapState} from 'vuex'
 import enums from '../../../utils/enums'
 import {inject} from "vue";
 
+//TODO 年份选择器没做
 export default {
   name: "AddSchool",
   data() {

src/pages/me/userinfo/EditUserInfo.vue

@@ -10,7 +10,7 @@
     </BaseHeader>
     <div class="userinfo">
       <div class="change-avatar">
-        <div class="avatar-ctn" @click="changeAvatarDialog = true">
+        <div class="avatar-ctn" @click="showAvatarDialog">
           <img class="avatar" src="../../../assets/img/icon/head-image.jpeg" alt="">
           <img class="change" src="../../../assets/img/icon/back.png" alt="">
         </div>
@@ -37,7 +37,7 @@
           <img src="../../../assets/img/icon/back.png" alt="">
         </div>
       </div>
-      <div class="row" @click="changeSexDialog = true">
+      <div class="row" @click="showSexDialog">
         <div class="left">性别</div>
         <div class="right">
           <span>B</span>
@@ -73,36 +73,39 @@
       </div>
     </div>
 
-    <transition name="fade">
-      <div v-if="changeAvatarDialog" class="change-dialog" @click="changeAvatarDialog = false">
-        <div class="content">
-          <div class="item">拍一张</div>
-          <div class="item">从相册选择</div>
-          <div class="item">查看大图</div>
-          <div class="item">取消</div>
-        </div>
-      </div>
-    </transition>
-    <transition name="fade">
-      <div v-if="changeSexDialog" class="change-dialog" @click="changeSexDialog = false">
-        <div class="content">
-          <div class="item">男</div>
-          <div class="item">女</div>
-          <div class="item">不展示</div>
-        </div>
-      </div>
-    </transition>
   </div>
 </template>
 
 <script>
 export default {
   name: "EditUserInfo",
+  components: {},
   data() {
     return {
-      changeAvatarDialog: false,
-      changeSexDialog: false,
-    }
+      sexList: [
+        {id: 1, name: '男'},
+        {id: 2, name: '女'},
+        {id: 3, name: '不展示'},
+      ],
+      avatarList: [
+        {id: 1, name: '拍一张'},
+        {id: 2, name: '从相册选择'},
+        {id: 3, name: '查看大图'},
+        {id: 4, name: '查看大图'},
+      ]
+    }
+  },
+  methods: {
+    showSexDialog() {
+      this.$showSelectDialog(this.sexList, e => {
+        console.log(e)
+      })
+    },
+    showAvatarDialog() {
+      this.$showSelectDialog(this.avatarList, e => {
+        console.log(e)
+      })
+    },
   }
 }
 </script>
@@ -117,6 +120,7 @@ export default {
   bottom: 0;
   top: 0;
 }
+
 .title {
   display: flex;
   flex-direction: column;
@@ -128,6 +132,7 @@ export default {
 }
 
 .userinfo {
+  padding-top: 6rem;
   color: white;
 
   .change-avatar {
@@ -191,9 +196,6 @@ export default {
   }
 }
 
-.mask {
-}
-
 .change-dialog {
   z-index: 10;
   position: absolute;
@@ -208,11 +210,13 @@ export default {
 
   .content {
     background: white;
-    width: 60%;
+    width: 80%;
     padding: .5rem 0;
+    border-radius: 2px;
     box-sizing: border-box;
 
     .item {
+      font-size: 1.5rem;
       padding: 1.5rem 2rem;
       transition: all .2s;
 

src/utils/global-methods.js

@@ -1,4 +1,29 @@
+import * as Vue from "vue";
+import SelectDialog from "../components/SelectDialog";
+
 export default {
+  $showSelectDialog(sexList, cb) {
+    let remove = () => {
+      let parent = document.querySelector('.dialog-ctn')
+      parent.classList.replace('fade-in', 'fade-out')
+      setTimeout(() => {
+        parent.remove()
+      }, 300)
+    }
+    let tempCb = e => {
+      remove()
+      cb(e)
+    }
+    const app = Vue.createApp({
+      render() {
+        return <SelectDialog onCancel={remove} list={sexList} onOk={tempCb}/>
+      },
+    })
+    let parent = document.createElement('div')
+    parent.classList.add(...['dialog-ctn', 'fade-in'])
+    document.body.append(parent)
+    app.mount(parent)
+  },
   $notice(val) {
     let div = document.createElement('div')
     div.classList.add('global-notice')