ButtonConfirm封装

1. 点击按钮删除时的确认弹窗，场景：表格，列表删除时的确认

ButtonConfirm封装

1. 场景：Table点击删除按钮，弹窗确认
2. 在antd.Button组件基础上封装, type属性值增加del

/ButtonConfirm.js

import React from 'react'
import PropTypes from 'prop-types'
import { Button, Popconfirm } from 'antd'
const style = { width: 200 }
ButtonConfirm.propTypes = {
  onClick: PropTypes.func.isRequired
}
function ButtonConfirm (props) {
  const {
    onClick,
    text='删除',
    title='确认删除吗?'
  } = props
  // if (type !== 'del') return <Button {...props}></Button>
  return (
    <Popconfirm
        title={title}
      style={style}
      onConfirm={onClick}
    >
      <Button
        type="danger"
        {...props}
        onClick={e => e.preventDefault()}>{text}</Button>
    </Popconfirm>
  )
}
export default ButtonConfirm

/index.js

export { default as ButtonConfirm } from './BtnConfirm.js'

ButtonConfirm使用

1. 表格删除时的确认 ```jsx [ { title: “操作”, key: ‘action’, width: 120, render: (text, record) => renderAction(record), } ]

function renderAction (record) { const attr = { onClick: onCopy, title: ‘确认复制！’, text: ‘复制’, type: ‘primary’, size: ‘small’ } return ( <> onDelete(record.id)} /> </> ) }

<a name="8KHnt"></a>
## button选中组件
```jsx
position: absolute;
    right: 0;
    bottom: 0;
color: rgb(255, 255, 255);
    position: absolute;
    right: 0px;
    bottom: 2px;
<Button>
        明天
        <span style={style}>
          <span className="triangle" style={{ position: 'absolute', right: 0, bottom: 0}}></span>
          <Icon type="check" style={{color: '#fff',position: 'absolute', right: 0, bottom: 2}}/>
        </span>
      </Button>

button勾选

按钮三角形 https://ice.work/playground/new