精华内容
下载资源
问答
  • 主要介绍了Vue.js 关于页面加载完成执行一个方法的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 今天小编就为大家分享一篇VUE DOM加载执行自定义事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了详解Vue.js在页面加载执行某个方法的实现代码,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 如下所示: var c = new Vue({ el: "#cartoon", data: data, mounted: { ...以上这篇vue加载完成后的回调函数方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
  • 首先我们会想着在mounted或者created里面加入想要执行方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。 解决思路: 1.通过子页面调用...

    首先我们会想着在mounted或者created里面加入想要执行的方法,但是有的时候会遇到在你执行这个方法的时候,页面还并没有被渲染完成,所以就会出现这个方法在匹配页面标签报错的情况。

    解决思路:

    1.通过子页面调用父页面的方法,因为在子页面开始渲染的时候,你的父页面肯定是已经渲染好了的,前提这里的方法中是去找寻父页面的标签。

    2.直接在本页面监视一个参数,发现参数被初始化了,说明页面也已经加载完成,因为你的页面用到了这个参数。

     

    方法1案例:tab页里的子页面如果没有内容就隐藏

    父页面代码

    <el-tabs v-model="initTab" type="card">
      <el-tab-pane label="1信息" name="tab1">
        1
      </el-tab-pane>
      <el-tab-pane label="2报告" name="tab2">
        2
      </el-tab-pane>
      <el-tab-pane label="3信息" name="tab3">
        3
      </el-tab-pane>
      <el-tab-pane label="4信息" name="tab4">
        <ziyemian-group @tabShow="tabShow" title="4信息" v-if="detailInfo">
        </ziyemian-group>
    
      </el-tab-pane>
      <el-tab-pane label="5信息" name="tab5">
        5
      </el-tab-pane>
      <el-tab-pane label="其它信息" name="tab6">
        6
      </el-tab-pane>
    </el-tabs>
    
    import ZiyemianGroup from './ZiyemianGroup.vue'
    components: {
      ZiyemianGroup
    },
    data () {
        return {
            detailInfo: {},
            initTab:‘tab1’
        }
    }
    methods: {
      tabShow: (data) => {
        document.getElementsByClassName('el-tabs__item').item(4).style.display = data
      },
    }

    然后是ZiyemianGroup.vue的代码,这里主要就是方法调用,页面自己搞定

    data () {
      return {
        list: []
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      init() {
        if (list.length > 0) {
            this.$emit('tabShow', 'inline')
        } else {
            this.$emit('tabShow', 'none')
        }
      )
    }

    list是子页面的内容,这样如果子页面没有内容就可以隐藏掉了

     

    方法2案例:我这边需要tab页隐藏

    <el-tabs v-model="initTab" type="card">
      <el-tab-pane label="1信息" name="tab1">
        1
      </el-tab-pane>
      <el-tab-pane label="2报告" name="tab2">
        2
      </el-tab-pane>
      <el-tab-pane label="3信息" name="tab3">
        3
      </el-tab-pane>
      <el-tab-pane label="4信息" name="tab4">
        <ziyemian-group title="4信息" v-if="detailInfo">
        </ziyemian-group>
    
      </el-tab-pane>
      <el-tab-pane label="5信息" name="tab5">
        5
      </el-tab-pane>
      <el-tab-pane label="其它信息" name="tab6">
        6
      </el-tab-pane>
    </el-tabs>
    
    import ZiyemianGroup from './ZiyemianGroup.vue'
    components: {
      ZiyemianGroup
    },
    data () {
        return {
            detailInfo: {},
            initTab:‘tab1’
        }
    }
    watch: {
      detailInfo: function () {
        this.$nextTick(function () {
          this.tabShow()
        })
      }
    },
    methods: {
        tabShow () {
            document.getElementsByClassName('el-tabs__item').item(6).style.display = 'none' // 隐藏tab6
        }
    }

    nextTick方法,意思是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

    隐藏tab的方法我用了原生js,因为vue生成后的页面和写的vue页面有所差别,所以我直接用了最笨的方法进行匹配。

    展开全文
  • vuejs页面加载完成执行函数

    千次阅读 2020-12-23 08:32:55
    module.exports = { data: function(){ return { memberQrcodeState: false } }, components: {memberQrcode}, created: ... 在这基础上加一个页面加载完成执行的函数!我是小白,第二天接触vuejs,希望大神指点一二

    module.exports = {

    data: function(){

    return {

    memberQrcodeState: false

    }

    },

    components: {memberQrcode},

    created: function(){

    },

    beforeRouteEnter: function(to, from, next) {

    // 在渲染该组件的对应路由被 confirm 前调用

    // 不!能!获取组件实例 `this`

    // 因为当钩子执行前,组件实例还没被创建

    //$e.target.src= require("../imgs/test/232.jpg")

    next();

    return true;

    },

    methods: {

    },

    beforeRouteLeave: function(to, from, next) {

    // 导航离开该组件的对应路由时调用

    // 可以访问组件实例 `this`

    next();

    }

    };

    在这基础上加一个页面加载完成后执行的函数!我是小白,第二天接触vuejs,希望大神指点一二

    展开全文
  • 今天小编就为大家分享一篇Vue页面数据渲染完成之后的调用方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue.nextTick( [callback, context] )方法页面元素加载完成之后,执行里面的方法 this.$nextTick(()=>{ //元素加载完成执行的代码 });

    Vue.nextTick( [callback, context] )方法在页面元素加载完成之后,执行里面的方法

    this.$nextTick(()=>{
        //元素加载完成后执行的代码
    });
    
    展开全文
  • 最近在玩一个类似拼图的东东,业务场景就是在主图加载页面的时候,计算主图相对页面容器的缩小放大系数,通过这个系数计算子图的左边及宽度问题:在mounted中调用计算主图的原始宽高时,提示元素为空(通过document...

    最近在玩一个类似拼图的东东,业务场景就是在主图加载到页面的时候,计算主图相对页面容器的缩小放大系数,通过这个系数计算子图的左边及宽度

    问题:在mounted中调用计算主图的原始宽高时,提示元素为空(通过document.getElementsByClassName('main-img')[this.curIndex]获取页面元素),因此导致所有的计算都返回0

    在mounted中,使用一个定时器就是好的,使用nextTick也是无效

    mounted() {

    this.screenX = document.body.offsetWidth;

    this.getData();

    // 有效

    setTimeout(() => {

    this.init()

    }, 1000)

    // 无效

    this.$nextTick(() => {

    this.init()

    })

    window.onresize = () => {

    return (() => {

    this.screenX = document.body.offsetWidth;

    console.log('this.screenX', this.screenX);

    this.init()

    })()

    }

    },

    不知道有没有更优雅的方法,能解决这个问题

    // import Swiper from '@/components/common/swiper/swiper.vue'

    // import { Swiper } from 'vux'

    import myswiper from '@/components/common/myswiper/swiper.vue'

    import imgData from '@/datas/detailImg.json'

    import part1 from '@/datas/part_1.json'

    import part2 from '@/datas/part_2.json'

    import part3 from '@/datas/part_3.json'

    import part4 from '@/datas/part_4.json'

    export default {

    name: "detail",

    components: {

    // Swiper,

    myswiper

    },

    data() {

    return {

    flag: false, //控制部件选择是否出现

    containerImg: '', //当前滑到的图片容器

    // mainImgLeft: 0,

    // mainImgTop: 0,

    imgList: [], //图片list

    curIndex: 0, //当前选中的那个一个list的索引

    screenX: '', //浏览器屏幕的可视区域宽度,计算没张图片的tranform

    partList: [], //部件的list

    flagMask: false, //点击图片,查看大图效果的标识

    warpTop: 0 //计算大图的top值

    };

    },

    mounted() {

    this.screenX = document.body.offsetWidth;

    this.getData();

    // 有效

    // setTimeout(() => {

    this.init()

    // }, 500)

    // // 无效

    // this.$nextTick(() => {

    // this.init()

    // })

    window.onresize = () => {

    return (() => {

    this.screenX = document.body.offsetWidth;

    console.log('this.screenX', this.screenX);

    this.init()

    })()

    }

    },

    methods: {

    // 获取图形数据

    getData() {

    this.imgList = imgData;

    },

    // 获取局部列表

    getPartData(id) {

    this.flag = true;

    switch (id) {

    case "0":

    this.partList = part1;

    break;

    case "1":

    this.partList = part2;

    break;

    case "2":

    this.partList = part3;

    break;

    case "3":

    this.partList = part4;

    break;

    }

    },

    init() {

    // 进来时通过索引找到当前的轮播项,判断是否已经加载过,如果已经加载过,则不加载,如果没有加载过,则设置为加载过,加载

    const curItem = this.imgList[this.curIndex];

    // if (curItem.loaded) {

    // return

    // } else {

    // curItem.loaded = true;

    this.containerImg = document.getElementsByClassName('main-img')[this.curIndex];

    // 获取大图元素的真实宽高

    this.bodyImg = this.getRealWH(this.containerImg);

    // 计算width的缩放比例 375

    this.xRatio = this.bodyImg.x / this.containerImg.offsetWidth;

    // this.xRatio = this.bodyImg.x / 375;

    // 计算height的缩放比例 211

    this.yRatio = this.bodyImg.y / this.containerImg.offsetHeight;

    // this.yRatio = this.bodyImg.y / 211;

    // this.resetStyle('part_A', 'part_A');

    // this.resetStyle('part_B', 'part_B');

    var tempArr = curItem.mainPart || [];

    for (var i = 0; i < tempArr.length; i++) {

    this.resetStyle('main_' + tempArr[i].pid, 'main_' + tempArr[i].pid);

    }

    // }

    },

    /**

    * 获取img的真实宽高

    * @Author shunzizhan

    * @Email shunzizhan@163.com

    * @DateTime 2017-10-24T10:42:03+0800

    * @param {[type]} myimage [description]

    * @return {[type]} [description]

    */

    getRealWH(myimage) {

    var rw, rh;

    if (typeof myimage.naturalWidth == "undefined") {   // IE 6/7/8

    var i = new Image();

    i.src = myimage.src;

    rw = i.width;

    rh = i.height;

    } else {   // HTML5 browsers

    rw = myimage.naturalWidth;

    rh = myimage.naturalHeight;

    }

    return { x: rw, y: rh }

    },

    /**

    * 重新设置元素的样式

    * @Author shunzizhan

    * @Email shunzizhan@163.com

    * @DateTime 2017-10-24T10:39:46+0800

    * @param {[type]} ele [当前点击的元素]

    * @param {[type]} eleTag [目标元素]

    * @param {[type]} xRatio [宽度缩放比例]

    * @param {[type]} yRatio [高度缩放比例]

    * @return {[type]} [description]

    */

    resetStyle(ele, eleTag) {

    if (event) {

    event.stopPropagation(); //阻止冒泡

    }

    var xRatio = this.xRatio;

    var yRatio = this.yRatio;

    var _dom = document.getElementById(ele);

    var partAImg = this.getRealWH(_dom);

    // 没个部位,坐标,尺寸均一致

    var x = _dom.getAttribute('data-x');

    var y = _dom.getAttribute('data-y');

    // var tempX = this.mainImgLeft / xRatio;

    var tempX = x / xRatio;

    var tempW = partAImg.x / xRatio;

    // var tempY = this.mainImgTop / yRatio;

    var tempY = y / yRatio;

    var tempH = partAImg.y / yRatio;

    var _tagDom = document.getElementById(eleTag);

    _tagDom.src = _dom.src;

    _tagDom.style.left = tempX + 'px';

    _tagDom.style.top = tempY + 'px';

    _tagDom.style.width = tempW + 'px';

    _tagDom.style.height = tempH + 'px';

    },

    // 子组件翻页时,更改索引,父级同步响应

    changeImg(index) {

    // console.log('计算属性-父组件', index)

    this.curIndex = index;

    this.init();

    this.flag = false;

    },

    // 点击大图,查看放大图

    resetTop() {

    this.flagMask = !this.flagMask;

    if (this.flagMask) {

    this.warpTop = (document.documentElement.clientHeight - document.getElementsByClassName('swiper-warp')[0].offsetHeight) / 2;

    } else {

    this.warpTop = 0;

    }

    }

    }

    }

    展开全文
  • 主要为大家详细介绍了vue实现页面加载动画效果,vue页面出现正在加载的初始页面与实现动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • created页面加载未渲染html之前执行。 mounted渲染html后再执行。 由于created在html模板生产之前所以无法对Dom进行操作而mounted可以。 补充知识:关于Vue子组件data选项某个属性引用子组件props定义的属性的几点...
  • vue-cli监听组件加载完成方法

    千次阅读 2020-12-23 08:32:59
    在使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能。1、安装vuexnpm install vuex --save2、在项目目录下找到store.js文件import...
  • Vue组件加载完成后对应的钩子?

    千次阅读 2020-12-31 13:12:30
    vue组件中,使用了如下一个组件:<complain-list :list="complainData"></complain-list>模板如下:<template id="complain-list"><div class="collapse-card" v-for="data in dataList">...
  • 最近在玩一个类似拼图的东东,业务场景就是在主图加载页面的时候,计算主图相对页面容器的缩小放大系数,通过这个系数计算子图的左边及宽度问题:在mounted中调用计算主图的原始宽高时,提示元素为空(通过document...
  • 使用mouted()方法 //执行某个方法,login方法 methods(){ login:function(){ } }, mounted(){ this.login(); } //执行某段代码 mounted(){ 代码 }
  • Vue.js DOM加载执行自定义事件的方法发布于 2020-7-12|复制链接分享一篇关于VUE DOM加载执行自定义事件的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小妖过来看看吧最近想用vue做一个小东西,谁...
  • created: ...在模板渲染成html前调用,即通常初始化某些属性值,然后渲染成视图。 methods: { indexs:function(){ this.$http.post('{:url("Index/fun")}') .then(function(res){ ...
  • 主要介绍了vuejs实现ready函数加载完之后执行某个函数的方法,需要的朋友可以参考下
  • Vue.js在页面加载执行某个方法

    千次阅读 2018-05-22 10:23:38
    jQuery中可以这样写vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted附上vue.js的生命周期函数执行流程

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 45,330
精华内容 18,132
关键字:

vue页面加载完成再执行的方法

vue 订阅