vue组件加载完成之后执行方法_vue-cli监听组件加载完成的方法

在使用vue-cli开发项目时遇到过一个问题,要求是页面组件全部加载完成后再执行某个函数,给上代码参考,方法可能有点笨,好在实现了功能。

1、安装vuex

npm install vuex --save

2、在项目目录下找到store.js文件

import vue from 'vue'

import vuex from 'vuex'

vue.use(vuex)

//监听nav模块加载完

const m_classifyone = {

state: {

count:0

},

mutations: {

increment (state) {

state.count++

}

}

}

const store = new vuex.store({

modules: {

a: m_classifyone,

b: m_classifyonepage,

c:currentpage

}

})

export default store;

3、在子组件中

created(){

//数据请求完成后

this.$post(address.addr+controll.mallcontroll+'/getmallhome').then(message => {

//这里使用箭头函数是为了不改变this指向

this.$store.commit('increment');

})

}

4、通过store判断子组件数据加载完成

mounted(){

//通过store判断当前组件是否加载完成,加载完成执行页面框架

var count = 0;

let countfn = function(count){

if(count>0){

//子组件加载完成清除计时器,调用方法

clearinterval(st)

pagef.pageframefn();

}

}

let st = setinterval(e => {

count = this.$store.state.a.count;

countfn(count)

})

//通过store判断当前组件是否加载完成,加载完成执行页面框架

}

以上这篇vue-cli监听组件加载完成的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持萬仟网。

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你是使用upload组件完成文件上传,清空已上传的文件可能会稍有不同,具体取决于你使用的组件库和实现方式。以下是几种可能的方案: 1. 使用组件库提供的API清空文件:大部分upload组件库都会提供清空已选择文件的API,你可以查看组件库的文档或者源码来了解如何调用该API。 例如,在Ant Design中,你可以通过以下方式清空已选择的文件: ``` import { Upload } from 'antd'; const MyUpload = () => { const [fileList, setFileList] = useState([]); const handleUpload = (info) => { setFileList(info.fileList); }; const handleClear = () => { setFileList([]); }; return ( <> <Upload fileList={fileList} onChange={handleUpload}> <Button icon={<UploadOutlined />}>选择文件</Button> </Upload> <Button onClick={handleClear}>清空文件</Button> </> ); }; ``` 在这个例子中,我们使用Ant Design的Upload组件完成文件上传,当文件上传状态发生改变时,我们更新当前的文件列表。当点击清空文件按钮时,我们将文件列表设置为空数组即可。 2. 直接重置upload组件:有些upload组件可能无法提供清空已选择文件的API,此时你可以通过重置upload组件来清空已选择的文件。具体实现方式也可能因组件库而异,一般需要在上传完成之后清空文件。 例如,在Element UI中,你可以通过以下方式清空已选择的文件: ``` <el-upload ref="upload" :file-list="fileList" :on-success="handleSuccess" > <el-button slot="trigger" type="primary">上传文件</el-button> </el-upload> ... methods: { handleSuccess(response, file, fileList) { // 处理上传成功的逻辑 this.$refs.upload.clearFiles(); // 清空已选择文件 } } ``` 在这个例子中,我们使用Element UI的Upload组件完成文件上传,当文件上传成功时,我们调用clearFiles()方法来清空已选择文件。 需要注意的是,使用第二种方式清空文件时,已经上传的文件可能已经被提交到服务器,需要在后端进行处理来删除这些文件。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值