Comments (19)
@yaowei9363 大佬,我在我的codesandbox里面改成这样是没有问题的,但是换到我自己前后端分离的地方就不行了,大佬能否帮我看看(实在没法放codesandbox)。
代码:
<template>
<div id="app">
<div v-if="article.course"><h1>{{ article.course }}:{{ article.title }}</h1></div>
<div v-else><h1>{{ article.title }}</h1></div>
<br><br>
<div id="article" align="left" v-html="articlebody"></div>
<!--永远无法显示的目录-->
<side-catalog v-if="show" class="catalog" v-bind="catalogProps"></side-catalog>
</div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import marked from 'marked';
import hljs from "highlight.js";
import 'highlight.js/styles/atom-one-light.css'
import axios from 'axios';
import SideCatalog from "vue-side-catalog";
import "vue-side-catalog/lib/vue-side-catalog.css";
export default {
name: 'ArticleDetail',
components: {
SideCatalog,
},
data () {
return {
article: '',
articlebody: '',
catalogProps: {
container: "#article",
watch: true,
height: "calc(100% - 100px)",
}
}
},
methods: {
getArticle () {
axios.get('http://127.0.0.1:8000/api/articles/' + this.$route.params.id)
.then(this.getArticleSucc)
},
getArticleSucc (res) {
this.article = res.data
this.articlebody = res.data.body
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
highlight: function(code) {
return hljs.highlightAuto(code).value;
},
})
this.articlebody = marked(this.articlebody)
},
},
mounted () {
this.getArticle()
},
}
</script>
<style scoped>
.catalog {
position: fixed;
top: 250px;
right: 50px;
}
</style>
<style>
#article img {
width: 90%;
max-width: 100%;
border-radius: 20px;
}
#article kbd {
padding: .2rem .4rem;
font-size: 87.5%;
color: #fff;
background-color: #212529;
border-radius: .2rem;
}
</style>
这里确确实实是取到内容了,前面文章内容是正常显示的啊。
from vue-side-catalog.
不好意思,我这里使用的是前后端分离的项目,所以项目涉及后端的内容(比如说api),没法创建codesandbox按照模板的要求重现
from vue-side-catalog.
请参考这个 #7 看是否能解决问题
from vue-side-catalog.
博主,还是不行那。
代码:
<template>
<div id="app">
<div v-if="article.course"><h1>{{ article.course }}:{{ article.title }}</h1></div>
<div v-else><h1>{{ article.title }}</h1></div>
<div id="article" align="left" v-html="articlebody"></div>
<side-catalog class="catalog" v-bind="catalogProps"></side-catalog>
</div>
</template>
<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
import marked from 'marked';
import hljs from "highlight.js";
import 'highlight.js/styles/atom-one-light.css'
import axios from 'axios';
import SideCatalog from 'vue-side-catalog';
import 'vue-side-catalog/lib/vue-side-catalog.css'
export default {
name: 'ArticleDetail',
components: {
SideCatalog,
},
data () {
return {
article: '',
articlebody: '',
catalogProps: {
container: "#article",
watch: true,
height: "calc(100% - 100px)",
title: "文章目录"
}
}
},
methods: {
getArticle () {
axios.get('http://127.0.0.1:8000/api/articles/' + this.$route.params.id)
.then(this.getArticleSucc)
},
getArticleSucc (res) {
this.article = res.data
this.articlebody = res.data.body
marked.setOptions({
renderer: new marked.Renderer(),
gfm: true,
tables: true,
breaks: false,
pedantic: false,
sanitize: false,
smartLists: true,
smartypants: false,
highlight: function(code) {
return hljs.highlightAuto(code).value;
},
})
this.articlebody = marked(this.articlebody)
},
},
mounted () {
this.getArticle()
},
}
</script>
<style>
.catalog {
position: fixed;
top: 250px;
right: 50px;
}
</style>
但是还是没法显示出来,和原来一样。几乎已经和文档一样了,不知道什么情况,求大佬帮助。
from vue-side-catalog.
@yaowei9363 求大佬帮忙看看
from vue-side-catalog.
还有一个补充,在文件最前面不用v-html
换上其他文本是可以正常显示的
from vue-side-catalog.
非常感谢
from vue-side-catalog.
我这里的还是不太一样,不能设定setTimeout
的
from vue-side-catalog.
例子中的setTimeout
只是模拟异步请求,你可以把你marked.js
解析过的文本替换例子中的vhtml
看是否奏效。
from vue-side-catalog.
好的,我再试试看
from vue-side-catalog.
博主,我这里貌似已经把marked.js
解析过的文本替换替换例子里面的vhtml
了,现在还是不行的
from vue-side-catalog.
codesandbox地址提供一下
from vue-side-catalog.
还是谢谢大佬了,这个不算必要功能,先算了吧
from vue-side-catalog.
大佬,我把这个重现到codesandbox上面了,一开始是可以的,但是请大佬刷新一下右侧显示区,就可以发现只剩一个标题了。
codesandbox地址:https://codesandbox.io/s/thirsty-lamport-523rs?file=/src/App.vue
from vue-side-catalog.
@yaowei9363 大佬可以帮忙看看吗
from vue-side-catalog.
你可以使用v-if
在v-html
的内容准备好后再渲染catalog
例子
from vue-side-catalog.
实在找不出来有什么问题啊
from vue-side-catalog.
请仔细看完给的例子,show
是在给articlebody
赋值后置为true
的
from vue-side-catalog.
谢谢大佬,问题解决了
from vue-side-catalog.
Related Issues (16)
- 动态渲染V-html时组件失效 HOT 3
- v-html动态渲染的内容无法生成目录 HOT 6
- 有没有支持vue3的版本? HOT 1
- 只能通过标签名来生成目录吗? HOT 1
- 不能复用吗?
- 大佬请问setTopList这个方法如何使用,能不能给个例子 HOT 1
- 请问为什么点击右侧的目录,左侧内容不会随着跳转呢
- refList属性删掉了吗,不能用了吗
- 大佬,现在使用refList时, 定义了t1, t1-1, t1-2, t1-3, t2, t2-1, t2-2, t2-3, 滚动时, 内容还在t1, 右侧的目录 显示在t2那几层了,删掉t2那基层,内容和 目录 才对应上。怎么解决
- 右侧目录超出页面时可以自动滚动吗 HOT 3
- 示例使用refList报错 HOT 2
- 页面内容如果是通过v-html,无法加载侧边栏的问题 HOT 4
- 当页面的标题过多时,侧边栏无法展示全部的内容 HOT 6
- 无法显示 目录 HOT 6
- 处于页面顶端时老是会跳到目录处 HOT 6
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-side-catalog.