更新
This commit is contained in:
@@ -13,11 +13,43 @@
|
||||
<div class="PageContent" style="display: flex;flex-direction: column;flex-wrap: nowrap">
|
||||
<el-card style="border: none">
|
||||
<div style="display: flex;flex-direction: column;flex-wrap: nowrap;">
|
||||
<el-card style="box-shadow: none;border-radius: 5px">
|
||||
|
||||
<el-card style="box-shadow: none;border-radius: 10px">
|
||||
<div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
|
||||
<span style="font-size: 18px;color: #6b7280;font-weight: bold">
|
||||
{{oneFileName}} :
|
||||
</span>
|
||||
<span style="font-size: 16px;color: #6b7280;font-weight: bold">
|
||||
{{description}}
|
||||
</span>
|
||||
</div>
|
||||
<div style="display: flex;flex-wrap: nowrap;flex-direction: row;align-items: center;justify-content: space-between">
|
||||
<div style="font-size: 15px;color: #9ca3af;margin-top: 20px;">
|
||||
<span>发布于: </span>
|
||||
<span>{{userName}}</span>
|
||||
<span> · </span>
|
||||
<span> 主语言 {{language}}</span>
|
||||
<span> · </span>
|
||||
<span> {{formatNumber(lookNum)}} </span>
|
||||
<span> 次查看 </span>
|
||||
</div>
|
||||
<div style="display: flex;align-items: center;justify-content: center;margin-top: 20px;">
|
||||
<el-button plain icon="el-icon-link" size="mini" @click="goTo(url)">访问</el-button>
|
||||
<el-button plain icon="el-icon-document-copy" size="mini" @click="copyText">复制</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card style="box-shadow: none;margin-top: 20px;border-radius: 5px">
|
||||
<el-card style="box-shadow: none;margin-top: 20px;border-radius: 10px">
|
||||
<PrismEditor
|
||||
class="my-editor height-300"
|
||||
v-model="content"
|
||||
aria-disabled
|
||||
:highlight="highlighter"
|
||||
line-numbers
|
||||
:readonly="true"
|
||||
autoStyleLineNumbers
|
||||
:tabSize="4"
|
||||
></PrismEditor>
|
||||
|
||||
</el-card>
|
||||
</div>
|
||||
@@ -30,20 +62,112 @@
|
||||
|
||||
<script>
|
||||
import RightTools from "@/components/Home/RightTools.vue";
|
||||
|
||||
import axios from "axios";
|
||||
import { PrismEditor } from "vue-prism-editor";
|
||||
import "vue-prism-editor/dist/prismeditor.min.css";
|
||||
import { highlight, languages } from "prismjs/components/prism-core";
|
||||
import "prismjs/components/prism-clike";
|
||||
import "prismjs/components/prism-javascript";
|
||||
import "prismjs/themes/prism-tomorrow.css";
|
||||
import Vue from "vue";
|
||||
export default {
|
||||
name: "OneFileDetail",
|
||||
components: {RightTools},
|
||||
components: {RightTools,PrismEditor},
|
||||
data(){
|
||||
return{
|
||||
|
||||
id:'',
|
||||
oneFileName:'',
|
||||
language:'',
|
||||
description:'',
|
||||
userId:'',
|
||||
url:'',
|
||||
lookNum:'',
|
||||
content:'',
|
||||
isValid:'',
|
||||
userName:'',
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
copyText() {
|
||||
let text = this.content;
|
||||
let inputElement = document.createElement('input')
|
||||
inputElement.value = text;
|
||||
document.body.appendChild(inputElement);
|
||||
inputElement .select(); //选中文本
|
||||
document.execCommand("copy"); //执行浏览器复制命令
|
||||
inputElement.remove();
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, "复制成功"),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
},
|
||||
highlighter(code) {
|
||||
return highlight(code, languages.js); //returns html
|
||||
},
|
||||
formatNumber(num) {
|
||||
return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
|
||||
},
|
||||
goBack() {
|
||||
window.history.go(-1);
|
||||
},
|
||||
}
|
||||
addLookCount(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/addFileLookCount',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
id:this.$route.query.id
|
||||
}
|
||||
});
|
||||
},
|
||||
getOneFileDetail(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/selectFileById',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
id:this.$route.query.id
|
||||
}
|
||||
}).then(function (res) {
|
||||
console.log(res);
|
||||
that.id=res.data.id;
|
||||
that.language=res.data.language;
|
||||
that.lookNum=res.data.lookNum;
|
||||
that.oneFileName=res.data.oneFileName;
|
||||
that.url=res.data.url;
|
||||
that.userId=res.data.userId;
|
||||
that.description=res.data.description;
|
||||
that.content=res.data.content;
|
||||
that.userName=res.data.userName;
|
||||
|
||||
})
|
||||
},
|
||||
goTo(url){
|
||||
window.open(url);
|
||||
},
|
||||
|
||||
},
|
||||
mounted() {
|
||||
this.getOneFileDetail();
|
||||
},
|
||||
created() {
|
||||
this.addLookCount();
|
||||
},
|
||||
watch: {
|
||||
$route () {
|
||||
if(this.$route.query.refresh){
|
||||
this.getOneFileDetail() //重新调用http请求实现页面的重新渲染
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -60,4 +184,19 @@ export default {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
/* required class */
|
||||
::v-deep .my-editor {
|
||||
background: transparent;
|
||||
color: #ccc;
|
||||
|
||||
font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* optional */
|
||||
::v-deep .prism-editor__textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user