::v-deep=>:deep()

examples/components/headerNav.vue

@@ -13,7 +13,7 @@
         <el-avatar :src="user.info.avatar">
           {{ defaultAvatar }}
         </el-avatar>
-        <span>{{ [user.info.name, user.info.roleName].join(" - ") }}</span>
+        <span v-text="defaultName"/>
         <i :class="dropdownIcon"/>
       </el-row>
       <el-dropdown-menu>
@@ -45,12 +45,9 @@ export default {
   },
   computed: {
     ...mapState(['user']),
-    dropdownIcon() {
-      return this.isClick ? 'el-icon-caret-top' : 'el-icon-caret-bottom'
-    },
-    defaultAvatar() {
-      return this.user.info.name?.slice(-2) || "无名"
-    }
+    dropdownIcon: v => v.isClick ? 'el-icon-caret-top' : 'el-icon-caret-bottom',
+    defaultAvatar: v => v.user.info.name?.slice(-2) || "无名",
+    defaultName: v => [v.user.info.name, v.user.info.roleName].filter(Boolean)?.join(" - ") || "请先登录"
   },
   methods: {
     // 获取最新的安卓、ios下载二维码
@@ -124,11 +121,11 @@ export default {
     z-index: -1;
   }
 
-  ::v-deep.toolbar {
+  :deep(.toolbar) {
     gap: 12px;
     margin-right: 32px;
 
-    & > div,.toolbarBtn {
+    & > div, .toolbarBtn {
       color: #fff;
       padding: 0 12px;
 
@@ -168,7 +165,7 @@ export default {
   }
 }
 
-::v-deep .downLoad_main {
+:deep( .downLoad_main ) {
   width: 100%;
   height: 100%;
   padding: 16px;