中文日期

``` #### NbAccount 使用方式 ``` { setAccount(e.target.value) }} value={acount}> ``` 参数Api (antd-Input组件) 无，使用antd的Api 占用的antd部分字段: |参数|值| |:-:|:-:| |prefix|Icon组件| #### NbBadge 使用方式 ``` ``` 参数Api (antd-Badge组件) 无，使用antd的Api 占用的antd部分字段: |参数|值| |:-:|:-:| |overflowCount|999| #### NbPages 使用方式 ``` { console.log(page, pageSize) }} defaultCurrent={1} total={50} defaultCurrent={1} total={50}> ``` 参数Api (antd-Page组件) 无，使用antd的Api #### NbButton 使用方式 ``` { console.log('点击') }}>123 ``` 参数Api （非antd) |参数|说明|类型|默认值|可取值|备注| |:-:|:-:|:-:|:-:|:-:|:-:| |type|按钮类型|String|'main'|'big-primary' ...|传入类型：场景-类型，如果只传场景，按钮类型默认使用default 场景类型字段：big main icon text icontext 按钮类型: default primary danger minor(次要) disabled| |onClick|点击事件|Function|--| #### NbInput 使用方式 ``` { setInput(e.target.value) }}> ``` 参数Api (antd-Input组件) 无，使用antd的Api 占用的antd部分字段: |参数|值| |:-:|:-:| |prefix|Icon组件| #### NbResult 使用方式 ``` 文字插槽 ``` 参数Api (antd-Modal组件) |参数|说明|类型|默认值|可取值|备注| |:-:|:-:|:-:|:-:|:-:|:-:| |type|弹窗类型|String|'success'|'succes'、'error'、'warn'|| 其他，使用antd的Api 方法 ``` NbResult.success({ content: '123', }) ``` 方法类型：'succes'、'error'、'warn'、'loading' 方法参数： |参数|说明|类型|默认值|可取值|备注| |:-:|:-:|:-:|:-:|:-:|:-:| |content|文字内容|node|--|ReactNode|| |delayClosed|自动关闭时间|Number|--|Number|设置延时自动关闭，为0不关闭| 占用antd字段： footer、className、bodyStyle、width、mask、maskClosable、content、icon #### NbMessage 使用方式 (antd-message) ``` NbMessage.success({ content: '123', }) ``` 方法类型：'succes'、'error'、'warn' 占用antd字段： className、content、icon #### NbConfirm 使用方式 ``` setVisible1(false)} > ``` 参数Api (antd-Modal组件) |参数|说明|类型|默认值|可取值|备注| |:-:|:-:|:-:|:-:|:-:|:-:| |singleBtn|底部为单个按钮|Boolean|--|--|| |footerDom|底部插槽|VNode|--|--|优先级：底部插槽 > singleBtn > 取消确定底部| |confirmStyle|确定按钮样式|Object|{background: 'linear-gradient(180deg, #3385E6 0%, #0066E0 100%)',color: '#fff'}|--|| 其他，使用antd的Api 占用antd字段： className, title #### NbDialog 使用方式 ``` setVisible2(false)} visible={visible2}> ``` 参数Api (antd-Modal组件) 无，使用antd的Api #### NbNumberCounter 使用方式 ``` { setValue(value) }}> ``` 参数Api (非antd) |参数|说明|类型|默认值|可取值|备注| |:-:|:-:|:-:|:-:|:-:|:-:| |type|数字框类型|String|'default'|'default'、'danger'、'normal'|蓝色、红色、黑色| |value|数字框值|Number|0|数字|输入非数字，显示0| |onChange|数字改变事件|Function|(value)=>{}|(value)=>{}|| #### NbSwitch 使用方式 ``` ``` 参数Api (antd-Switch组件) 无，使用antd的Api #### NbArrow 使用方式 ``` ``` 参数Api (非antd) |参数|说明|类型|默认值|可取值|备注| |:-:|:-:|:-:|:-:|:-:|:-:| |open|是否展开|Boolean|false||| |onClick|切换展开合并|function|()=>{}||| #### NbRadio NbRadioGroup 使用方式 ``` ``` 参数Api (antd-radio、radio.Group组件) 无，使用antd的Api #### NbCheckbox NbCheckboxGroup 使用方式 ``` { console.log(value, '---致'); }}> hello ``` 参数Api (antd-checkbox、checkbox.Group组件) 无，使用antd的Api #### NbTable 基础表格使用方式 ``` { setDataSource(data); }}> ``` 参数Api (非antd) |参数|说明|类型|默认值|可取值|备注| |:-:|:-:|:-:|:-:|:-:|:-:| |fold|是否显示折叠箭头|Boolean|false||| |columns|表头|Array||操作列的dataIndex请使用"operator"|[{title: '数字',dataIndex: 'number',width: 156, align:'center', strong:true, operate:true}]。其中：align:文字居中方式， strong: 加粗效果, operate: 表示当前列数据需要切换编辑，如数字切换成数字器，效期切换成效期组件操作，当行数据的editing改变时切换，另需设置属性对应的编辑组件[属性-opt]的值| |dataSource|表格内容|Array|[]|[{key:'', ['columns对应的dataIndex']:'',children:{columns:[], dataSource:[]}}]|columns字段：{...同上} dataSource字段：{editing:true,number:'123', numer-opt:()=>{}}。其中：align:文字居中方式， strong: 加粗效果, editing: 是否处于编辑中状态, 编辑状态对应的数据切换成相应的操作, operate: 表示当前列数据需要切换编辑，如数字切换成数字器，效期切换成效期组件操作| |foldRow|切换行内表格|Function|(data)=>{}|(value)=>{}|| |isControl|是否父行表格控制子数据全部编辑|Boolean|true||设置true后，子元素无法控制是否可编辑，设置false，父级无法控制子级编辑，子级自己控制自己| 注意：为了实现编辑时组件和值的切换。dataSource表格内容提供了三种情况： - 内容简单展示值 row['number'] - 内容需要定制 row['number'] = ()=>{return dom} - 内容需要在值与组件之间切换（如数字点击编辑，进入数字器状态），此时columns数组dataIndex为number的对象operate属性需为true, 数据采用 number-opt 来做为编辑时的替换，其他类似，均为属性后拼接-opt 示例一： ``` { setDataSource(data) }} > // 对应的表格列表： const columns = [ { title: '位置', dataIndex: 'pos', width: 226, }, { title: '品名', dataIndex: 'name', strong: true, width: 404, }, { title: '规格', dataIndex: 'specification', width: 192, }, { title: '中文', dataIndex: 'zh', width: 156, }, { title: '英文数字', dataIndex: 'num', width: 148, }, { title: '数量', // 标题 dataIndex: 'number', // dataSource中对应的key width: 186, // 列宽 strong: true, // 加粗 align: 'center', // 文本方向 operate:true // 可动态切换编辑 }, { title: '单位', dataIndex: 'unit', width: 168, align: 'center', }, { title: '', dataIndex: 'operator', operate:true } ] // 初始数据： // 1. 默认展示数据，无需做处理 // 2. name属性数据需要展示省略号，但不改变原始值 const data = [ { key: '1', pos: '柜子的名称-0000', name: "品名超过十二个的中间省略, 超过用省略号表示", specification: '0000…0000', zh: '中文内容', num: '00000000', number: 123, unit: '盒', children:{ columns:[], dataSource:[] } } ] data.forEach(item=>{ let value = item.name; item.name = (opt)=>{ // opt中可访问 rowIndex colKey属性 if (value && value.length && value.length > 12) { return

