schbrain-view
1.登录组件
组件基于uniapp开发,目前仅支持uniapp使用,支持钉钉登录,学生账号登录
使用方式
<!--默认登录-->
<s-login :option="option" @login="login"/>
<!--自定义登录-->
<s-login :option="option" @confirm="loginCallback" ref="login">
<u-button @click="login" @confim="loginCallback">自定义登录</u-button>
</s-login>
data () {
return {
option: {
type: 'dingTalk', // 当前登录环境类型
loginType: 'login', // 登录类型
baseURL: 'https://blog-api-dev.schbrain.com/blog-api/student/account/login', // 登录接口名
btnImg: { // 登录按钮
width: '632',
url: 'https://s2.loli.net/2021/12/31/ifeADGlwdSCxrM1.png'
},
bgImg: { // 登录背景图
width: '100%',
url: 'https://s2.loli.net/2021/12/31/neFNJBIzGWPSqQx.png'
},
studentInfo: { // 学生账号登录字段名
nameLabel: 'accountUsername',
passwordLabel: 'accountPassword'
}
}
}
}
methods: {
// 登录成功回调
// info 登录返回信息
// type 当前登录方式类型
loginCallback (info, type) {
this.$toast.none('登录成功')
},
// 自定义登录执行方法
login () {
this.$refs.login.login()
}
}
2.选项框 基于u-view开发
支持单选、多选、全选操作
使用方式
<s-action-sheet :visible.sync="templateVisible"
value-name="templateId"
label-name="templateName"
:multipleCheck="false"
:list="templateList"
:default-value="groupInfo.groupTemplateInfo.weeklyTemplateInfo.templateId"
@confirm="templateConfirm"
title="推送年级"/>
list 非必填说明、使用方式
<s-action-sheet :title="title"
:visible.sync="visible"
@confirm="confirm">
<!-- default slot展示内容 -->
<view>自定义内容展示</view>
</s-action-sheet>
Props
参数 |
说明 |
类型 |
默认值 |
visible |
弹框绑定值 |
Boolean |
false |
value-name |
Text |
Description |
value |
label-name |
自定义list数据的label属性名 |
String |
label |
multipleCheck |
*是否可多选 |
Boolean |
true |
isAll |
*是否开启全选按钮 multipleCheck=false单选状态下不可全选操作 |
Boolean |
true |
title |
头部标签名 |
String |
请选择 |
list |
列表数据(非必填,可查看) |
Array |
[{ disable: true --单行不可点击}] |
default-value |
默认选中值 单选时传value-name对应Id 多选时传数据Array |
[Array, String] |
[] |
borderRadius |
边框圆角 单位rpx |
[Number, String] |
28 |
maskCloseAble |
点击背景层是否可关闭 |
Boolean |
true |
mode |
弹出方向 |
String |
默认bottom(可选top / right / bottom / center) |
Event
事件名 |
说明 |
回调 参数 |
@confirm |
点击确认按钮触发 |
[{}] 数据列表 |
3.页面loading组件
使用方式
<s-loading loadingType="2"/>
<!--loadingType一个有5个loading样式,默认为2-->
4.自定义指令v-emoji
<view v-emoji></view>
<view v-emoji="emoji"></view>
<view v-emoji="isNumAlphaCn"></view>
<view v-emoji="isNumAlpha"></view>
<!--可多传,逗号隔开-->
5.自定义指令v-digit
<!--范围限制1-5位之间-->
<view v-digit="r(1,5)"></view>
<!--小数位数限制为2位-->
<view v-digit="d(2)"></view>
<!--范围限制加小数限制 只能-50-50之间"-->
<view v-digit="rd(-50, 50, 2)"></view>
<!--字数限制只能输入2位-->
<view v-digit="w(5)"></view>
<!--可多传,逗号隔开-->