# swallow-ui

> ## 1. 如何安装 #### yarn :

Latest version **0.1.8** (published 2022-01-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install swallow-ui
pnpm add swallow-ui
yarn add swallow-ui
bun add swallow-ui
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.8 |
| Published | 2022-01-05 |
| First published | 2021-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 85.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | manjioko |
| Maintainers | manjioko |

## Links

- npm: https://www.npmjs.com/package/swallow-ui
- npm.io page: https://npm.io/package/swallow-ui

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [swallow-ui](https://npm.io/package/swallow-ui.md) ^0.1.7

## Recent versions

- 0.1.8 (latest) — 2022-01-05
- 0.1.7 — 2022-01-05
- 0.1.6 — 2022-01-05
- 0.1.5 — 2021-12-16
- 0.1.4 — 2021-12-10
- 0.1.3 — 2021-12-10
- 0.1.2 — 2021-12-03
- 0.1.1 — 2021-11-30
- 0.1.0 — 2021-11-26

## README

# swallow-ui
#### swallow-ui 是一个vue UI 库

## 1. 如何安装
#### yarn :

```bash
 $ yarn add swallow-ui
```

#### npm :

```bash
$ npm install swallow-ui
```

## 2. 如何使用

(1) 在vue main.js 中引入
``` javascript
import Vue from 'vue';
import swallowUi from 'swallow-ui';
Vue.use(swallowUi);
```
(2) 在\<template\>\</template>中插入UI组件即可
```html
<template>
    <div>
      <s-movediv :sLimit="true" :sTop="300" />
    </div>
</template>
```


## 3.组件及其参数


#### (1) loading组件: 屏幕等待加载时画面
- 组件名称: s-loading
- 组件参数:
    - sIsLoading(Boolean) 默认值为 `true` 是否显示loading组件
    - sStyle(Object) 为组件添加新样式
    - sBoxShow(Boolean) 默认值为 `true` 是否显示跳动的球体
- 列式
```html
<template>
    <div>
      <s-loading :sBoxShow="false" :style="{background: 'red'}" />
    </div>
</template>
```


#### (2) avatar组件: 头像框
- 组件名称: s-avatar
- 组件参数:
    - sSrc(String) 头像图片src
    - sWidth(Number) 默认值为 40 头像框宽度
    - sHeight(Number) 默认值为 40 头像框高度
- 列式
```html
<template>
    <div>
      <s-avatar sSrc="https://xxx.xxx.jpg" :sWidth="60" />
    </div>
</template>
```


#### (3) chatbox组件: 聊天框
- 组件名称: s-chatbox
- 组件参数:
    - sAnimation(Boolean) 默认值为 `false` 点击聊天框时出现动画
    - sContent(String) 绑定聊天框中的内容
    - sSelf(Boolean) 默认值为 `false` 设置为 `true` 时显示为我方聊天框
- 列式
```html
<template>
    <div>
      <s-chatbox sContent="Hello World" :sSelf="true" />
    </div>
</template>
```

```html
<template>
    <div>
      <s-chatbox :sAnimation="true">
          <p>Hello World</p>
      </s-chatbox >
    </div>
</template>
```


#### (4) movediv组件: 移动div
- 组件名称: s-movediv
- 组件参数:
    - sLimit(Boolean) 默认值为 `false` 如果设置为 `true` 则movediv移动范围为其父级元素的大小范围
    - sBorder(Boolean) 默认值为`true` 是否显示movediv的边框
    - sWidth(String) 默认值为 200px movdiv的宽度
    - sHeight(String) 默认值为 200px movediv的高度
    - sTop(Number) 设置movdiv初始top(x轴坐标)
    - sLeft(Number) 设置movdiv初始left(y轴坐标)
    - @sCoor(function) 接收 movdiv 传输回来的值({top:xx,left:xx})
- 列式
```html
<template>
    <div>
      <s-movdiv
        :sLimit="true"
        sWidth="400px"
        sHeight="400px"
        :sTop="200"
        :sLeft="600"
        @sCoor="c => console.log(c.top)"
        >
            <div>
                Hello World
            </div>
        </s-movdiv>
    </div>
</template>
```


#### (5) s-input组件: 聊天框
- 组件名称: s-input
- 组件参数:
    - sType(String) 默认值为 `password` s-input类型选择
    - sText(String)  默认值为 `''` s-input的左侧字符串值
    - sPlaceholder(String) 默认值为 `''` s-input的placeholder值
    - @sValue(function) 接收s-input传输回来的值
- 列式
```html
<template>
    <div>
      <s-input
        sType="text"
        sText="帐号"
        sPlaceholder="请输入..."
        @sValue="v => console.log(v)"
       />
    </div>
</template>
```

#### (5) s-alter组件: 消息通知栏
- 组件名称: s-alter
- 组件参数:
    - sMsg(String) 默认值为 ''
    - @sYes(function) 接收点击s-alter组件确定按钮时传输回来的值,(true)
    - @sNo(function) 接收点击s-alter组件取消按钮时传输回来的值,(false)
- 列式
```html
<template>
    <div>
      <s-alter
        sMsg="xxxxxx"
        @sYes="v => console.log(v)"
        @sNo="v => console.log(v)"
       />
    </div>
</template>
```

---
_Source: https://npm.io/package/swallow-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._