基础页面操作

刘欢2025/7/3原创大约 3 分钟约 899 字

加载外网页面

<template>
    <div>
        <iframe src="https://www.iconfont.cn/" id="mobsf" scrolling="no" frameborder="0" style="position:absolute;top:64px;left: 240px;right:0px;bottom:100px;"></iframe>
    </div>
</template>
 
 
<script>
    export default {
        data () {
            return {
            }
        },
        mounted(){
            /**
            * iframe-宽高自适应显示   
            */
            function changeMobsfIframe(){
                const mobsf = document.getElementById('mobsf');
                const deviceWidth = document.body.clientWidth;
                const deviceHeight = document.body.clientHeight;
                mobsf.style.width = (Number(deviceWidth)-240) + 'px'; //数字是页面布局宽度差值
                mobsf.style.height = (Number(deviceHeight)-64) + 'px'; //数字是页面布局高度差
            }

            changeMobsfIframe()

            window.onresize = function(){
                changeMobsfIframe()
            }
        }
    }
</script>

动态基础操作

transition

<template>
    <div>
        <button @click="play('topToTop')">从顶部滑入、顶部滑出</button>
        <button @click="play('topToBottom')">从顶部滑入、底部滑出</button>
        <button @click="play('bottomToTop')">从底部滑入、顶部滑出</button>
        <button @click="play('bottomToBottom')">从底部滑入、底部滑出</button>
        <button @click="play('leftToRight')">从左侧滑入、右侧滑出</button>
        <button @click="play('leftToLeft')">从左侧滑入、左侧滑出</button>
        <button @click="play('rightToLeft')">从右侧滑入、左侧滑出</button>
        <button @click="play('rightToRight')">从右侧滑入、左侧滑出</button>
        <div class="view">
            <transition :name="transName">
                <div v-show="show" class="block">Element</div>
            </transition>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                transName: '',
                show: true,
            }
        },
        methods: {
            play(name) {
                this.transName = name;
                this.show = !this.show;
            }
        }
    }
</script>
<style>
    .view {
        position: relative;
        height: 300px;
        width: 300px;
        background: gainsboro;
        overflow: hidden;
    }
 
    .block {
        position: absolute;
        height: 100%;
        width: 100%;
        text-align: center;
        color: white;
        line-height: 300px;
        background: red;
    }
 
    /*滑入——从顶部*/
    @keyframes slideIn_top {
        0% {
            top: -100%;
        }
 
        100% {
            top: 0;
        }
    }
 
    /*滑入——从底部*/
    @keyframes slideIn_bottom {
        0% {
            top: 100%;
        }
 
        100% {
            top: 0;
        }
    }
 
    /*滑入——从左侧*/
    @keyframes slideIn_left {
        0% {
            left: -100%;
        }
 
        100% {
            left: 0;
        }
    }
 
    /*滑入——从右侧*/
    @keyframes slideIn_right {
        0% {
            left: 100%;
        }
 
        100% {
            left: 0;
        }
    }
 
    /*滑出——从顶部*/
    @keyframes slideOut_top {
        0% {
            top: 0;
        }
 
        100% {
            top: -100%
        }
    }
 
    /*滑出——从底部*/
    @keyframes slideOut_bottom {
        0% {
            top: 0;
        }
 
        100% {
            top: 100%
        }
    }
 
    /*滑出——从左侧*/
    @keyframes slideOut_left {
        0% {
            left: 0;
        }
 
        100% {
            left: -100%
        }
    }
 
    /*滑出——从右侧*/
    @keyframes slideOut_right {
        0% {
            left: 0;
        }
 
        100% {
            left: 100%
        }
    }
 
    
    /*(滑入)——从顶部滑入,从顶部滑出*/
    .topToTop-enter-active {
        animation: slideIn_top 1s;
    }
    /*(滑出)——从顶部滑入,从顶部滑出*/
    .topToTop-leave-active {
        animation: slideOut_top 1s;
    }
 
 
    /*(滑入)——从顶部滑入,从底部滑出*/
    .topToBottom-enter-active {
        animation: slideIn_top 1s;
    }
    /*(滑出)——从顶部滑入,从底部滑出*/
    .topToBottom-leave-active {
        animation: slideOut_bottom 1s;
    }
 
 
    /*(滑入)——从底部滑入,从顶部滑出*/
    .bottomToTop-enter-active {
        animation: slideIn_bottom 1s;
    }
    /*(滑出)——从底部滑入,从顶部滑出*/
    .bottomToTop-leave-active {
        animation: slideOut_top 1s;
    }
 
 
    /*(滑入)——从底部滑入,从底部滑出*/
    .bottomToBottom-enter-active {
        animation: slideIn_bottom 1s;
    }
    /*(滑出)——从底部滑入,从底部滑出*/
    .bottomToBottom-leave-active {
        animation: slideOut_bottom 1s;
    }
 
 
    /*(滑入)——从左侧滑入,从右侧滑出*/
    .leftToRight-enter-active {
        animation: slideIn_left 1s;
    }
    /*(滑出)——从左侧滑入,从右侧滑出*/
    .leftToRight-leave-active {
        animation: slideOut_right 1s;
    }
 
 
    /*(滑入)——从左侧滑入,从左侧滑出*/
    .leftToLeft-enter-active {
        animation: slideIn_left 1s;
    }
    /*(滑出)——从左侧滑入,从左侧滑出*/
    .leftToLeft-leave-active {
        animation: slideOut_left 1s;
    }
 
 
    /*(滑入)——从右侧滑入,从左侧滑出*/
    .rightToLeft-enter-active {
        animation: slideIn_right 1s;
    }
    /*(滑出)——从右侧滑入,从左侧滑出*/
    .rightToLeft-leave-active {
        animation: slideOut_right 1s;
    }
 
 
    /*(滑入)——从右侧滑入,从右侧滑出*/
    .rightToRight-enter-active {
        animation: slideIn_right 1s;
    }
    /*(滑出)——从右侧滑入,从右侧滑出*/
    .rightToRight-leave-active {
        animation: slideOut_right 1s;
    }
</style>

Animate.css

安装

npm i animate.css

main.js

import animate from 'animate.css'

Vue.use(animate)

实例

<h1 class="animate__animated animate__bounce">这是动画文字</h1>

通过对class的设置

在特定的情况下进行动画时，就可以使用三元判断

<div :class="addthreeflag && item.flag ? 'animate__animated animate__backInUp' : ' '">
这是动画文字</div>

使用类方式

.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: rollIn; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}

动态添加类

this.$nextTick(function(){
    this.$refs.div.className='my-element'
})

官方文档