# UI 模块

# 概述

UI 模块为使用原生实现的一些 UI 组件,大部分为弹窗类效果,该模块指南基于小程序 mini-sdk。

# 导入模块

import { UI } from '@ezviz/mini-sdk';

# toast

toast 提示

/**
 * @description Toast提示
 * @param {string} tip 提示语
 */
import { UI } from '@ezviz/mini-sdk'; // 下方事例略过import

UI.toast('这是一个toast.');

# loading

加载窗

/**
 * @description loading加载窗显示
 * @param {string} tip 提示语
 */

UI.showLoading('loading');

/**
 * @description 隐藏loading加载窗
 */
UI.hideLoading();

# actionSheet

列表弹窗

/**
 * @description ActionSheet弹窗
 * @param {string} data 配置
 * {
 title: '标题',
 content: '内容内容内容内容',
 commonBtns:
 [
 {
 key: 'btn1',
 text: '按钮1',
 textColor: '#000000',
 }, {
 key: 'delete',
 textColor: '#FB4848',
 },
 ...
 ],
 cancelBtn:    {
 key: 'delete',
 text: '删除',
 textColor: '#000000',
 }
 }
 */

UI.actionSheet(data, (result) => {
  // do something
});

# alert

标准弹窗

/**
 * @description alert 标准弹窗
 * @param {object} data 配置
 * @param {func} result 回调
 * {
 *  key:num1
 * }
 */
const data = {
  title: '标题',
  content: '内容内容',
  gravity: 'left', //content的显示模式  'left' & 'center' 默认center
  attachmentBtn: { text: '11', color: '#000000', key: '按钮3' }, //color可缺省
  commonBtns: [
    {
      // 标准按钮(由左往右排列)目前最多2个
      key: 'num1',
      text: '按钮1',
      color: '#0000000', //可缺省
    },
    {
      key: 'num2',
      text: '按钮2',
      color: '#0000000',
    },
  ],
};
UI.alert(data, (result) => {
  // do something
});

# input

输入框弹窗

/**
 * @description 输入框弹窗
 * @param {object} data 配置
 * @param {func} result 回调
 */
const data = {
  title: '标题',
  content: '内容内容',
  editText: {
    //可缺省
    text: 'text', //可缺省
    maxTextLen: 10, //可缺省
    hint: '请输入...', // 可缺省
    keyboard: 0, // 0: 默认 1: 数字 可缺省
    isPassword: false, // 是否加密显示 可缺省
    regex: '', // 正则 可缺省
  },
  attachmentBtn: { text: '11', color: '#000000', key: '按钮3' }, //color可缺省
  cancelBtn: {
    key: 'cancel2',
    text: '取消',
    color: '#000000',
  },
  confirmBtn: {
    key: 'confrim',
    text: '确认',
    color: '#000000',
  },
};
UI.input(data, (result) => {
  // do something
});

# picker

滚动选择器弹窗

/**
 * @description 滚动选择器弹窗
 * @param {object} data 配置
 * @param {func} result 回调
 */
const data = {
  title: 'xxx', //(可缺省)
  subtitle: 'xxx', //(可缺省)
  type: 1, // 0:多级联动 e.g 城市选择   1:独立选择 e.g 时间选择
  column: 2, // 列 最多3
  loop: false, // 循环
  data: [
    ['0', '1', '2', '3'],
    ['0', '1', '2', '3'],
  ], // 多级联动: [{'浙江':['杭州','温州'...]},{'广东':['广州', '深圳'...]}] 独立选择:[['0','1','2','3'],['0','1','2','3']]
  selected: [], // 当前选择 [0,1]
};
UI.picker(data);

# cityPicker

城市选择器弹窗

/**
 * @description 城市选择器弹窗
 * @param {object} data 配置
 * @param {func} result 回调
 */
const data = {
  title: 'xxx', //可缺省
  selected: ['浙江省', '杭州市', '滨江区'], //当前选择城市 可缺省
  showLocation: false, //显示当前定位 默认false
  showDistrict: false, //是否精确到区 默认false
};
UI.cityPicker(data);

# datePicker

日期选择器弹窗

/**
 * @description 日期选择器弹窗
 * @param {object} data 配置
 * @param {func} result 回调
 */
const data = {
  title: 'xxx', //默认:日期选择
  subtitle: 'xxx', //默认:缺省
  selected: ['2005', '01', '23'], //当前时间
};
UI.datePicker(data);

# timePicker

时间选择器弹窗

/**
 * @description 时间选择器弹窗
 * @param {object} data  配置
 * @param {func} result  回调
 */
const data = {
  title: 'xxx', //默认:时间选择
  subtitle: 'xxx', //默认:缺省
  timeType: 0, //0 hh:mm 1 hh:mm:ss
  selected: ['2005', '01', '23'], //当前时间
};
UI.timePicker(data);

# showFullScreen

自定义 view 弹窗开启与关闭

/**
 * @description 自定义view弹窗
 * @param {object} data  配置
 {
  content:
  {
    entry: 'xxx',
    custom0: 'xxx', //data中可以添加自定义参数 会原样传给rn
    custom1:xxx,
    ...
  },
  closeKey: 'xxx', // RN如果需要主动关闭弹窗 需要传一个唯一的key 通hideFullScreenModel关闭
 }
 * @param {func} result  回调
 */
const data = {
  content: {
    entry: 'xxx',
    custom0: 'xxx', //data中可以添加自定义参数 会原样传给rn
  },
  closeKey: 'test', // RN如果需要主动关闭弹窗 需要传一个唯一的key 通hideFullScreenModel关闭
};
// 开启
UI.showFullScreen(data);
//关闭
UI.hideFullScreen('test');