feat: 字体颜色选择

pumelotea · Aug 25, 2022 · 66cd9ef · 66cd9ef
1 parent f7827e0
commit 66cd9ef
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 4 deletions.
diff --git a/src/components/tiptap/HbAdminTipTap.vue b/src/components/tiptap/HbAdminTipTap.vue
@@ -11,7 +11,7 @@ import {onBeforeUnmount, onMounted, watch} from "vue";
 
 let editor
 editor = useEditor({
-  content: `<p><video src="https://media.w3.org/2010/05/sintel/trailer.mp4"></video><img src="1"></p>`,
+  content: ``,
   extensions: [
     StarterKit
   ],

diff --git a/src/components/tiptap/components/HbTiptapColorPicker.vue b/src/components/tiptap/components/HbTiptapColorPicker.vue
@@ -0,0 +1,68 @@
+<script setup>
+import {NColorPicker} from 'naive-ui'
+
+const emit = defineEmits(['change'])
+
+function change(e){
+  emit('change',e)
+}
+
+</script>
+
+<template>
+  <button class="hb-tiptap-color-picker">
+    <n-color-picker
+        :render-label="()=>null"
+        placement="bottom"
+        @complete="change"
+        :swatches="[
+          '#000000',
+          '#FFFFFF',
+          '#18A058',
+          '#2080F0',
+          '#F0A020',
+          'rgba(208, 48, 80, 1)']">
+    </n-color-picker>
+  </button>
+</template>
+
+<style scoped>
+ .hb-tiptap-color-picker{
+   position: relative;
+   color: #0d0d0d;
+   border: none;
+   background-color: transparent;
+   border-radius: 3px;
+   padding: 5px;
+   transition: all 0.2s;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   overflow: hidden;
+
+ }
+
+ .icon-box{
+   position: absolute;
+   pointer-events: none;
+   inset: 0;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+ }
+
+ /deep/ .n-color-picker{
+   width: 18px;
+   height: 18px;
+ }
+
+ /deep/ .n-color-picker-trigger{
+   border: none;
+ }
+
+ /deep/ .n-color-picker-trigger .n-color-picker-trigger__fill{
+   inset: 0;
+   border-radius: 2px;
+   overflow: hidden;
+ }
+</style>
diff --git a/src/components/tiptap/components/HbTiptapMenuBar.vue b/src/components/tiptap/components/HbTiptapMenuBar.vue
@@ -2,6 +2,8 @@
 import HbTiptapMenuItem from './HbTiptapMenuItem.vue'
 import {NPopover} from 'naive-ui'
 import HbTiptapTableCreator from "@/components/tiptap/components/HbTiptapTableCreator";
+import HbTiptapColorPicker from "@/components/tiptap/components/HbTiptapColorPicker";
+import {ref} from "vue";
 
 const props = defineProps({
   editor: {
@@ -28,6 +30,16 @@ function insertTable(r,c) {
   props.editor.chain().focus().insertTable({rows: r, cols: c, withHeaderRow: true}).run()
 }
 
+const color = ref("#000000")
+function setColor(){
+  props.editor.chain().focus().setColor(color.value).run()
+}
+
+function updateColor(e){
+  color.value = e
+  setColor()
+}
+
 </script>
 <template>
   <div class="menu-bar">
@@ -65,10 +77,13 @@ function insertTable(r,c) {
                          :action="() => props.editor.chain().focus().toggleHighlight().run()"
                          :is-active="() => props.editor.isActive('highlight')"
     />
+    <div class="divider"/>
     <hb-tiptap-menu-item icon="font-color" title="字体颜色"
-                         :action="() => props.editor.chain().focus().setColor('#B9F18D').run()"
+                         :action="setColor"
                          :is-active="() => props.editor.isActive('font-color')"
     />
+    <hb-tiptap-color-picker @change="updateColor">
+    </hb-tiptap-color-picker>
     <div class="divider"/>
     <hb-tiptap-menu-item icon="align-left" title="左对齐"
                          :action="() => props.editor.chain().focus().setTextAlign('left').run()"
@@ -155,7 +170,7 @@ function insertTable(r,c) {
                          :is-active="() => props.editor.isActive('codeBlock')"
     />
     <div class="divider"/>
-    <n-popover trigger="hover" placement="bottom">
+    <n-popover trigger="hover" placement="bottom" :show-arrow="false">
       <template #trigger>
         <hb-tiptap-menu-item icon="table-2" title="插入表格" :action="()=>{}"/>
       </template>

diff --git a/src/components/tiptap/components/HbTiptapMenuItem.vue b/src/components/tiptap/components/HbTiptapMenuItem.vue
@@ -45,9 +45,11 @@ const iconUrl = ref(remixiconSvg)
   background-color: transparent;
   border-radius: 3px;
   padding: 5px;
-  margin-right: 5px;
   transition: all 0.2s;
 }
+.menu-item+.menu-item{
+  margin-left: 5px;
+}
 
 .menu-item:hover, .is-active {
   color: #fff;