基于Taro UI简单封装confirm确认对话框

confirm确认对话框

一、原因

Taro UI 中的Modal对话框组件限制太多，且没有confirm确认对话框，部分场景使用起来受限太多，代码写起来不太舒服，就简单做一下二次封装

第一种标签太长，第二种content限制太大，做一下简单的二次封装是必要的（功能可后续按需拓展）

<AtModal isOpened>
  <AtModalHeader>标题</AtModalHeader>
  <AtModalContent>
    这里是正文内容，欢迎加入京东凹凸实验室
    这里是正文内容，欢迎加入京东凹凸实验室
    这里是正文内容，欢迎加入京东凹凸实验室
  </AtModalContent>
  <AtModalAction> <Button>取消</Button> <Button>确定</Button> </AtModalAction>
</AtModal>

<AtModal
  isOpened
  title='标题'
  cancelText='取消'
  confirmText='确认'
  onClose={ this.handleClose }
  onCancel={ this.handleCancel }
  onConfirm={ this.handleConfirm }
  content='欢迎加入京东凹凸实验室\n\r欢迎加入京东凹凸实验室'
/>

二、实现

这次主要是将上面第二种做成confirm确认对话框，可在方法内直接调用的形式，如下：

onHandle = () => {
      this.confirmTips.show({
        title: '提示'
        content: `您确定XXX吗?`,
        okText: '确定',
        cancelText: '取消',
        onOk:  () => {}
      })
  }

比较简单，只是把show方法暴露出来并传参处理

Confirm.js

import { Component } from '@tarojs/taro';
import { AtModal } from "taro-ui"

export default class Confirm extends Component {
  static options = {
    addGlobalClass: true
  }

  state = {
    ...this.props
  }

  static defaultProps = {
    visible: false,
    title: '',
    cancelText: '取消',
    confirmText: '确定',
    onOk: () => {},
    onCancel: () => {},
    content: ''
  }

  show = (options) => {
    this.setState({
      ...this.props,
      ...options,
      visible: true
    })
  }

  hide = () => {
    this.setState({
      visible: false
    })
  }

  handleOk = () => {
    const { onOk } = this.state;
    if(onOk) onOk();
  }

  onCancel = () => {
    const { onCancel } = this.state;
    if(onCancel) onCancel();
    this.hide()
  }

  render () {
    const { visible, title, cancelText, okText, content, center, danger } = this.state;

    return (
      <AtModal
        isOpened={ visible }
        title={ title }
        cancelText={ cancelText }
        confirmText={ okText }
        onClose={ this.hide }
        onCancel={ this.onCancel }
        onConfirm={ this.handleOk }
        content={ content }
      />
    )
  }
}

我自己的ZModal 文件夹的 index.js

export { default as ZConfirm } from './Confirm';

使用

需先使用ZConfirm组件 <ZConfirm ref={ref => this.confirmTips = ref} />

import { Component } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import { ZConfirm } from '@/components/ZModal';

export default class MyCard extends Component {
  config = {
    navigationBarTitleText: 'confirm确认对话框'
  }

  onHandle = () => {
      this.confirmTips.show({
        content: `您确定XXX卡吗?`,
        okText: '确定',
        cancelText: '取消',
        onOk: () => {}
      })
  }

  render () {
    return (
      <View'>
      	<View onClick={this.onHandle}><Text>confirm确认对话框</Text></View>
        <ZConfirm ref={ref => this.confirmTips = ref} />
      </View>
    )
  }
}

后面功能的拓展，像样式自定义，内容的自由性等等，可以让总体代码写得舒服一点
总体还有很多可以优化，这里只是写一个简单的封装demo，有什么错误欢迎指正

ok，有什么问题或建议都可以留言