Vue3!

EaseCation · Sep 8, 2023 · cbfec55 · cbfec55
1 parent ce495bb
commit cbfec55
Show file tree

Hide file tree

Showing 2 changed files with 177 additions and 130 deletions.
diff --git a/src/components/FormatButton.vue b/src/components/FormatButton.vue
@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import { computed } from 'vue';
+
 export default {
     props: {
         format: {
@@ -13,54 +15,58 @@ export default {
         },
         color: {
             type: String,
-            required: true
+            default: "#F3F3F3"
         },
-        // 斜体（默认为false）
         italic: {
             type: Boolean,
             default: false
         },
-        // 粗体
         bold: {
             type: Boolean,
             default: false
         },
-        // 下划线
         underline: {
             type: Boolean,
             default: false
         },
     },
-    computed: {
-        textColor() {
-            const rgb = this.color.slice(1).match(/.{1,2}/g).map(hex => parseInt(hex, 16));
-            // 使用权重系数计算亮度
+    setup(props, { emit }) {
+        const textColor = computed(() => {
+            const rgb = props.color.slice(1).match(/.{1,2}/g).map(hex => parseInt(hex, 16));
             const brightness = (rgb[0] * 0.299 + rgb[1] * 0.587 + rgb[2] * 0.114) / 255;
             return brightness > 0.5 ? '#000' : '#fff';
+        });
+
+        const onClick = () => {
+            emit('format', props.format);
         }
-    },
-    methods: {
-        onClick() {
-            this.$emit('format', this.format);
+
+        return {
+            textColor,
+            onClick
         }
     }
 }
 </script>
 
 <style>
-
 .format-button {
     padding: 4px 8px;
     color: white;
     margin: 6px 6px 0 0;
     font-size: 14px;
-    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); /* 这里是添加的内描边样式 */
-    transition: filter 0.2s;  /* 平滑过渡效果 */
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); 
+    transition: all 0.2s;  
     min-width: 40px;
 }
 
 .format-button:hover {
-    filter: brightness(1.1);  /* 亮度增加10% */
+    filter: brightness(1.1);
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); 
 }
 
-</style>
+.format-button:active {
+    filter: brightness(0.95);
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); 
+}
+</style>