0.1.8 • Published 2 years ago
swallow-ui v0.1.8
swallow-ui
swallow-ui 是一个vue UI 库
1. 如何安装
yarn :
$ yarn add swallow-ui
npm :
$ npm install swallow-ui
2. 如何使用
(1) 在vue main.js 中引入
import Vue from 'vue';
import swallowUi from 'swallow-ui';
Vue.use(swallowUi);
(2) 在\<template>\中插入UI组件即可
<template>
<div>
<s-movediv :sLimit="true" :sTop="300" />
</div>
</template>
3.组件及其参数
(1) loading组件: 屏幕等待加载时画面
- 组件名称: s-loading
- 组件参数:
- sIsLoading(Boolean) 默认值为
true
是否显示loading组件 - sStyle(Object) 为组件添加新样式
- sBoxShow(Boolean) 默认值为
true
是否显示跳动的球体
- sIsLoading(Boolean) 默认值为
- 列式
<template>
<div>
<s-loading :sBoxShow="false" :style="{background: 'red'}" />
</div>
</template>
(2) avatar组件: 头像框
- 组件名称: s-avatar
- 组件参数:
- sSrc(String) 头像图片src
- sWidth(Number) 默认值为 40 头像框宽度
- sHeight(Number) 默认值为 40 头像框高度
- 列式
<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
时显示为我方聊天框
- sAnimation(Boolean) 默认值为
- 列式
<template>
<div>
<s-chatbox sContent="Hello World" :sSelf="true" />
</div>
</template>
<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})
- sLimit(Boolean) 默认值为
- 列式
<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传输回来的值
- sType(String) 默认值为
- 列式
<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)
- 列式
<template>
<div>
<s-alter
sMsg="xxxxxx"
@sYes="v => console.log(v)"
@sNo="v => console.log(v)"
/>
</div>
</template>