schbrain-view

基于uview-ui一些常用组件

Usage no npm install needed!

<script type="module">
  import schbrainView from 'https://cdn.skypack.dev/schbrain-view';
</script>

README

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>
<!--可多传,逗号隔开-->