หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ทรัพยากรอื่นๆ
ดาวน์โหลด

การแนะนำ

简体中文

องค์ประกอบ codemirror ของ Vue3 ส่วนประกอบนี้ได้รับการพัฒนาขึ้นอยู่กับ Codemirror 5 และรองรับ Vue3 เท่านั้น

นอกเหนือจากโหมดที่ได้รับการสนับสนุนอย่างเป็นทางการแล้วโหมดการนำเสนอเอาต์พุตบันทึกจะถูกเพิ่มออกจากกล่อง แต่ไม่จำเป็นต้องเหมาะกับทุกสถานการณ์

สำหรับเอกสารที่สมบูรณ์และกรณีอื่น ๆ โปรดตรวจสอบเอกสาร Codemirror-Editor-Vue3

ติดตั้ง 

npm install codemirror-editor-vue3 codemirror@^5 -S
yarn add codemirror-editor-vue3 codemirror@ " >=5.64.0 <6 " 
pnpm i codemirror-editor-vue3 codemirror@^5 -S

หากโครงการของคุณต้องการการสนับสนุน TypeScript คุณจะต้องติดตั้งการพึ่งพา '@type/codemirror' 

npm install @types/codemirror -D

ลงทะเบียนส่วนประกอบทั่วโลก

ไม่แนะนำส่วนประกอบการลงทะเบียนทั่วโลก ซึ่งจะส่งผลให้ประเภทของพรอมต์บนเทมเพลตที่ไม่สามารถรับได้อย่างเหมาะสม

main.js: 

 import { createApp } from "vue" ;
import App from "./App.vue" ;
import { InstallCodeMirror } from "codemirror-editor-vue3" ;

const app = createApp ( App ) ;
app . use ( InstallCodeMirror ) ;
app . mount ( "#app" ) ;

ชื่อองค์ประกอบที่ลงทะเบียนทั่วโลกคือ codemirror หรือคุณสามารถปรับแต่งชื่อส่วนประกอบตัวอย่างเช่น: 

 app . use ( InstallCodeMirror , { componentName : "customName" } ) ;

ใช้ในส่วนประกอบ 

< template >
  < Codemirror
    v-model:value = " code "
    :options = " cmOptions "
    border
    placeholder = " test placeholder "
    :height = " 200 "
    @change = " change "
  />
</ template >

< script >
import Codemirror from " codemirror-editor-vue3 " ;

// placeholder
import " codemirror/addon/display/placeholder.js " ;

// language
import " codemirror/mode/javascript/javascript.js " ;
// placeholder
import " codemirror/addon/display/placeholder.js " ;
// theme
import " codemirror/theme/dracula.css " ;

import { ref } from " vue " ;
export default {
  components : { Codemirror },
  setup () {
    const code = ref ( `
var i = 0;
for (; i < 9; i++) {
  console.log(i);
  // more statements
} ` );

    return {
      code,
      cmOptions : {
        mode : " text/javascript " , // Language mode
        theme : " dracula " , // Theme
      },
    };
  },
};
</ script >

การเน้นภาษา

คุณสามารถคลิกที่ลิงค์ต่อไปนี้เพื่อดูกรณีภาษาที่เกี่ยวข้อง

  • จาวาสคริปต์
  • JSON
  • CSS
  • HTML
  • APL
  • ยม

มีการเพิ่มกรณีเพิ่มเติมอย่างค่อยเป็นค่อยไปและคุณยังสามารถอ้างถึงเอกสารเพื่อให้ได้โหมดภาษามากขึ้น

อุปกรณ์ประกอบฉากส่วนประกอบ

ชื่อ คำอธิบาย พิมพ์ ค่าเริ่มต้น
ค่า (V-model) เนื้อหาบรรณาธิการ string -
ตัวเลือก ตัวเลือกการกำหนดค่าของ codemirror5 EditorConfiguration default_options
ผู้ถือครองตำแหน่ง เนื้อหาตัวแก้ไขตัวยึดเพื่อแนะนำไฟล์ที่เกี่ยวข้องกับ codemirror string -
ชายแดน ไม่ว่าจะแสดงเส้นขอบตัวแก้ไข boolean false
ความกว้าง ความกว้าง string 100%
ความสูง ความสูง string 100%
สไตล์ดั้งเดิม การใช้สไตล์ดั้งเดิมปิดใช้งานการปรับเปลี่ยนที่สองของสไตล์สำหรับส่วนประกอบนี้ (แต่ไม่ส่งผลกระทบต่อความกว้างความสูงและเส้นขอบ) boolean false
Keepcursorinend รักษาตำแหน่งเมาส์ไว้ในบรรทัดสุดท้ายเสมอ boolean false
ผสาน โหมดผสานสามารถใช้เป็นรูปแบบต่าง ๆ ได้ boolean false

เหตุการณ์

เหตุการณ์ส่วนประกอบ

สามต่อไปนี้เป็นเพียงเหตุการณ์ที่ห่อหุ้มด้วยองค์ประกอบนี้ โปรดดูเหตุการณ์เพิ่มเติมเกี่ยวกับเหตุการณ์ codemirror

ชื่อเหตุการณ์ คำอธิบาย พารามิเตอร์
change การเปลี่ยนแปลงค่าหรืออินสแตนซ์ (value: string, cm: Editor) => void
input ป้อนข้อมูล (value: string) => void
ready ส่วนประกอบ codemirror ติดตั้ง (cm: Editor) => void;

เหตุการณ์ Codemirror

เหตุการณ์ต่อไปนี้เป็นเหตุการณ์อย่างเป็นทางการของ Codemirror5 คุณสามารถอ้างถึงเอกสารอย่างเป็นทางการสำหรับรายละเอียดเหตุการณ์ codemirror， คุณสามารถใช้ส่วนประกอบนี้เพื่อผูกเหตุการณ์โดยตรงผ่านส่วนประกอบตัวอย่างเช่น： 

< Codemirror
  v-model : value = " code "
  : options = " { mode: ' text/x-vue ' , theme: ' default ' } "
  border
  placeholder="test-placeholder"
  : height = " 200 "
  @ change = " onChange "
  @ blur = " onBlur "
  @ focus = " onFocus "
  @ scroll = " onScroll "
/>

ชื่อเหตุการณ์ทั้งหมดมีดังนี้：

  • changes
  • scroll
  • beforeChange
  • cursorActivity
  • keyHandled
  • inputRead
  • electricInput
  • beforeSelectionChange
  • viewportChange
  • swapDoc
  • gutterClick
  • gutterContextMenu
  • focus
  • blur
  • refresh
  • optionChange
  • scrollCursorIntoView
  • update
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด