uniapp 自定义组件内部onload、onshow函数不运行问题

问题:将写的页面代码,以组件形式展示时,组件中onLoad和onShow代码失效。

原因:在uniapp中,只有应用生命周期(项目生命周期)和页面生命周期,而onLoad和onShow属于页面的生命周期函数,所以组件中不会调用。

解决方法:在methods中定义一个盛放onload和onshow中代码的函数(函数名:onLoadMethod)。在父组件显示该组件时通过ref调用子组件onLoadMethod方法。

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
,支持上传图片 UniApp定义头像组件可以通过以下步骤实现: 1. 在 `components` 文件夹下创建一个名为 `avatar` 的组件文件夹。 2. 在 `avatar` 文件夹下创建一个名为 `avatar.vue` 的文件,用于编写头像组件的模板和样式。 3. 在 `avatar.vue` 文件中,添加一个 `img` 标签用于显示头像图片,以及一个 `slot` 插槽用于渲染头像下方的文字信息。同时,可以通过 `props` 定义组件的属性,如头像大小、形状、边框颜色等。 4. 在组件的 `methods` 中,添加一个 `uploadImage` 方法用于上传图片,并在 `mounted` 生命周期中初始化上传组件,监听上传成功事件并将上传的图片路径赋值给 `img` 标签的 `src` 属性。 5. 在页面中使用自定义头像组件时,可以通过 `props` 传递参数,如头像大小、形状、边框颜色等。同时,可以通过 `v-slot` 绑定插槽,传递头像下方的文字信息。 下面是一个简单的例子: ```html <!-- avatar.vue --> <template> <div class="avatar-container"> <img :src="imgSrc" :style="{ width: size + 'px', height: size + 'px', borderRadius: shape }"> <slot></slot> <input type="file" ref="fileInput" style="display: none;" @change="uploadImage"> </div> </template> <script> export default { props: { size: { type: Number, default: 100 }, shape: { type: String, default: '50%' }, borderColor: { type: String, default: '#ccc' } }, data() { return { imgSrc: '' } }, methods: { uploadImage() { const file = this.$refs.fileInput.files[0] const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { this.imgSrc = reader.result } } }, mounted() { const fileInput = this.$refs.fileInput fileInput.addEventListener('change', () => { const file = fileInput.files[0] const reader = new FileReader() reader.readAsDataURL(file) reader.onload = () => { this.imgSrc = reader.result } }) } } </script> <style scoped> .avatar-container { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #ccc; padding: 10px; } </style> ``` ```html <!-- my-page.vue --> <template> <div> <avatar :size="200" shape="10px" borderColor="red"> <div>My Avatar</div> </avatar> </div> </template> <script> import Avatar from '@/components/avatar/avatar.vue' export default { components: { Avatar } } </script> ``` 在上面的例子中,自定义头像组件支持上传图片,并可以通过 `props` 定义头像的大小、形状、边框颜色等属性。在页面中使用时,可以通过 `v-slot` 绑定插槽传递头像下方的文字信息。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值