# Longly-ui

**Repository Path**: pengke-study/Longly-ui

## Basic Information

- **Project Name**: Longly-ui
- **Description**: 开源组件库,个人兴趣
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-10-13
- **Last Updated**: 2023-05-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: ui组件库

## README

# longly-ui 组件库
### 快速开始
#### 1.引入组件库
```javascript
//按需引入
import {LonglyCard,LonglyRefresh} from '../components/lib/index.js';
Vue.use(LonglyCard)
Vue.use(LonglyRefresh)
```
### 组件
#### 1.面板组件
> LonglyCard
##### 相关属性
|  属性名 |类型  | 概述  |
|  ----  |----| ----  |
| width  | Number|卡片宽度 |
| imgSrc  | String|卡片图片地址 |
| imgHeight|Number|图片高度|
| context|String|卡片内容(也可通过默认插槽写入)|
| isShadow|Boolean|是否鼠标移入显示阴影|
| footer(具名插槽)|String|底部内容|
##### 示例
```html
<longly-card 
    imgSrc="https://img1.baidu.com/it/u=1901352441,4261575787&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
    :isShadow='true'
    >
    碰磕QQ学习交流群:796542949
    <template slot="footer">
      <span style="color:red;">立刻加入</span>
    </template>
    </longly-card>
```
#### 2.下拉刷新组件
> LonglyRefresh
##### 相关属性
|  属性名 |类型  | 概述  |
|  ----  |----| ----  |
| loadingTitle |String | 加载中提示字 |
| defalutTitle|String  | 默认提示字 |
| upTitle|String |滑到一定距离的提示字|
| km|String |滑动触发刷新的提示字|
##### 示例
```html
<template>
<longly-refresh @longly-refresh="refresh" :km="40" defalutTitle="下拉刷新" upTitle="松手即可刷新" loadingTitle="碰磕努力加载中...">
    <div class="content">
      <p class="text">刷新组件基础用法</p>
      刷新次数：{{ num }}
    </div>
    </longly-refresh>
</template>

<script>
export default {
  name: 'App',
  components: {

  },
  data(){
    return{
      num:0
    }
  },
  methods:{
    refresh(done){
      this.moveState = 0;
      this.num++;
      //延时两秒执行刷新成功
      setTimeout(() => {
        alert("刷新成功...")
        done();//刷新完毕调用这个函数
      }, 2000);
    }
  }
}
</script>
```