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