diff --git a/src/components/ReCropper/src/index.tsx b/src/components/ReCropper/src/index.tsx
index 5f03f7081..ad4cfbf5e 100644
--- a/src/components/ReCropper/src/index.tsx
+++ b/src/components/ReCropper/src/index.tsx
@@ -1,9 +1,9 @@
 import "./circled.css";
 import Cropper from "cropperjs";
-import { useTippy } from "vue-tippy";
 import { ElUpload } from "element-plus";
 import type { CSSProperties } from "vue";
 import { longpress } from "@/directives/longpress";
+import { useTippy, directive as tippy } from "vue-tippy";
 import {
   ref,
   unref,
@@ -236,6 +236,7 @@ export default defineComponent({
 
     const menuContent = defineComponent({
       directives: {
+        tippy,
         longpress
       },
       setup() {
diff --git a/src/views/components/danmaku/index.vue b/src/views/components/danmaku/index.vue
index b315ce159..5612c87ac 100644
--- a/src/views/components/danmaku/index.vue
+++ b/src/views/components/danmaku/index.vue
@@ -186,7 +186,7 @@ function addDanmu() {
     </div>
   </el-card>
 </template>
-<style lang="scss">
+<style lang="scss" scoped>
 .demo {
   flex: 1;
   height: 600px;