VUE 페이지 에 외부 HTML 의 예제 코드 를 불 러 옵 니 다.
따라서 페이지 에 표 시 될 때 페이지 에 설 치 된 형식 으로 이 설명 파일 을 표시 합 니 다.원 하 는 효 과 를 내기 위해 뭔 가 를 해 야 한다.
기 존의 IFRAME 태그 와 달리 그 방식 은 비교적 낮 고 다른 버그 도 있다.
본 고 는 HTML 요청 이후 v-html 형식 으로 페이지 내부 에 불 러 오 는 것 입 니 다.전역 구성 요소 등록[v-html-panel]
1.HtmlPanel.vue 파일
<template>
<div>
<mu-circular-progress :size="40" v-if="loading"/>
<div v-html="html"></div>
</div>
</template>
<style>
</style>
<script>
export default{
// :url.sync=""
props: {
url: {
required: true
}
},
data () {
return {
loading: false,
html: ''
}
},
watch: {
url (value) {
this.load(value)
}
},
mounted () {
this.load(this.url)
},
methods: {
load (url) {
if (url && url.length > 0) {
//
this.loading = true
let param = {
accept: 'text/html, text/plain'
}
this.$http.get(url, param).then((response) => {
this.loading = false
// HTML
this.html = response.data
}).catch(() => {
this.loading = false
this.html = ' '
})
}
}
}
}
</script>
htmlViewSample.vue
<template>
<div>
<v-html-panel :url.asyc="url1"></v-html-panel>
<v-html-panel :url.asyc="url2"></v-html-panel>
</div>
</template>
<style scoped>
div{color:red}
</style>
<script>
export default{
data () {
return {
url1: '',
url2: ''
}
},
mounted () {
this.url1 = 'http://file.xxx.com/group1/M00/0C/F5/xxxxxxxx.html'
this.url2 = 'http://file.xxx.com/group1/M00/0D/3B/yyyyyyy.html'
},
methods: {
}
}
</script>
이전 효과 그림주의사항:
(Origin*을 사용 하면 오류 가 발생 할 수 있 습 니 다.요청 소스 의 주 소 를 직접 사용 합 니 다.안전성 이 걱정 되면 if+정규 조건 으로 판단 할 수 있 습 니 다)
location / {
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods GET;
access_log /data/nginx/logs/fdfs_https.log main;
...
}
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
VUE 기반 장치가 PC인지 모바일 포트인지 판단실제 개발 과정에서 자주 발생하는 수요는 현재 웹 페이지에 로그인한 장치가 PC인지 이동인지를 판단하고 PC 측과 모바일 측이 서로 다른 웹 내용을 표시하도록 요구하는 것이다. 그러면 현재 로그인 장치에 대한 판단이...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.