VUE组件示例说明

最新推荐文章于 2025-08-13 18:53:41 发布

原创最新推荐文章于 2025-08-13 18:53:41 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

javascript 同时被 2 个专栏收录

16 篇文章

订阅专栏

VUE 自定义组件

3 篇文章

订阅专栏

该文章描述了一个Vue.js组件，用于实现上拉加载功能。组件包含不同的状态（loadmore,loading,nomore），并允许自定义加载文本。当状态为loadmore时，用户点击会触发loadMore事件，通知父组件进行数据加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!--
* @Author: xxx.xx
* @Date: 2021-07-20 14:33:41
* @LastEditors: xxx.xx
* @LastEditTime: 2021-07-20 18:22:37
* @PageTitle: 上拉加载组件
* @Description: 描述...
* @FilePath: /wxapp-view/components/loadmore.vue
-->
<template>
 <view class="c-moreload">
   <u-loadmore
     color="#9f9f9f"
     :status="status"
     :load-text="loadText"
     @loadmore="loadMore"
   />
 </view>
</template>

<script>
export default {
 name: 'CLoadmore',
 props: {
   // 展示类型
   status: {
     type: String,
     default: 'loadmore'
   }
 },
 data () {
   return {
     loadText: {
       loadmore: '点击或上拉加载更多',
       loading: '玩命加载中',
       nomore: '我也是有底线的'
     }
   }
 },
 methods: {
   /**
    * @Author: xxx.xx
    * @description: 点击更多，通知父组件
    */ 
   loadMore () {
     this.$emit('loadMore')
   },
   /**
    * @Author: xxx.xx
    * @description: 获取value值
    * @param {*} name
    * @param {*} val
    * @return {*}
    */ 
   test (name, val) {
   }
 }
}
</script>

<style scoped lang="scss">
.c-moreload {
 padding: 0px 0px 10px 0px
}
</style>

props

参数	说明	类型	可选值	默认值
color	字体颜色	String	#606266	-
status	组件状态	String	loadmore	loading / nomore
load-text	可见示例自定义	Object	-	-