codemirror-editor-vue3 - npm Package Compare versions

Comparing version 0.2.0 to 0.2.1

package.json

 {
   "name": "codemirror-editor-vue3",
   "description": "CodeMirror component for Vue3",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "MIT",
@@ -28,3 +28,3 @@ "files": [
   },
-  "homepage": "https://github.com/RennCheung/codemirror-editor-vue3",
+  "homepage": "https://renncheung.github.io/codemirror-editor-vue3/index.html",
   "unpkg": "dist/codemirror-editor-vue3.js",
@@ -31,0 +31,0 @@ "jsnext:main": "dist/codemirror-editor-vue3.js",

README.md

@@ -1,1 +0,83 @@
-# codemirroe vue3
+### 介绍
+
+  该插件基于 [Codemirror](http://codemirror.net/)，仅支持 vue3 中使用。除了 codemirror 所支持的模式，本插件还支持自定义日志模式。
+
+完整文档请查看[codemirror-editor-vue3-docs](https://renncheung.github.io/codemirror-editor-vue3/index.html)
+
+### 安装
+```npm
+npm install codemirror-editor-vue3
+```
+### 全局安装
+`main.js:` 
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+import Codemirror from "codemirror-editor-vue3";
+// plugin-style
+import "codemirror-editor-vue3/dist/style.css";
+let app = createApp(App)
+app.use(Codemirror)
+app.mount('#app')
+```
+
+### 组件中使用
+```vue
+<template>
+  <Codemirror
+    v-model:value="code"
+    :options="cmOptions"
+    border
+    placeholder="测试 placeholder"
+    :height="200"
+    @change="change"
+  />
+</template>
+
+<script>
+import Codemirror from "codemirror-editor-vue3";
+
+// plugin-style
+import "codemirror-editor-vue3/dist/style.css";
+
+// language
+import "codemirror/mode/javascript/javascript.js";
+
+
+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', // 语言模式
+        theme: 'default', // 主题
+        lineNumbers: true, // 显示行号
+        smartIndent: true, // 智能缩进
+        indentUnit: 2, // 智能缩进单位为4个空格长度
+        foldGutter: true, // 启用行槽中的代码折叠
+        styleActiveLine: true, // 显示选中行的样式
+      }
+    };
+   } ,
+};
+</script>
+```
+
+### 其他说明
+考虑插件需要引入以下基础样式（codemirror 官方样式），插件内部已经引入，不需要在使用时重复引入以下样式：
+
+```js
+// base style
+import "codemirror/lib/codemirror.css";
+import "codemirror/mode/css/css.js";
+```

New alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

29049

increased by20.42%

Number of package files

8

increased by33.33%

Number of lines in readme file

83

increased by8200%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

3

increased by50%

No dependency changes