zb-components
v1.1.82
Published
浙北组件
Downloads
23
Readme
zb-components
TextPopconfirm
使用了 antd 的 Popconfirm,点击文字出现确认框
import { TextPopconfirm } from 'zb-components'
;<TextPopconfirm onConfirm={this.onConfirm} title='确定删除吗?' text='删除' placement='top' />
image-preview
v1.1.10
图片预览高阶组件
import { ImagePreview } from 'zb-components'
@ImagePreview
class a extends Component {
render() {
return <img src={src} onClick={() => this.props.showModal(src)} />
}
}
upload
v1.1.12
上传图片组件, 受控组件,接收 value: 图片列表 onChange: 事件 limit: 限制图片上传大小 默认 3 (MB) maximum: 图片数量限制 默认 5 env: 'test' | 'production' 环境 默认 production style
import { UploadImage } from 'zb-components'
class a extends Component {
render() {
return <UploadImage value={[]} limit={2} maximum={5} env='test' />
}
}
装修组件
import { H5Fitment } from 'zb-components'
import { debounceAt } from 'zb-fjs' // 防抖
class a extends Component {
toolbarConfig = () => {
return [
{
type: 'default',
key: 0,
children: '提交',
onClick: debounceAt(
1000,
true
)(value => {
if (!value.title) {
message.error('请设置封面,输入页面标题!')
return
}
let content = JSON.stringify(value)
})
}
]
}
render() {
return (
<div style={{ width: '100%', height: '699px' }}>
<H5Fitment toolbarConfig={this.toolbarConfig()} title={title} dataSource={JSON.parse(content || '[]')} />
</div>
)
}
}
滚动监听组件
// 1.1.32
import { ScrollHandle } from 'zb-components'
/**
* @param 监听滚动事件的id
* @param 触发事件的底部的距离
**/
@ScrollHandle('id', 50)
class a extends Component {
handleScroll = e => {
// 滚动事件
}
handleScrollBottom = e => {
// 滚动到底部触发的事件
}
render...
}