feat: 加上wangEditor语言包优化滚动条样式

meadmin-cn · Sep 3, 2022 · 1c235e5 · 1c235e5
1 parent a4c42c1
commit 1c235e5
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 10 deletions.
diff --git a/src/components/meWangEditor/index.vue b/src/components/meWangEditor/index.vue
@@ -99,15 +99,18 @@ const handleCreated = (editor: IDomEditor) => {
     &::-webkit-scrollbar {
       z-index: 1;
       border-radius: 4px;
-      width: 4px;
+      width: 6px;
     }
     &::-webkit-scrollbar-thumb {
-      background-color: var(--el-text-color-secondary);
+      background-color: rgba(144, 147, 153, 0.3);
       width: 100%;
-      opacity: 0.1;
+      opacity: 0.3;
       border-radius: 4px;
     }
     overflow-y: overlay !important;
   }
 }
+:global(.dark .me-wang-editor .w-e-scroll::-webkit-scrollbar-thumb) {
+  background-color: rgba(163, 166, 173, 0.3);
+}
 </style>
diff --git a/src/locales/lang/en/default.json b/src/locales/lang/en/default.json
@@ -42,5 +42,8 @@
   "并": "And",
   "退出登录": "Logout",
   "页面不见了": "The page is gone",
-  "去": "Go"
+  "去": "Go",
+  "清除": "Clear",
+  "内容": "Conent",
+  "请输入": "Please input"
 }
diff --git a/src/locales/lang/en/menu.json b/src/locales/lang/en/menu.json
@@ -9,5 +9,8 @@
   "多级菜单1": "Multilevel Menu 1",
   "多级菜单1-1": "Multilevel Menu 1-1",
   "多级菜单1-1-1": "Multilevel Menu 1-1-1",
-  "多级菜单1-2": "Multilevel Menu 1-2"
+  "多级菜单1-2": "Multilevel Menu 1-2",
+  "组件": "Components",
+  "编辑器": "Editor",
+  "获取": "Get"
 }
diff --git a/src/router/routes/components/editor/1-wangEditor.ts b/src/router/routes/components/editor/1-wangEditor.ts
@@ -3,6 +3,6 @@ export const routes: RouteRecordRaw[] = [
   {
     path: 'wangEditor',
     component: async () => await import('@/views/components/editor/wangEditor.vue'),
-    meta: { title: 'wangEditor' },
+    meta: { title: 'WangEditor' },
   },
 ];
diff --git a/src/views/components/editor/wangEditor.vue b/src/views/components/editor/wangEditor.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <div class="api">
-      <el-button @click="editor?.setHtml('<p>hello word!</p>')">重置</el-button>
-      <el-button @click="editor?.clear()">清除内容</el-button>
-      <el-button @click="showDialog = true">获取Html</el-button>
+      <el-button @click="editor?.setHtml('<p>hello word!</p>')">{{ $t('重置') }}</el-button>
+      <el-button @click="editor?.clear()">{{ $t('清除') }}{{ $t(' ') }}{{ $t('内容') }}</el-button>
+      <el-button @click="showDialog = true">{{ $t('获取') }}{{ $t(' ') }}Html</el-button>
     </div>
     <me-wang-editor
       ref="editorRef"
@@ -27,7 +27,6 @@ const html = ref('<p>hello word!</p>');
 const config = {
   editor: {
     maxLength: 1000,
-    placeholder: '请输入内容',
     ['MENU_CONF']: {
       uploadImage: {
         // 小于该值就插入 base64 格式（而不上传），默认为 0