Skip to content

Commit 4be6b40

Browse files
LruihaoLruihao
committed
docs: update readme and update demo
1 parent d8a735b commit 4be6b40

5 files changed

Lines changed: 34 additions & 10 deletions

File tree

‎README-zh.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,14 +121,23 @@ Vue.use(CodeDiff)
121121
| maxHeight | 组件最大高度，例如 300px | string | - | undefined |
122122
| filename | 文件名 | string | - | undefined |
123123
| newFilename | 新文件文件名 | string | - | undefined |
124+
| hideHeader | 隐藏头部栏 | boolean | - | false |
125+
| hideStat | 隐藏头部栏中的统计信息 | boolean | - | false |
124126
| theme | 用于切换日间模式/夜间模式 | ThemeType | light , dark | light |
127+
| ignoreMatchingLines | 给出一个模式来忽略匹配行，例如：'(time\|token)'（**仅支持 side-by-side**） | string | - | |
125128

126129
## 组件事件
127130

128131
| Name | Description | Type |
129132
| ---- | --------------- | ------------------------------------------------------------------------------- |
130133
| diff | diff 完成后触发 | (result: {stat: { isChanged: boolean, addNum: number, delNum: number}}) => void |
131134

135+
## 组件插槽
136+
137+
| Name | Description |
138+
| ---- | ------------------------------- |
139+
| stat | 自定义统计内容，参数为 { stat } |
140+
132141
## 拓展高亮语言
133142

134143
为了减小打包后的体积，系统默认仅支持以下常用语言

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,14 +123,23 @@ Not recommended, but the relevant capabilities are retained to facilitate migrat
123123
| maxHeight | Maximum height of component, for example: 300px | string | - | undefined |
124124
| filename | Filename | string | - | undefined |
125125
| newFilename | New filename | string | - | undefined |
126+
| hideHeader | Hide header bar | boolean | - | false |
127+
| hideStat | Hide statistical part in the header bar | boolean | - | false |
126128
| theme | Add dark mode | ThemeType | light , dark | light |
129+
| ignoreMatchingLines | Give a pattern to ignore matching lines eg: '(time\|token)' (**Only support side-by-side**) | string | - | undefined |
127130

128131
## Events
129132

130133
| Name | Description | Type |
131134
| ---- | --------------------------- | ------------------------------------------------------------------------------- |
132135
| diff | triggers when diff finished | (result: {stat: { isChanged: boolean, addNum: number, delNum: number}}) => void |
133136

137+
## Slot
138+
139+
| Name | Description |
140+
| ---- | ----------------------------------------------------------- |
141+
| stat | Custom statistical content, The scope parameter is { stat } |
142+
134143
## Extend languages
135144

136145
In order to reduce the size of the packaged file, the system only supports the following commonly used languages by

‎vue2-playground/App.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
import { reactive, version } from 'vue-demi'
33
44
const form = reactive({
5-
oldString: '<script setup lang="ts">',
6-
newString: '<script lang="ts" setup>',
7-
language: 'python',
5+
oldString: '{\n "code": "200",\n "msg": "请求成功",\n "data": {\n "hitokoto": "往者不可谏，来者犹可追。",\n "from": "论语·微子篇"\n },\n "time": "2024-01-12 17:27:03"\n}',
6+
newString: '{\n "code": "200",\n "msg": "请求成功",\n "data": {\n "hitokoto": "成熟的人眼里满是前途，稚嫩的人眼里满是爱恨情仇。",\n "from": "网易云热评"\n },\n "time": "2024-01-12 17:27:06"\n}',
7+
language: 'json',
88
diffStyle: 'word',
9+
ignoreMatchingLines: 'time',
910
})
1011
</script>
1112

@@ -21,6 +22,7 @@ const form = reactive({
2122
:new-string="form.newString"
2223
:language="form.language"
2324
:diff-style="form.diffStyle"
25+
:ignore-matching-lines="form.ignoreMatchingLines"
2426
output-format="side-by-side"
2527
/>
2628
</div>

‎vue2.7-playground/App.vue‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import { version } from 'vue-demi'
33
import { reactive } from 'vue'
44
55
const form = reactive({
6-
oldString: '<script setup lang="ts">',
7-
newString: '<script lang="ts" setup>',
8-
language: 'python',
6+
oldString: '{\n "code": "200",\n "msg": "请求成功",\n "data": {\n "hitokoto": "往者不可谏，来者犹可追。",\n "from": "论语·微子篇"\n },\n "time": "2024-01-12 17:27:03"\n}',
7+
newString: '{\n "code": "200",\n "msg": "请求成功",\n "data": {\n "hitokoto": "成熟的人眼里满是前途，稚嫩的人眼里满是爱恨情仇。",\n "from": "网易云热评"\n },\n "time": "2024-01-12 17:27:06"\n}',
8+
language: 'json',
99
diffStyle: 'word',
10+
ignoreMatchingLines: 'time',
1011
})
1112
</script>
1213

@@ -22,6 +23,7 @@ const form = reactive({
2223
:new-string="form.newString"
2324
:language="form.language"
2425
:diff-style="form.diffStyle"
26+
:ignore-matching-lines="form.ignoreMatchingLines"
2527
output-format="side-by-side"
2628
/>
2729
</div>

‎vue3-playground/App.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,14 @@ import { reactive } from 'vue'
88
const form = reactive({
99
// oldString: oldLongText,
1010
// newString: newLongText,
11-
oldString: '123\n123\n123\n456\n123\n123\n123\n123\n123\n123\n123\n',
12-
newString: '123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n123\n',
11+
oldString: '{\n "code": "200",\n "msg": "请求成功",\n "data": {\n "hitokoto": "往者不可谏，来者犹可追。",\n "from": "论语·微子篇"\n },\n "time": "2024-01-12 17:27:03"\n}',
12+
newString: '{\n "code": "200",\n "msg": "请求成功",\n "data": {\n "hitokoto": "成熟的人眼里满是前途，稚嫩的人眼里满是爱恨情仇。",\n "from": "网易云热评"\n },\n "time": "2024-01-12 17:27:06"\n}',
1313
filename: 'oldFile',
1414
newFilename: 'newFile',
15-
language: 'plaintext',
15+
language: 'json',
1616
diffStyle: 'word',
17-
outputFormat: 'line-by-line',
17+
outputFormat: 'site-by-site',
18+
ignoreMatchingLines: 'time',
1819
context: 3,
1920
})
2021
</script>
@@ -34,6 +35,7 @@ const form = reactive({
3435
:new-filename="form.newFilename"
3536
:language="form.language"
3637
:output-format="form.outputFormat"
38+
:ignore-matching-lines="form.ignoreMatchingLines"
3739
:diff-style="form.diffStyle"
3840
:context="form.context"
3941
/>

0 commit comments

Comments
 (0)