更新记录

1.0.8（2024-07-13） 下载此版本

scView

可以使用

• 基础组件 sc-text、sc-image、sc-button
• 布局组件 sc-view、sc-flex、sc-grid，
• 反馈组件 sc-ellipsis
• 其他组件 sc-gap、sc-footer。

后续会添加更多组件。

平台兼容性

scView 使用配置

组件全局引入

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^sc-(.*)": "@/uni_modules/scview-ui/components/sc-$1/sc-$1.vue"
    }
  },
}

全局挂载

import App from './App';

import {
  createSSRApp,
} from 'vue';
import scView from '@/uni_modules/scview-ui';

export function createApp() {
  const app = createSSRApp(App);
  app.use(scView);
  return {
    app,
  };
}

全局配置

app.use(scView, {
  color: {                          配置颜色值，可以在所有组件中使用
    primary: '#4C8BFD',
    success: '#5AC725',
  },
  button: {                         按钮的默认配置
    fontSize: 0.35,                   按钮 - 字体大小(这里设置的不是具体的值, 而是按钮高度的百分之几)
    round: 20,                        按钮 - 圆角
    fontWeight: 400,                  按钮 - 字体粗细
    default: {                        默认按钮样式
      bgColor: '#4C8BFD',             默认按钮 - 背景颜色
      fontColor: '#fff',              默认按钮 - 字体颜色
    },
    plain: {                          镂空按钮样式
      bgColor: 'transparent',         镂空按钮 - 背景颜色
      borderColor: '#4C8BFD',         镂空按钮 - 边框颜色
      fontColor: '#4C8BFD',           镂空按钮 - 字体颜色
    },
  },
  text: {                           文本的默认配置
    size: 24,                         文本 - 字体大小
    color: '#333',                    文本 - 字体颜色
    weight: 400,                      文本 - 字体粗细
  },
});

颜色使用

<sc-text color="primary"></sc-text>
<sc-button bg-color="success"></sc-button>

Api

工具库

验证

• isPureNumber: 判断一个字符串是否是纯数字
• isPhone: 判断一个字符串是否是手机号
• isEmail: 判断一个字符串是否是邮箱
• isIdCard: 判断一个字符串是否是身份证号
• isColor: 判断一个字符串是否是颜色值(HEX, RGB, RGBA)
• isEmpty: 判断一个字符串 / 数字 / 数组 / 对象 是否为空 注:对于其他类型（如函数、Date等）我们认为它不是空的
• isObject: 判断一个值是否是对象

{String} str - 待判断的字符串

其他

• getDataType：获取数据类型，可判断数据类型 string / number / boolean / null / undefined / array / function / asyncFunction / object / symbol

// {Number} data - 要判断的数据

const type = getDataType('data') // 'string'

• pxToRpx：px转rpx

// {Number|String} px - 要转换的数据
const val = pxToRpx(100)

• rpxToPx：rpx转px

// {Number|String} rpx - 要转换的数据
const val = rpxToPx(100)

• deepMerge：深度合并对象(可传入多个对象,返回值为一个新的对象)

const obj1 = {
  a: 1,
  b: {
    c: 1,
  }
}
const obj2 = {
  b: {
    c: 2,
  }
}
const obj3 = deepMerge(obj1, obj2) // {a: 1, b: {c: 2}}

• transformStyle：样式转换 (对象转字符串，或者字符串转对象)

// {object | string} customStyle - 需要转换的目标
// {String} target 转换的目的，object-转为对象(默认)，string-转为字符串

const style1 = transformStyle('width: 100px; height: 100px;') // {width: '100px', height: '100px'}
const style2 = transformStyle({width: '100px', height: '100px'},'string') // 'width: 100px; height: 100px;'

• generateUnit：生成 css 的单位值(默认值为rpx)

// {Number|String} val - 要转换的值

const unit1 = generateUnit(20) // 20rpx
const unit2 = generateUnit('20px') // 20px

• desensitize：脱敏

// {String} str - 要脱敏的字符串
// {Array} skip - 要保留的字符数(前后)

const str = desensitize('18812345678', [3, 4]) // 188****5678

• sleep：延迟执行

// {Number} time - 延迟时间

sleep(1000).then(() => {
  console.log('延迟1秒执行')
})

• systemInfo：设备信息

例：uni.$sc.systemInfo().dpr

weChar 相关
    dpr：DPR
    scaleFactor：机型适配比例系数
    windowHeight：当前机型-屏幕高度
    windowWidth：当前机型-屏幕宽度
    statusBarHeight：状态栏高度
    menuButtonHeight：胶囊高度
    menuButtonWidth：胶囊宽度
    menuButtonTop：胶囊上边界的坐标
    menuButtonRight：胶囊右边界的坐标
    menuButtonBottom：胶囊下边界的坐标
    menuButtonLeft：胶囊左边界的坐标
    safeAreaInsets：苹果的安全区域
    safeArea：苹果的安全区域

public 相关
    dpr：DPR
    scaleFactor：机型适配比例系数
    windowHeight：当前机型-屏幕高度
    windowWidth：当前机型-屏幕宽度
    statusBarHeight：状态栏高度
    safeAreaInsets：苹果的安全区域
    safeArea：苹果的安全区域

组件

尺寸配置：

• 所有的值默认单位为 rpx，支持单位 rpx、px、em、rem、%、vw、vh
• 如果是单个值支持 number / string，例：width="50"
• 如果是多个值，则支持 string，以空格分割，例：wh="20 20rpx"

颜色配置：

• 所有的 color 相关的 prop 都可以传入 config.color 配置的值，所有非 hex、rgb、rgba、linear-gradient (渐变)、radial-gradient (渐变)、transparent (透明)，颜色值都会被认定为配置的值

margin与padding配置： margin 与 padding 配置，支持 number / string，以空格分割，例：margin="20 20rpx"

基础组件

text 文本

props

slot

event

image 图片

props

event

button 按钮

props

slot

event

布局组件

flex 弹性布局

props

slot

grid 栅格布局

props

slot

view 默认容器

• 可以设置为 flex 与 grid 的子组件容器

props

footer 页脚

props

slot

反馈组件

ellipsis 文本溢出显示展开/收起

props

其他组件

gap 间隔槽

props