v-code-diff
v-code-diff copied to clipboard
Shimada666
能不能帮忙看下这个issue 和vue-code-diff都有的问题
https://github.com/ddchef/vue-code-diff/issues/60
先渲染空值了，然后再去赋值相同值，就会出现这个问题
必现条件我也还没找到，就是先oldString newString都是空渲染了，然后再同时给oldstring和newstring赋值同一个，然后还有就是在el-dialog里面的
<el-dialog> <el-tabs value="write"> <el-tab-pane label="Write" name="write"> <edit-file :filename="filename"v-bind:content.sync="newstring"></edit-file> </el-tab-pane> <el-tab-pane label="Preview Changes" name="preview"> <code-diff :old-string="oldstring" :new-string="newstring" :context="10" :outputFormat="'line-by-line'"></code-diff> </el-tab-pane> </el-tabs> </el-dialog>
简化下来是这样一个结构，edit-file是用'vue-codemirror'实现的一个编辑页
你试试在nexttick里面，用window.atob解码，把解码后的数据赋值给oldstring和newstring，看能不能复现。我这样复现的
this.$nextTick(() => {
let tempContent = 'PHRlbXBsYXRlPg0KICA8ZGl2IHYtaHRtbD0icHJldHR5SHRtbCIgLz4NCjwvdGVtcGxhdGU'
let content = window.atob(tempContent)
this.oldstring = content
this.newstring= content
})
this.$nextTick(() => { let tempContent = 'PHRlbXBsYXRlPg0KICA8ZGl2IHYtaHRtbD0icHJldHR5SHRtbCIgLz4NCjwvdGVtcGxhdGU' let content = window.atob(tempContent) this.oldstring = content this.newstring= content })
抱歉，还是复现不出来...
<template>
<div id="app">
<code-diff
:old-string="oldString"
:new-string="newString"
output-format="side-by-side"/>
</div>
</template>
<script>
import {CodeDiff} from 'v-code-diff'
export default {
name: 'App',
data() {
return {
oldString: '123456\n12345',
newString: '123341\n11234'
}
},
components: {
CodeDiff
},
mounted() {
this.$nextTick(() => {
let tempContent = 'PHRlbXBsYXRlPg0KICA8ZGl2IHYtaHRtbD0icHJldHR5SHRtbCIgLz4NCjwvdGVtcGxhdGU'
let content = window.atob(tempContent)
this.oldString = content
this.newString = content
})
}
}
</script>
现象是一开始正常diff，然后马上显示 File without changes
"dependencies": { "@vue/composition-api": "^1.1.5", "core-js": "^3.6.5", "v-code-diff": "^0.3.4", "element-ui": "^2.14.1", "vue-codemirror": "^4.0.6", "vue": "^2.6.11" },
EditCommonFile.vue
<template>
<div>
<el-row>
<div style="float: left"><el-tag type="info">{{ filename }}</el-tag></div>
</el-row>
<el-row>
<codemirror :value="code" :options="cmOptions" @input="onCmCodeChange"></codemirror>
</el-row>
<el-row>
<div style="float: right" v-if="show">
<el-button @click="cancel">Cancel</el-button>
<el-button type="primary" @click="saveFile">Save</el-button>
</div>
</el-row>
</div>
</template>
<script>
import { codemirror } from 'vue-codemirror'
// import base style
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/shell/shell.js'
// require active-line.js
import 'codemirror/addon/selection/active-line.js'
// import theme style
import 'codemirror/theme/colorforth.css'
export default {
name: 'EditCommonFile',
components: {
codemirror
},
props: {
filename: {
type: String,
default: () => ''
},
show: {
type: Boolean,
default: () => true
},
content: {
type: String,
default: () => ''
}
},
watch: {
content (val) {
this.code = val
}
},
data () {
return {
code: this.content,
cmOptions: {
// codemirror options
tabSize: 4,
// mode: 'text/javascript',
theme: 'colorforth',
lineNumbers: true,
line: true
// more codemirror options, 更多 codemirror 的高级配置...
}
}
},
methods: {
cancel () {
this.$emit('cancel')
},
saveFile () {
this.$emit('save', this.code)
},
onCmCodeChange (newCode) {
// console.log('code is ', newCode)
this.code = newCode
this.$emit('update:content', this.code)
}
}
}
</script>
<style scoped>
</style>
FilePreview.vue
<template>
<code-diff :old-string="oldstring" :new-string="newstring" :context="10" :outputFormat="'line-by-line'"></code-diff>
</template>
<script>
import { CodeDiff } from 'v-code-diff'
export default {
name: 'FilePreview',
components: {
CodeDiff
},
props: {
oldstring: {
type: String,
default: () => ''
},
newstring: {
type: String,
default: () => ''
}
},
data () {
return {
}
},
methods: {
}
}
</script>
App.vue
<template>
<div id="app">
<div>Main index</div>
<el-button type="primary" @click="openDialog">OpenDialog</el-button>
<el-dialog :visible.sync="dialogvisible" @close="dialogvisible=false">
<el-tabs value="write" style="width:95%;float: right">
<el-tab-pane label="Write" name="write">
<edit-file :filename="'filename'" v-bind:content.sync="newString" :show="false" ></edit-file>
</el-tab-pane>
<el-tab-pane label="Preview Changes" name="preview">
<file-preview :oldstring="oldString" :newstring="newString" ></file-preview>
</el-tab-pane>
</el-tabs>
</el-dialog>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
oldString: '',
newString: '',
dialogvisible: false
}
},
components: {
'file-preview':()=> import('./components/FilePreview'),
'edit-file': () => import('./components/EditCommonFile')
},
mounted() {
},
methods:{
openDialog(){
this.dialogvisible = true
this.$nextTick(() => {
let tempContent = 'PHRlbXBsYXRlPg0KICA8ZGl2IHYtaHRtbD0icHJldHR5SHRtbCIgLz4NCjwvdGVtcGxhdGU'
let content = window.atob(tempContent)
this.oldString = content
this.newString = content
})
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
