一、用到的技术
1、技术栈
react: ^16.14.0
react-dom:^17.0.0
react-quill: ^1.3.5 富文本编辑器
react-router: ^4.3.1
react-dev-inspector：^1.1.1 这个包允许用户通过简单的点击直接从浏览器 React 组件跳转到本地 IDE 代码
2、UI组件
Ant Design --------------------------用到版本： antd: 4.15.1
Ant Design Pro Components
二、用法总结
1、富文本
这里有个坑，如果和自定义下拉选项一起使用，得下拉框渲染完之后才能渲染富文本组件，不然会报错,加不了必填项
import ReactQuill,{ Quill } from 'react-quill';
import QuillEmoji from 'quill-emoji'
import 'quill-emoji/dist/quill-emoji.css'
import 'react-quill/dist/quill.snow.css'
Quill.register({
'modules/emoji-toolbar': QuillEmoji.ToolbarEmoji,
// 'modules/emoji-textarea': QuillEmoji.TextAreaEmoji,
'modules/emoji-shortname': QuillEmoji.ShortNameEmoji
})
const modules={
toolbar:{
container:[
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
[{ 'font': [] }],
[{ 'header': 1 }, { 'header': 2 }], // custom button values
['bold', 'italic', 'underline', 'strike'], // toggled buttons
[{ 'align': [] }],
[{ 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'direction': 'rtl' }], // text direction
[{ 'script': 'sub' }, { 'script': 'super' }], // superscript/subscript
['blockquote', 'code-block'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
['emoji', 'image', 'video', 'link'],
['clean']
],
handlers: {
image: ()=>imageHandler()
}
},
'emoji-toolbar': true,
// 'emoji-textarea': true,
'emoji-shortname': true,
}
//自定义上传图片格式
const imageHandler = () => {
const quillEditor = ref.current?.getEditor()
const input = document.createElement('input')
input.setAttribute('type', 'file')
input.setAttribute('accept', 'image/*')
input.click()
input.onchange = async () => {
const file = input.files[0]
const formData = new FormData()
formData.append('quill-image', file)
const code=218
const link=await upload(file,code)//把base64格式转换为正常url路径格式,自定义方法
const range = quillEditor?.getSelection()
quillEditor.insertEmbed(range.index, 'image', link)
}
}
{
onselect.length>0&&//如果和自定义下拉选项一起使用，得下拉框渲染完之后才能渲染富文本组件，不然会报错
<div className={styles.box}>
<Form.Item
label="文章详情"
name="articleContent"
readonly={detailData?.id&&detailData?.edtil}
// rules={[{ required: true, message: '请设置文章详情!' }]}
>
<ReactQuill modules={modules} ref={ref}/>
</Form.Item>
<div className={styles.mark}>*</div>
</div>
}
1.1、base64转url路径upload方法
import OSS from 'ali-oss';
import request from '@/utils/request';
const getConfig = (params = {}, options = {}) => {
return request('/auth/goods/product/getOssConfig', {
method: 'POST',
data: params,
...options
});
}
const getImageSize = (file) => {
return new Promise((resolve) => {
const reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = (theFile) => {
const image = new Image()
image.src = theFile.target.result
image.onload = function () {
const { width, height } = this;
resolve({ width, height })
}
}
});
}
let ossConfig = null;
let codeTemp = null
const upload = async (file, code) => {
if (code !== codeTemp) {
ossConfig = null
}
codeTemp = code;
if (!ossConfig) {
const res = await getConfig({ code });
ossConfig = res?.data?.records
}
const client = new OSS({
region: `oss-${ossConfig.regionId}`,
accessKeyId: ossConfig.credentials.accessKeyId,
accessKeySecret: ossConfig.credentials.accessKeySecret,
stsToken: ossConfig.credentials.securityToken,
bucket: ossConfig.uploadInfo.bucket,
})
return new Promise((resolve) => {
client.put(`${ossConfig.uploadInfo.dir}/${file.uid}-y_g-${file.name}`, file).then(res => {
if (file.type.indexOf('image') !== -1) {
getImageSize(file).then(size => {
resolve(`${res.url}?imgHeight=${size.height}&imgWidth=${size.width}`)
})
} else {
resolve(res.url);
}
}).catch(err => {
ossConfig = null;
// return upload(file, dirName)
console.log('上传失败：', err)
})
})
}
export default upload;
2、上传图片右边添加图片描述不影响Form表单提交的方法
企业微信截图_16451702601132.png
const FromWrap = ({ value, onChange, content, right }) => (
<div style={{ display: 'flex' }}>
<div>{content(value, onChange)}</div>
<div style={{ flex: 1, marginLeft: 10, minWidth: 180 }}>{detailData?.id&&detailData?.edtil?null:right(value)}</div>
</div>
)
<Form.Item
label="封面图片"
name="coverPicture"
rules={[{ required: true, message: '请上传图片!' }]}
readonly={detailData?.id&&detailData?.edtil}
>
<FromWrap
content={(value, onChange) => <Upload multiple value={value} onChange={onChange} maxCount={1} accept="image/*" size={(1*1024)/2} />}
right={(value) => {
return (
<dl>
<dt>图片要求</dt>
<dd>1.图片大小500kb以内</dd>
<dd>2.建议尺寸为 720 x 200</dd>
<dd>3.图片格式png/jpg/gif</dd>
</dl>
)
}}
/>
</Form.Item>
3、省市区多选级联选择
企业微信截图_16451712318615.png
import React, { useState, useEffect, useMemo } from 'react';
import { Button, Form, Input, message, Select, Tag } from 'antd';
import MultiCascader from 'rsuite/lib/MultiCascader';
import 'rsuite/lib/MultiCascader/styles';
import './style.less'
const AddressMultiCascader = ({ value = '', onChange = () => { }, data, pId = 0, ...rest }) => {
const [areaData, setAreaData] = useState([]);
const [selectAreaKey, setSelectAreaKey] = useState(value);
const renderMultiCascaderTag = (selectedItems) => {
const titleArr = [];
selectedItems.forEach(item => {
const arr = [];
let node = item.parent;
arr.push(item.label)
while (node) {
if (node.pvalue !==-1) {
arr.push(node.label)
}
node = node.parent;
}
titleArr.push({
label: arr.reverse().join('-'),
value: item.value
})
})
const arrayToTree = (list, parId = 0) => {
const len = list.length
function loop(pid) {
const res = [];
for (let i = 0; i < len; i += 1) {
const item = list[i]
if (item&&item.pid === pid) {
item.children = loop(item.id)
res.push(item)
}
}
return res.length ? res : null
}
return loop(parId)
}
return (
<div style={{ display: 'flex', flexWrap: 'wrap' }}>
{
titleArr.map(item => (
<Tag
key={item.value}
closable
style={{ marginBottom: 10 }}
onClose={() => {
setSelectAreaKey(selectAreaKey.filter(it => it !== item.value))
onChange(selectAreaKey.filter(it => it !== item.value))
}}
>
{item.label}
</Tag>
))
}
</div>
);
}
useEffect(() => {
const arr = arrayToTree(data || window.yeahgo_area || [], pId)
let str = JSON.stringify(arr)
str = str.replace(/name/g, 'label').replace(/id/g, 'value')
setAreaData(JSON.parse(str))
}, [data])
useEffect(() => {
setSelectAreaKey(value)
}, [value])
return (
<MultiCascader
value={selectAreaKey}
data={areaData}
style={{ width: '100%' }}
placeholder="请选择"
renderValue={(a, b) => renderMultiCascaderTag(b)}
locale={{ searchPlaceholder: '输入省市区名称' }}
onChange={(v) => { onChange(v); setSelectAreaKey(v) }}
{...rest}
/>
)
}
export default AddressMultiCascader;
import AddressMultiCascader from '@/components/address-multi-cascader'
const [selectKeys, setSelectKeys] = useState([]);
const getAreaData = (v) => {
const arr = [];
v?.forEach?.(item => {
let deep = 0;
let node = window.yeahgo_area.find(it => it.id === item);
const nodeIds = [node.id];
const nodeNames = [node.name]
while (node.pid) {
deep += 1;
node = window.yeahgo_area.find(it => it.id === node.pid);
nodeIds.push(node.id);
nodeNames.push(node.name);
}
arr.push({
provinceId: nodeIds[deep],
cityId: deep > 0 ? nodeIds[deep - 1] : 0,
districtId: deep > 1 ? nodeIds[deep - 2] : 0,
areaName: nodeNames.reverse().join('|')
})
})
return arr;
}
const getAreaDatas = (v) => {
const arr = [];
const brr = []
v?.forEach?.(item => {
let deep = 0;
let node = window.yeahgo_area.find(it => it.id === item);
const nodeIds = [node.id];
const nodeNames = [node.name]
if(node.children){
const toTreeData = (data) => {
data?.forEach(item => {
if(item.deep == 3){
brr.push(item.id)
}
toTreeData(item.children)
})
}
toTreeData(node?.children)
}
while (node.pid) {//找父级
deep += 1;
node = window.yeahgo_area.find(it => it.id === node.pid);
nodeIds.push(node.id);
nodeNames.push(node.name);
}
arr.push({
provinceId: nodeIds[deep],
cityId: deep > 0 ? nodeIds[deep - 1] : 0,
districtId: deep > 1 ? nodeIds[deep - 2] : 0,
areaName: nodeNames.reverse().join('|')
})
})
if(brr.length){
return getAreaData(brr)
}else{
return arr;
}
}
<AddressMultiCascader
value={selectKeys}
placeholder="添加地区"
renderValue={() => <span style={{ color: '#8e8e93' }}>添加地区</span>}
renderExtraFooter={() =>
<div style={{ padding: 10, textAlign: 'right' }}>
<Button type="primary" onClick={() => { setArea() }}>确定</Button>
</div>}
onChange={setSelectKeys}
disabledItemValues={disabledItemValues}
onClose={() => { setSelectKeys([]) }}
/>
