slow-ui

ui库,适配uni-app

Usage no npm install needed!

<script type="module">
  import slowUi from 'https://cdn.skypack.dev/slow-ui';
</script>

README

适配最新的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";

组件列表

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(宽,高)|设置盒子里的图片自动撑满盒子