0.0.5 • Published 5 years ago

xushuming-vue-pack-demo v0.0.5

Weekly downloads
6
License
MIT
Repository
github
Last release
5 years ago

Evell · npm Packagist

医惠移动端组件库,基于Vue2.0开发

安装

使用npm

$ npm install evell --save

或使用 <script> 全局引用

<script type="text/javascript" src="evell.js"></script>

引入 Evell

一般在 webpack 入口页面 main.js 中如下配置:

import Vue from 'vue'
import Evell from 'evell'

Vue.use(Evell)

按需引用

import Message from 'evell/dist/message'
import Loading from 'evell/dist/loading'

import LoadMore from 'evell/dist/loadMore'

Vue.component(LoadMore.name, LoadMore)

组件使用说明

Message

通过直接调用以下方法来使用组件:

this.$message('message')

按需引用使用方式:

import Message from 'evell/dist/message'
Message('message')

Loading

通过直接调用以下方法来使用组件:

  • 开启loading:this.$loading()
  • 关闭loading:this.$loading.close()

按需引用使用方式:

import Loading from 'evell/dist/loading'
Loading()  // 开启loading
Loading.close()  // 关闭loading

LoadMore(上拉加载)

例子:

<ewell-loadmore :bottomLoadAll="bottomLoadAll" :bottom-fetch-method="handleLoadMore" ref="loadmore">
  <ul>
    <li v-for="item in list">{{ item }}></li>
  </ul>
</ewell-loadmore>

按住列表,上拉一定距离后释放,被指定为 bottom-fetch-method 的方法就会执行。当数据获取完毕时将绑定到 bottomLoadAll 属性的变量赋值为 true 解绑 loadmore 事件。

handleLoadMore() {
  ... //加载更多
  this.$refs.loadmore.onBottomLoaded()
}

注意在这个方法的最后需要手动调用 loadmoreonBottomLoaded 事件。这是因为在加载数据后需要对组件进行一些重新定位的操作。

API

参数说明类型默认值
distanceIndex手指移动与组件移动距离的比值Number2
bottomPullText上拉时加载提示区域的文字String上拉刷新
bottomDropText释放时加载提示区域的文字String释放更新
bottomLoadingTextloading时加载提示区域的文字String加载中...
bottomDistance触发 bottomFetchMethod 的上拉距离像素值Number70
bottomLoadAll若为真,则 bottomFetchMethod 不会被再次触发,事件解绑Booleanfalse
bottomFetchMethod上拉刷新执行的方法Function

后续

组件陆续更新中。。。👨‍💻👩‍💻

License

MIT

0.0.5

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago