案例-提示框案例

yonyouhmm

一、说明
    项目中经常会做提示框，有的场景对提示框中的内容有要求，我们在此案例介绍并长期补充遇到的所有场景。yonbuilder中的提示框主要有一下几种


二、轻提示 Toast


viewModel.get('button27fd').on('click', (args) => {
  cb.utils.alert({
    title: '我是标题', // 弹窗文本内容
    type: 'info', // 默认’info‘。可选 'error', 'fail', 'success', 'warning', 'info', 'noIcon'
    duration: '3', // 自动关闭的延时，单位秒
    mask: true, // 是否显示透明蒙层，防止触摸穿透。false时不阻塞页面操作
    onClose: () => {cb.utils.alert('关闭了')}, // 关闭后回调
  });
});


三、询问提示 Comfirm
1、用法一


cb.utils.confirm(
    '确定删除吗?',
    () => {
      console.log('确定回调');
    },
    () => {
      console.log('取消回调');
    }
  );

2、用法二：自定义按钮


cb.utils.confirm({
    title: '确定下载吗',
    content: '下载内容dsgasdga',
    iconType: 'info',
    footer:[{
    text: '上传并下载',
    type:'primary',
    onPress: () => { }
  },{
    text: '直接下载',
    onPress: () => { }
  },{
    text: '取消',
    onPress: () => { }
  }]})

3、用法三：React.createElement


cb.utils.confirm({
    title: React.createElement(
      'div',
      {
        className: 'class1',
      },
      '确定执行操作吗？'
    ),
    content: React.createElement(
      'div',
      {
        style: {
          color: 'red',
          whiteSpace:'pre-wrap'
        }
      },
      '1、发哦都好高好高好高好高。\n2、大会蛋糕和嘎哈噶。\n3、安定后嘎哈dog好多个好好干'
    ),
    okFunc: () => {
      console.log('确定回调');
    },
    cancelFunc: () => {
      console.log('取消回调');
    },
  });