::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;

examples/components/mainContent.vue

@@ -80,7 +80,7 @@ export default {
   display: flex;
   flex-direction: column;
 
-  ::v-deep.layout {
+  :deep(.layout ){
     background: #F5F6F9;
     display: flex;
     flex-direction: column;

examples/components/sliderNav.vue

@@ -200,7 +200,7 @@ export default {
     }
   }
 
-  ::v-deep .ai-menu {
+  :deep( .ai-menu ){
     padding-left: 0;
     flex: 1;
     min-height: 0;
@@ -214,7 +214,7 @@ export default {
     }
   }
 
-  ::v-deep .searchApp {
+  :deep( .searchApp ){
     display: flex;
     align-items: center;
     height: 44px;

examples/main.js

@@ -4,15 +4,14 @@ import ui from 'element-ui';
 import router from './router/router';
 import axios from './router/axios';
 import utils from './utils';
-import vcUI from 'dui';
-import 'dui/lib/styles/common.scss';
+import dui from 'dui';
 import store from './store';
 import dataV from '@jiaminghi/data-view';
 import appComps from '../components'
 
 Vue.use(dataV);
 Vue.use(ui);
-Vue.use(vcUI);
+Vue.use(dui);
 Vue.use(appComps);
 //富文本编辑器配置
 Vue.config.productionTip = false;