在vue项目中如何使用html页面

已于 2022-05-17 11:59:17 修改
阅读量2.4w 收藏 26
点赞数 8
分类专栏： vue 文章标签： vue 数据可视化
于 2021-04-28 16:15:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44221944/article/details/116234554
版权

如果有需求在vue页面要跳转新链接页页面可以使用原生html页面，下面将讲述从跳转到使用的过程
1、跳转到html页面

 <el-button style="background:#04FFFD;border:none;position:absolute;top:2px;right:100px;z-index:2001;font-weight:bold" round>
    <a target="_blank" :href="hreft">视频监控大屏</a>
 </el-button>

2、在html页面中获取后台数据，如果用原生ajax会有不方便，所以在这里我们使用html中嵌套vue页面写，并且使用axios请求服务器

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>123</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./static/CDN/custom-theme.css">
    <link href="https://cdn.bootcss.com/video.js/7.6.5/alt/video-js-cdn.min.css" rel="stylesheet">
</head>

<body>
    <div id="cons" class="container">

    </div>
</body>

</html>
<script src="./static//CDN/axios.min.js"></script>
<script src="./static/CDN/vue.js"></script>
<script src="./static/CDN/vue-router.min.js"></script>
<script src="./static/CDN/index.js"></script>
<script src="./static/config/index.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./static/CDN/indextree.js"></script>
<script src="./static/CDN/vue-video-player.js"></script>
<script src="./static/CDN/videojs-contrib-hls.js"></script>
<script src="https://cdn.bootcss.com/video.js/6.6.2/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script type="module">
    var init = axios.create({
        baseURL: '接口地址',
        headers: {
            "content-type": "multipart/form-data",
            "token": window.location.search.split('=')[1]
        }
    })
    // 假设如果很多接口都需要使用 token验证，可以把token信息放在请求头
    new Vue({
        el: "#cons",//预留填坑位置，比如html页面有一个<div id='app'></div>的元素
        components: {},
        template: `<div id="cons" class="container">
                    <header class="headers"></header>
                    <div class="body">
                        <div class="one"  v-if="showone">
                            <div class="ones">
                                <div class="bgicon1">
                                    <div class="bgiconone1"></div>    
                                    <div class="bgicontwo1"></div>    
                                    <div class="bgiconthree1"></div>    
                                    <div class="bgiconfour1"></div>    
                                </div>
                                <video style="width:100%;height:100%" controls>
                                    <source :src="url[0]" type="application/x-mpegURL">
                                </video>
                            </div>
                            <div class="ones">
                                <div class="bgicon1">
                                    <div class="bgiconone1"></div>    
                                    <div class="bgicontwo1"></div>    
                                    <div class="bgiconthree1"></div>    
                                    <div class="bgiconfour1"></div>    
                                </div>
                                <video style="width:100%;height:100%" controls>
                                    <source :src="url[1]" type="application/x-mpegURL">
                                </video>
                            </div>
                            <div class="ones">
                                <div class="bgicon1">
                                    <div class="bgiconone1"></div>    
                                    <div class="bgicontwo1"></div>    
                                    <div class="bgiconthree1"></div>    
                                    <div class="bgiconfour1"></div>    
                                </div>
                                <video style="width:100%;height:100%" controls>
                                    <source :src="url[2]" type="application/x-mpegURL">
                                </video>
                            </div>
                            <div class="ones">
                                <div class="bgicon1">
                                    <div class="bgiconone1"></div>    
                                    <div class="bgicontwo1"></div>    
                                    <div class="bgiconthree1"></div>    
                                    <div class="bgiconfour1"></div>    
                                </div>
                                <video style="width:100%;height:100%" controls>
                                    <source :src="url[3]" type="application/x-mpegURL">
                                </video>
                            </div>
                        </div>
                        <div class="two" v-if="showtwo">
                            <div class="twos">
                                <video style="width:100%;height:100%" controls>
                                    <source :src="url[0]" type="application/x-mpegURL">
                                </video>
                            </div>
                            <div class="twos">
                                <video style="width:100%;height:100%" controls>
                                    <source :src="url[1]" type="application/x-mpegURL">
                                </video>
                            </div>
                            <div class="twos">
                                <video style="width:100%;height:100%" controls>
                                    <source :src="url[2]" type="application/x-mpegURL">
                                </video>
                            </div>
                            <div class="twos">
                                <video style="width:100%;height:100%" controls>
                                    <source :src="url[3]" type="application/x-mpegURL">
                                </video>
                            </div>
                            <div class="twos">
                                <video style="width:100%;height:100%" controls>
                                    <source :src="url[4]" type="application/x-mpegURL">
                                </video>
                            </div>
                            <div class="twos">
                                <video style="width:100%;height:100%" controls>
                                    <source :src="url[5]" type="application/x-mpegURL">
                                </video>
                            </div>
                            <div class="twos">
                                <video style="width:100%;height:100%" controls>
                                    <source :src="url[6]" type="application/x-mpegURL">
                                </video>
                            </div>
                            <div class="twos">
                                <video style="width:100%;height:100%" controls>
                                    <source :src="url[7]" type="application/x-mpegURL">
                                </video>
                            </div>
                            <div class="twos">
                                <video style="width:100%;height:100%" controls>
                                    <source :src="url[8]" type="application/x-mpegURL">
                                </video>
                            </div>
                        </div>
                        <div class="three" v-if="showthree">
                            <div class="threes">
                                <div class="bgicon">
                                    <div class="bgiconone"></div>    
                                    <div class="bgicontwo"></div>    
                                    <div class="bgiconthree"></div>    
                                    <div class="bgiconfour"></div>    
                                </div>
                                <video id="my_video" preload="auto" style="width:100%;height:100%" controls>
                                    <source :src="url[0]" type="application/x-mpegURL">
                                </video>
                            </div>
                        </div>
                        <div class="maskbox"  @mouseenter="showLeftTree=true" @mouseleave="showLeftTree=false">
                            <div class="tran"></div>
                            <div class="lefts" v-show="showLeftTree">
                                <div id="leftBar" class="left-content-neworg" >
                                    <el-row class="left-tree-botder">
                                        <div class="left-tree-title">辖区企业</div>
                                    </el-row>
                                    <el-row>
                                    <el-input
                                        class="left-tree-search"
                                        placeholder="输入关键字进行过滤"
                                        clearable
                                        v-model="filterText">
                                    </el-input>
                                    </el-row>

                                    <div class="left-tree-1-neworg">
                                    <el-tree
                                        v-loading="dataTreeListLoading"
                                        ref="districtTree"
                                        :data="data"
                                        style="border: none; padding: 10px 10px 0px 20px;"
                                        :default-expanded-keys="[saveSecondId]"
                                        :expand-on-click-node="false"
                                        :filter-node-method="filterNode"
                                        :props="defaultProps"
                                        node-key="id"
                                        @node-click="handleNodeClick">
                                        <span class="custom-tree-node" slot-scope="{node,data}">
                                            <span :title="data.label" class="show-ellipsis">{{getTreeName(data.label)}}</span>
                                            <el-badge :value="data.childrenTotal" class="item" type="primary" v-if="data.childrenTotal != 0"></el-badge>
                                        </span>
                                    </el-tree>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>`,

        watch: {
            filterText(val) {
                this.$refs.districtTree.filter(val);
            },

        },
        data: function () {
            return {
                //代表要在template使用的数据，所以在template中将text变量添加进去,用{{}}包裹
                text: 'hellow word',
                data: [],
                saveSecondId: '',
                saveThreeDlist: [],
                threeLon: '',
                threeLat: '',
                saveBackMapData: {},
                filterText: '',
                showLeftTree: false,
                dataTreeListLoading: false,
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                idone:'',
                url:[],
                showone:false,
                showtwo:false,
                showthree:false
            }

        },
        mounted() {
            this.getTree()
        },
        methods: {
            videoslist(data){
                let _=this
                // api/v1/cameras
                init({
                    method: 'get',
                    url: '后台接口',
                    headers: {
                        'Authorization': _.token
                    },
                    params: {
                        'unitId': data
                    }
                }).then(res => {
                    _.url=[]
                    if(res.data.code==0){
                        if(res.data.data.length==1){
                            _.showthree=true
                            _.showone=false
                            _.showtwo=false
                        }
                        else if(res.data.data.length>1&&res.data.data.length<=4){
                            _.showtwo=true
                            _.showthree=false
                            _.showone=false
                        }
                        else if(res.data.data.length>4&&res.data.data.length<=9){
                            _.showone=true
                            _.showthree=false
                            _.showtwo=false
                        }else if(res.data.data.length==0){
                            _.showthree=true
                            _.showone=false
                            _.showtwo=false
                        }
                        res.data.data.map(v=>{
                            let ar=v.addr.split('?')
                            if(ar){
                                _.url.push(ar[0])
                            }else{
                                _.url.push(v.addr)
                            }
                            _.playVideo('')//播放其它视频前执行，清空之前的url
                            _.playVideo(_.url[0])
                        })
                    }
                })
            },
            getTree() {
                let _ = this
                _.dataTreeListLoading = true
                init({
                    method: 'get',
                    url: '后台接口',
                    headers: {
                        'Authorization': _.token
                    },
                    params: {
                        'statusType': '1'
                    }
                }).then(data => {
                    if (data && data.data.code === 0) {
                        let $data = data.data.data;
                        let newArr = [];
                        for (let i = 0, len = $data.length; i < len; i++) {
                            let newJson = {};
                            newJson.id = $data[i].id;
                            newJson.parent = $data[i].parent;
                            newJson.parentName = $data[i].parentName;
                            newJson.label = $data[i].text;
                            newJson.lon = $data[i].lon;
                            newJson.lat = $data[i].lat;
                            newJson.types = $data[i].types;
                            newJson.childrenTotal = $data[i].childrenTotal;
                            newJson.cameraType = $data[i].cameraType;
                            newJson.threeType = $data[i].threeType;
                            newArr.push(newJson);
                        }
                        const result = construct(newArr, {
                            id: 'id',
                            pid: 'parent',
                            lable: 'label',
                            children: 'children'
                        });
                        _.saveSecondId = result[0].id;

                        _.data = result;
                        _.idone=_.data[0].children[0].children[0].id
                        _.videoslist(_.idone)
                        this.dataTreeListLoading = false

                        _.saveThreeDlist = _.data;


                        if (_.saveThreeDlist[0].lon == undefined && _.saveThreeDlist[0].lat == undefined) {
                            _.threeLon = _.saveThreeDlist[0].longitude;
                            _.threeLat = _.saveThreeDlist[0].latitude;


                        } else {
                            _.threeLon = _.saveThreeDlist[0].lon;
                            _.threeLat = _.saveThreeDlist[0].lat;

                        }

                        _.saveBackMapData = _.saveThreeDlist[0];

                    }
                })
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            getTreeName(lable) {
                const _ = this;
                if (lable.length > 14) {
                    lable = lable.substring(0, 13) + '...'
                } else {
                    lable = lable;
                }
                return lable
            },
            handleNodeClick(data) {
                let idselect=data.id
                this.videoslist(idselect)
            },
            playVideo(e){//e为视频的m3u8 url
                             this.$nextTick(()=>{
                    var myPlayertwos1 = document.getElementById('my_videotwos1')
                    if(Hls.isSupported()) {
                        var hls = new Hls();
                        hls.loadSource(e);
                        hls.attachMedia(myPlayertwos1);
                        hls.on(Hls.Events.MANIFEST_PARSED,function() {
                            myPlayertwos1.play();
                        });
                    }
                })
                this.$nextTick(()=>{
                    var myPlayertwos2 = document.getElementById('my_videotwos2')
                    if(Hls.isSupported()) {
                        var hls = new Hls();
                        hls.loadSource(e);
                        hls.attachMedia(myPlayertwos2);
                        hls.on(Hls.Events.MANIFEST_PARSED,function() {
                            myPlayertwos2.play();
                        });
                    }
                })
                this.$nextTick(()=>{
                    var myPlayertwos3 = document.getElementById('my_videotwos3')
                    if(Hls.isSupported()) {
                        var hls = new Hls();
                        hls.loadSource(e);
                        hls.attachMedia(myPlayertwos3);
                        hls.on(Hls.Events.MANIFEST_PARSED,function() {
                            myPlayertwos3.play();
                        });
                    }
                })
                this.$nextTick(()=>{
                    var myPlayertwos4 = document.getElementById('my_videotwos4')
                    if(Hls.isSupported()) {
                        var hls = new Hls();
                        hls.loadSource(e);
                        hls.attachMedia(myPlayertwos4);
                        hls.on(Hls.Events.MANIFEST_PARSED,function() {
                            myPlayertwos4.play();
                        });
                    }
                })
                this.$nextTick(()=>{
                    var myPlayertwos5 = document.getElementById('my_videotwos5')
                    if(Hls.isSupported()) {
                        var hls = new Hls();
                        hls.loadSource(e);
                        hls.attachMedia(myPlayertwos5);
                        hls.on(Hls.Events.MANIFEST_PARSED,function() {
                            myPlayertwos5.play();
                        });
                    }
                })
                this.$nextTick(()=>{
                    var myPlayertwos6 = document.getElementById('my_videotwos6')
                    if(Hls.isSupported()) {
                        var hls = new Hls();
                        hls.loadSource(e);
                        hls.attachMedia(myPlayertwos6);
                        hls.on(Hls.Events.MANIFEST_PARSED,function() {
                            myPlayertwos6.play();
                        });
                    }
                })
                this.$nextTick(()=>{
                    var myPlayertwos7 = document.getElementById('my_videotwos7')
                    if(Hls.isSupported()) {
                        var hls = new Hls();
                        hls.loadSource(e);
                        hls.attachMedia(myPlayertwos7);
                        hls.on(Hls.Events.MANIFEST_PARSED,function() {
                            myPlayertwos7.play();
                        });
                    }
                })
                this.$nextTick(()=>{
                    var myPlayertwos8 = document.getElementById('my_videotwos8')
                    if(Hls.isSupported()) {
                        var hls = new Hls();
                        hls.loadSource(e);
                        hls.attachMedia(myPlayertwos8);
                        hls.on(Hls.Events.MANIFEST_PARSED,function() {
                            myPlayertwos8.play();
                        });
                    }
                })
                this.$nextTick(()=>{
                    var myPlayertwos9 = document.getElementById('my_videotwos9')
                    if(Hls.isSupported()) {
                        var hls = new Hls();
                        hls.loadSource(e);
                        hls.attachMedia(myPlayertwos9);
                        hls.on(Hls.Events.MANIFEST_PARSED,function() {
                            myPlayertwos9.play();
                        });
                    }
                })
            },

        }


    })

</script>

<style scoped>
    .container {
        width: 100%;
        height: 100vh;
        background-image: url('./src/assets/img/videomoniters/bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 0 30px;
        position: relative;
    }

    .headers {
        width: 100%;
        height: 100px;
        background-image: url('./src/assets/img/videomoniters/header.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 5px;
    }

    .body {
        width: 100%;
        height: 85vh;
        background-image: url('./src/assets/img/videomoniters/bg1.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .el-tree-node__content:hover{
        background: rgba(0,0,0,0.4);
    }
    .one,
    .two,
    .three {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        box-sizing: border-box;
        padding: 10px 50px;
    }

    .ones {
        width: 48%;
        height: 40vh;
        position: relative;
    }

    .twos {
        width: 33%;
        height: 27vh;
        position: relative;
    }
    .threes{
        width: 100%;
        height: 100%;
        position: relative;
    }
    .bgicon,.bgicon1{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .bgiconone,.bgicontwo,.bgiconthree,.bgiconfour,.bgiconone1,.bgicontwo1,.bgiconthree1,.bgiconfour1{
        width: 30px;
        height: 30px;
        position: absolute;
        top: 0;
        left: -2%;
        background-image: url('./src/assets/img/videomoniters/topleft.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .bgicontwo,.bgicontwo1{
        left: 100%;
        background-image: url('./src/assets/img/videomoniters/topright.png');
    }
    .bgiconthree,.bgiconthree1{
        top: 95%;
        background-image: url('./src/assets/img/videomoniters/bottomleft.png');
    }
    .bgiconfour,.bgiconfour1{
        top: 95%;
        left: 100%;
        background-image: url('./src/assets/img/videomoniters/bottomright.png');
    }

    .lefts {
        width: 360px;
        height: 100vh;
        background-image: url('./src/assets/img/videomoniters/mak.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: -40vh;
        left: 0;
        box-sizing: border-box;
        padding: 50px 30px;
    }
    .left-tree-botder{
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #142c49;
      
    }
    .left-tree-title{
        float: left;
        font-size: 16px;
        color: #02e5d1;
        padding-left: 20px;
      }
    .left-tree-search{
      padding: 0px 4px 0px 0px;
      margin-top: 10px;
    }
    .left-tree-1-neworg{
      height: 90vh;
      overflow-y: auto;
      
    }
    .el-tree{
        min-height: 500px;
        background:rgba(0,0,0,0.8);
    }
    .show-ellipsis {
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #00BEFF;
      font-size: 14px;
    }
    .el-input--suffix .el-input__inner{
        background: rgba(0,0,0,0.8);
        color: #fff;
    }
    .maskbox{
        width: 10px;
        height: 10vh;
        /* background: rgba(0,0,0,0); */
        background:#01BEEF;
        position: absolute;
        top: 40vh;
        left: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 10px;
    }
    .tran{
        width: 10px;
        height: 10px;
        background-image: url('./src/assets/img/videomoniters/triangle.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 45%;
        left: 10%;
    }
</style>
秃头码猿
关注
  • 8
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML页面中简单使用Vue
老婆就是要败家
07-15 8494
Vue入门案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>快速入门</title> <script src="js/vuejs-2.5.16.js"></script> </head> <body> <div id="app">
详解如何在vue项目中使用layui框架及采坑
10-17
然而，在Vue这样的现代前端框架中使用layui并不像在传统HTML页面中那样直接。本文将深入探讨如何在Vue项目中正确使用layui，以及如何解决在集成过程中可能遇到的问题。 首先，我们来看第一个问题：通过npm安装layui...
VUE页面中加载外部HTML的示例代码
08-29
本篇文章主要介绍了VUE页面中加载外部HTML的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue3项目中引入html页面
weixin_42560947的博客
11-24 1万+
Vue3项目中引入html页面
使用Vue写法渲染HTML文件
最新发布
bjzhang75的博客
05-12 373
在这个示例中，我们创建了一个Vue实例，将其挂载到id为“app”的HTML元素上。在Vue.js中，我们可以使用Vue的语法来编写HTML文件，并通过Vue实例来渲染这些文件。：在HTML文件中，我们可以使用Vue提供的指令、插值和事件处理等特性，编写具有动态交互性的内容。：确保在HTML文件中引入Vue.js文件，以便浏览器能够识别和执行Vue的语法。：在Vue实例中，我们通过指定el属性来指定Vue实例挂载到哪个HTML元素上。：首先，我们需要创建一个Vue实例，以便将Vue绑定到HTML文件中。
vue跳转外链页面以及跳转html页面超简单方法
qq_39123467的博客
11-17 4187
vue跳转外链页面以及跳转html页面超简单方法
【vue-html】怎么在 VUE 页面中加载外部 HTML
小墨鱼的前端问题录
07-20 4197
指令时需要格外小心，因为它会将字符串中的所有 HTML 代码都渲染为实际的 HTML 内容。这可能会导致跨站脚本（XSS）攻击，因此应该仔细过滤或转义任何动态生成的 HTML 内容。这个指令可以用来将 HTML 字符串渲染为实际的 HTML 内容。库获取外部 HTML 文件的内容，并将其存储在 Vue 实例的。在 Vue 中加载外部 HTML 可以使用。然后，在模板中，我们使用。以下是一个简单的示例，展示如何使用。渲染为实际的 HTML 内容。在这个示例中，我们首先使用。
在Vue中如何渲染使用Vue写法的HTML文件？
新生代码农的博客
04-25 685
在Vue.js中，我们可以使用Vue的语法来编写HTML文件，并通过Vue实例来渲染这些文件。编写HTML文件：在HTML文件中，我们可以使用Vue提供的指令、插值和事件处理等特性，编写具有动态交互性的内容。引入Vue.js文件：确保在HTML文件中引入Vue.js文件，以便浏览器能够识别和执行Vue的语法。指定el属性：在Vue实例中，我们通过指定el属性来指定Vue实例挂载到哪个HTML元素上。创建Vue实例：首先，我们需要创建一个Vue实例，以便将Vue绑定到HTML文件中。// 创建Vue实例。
如何在html中使用Vue3
半月的博客
10-18 4845
作为一名后端人员，有时候会写一点前端代码配合使用。 但比较轻量，没有必要使用脚手架创建工程，故此我在html中使用就好了。 正如那句话，适合自己的才是最好的。
解决vue打包后打开html页面空白问题
qq_41121912的博客
11-02 2088
解决vue打包后打开html页面空白问题
vue嵌入html页面显示
weixin_47106572的博客
06-08 3815
1，html文件必须放到根目录的public下（有静态文件夹static的好像也可以，没试过） 2，在使用的vue页面引入 <div> <iframe src="../../../../../beijing.html" frameborder="0" style="width: 100%; height: 100%" id="iframeBox" ></iframe> &l
vue2： 外接html页面 iframe 使用
weixin_1095的博客
06-16 3411
contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档，可以通过所有标准的 DOM 方法来处理被返回的对象。
如何在vue项目中嵌入jsp页面的方法(2种)
10-15
主要介绍了如何在vue项目中嵌入jsp页面的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue项目中使用vue-layer弹框插件的方法
10-15
在Vue项目中，为了实现各种弹框功能，如提示、确认、信息框等，我们可以使用vue-layer这个弹框插件。vue-layer是一个基于Vue.js的轻量级弹窗组件，它提供了丰富的弹框类型和自定义选项，适用于多种场景。 首先，...
在 React、Vue项目中使用SVG的方法
08-28
在 Vue 中使用 SVG 可以像在普通网页中使用 SVG 那样，或者利用 SVG 的 use 标签，不直接在主页面中编写绘制 SVG 图标的代码，而是把这一大段的代码放到另外的文件中，然后使用 use 引用这段绘制图标的代码。...
vue项目跳转html页面
weixin_44042792的博客
03-18 867
1. 把html页面以及相关文件放到public文件夹下（目的和index.html同级）2.在vue项目中正常写跳转事件，只是路径写法需要注意。
解决Vue项目打包后dist中的index.html用浏览器直接打开显示空白页的问题
热门推荐
青春木鱼的博客
07-14 1万+
三种方案解决Vue项目打包后dist中的index.html用浏览器无法直接打开的问题
vue与html方法互调
u014645827的博客
05-06 1823
vue页面 <iframe frameborder="0" name="myframe" :src="geturl"></iframe> <button @click="gethtmlmethod()">调用html的方法</button> data(){ return{ geturl:"static/myhtml.html" } }, methods:{ ...
我如何在vue项目中使用vue-embed
07-22
要在Vue项目中使用vue-embed插件，您可以按照以下步骤进行操作： 1. 安装vue-embed插件：在终端中，导航到Vue项目的根目录，并运行以下命令来安装vue-embed插件： ```bash npm install vue-embed ``` 2. 导入和注册vue-embed插件：在需要使用vue-embed的Vue组件中，通过import语句将vue-embed插件导入，并使用Vue.use()方法进行注册。例如： ```javascript import VueEmbed from 'vue-embed'; export default { // ... mounted() { this.$embed.register('vue-embed', VueEmbed); }, // ... }; ``` 3. 在模板中使用vue-embed：在Vue组件的模板中，您可以使用`<vue-embed>`标签来嵌入外部网页。例如： ```html <template> <div> <vue-embed src="https://example.com"></vue-embed> </div> </template> ``` 4. 配置vue-embed：您可以根据需要配置vue-embed的属性。例如，您可以设置iframe的高度，使用`:height`属性来设置高度值。 ```html <template> <div> <vue-embed src="https://example.com" :height="500"></vue-embed> </div> </template> ``` 这样就可以在Vue项目中使用vue-embed插件来嵌入外部网页了。请确保在使用插件时遵循其文档和最佳实践，并处理好可能的安全和隐私问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值