编辑男女点击其他地方选择框关闭

components/mobile/staffManagement/StaffAdd.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="seek" @click="showChooseSex === false">
+  <div class="seek">
     <div class="com-mobile-header mobile-center-header">
       <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
       <p>新增账户</p>
@@ -16,7 +16,7 @@
             <li><span>姓名：</span><input type="text" v-model="newUserName" placeholder="请输入用户名"></li>
             <li style="overflow: visible;"><span>性别：</span>
               <div class="sex-filter">
-                <div class="select-wrap" @click="openChoose">{{sex === 'M' ? '男' : '女'}}<i class="iconfont icon-arrow-down"></i></div>
+                <div class="select-wrap" @click.stop="openChoose">{{sex === 'M' ? '男' : '女'}}<i class="iconfont icon-arrow-down"></i></div>
                 <ul class="select-list" v-if="showChooseSex">
                   <li v-show="sex != 'M'" @click="chooseSex('M')">男</li>
                   <li v-show="sex != 'F'" @click="chooseSex('F')">女</li>
@@ -108,12 +108,20 @@
         return this.$store.state.option.user.data
       }
     },
+    mounted () {
+      this.$nextTick(() => {
+        window.addEventListener('click', () => {
+          console.log(1)
+          this.showChooseSex = false
+        }, false)
+      })
+    },
     methods: {
       setSwitchType (type) {
         this.switchType = type
       },
       openChoose () {
-        this.showChooseSex = true
+        this.showChooseSex = !this.showChooseSex
       },
       chooseSex (info) {
         this.sex = info