{value .slice(0, 6) .concat('...') .concat(value.slice(-6))}

} return value } } // 3. 父级表格数据点击操作编辑父级列的数据，同理，子级表格使用相同的处理 item['operator'] = (scopeData) => { // scopedDate 返回 {rowIndex: 父级行索引和子级table行索引用-拼接 , editing: 是否编辑状态，用于在不同状态显示不同的按钮 , colKey: 表格列} const { rowIndex, editing } = scopeData // 行索引、行子表格索引 const [fIdx, lIdx] = rowIndex.split('-') let newData = data let item = newData[fIdx]; if(lIdx !== undefined){ // 操作的是children行 item = item.children.dataSource[lIdx] } return !editing ?

{ // list 父级中需要变成操作器的属性，如需要从数字变成数字器 const list = [] // list 子级中需要变成操作器的属性，如需要从数字变成数字器 const childrenList = ['number', 'expiredDate'] if(!lIdx){ // 编辑父行及其子行如number属性添加一个changedNumber属性用于保存初始值，便于后面取消编辑时还原数据 list.forEach(key=>{ item[`changed${key.slice(0,1).toUpperCase()+key.slice(1)}`] = item[key] }) // 当前行子表格全部添加对应属性 item.children.dataSource.forEach(list=>{ childrenList.forEach(childKey=>{ list[`changed${childKey.slice(0,1).toUpperCase()+childKey.slice(1)}`] = list[childKey] }) }) }else{ childrenList.forEach(key=>{ item[`changed${key.slice(0,1).toUpperCase()+key.slice(1)}`] = item[key] }) } item.editing = true; // data 赋值给newData // data 赋值给dataSource // 操作newData 赋值给setDataSource 无法更新 // 不能用newData无法更新需要使用newData.slice() setDataSource(newData.slice()) }} > 编辑

{ newData.splice(rowIndex, 1) setDataSource(newData.slice()) }} > 删除

{ const list = [] const childrenList = ['number', 'expiredDate'] item['editing'] = false; if(!lIdx){ // 保存时与编辑相反，将changedNumber属性赋值number属性 list.forEach(key=>{ item[key] = item[`changed${key.slice(0,1).toUpperCase()+key.slice(1)}`] }) // 当前行子表格全部添加对应属性 item.children.dataSource.forEach(list=>{ childrenList.forEach(childKey=>{ list[childKey] = list[`changed${childKey.slice(0,1).toUpperCase()+childKey.slice(1)}`] console.log(list,`changed${childKey.slice(0,1).toUpperCase()+childKey.slice(1)}`); }) }) }else{ childrenList.forEach(key=>{ item[key] = item[`changed${key.slice(0,1).toUpperCase()+key.slice(1)}`] }) } setDataSource(newData.slice()) }} >保存

{ item['editing'] = false; setDataSource(newData.slice()) }} >取消

} ``` #### NbExpireDate 效期组件使用方式 ``` { item.changedExpiredDate = dayjs(date).format('YYYY-MM-DD'); setDataSource(newData.slice()) }}> ``` 参数Api (非antd) |参数|说明|类型|默认值|可取值|备注| |:-:|:-:|:-:|:-:|:-:|:-:| |date|日期|Object|当前日期|dayjs|| |joinStr|日期连接符|String|'-'|["-", "/"]|| |yearCount|显示的年份个数|Number|7|Number|| |onChange|改变日期|Function|()=>{}|function|| --- _Source: https://npm.io/package/nb-ui-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._