vuev-html引入如何vue框架自身样式

html-css016

vuev-html引入如何vue框架自身样式,第1张

如果要在Vue中引入Vue框架自身的样式，需要先使用 npm 或 yarn 安装 Vue 的官方样式库，安装命令为：npm install vue-style-loader。然后，可以将对应的 CSS 文件引入 HTML 文件中即可。

首先vue里面内嵌html文件必须存放在项目 public文件夹下，可以和vue里面index.html同级如图所示：

我这里的 draw_PLS.html存放的是内嵌的html，map.js则是HTML里面的js。

以我项目为例

1.首先在vue页面里面通过iframe 的形式引用 注意 ref的值和 name的值我这里保持一致了，接下来都会有用到。（注意src里面的路径要和项目的路径一致哦）

例：this.srcurl=' http://192.168.0.0:9527/draw_PLS.html'

2.通过 声明一个iframes获取到iframe，然后添加一个name的属性，this.datavallist为我需要传递的数组，通过 iframes.postMessage 的方法进行传递。（cmd:'dian'用于做判断使用，可以不传）

3.在 draw_PLS.html 做如下操作

这样就可以获取到啦。

：有什么地方不懂的可以找我共同进步，写的不够好还请多多包涵。

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

?

12345678910111213141516171819202122232425

<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>

2、效果图

3、注意事项：

直接使用axios处理的GET请求，需要处理跨域；

外部的css样式会作用到显示的html；

同时加载的外部html里的script也可能会执行，需要按需处理下；

外部HTML文件内部的相对路径将不会被自动识别，绝对路径可以。