mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
张涛
GitHub
commit
efcf8e2c66
@ -243,21 +243,22 @@ src、text 都支持变量，可以从上下文中动态获取图片或文字，
|
||||
|
||||
## 属性表
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ----------- | ------------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| className | `string` | | 外层 dom 的类名 |
|
||||
| style | `object` | | 外层 dom 的样式 |
|
||||
| fit | `'contain'` \| `'cover'` \| `'fill'` \| `'none'` \| `'scale-down'` | `'cover'` | 具体细节可以参考 MDN [文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit) |
|
||||
| src | `string` | | 图片地址 |
|
||||
| text | `string` | | 文字 |
|
||||
| icon | `string` | `'fa fa-user'` | 图标 |
|
||||
| shape | `'circle'` \| `'square'` \| `'rounded'` | `'circle'` | 形状，有三种 `'circle'` （圆形）、`'square'`（正方形）、`'rounded'`（圆角） |
|
||||
| size | `number` \| `'default'` \| `'normal'` \| `'small'` | `'default'` | `'default' \| 'normal' \| 'small'`三种字符串类型代表不同大小（分别是 48、40、32），也可以直接数字表示 |
|
||||
| gap | `number` | 4 | 控制字符类型距离左右两侧边界单位像素 |
|
||||
| alt | `number` | | 图像无法显示时的替代文本 |
|
||||
| draggable | `boolean` | | 图片是否允许拖动 |
|
||||
| crossOrigin | `'anonymous'` \| `'use-credentials'` \| `''` | | 图片的 `CORS` 属性设置 |
|
||||
| onError | `string` | | 图片加载失败的字符串，这个字符串是一个 New Function 内部执行的字符串，参数是 event（使用 event.nativeEvent 获取原生 dom 事件），这个字符串需要返回 boolean 值。设置 `"return ture;"` 会在图片加载失败后，使用 `text` 或者 `icon` 代表的信息来进行替换。目前图片加载失败默认是不进行置换。注意：图片加载失败，不包括$获取数据为空情况 |
|
||||
| 属性名 | 类型 | 默认值 | 说明 |
|
||||
| ------------- | ------------------------------------------------------------------ | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| className | `string` | | 外层 dom 的类名 |
|
||||
| style | `object` | | 外层 dom 的样式 |
|
||||
| fit | `'contain'` \| `'cover'` \| `'fill'` \| `'none'` \| `'scale-down'` | `'cover'` | 具体细节可以参考 MDN [文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit) |
|
||||
| src | `string` | | 图片地址 |
|
||||
| defaultAvatar | `string` | | 占位图 |
|
||||
| text | `string` | | 文字 |
|
||||
| icon | `string` | `'fa fa-user'` | 图标 |
|
||||
| shape | `'circle'` \| `'square'` \| `'rounded'` | `'circle'` | 形状，有三种 `'circle'` （圆形）、`'square'`（正方形）、`'rounded'`（圆角） |
|
||||
| size | `number` \| `'default'` \| `'normal'` \| `'small'` | `'default'` | `'default' \| 'normal' \| 'small'`三种字符串类型代表不同大小（分别是 48、40、32），也可以直接数字表示 |
|
||||
| gap | `number` | 4 | 控制字符类型距离左右两侧边界单位像素 |
|
||||
| alt | `number` | | 图像无法显示时的替代文本 |
|
||||
| draggable | `boolean` | | 图片是否允许拖动 |
|
||||
| crossOrigin | `'anonymous'` \| `'use-credentials'` \| `''` | | 图片的 `CORS` 属性设置 |
|
||||
| onError | `string` | | 图片加载失败的字符串，这个字符串是一个 New Function 内部执行的字符串，参数是 event（使用 event.nativeEvent 获取原生 dom 事件），这个字符串需要返回 boolean 值。设置 `"return ture;"` 会在图片加载失败后，使用 `text` 或者 `icon` 代表的信息来进行替换。目前图片加载失败默认是不进行置换。注意：图片加载失败，不包括$获取数据为空情况 |
|
||||
|
||||
## 事件表
|
||||
|
||||
|
||||
@ -81,6 +81,14 @@
|
||||
background-color: #f7f7f9;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin-bottom: var(--Form-item-gap);
|
||||
|
||||
.cxd-Collapse-content {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&.right::after {
|
||||
right: 12px;
|
||||
left: auto;
|
||||
|
||||
@ -210,7 +210,13 @@ export default class Editor extends Component<EditorProps> {
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
if (!this.props.isSubEditor) {
|
||||
const store = this.manager.store;
|
||||
if (this.props.isSubEditor) {
|
||||
// 等待子编辑器动画结束重新获取高亮组件位置
|
||||
setTimeout(() => {
|
||||
store.calculateHighlightBox(store.highlightNodes.map(node => node.id));
|
||||
}, 500);
|
||||
} else {
|
||||
this.manager.trigger('init', {
|
||||
data: this.manager
|
||||
});
|
||||
|
||||
@ -915,26 +915,28 @@ export class EditorManager {
|
||||
|
||||
const curElemSchema = schemaData || subRenderer?.scaffold;
|
||||
const isSpecialLayout = this.isSpecialLayout(curElemSchema);
|
||||
if (
|
||||
(node.type === 'wrapper' || node.type === 'container') &&
|
||||
node.schema?.body?.length === 0 &&
|
||||
curElemSchema?.type === 'flex' &&
|
||||
!node.schema?.isFreeContainer &&
|
||||
!isSpecialLayout
|
||||
) {
|
||||
// 布局能力提升: 点击插入新元素，当wrapper为空插入布局容器时，自动改为置换，避免过多层级
|
||||
this.replaceChild(
|
||||
curActiveId,
|
||||
curElemSchema,
|
||||
subRenderer,
|
||||
store.insertRegion,
|
||||
reGenerateId
|
||||
);
|
||||
setTimeout(() => {
|
||||
this.updateConfigPanel();
|
||||
}, 0);
|
||||
return;
|
||||
}
|
||||
|
||||
// 不直接替换容器
|
||||
// if (
|
||||
// (node.type === 'wrapper' || node.type === 'container') &&
|
||||
// node.schema?.body?.length === 0 &&
|
||||
// curElemSchema?.type === 'flex' &&
|
||||
// !node.schema?.isFreeContainer &&
|
||||
// !isSpecialLayout
|
||||
// ) {
|
||||
// // 布局能力提升: 点击插入新元素，当wrapper为空插入布局容器时，自动改为置换，避免过多层级
|
||||
// this.replaceChild(
|
||||
// curActiveId,
|
||||
// curElemSchema,
|
||||
// subRenderer,
|
||||
// store.insertRegion,
|
||||
// reGenerateId
|
||||
// );
|
||||
// setTimeout(() => {
|
||||
// this.updateConfigPanel();
|
||||
// }, 0);
|
||||
// return;
|
||||
// }
|
||||
|
||||
const parentNode = node.parent as EditorNodeType; // 父级节点
|
||||
|
||||
|
||||
@ -518,6 +518,13 @@ export class BasicToolbarPlugin extends BasePlugin {
|
||||
});
|
||||
}
|
||||
}
|
||||
if (node.type === 'container') {
|
||||
menus.push({
|
||||
label: '清空容器',
|
||||
disabled: !node.schema.body?.length,
|
||||
onSelect: () => manager.emptyRegion(id, 'body')
|
||||
});
|
||||
}
|
||||
|
||||
menus.push({
|
||||
label: '替换组件',
|
||||
|
||||
@ -159,6 +159,7 @@ export class AvatarPlugin extends BasePlugin {
|
||||
onChange: (value: any, origin: any, item: any, form: any) => {
|
||||
form.setValues({
|
||||
src: undefined,
|
||||
defaultAvatar: undefined,
|
||||
fit: 'cover',
|
||||
text: undefined,
|
||||
gap: 4,
|
||||
@ -182,7 +183,13 @@ export class AvatarPlugin extends BasePlugin {
|
||||
type: 'input-url'
|
||||
},
|
||||
name: 'src',
|
||||
label: '链接',
|
||||
label: '头像地址',
|
||||
visibleOn: 'data.showtype === "image"'
|
||||
}),
|
||||
// 占位图片
|
||||
getSchemaTpl('imageUrl', {
|
||||
name: 'defaultAvatar',
|
||||
label: '默认头像',
|
||||
visibleOn: 'data.showtype === "image"'
|
||||
}),
|
||||
{
|
||||
|
||||
@ -17,13 +17,13 @@ export const defaultFlexColumnSchema = (title?: string) => {
|
||||
return {
|
||||
type: 'container',
|
||||
body: [],
|
||||
size: 'xs',
|
||||
size: 'none',
|
||||
style: {
|
||||
position: 'static',
|
||||
display: 'block',
|
||||
flex: '1 1 auto',
|
||||
flexGrow: 1,
|
||||
flexBasis: 'auto'
|
||||
flexBasis: 0
|
||||
},
|
||||
wrapperBody: false,
|
||||
isFixedHeight: false,
|
||||
@ -40,7 +40,7 @@ const defaultFlexPreviewSchema = (title?: string) => {
|
||||
style: {
|
||||
display: 'block',
|
||||
flex: '1 1 auto',
|
||||
flexBasis: 'auto',
|
||||
flexBasis: 0,
|
||||
textAlign: 'center',
|
||||
marginRight: 10
|
||||
},
|
||||
@ -53,14 +53,15 @@ const defaultFlexContainerSchema = (
|
||||
flexItemSchema: (title?: string) => any = defaultFlexColumnSchema
|
||||
) => ({
|
||||
type: 'flex',
|
||||
className: 'p-1',
|
||||
items: [
|
||||
flexItemSchema('第一列'),
|
||||
flexItemSchema('第二列'),
|
||||
flexItemSchema('第三列')
|
||||
],
|
||||
style: {
|
||||
position: 'relative'
|
||||
position: 'relative',
|
||||
rowGap: '10px',
|
||||
columnGap: '10px'
|
||||
}
|
||||
});
|
||||
|
||||
@ -131,6 +132,15 @@ export class FlexPluginBase extends LayoutBasePlugin {
|
||||
|
||||
getSchemaTpl('layout:flex-wrap'),
|
||||
|
||||
getSchemaTpl('layout:flex-basis', {
|
||||
label: '行间隔',
|
||||
name: 'style.rowGap'
|
||||
}),
|
||||
getSchemaTpl('layout:flex-basis', {
|
||||
label: '列间隔',
|
||||
name: 'style.columnGap'
|
||||
}),
|
||||
|
||||
...(isFlexItem
|
||||
? [
|
||||
getSchemaTpl('layout:flex', {
|
||||
|
||||
@ -34,6 +34,11 @@ export interface AvatarSchema extends BaseSchema {
|
||||
*/
|
||||
src?: string;
|
||||
|
||||
/**
|
||||
* 默认头像
|
||||
*/
|
||||
defaultAvatar?: string;
|
||||
|
||||
/**
|
||||
* 图标
|
||||
*/
|
||||
@ -113,6 +118,7 @@ export class AvatarField extends React.Component<AvatarProps> {
|
||||
className,
|
||||
classnames: cx,
|
||||
src,
|
||||
defaultAvatar,
|
||||
icon = 'fa fa-user',
|
||||
fit,
|
||||
shape,
|
||||
@ -153,7 +159,7 @@ export class AvatarField extends React.Component<AvatarProps> {
|
||||
style={style}
|
||||
className={className}
|
||||
classnames={cx}
|
||||
src={src}
|
||||
src={src || defaultAvatar}
|
||||
icon={icon}
|
||||
fit={fit}
|
||||
shape={shape}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user