0.0.4 • Published 5 years ago
slow-ui v0.0.4
适配最新的uni-app所做的最新的ui的框架
现在用于兼容一套产品app（社管，综治）所有共通的组件部分
安装方法
npm install slow-ui --save引入方式
在main.js文件中
import SlowUi from './slow'
Vue.use(SlowUi)
import 'slow-ui/common/scss/index.scss'
import SBg from 'slow-ui/components/bg/bg'
import SForm from 'slow-ui/components/form/form'
Vue.component('s-bg', SBg)
Vue.component('s-form', SForm)在uni.scss文件中
/*引入公共mixin方法*/
@import "~slow-ui/common/scss/mixin.scss";组件列表
- 背景组件
<s-bg /> - 表单组件
<s-form /> - 按钮组件
<s-button />
js的公共方法
| 写法 | 参数 | 作用 | 列子 |
|---|---|---|---|
get | url,data | get网络请求 | this.get(url, data).then(r => {}) |
post | url,data | post网络请求 | this.post(url, data).then(r => {}) |
scss的mixin公共方法
| 写法 | 参数 | 作用 |
|---|---|---|
@include bg-image($url); | $url（图片地址） | 根据手机屏幕的分辨率，自动将2x或者3x的图片识别为背景图片 |
@include extend-click; | 扩展盒子的点击区域 | |
@include text-ellips; | 文本溢出省略显示 | |
@include text-ellipsis; | 多行文本溢出省略显示 | |
@include clearfix; | 清除浮动 | |
@include setTopLine($border-color); | $border-color(颜色) | 设置顶部细横边线 |
@include setBottomLine($border-color); | $border-color(颜色) | 设置底部细横边线 |
@include setLeftLine($border-color); | $border-color(颜色) | 设置左边细横边线 |
@include setRightLine($border-color); | $border-color(颜色) | 设置右边细横边线 |
@include setImg($width, $height); | $width, $height(宽，高) | 设置盒子里的图片自动撑满盒子 |