【RISC-V 生态软件系列】Waft UI基础三：Dialog的使用方法

获取示例源码

git clone git@gitee.com:tsing-qiu/waft-ui.git
硬件准备


ui demo整体说明

页面导航


{
  "pages": [
    "pages/home/index",
    "pages/test-dialog/index",
    "pages/test-list/index",
    "pages/test-loading/index",
    "pages/test-swiper/index",
    "pages/test-video/index",
    "pages/test-picker/index",
    "pages/test-slider/index",
    "pages/test-button/index",
    "pages/test-navbar/index",
    "pages/test-tabs/index",
    "pages/test-image/index"
  ],
  "default": "pages/home/index",
  "window": {
    "defaulttitle": "Waft UI"
  }
}
Dialog使用








样式文件


.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #eeeeee;
}
.content{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 30rpx;
}
布局文件



  
  
  
   
   
   
   
   
   
      
   
   
      标题
   
  


json数据


{
  "usingComponents": {
    "x-nav-bar": "../assembly/nav-bar/nav-bar",
    "x-switch": "../assembly/switch/switch",
    "x-button": "../assembly/button/button",
    "x-slider": "../assembly/slider/slider",
    "x-toast": "../assembly/toast/toast",
    "x-overlay": "../assembly/overlay/overlay",
    "x-card": "../assembly/card/card",
    "x-dialog":"../assembly/dialog/dialog"
  },
  "state": {
    "showToast1": false,
    "showToast2": false,
    "showOverlay": false,
    "showDialog": false
  }
}

逻辑控制


import { Page, Props } from "waft";
import { JSON, JSONObject } from "waft-json";
import { Toast, ToastOptions } from "../../../assembly/toast/toast";

export class ComponentTest extends Page {
  constructor(props: Props) {
    super(props);
    this.addEventListener("clickToast1Btn", (e, target): void => {
      //  未测试多个toast同时调用的问题
      let toastOptions = new ToastOptions();
      toastOptions.message = "测试Toast1";
      toastOptions.type = "fail";
      //   toastOptions.iconURL = "https://gw.alicdn.com/imgextra/i1/O1CN01evbrT81s2JRO3tkra_!!6000000005708-2-tps-200-200.png"
      Toast.show(toastOptions);
    });
    this.addEventListener("clickToast2Btn", (e, target): void => {
      let toastOptions = new ToastOptions();
      toastOptions.message = "测试Toast2";
      toastOptions.type = "info";
      toastOptions.duration = 5000;
      toastOptions.position = "middle";
      Toast.show(toastOptions);
    });
    this.addEventListener("clickOverlayBtn", (e, target): void => {
      (target as ComponentTest).setState(
        JSON.parseObject(`{"showOverlay":true}`)
      );
      console.log("====打开遮罩");
      
    });
    this.addEventListener("clickOverlay", (e, target): void => {
      (target as ComponentTest).setState(
        JSON.parseObject(`{"showOverlay":false}`)
      );
      console.log("====关闭遮罩");
    });
    this.addEventListener("clickDialogBtn", (e, target): void => {
      console.log("dadsada");
      
      (target as ComponentTest).setState(
        JSON.parseObject(`{"showDialog":true}`)
      );
    });
    this.addEventListener("clickConfirm", (e, target): void => {
      console.log("****关闭弹窗****");
      (target as ComponentTest).setState(
        JSON.parseObject(`{"showDialog":false}`)
      );
    });
    this.addEventListener("clickCancel", (e, target): void => {
      console.log("****关闭弹窗****");
      (target as ComponentTest).setState(
        JSON.parseObject(`{"showDialog":false}`)
      );
    });
  }
}
效果展示

• toast效果1
  
  

• toast效果2
  
  

• dialog效果
  
  

文章转载自：平头哥芯片开放社区 作者：晚空