登录

src/components/login/LoginTab.vue

@@ -1,20 +1,28 @@
 <template>
   <div class="logintab">
-      <div class="tab">手机号登录</div>
-      <div class="tab ">账号密码登录</div>
+      <div :class="selected==1?'tab tab1':'tab'" @click="tabchange(1)">手机号登录</div>
+      <div :class="selected==2?'tab tab1':'tab'" @click="tabchange(2)">账号密码登录</div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent , ref} from "vue";
 
 export default defineComponent({
   name: "LoginTab",
   components: {},
-  setup() {
-    const selected: number =1
+ 
+
+  setup(prop,context) {
+    const selected=ref(1)
+    function tabchange(e: number): void{
+        selected.value=e
+        context.emit("sel",e)
+
+    }
     return {
-      selected
+      selected,
+      tabchange
     };
   },
 });
@@ -24,9 +32,9 @@ export default defineComponent({
     display: flex;
     .tab{
         width: 100px;
-        height: 28px;
+        height: 29px;
         border-radius: 14px;
-        
+        cursor: pointer;
         font-weight: bold;
         text-align: center;
         font-size: 11px;