https://github.com/codeDebugTest/vue-diff-view

a git diff vue component
https://github.com/codeDebugTest/vue-diff-view

code-diff vue

Last synced: 5 months ago
JSON representation

a git diff vue component

• Host: GitHub
• URL: https://github.com/codeDebugTest/vue-diff-view
• Owner: codeDebugTest
• Created: 2018-12-03T07:39:35.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:39:17.000Z (about 3 years ago)
• Last Synced: 2023-03-08T17:18:14.681Z (almost 3 years ago)
• Topics: code-diff, vue
• Language: Vue
• Homepage:
• Size: 3.31 MB
• Stars: 28
• Watchers: 0
• Forks: 6
• Open Issues: 25
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# vue-diff-view

> a git diff component for Vue.js

## Usage

```vue

    


        

    


import CodeDiffViewer from 'VueDiffView';

export default {

    name: 'app',

    components: {

        CodeDiffViewer

    },

    data() {

        return {

            oldStr: '[\n    {\n        name: title\n        displayName: "标题"\n        datatype: "OBJECT"\n    }\n]',

            newStr: '[\n    {\n        name: title\n        displayName: "TAB"\n        datatype: "ARRAY"\n    }\n    {\n        name: title\n        displayName: "TAB"\n        datatype: "ARRAY"\n    }\n]'

        };

    }

};

```

## DEMO

### overview

![code diff](https://github.com/codeDebugTest/vue-diff-view/blob/master/screenshots/code_diff.png);

![modify file](https://github.com/codeDebugTest/vue-diff-view/raw/master/screenshots/modify.png)

### run demo case

```command line

npm run serve

```

## todo

when select code, not trigger line number.