mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 20:09:08 +08:00
feat:Tag&Icon接入事件 (#6016)
This commit is contained in:
hsm-lv
GitHub
parent
7d26b44c89
commit
d0bd252811
@ -206,3 +206,15 @@ v6 用 fa-regular / fa-solid 等表示前缀，可参考官网[示例](https://f
|
||||
| className | `string` | | 外层 CSS 类名 |
|
||||
| icon | [模板](../../docs/concepts/template) | | icon 名称，支持 [fontawesome v4](https://fontawesome.com/v4/icons/) 或 通过 registerIcon 注册的 icon、或使用 url |
|
||||
| vendor | `string` | | icon 类型，默认为`fa`, 表示 fontawesome v4。也支持 iconfont, 如果是 fontawesome v5 以上版本或者其他框架可以设置为空字符串 |
|
||||
|
||||
## 事件表
|
||||
|
||||
> 2.6.1 及以上版本
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | ------------------------ | -------------- |
|
||||
| click | nativeEvent 鼠标事件对象 | 点击时触发 |
|
||||
| mouseenter | nativeEvent 鼠标事件对象 | 鼠标移入时触发 |
|
||||
| mouseleave | nativeEvent 鼠标事件对象 | 鼠标移出时触发 |
|
||||
|
||||
@ -83,7 +83,7 @@ icon:
|
||||
|
||||
## 标签颜色
|
||||
|
||||
标签有几种预设的色彩样式，可以通过设置color属性为active、inactive、error、success、iprocessing、warning用作不同场景使用。如果预设值不能满足需求，可以设置为具体的色值
|
||||
标签有几种预设的色彩样式，可以通过设置 color 属性为 active、inactive、error、success、iprocessing、warning 用作不同场景使用。如果预设值不能满足需求，可以设置为具体的色值
|
||||
|
||||
```schema
|
||||
{
|
||||
@ -129,7 +129,6 @@ icon:
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## 自定义样式
|
||||
|
||||
可以通过 style 来控制背景、边框及文字颜色。如下
|
||||
@ -184,3 +183,15 @@ icon:
|
||||
| icon | `SchemaIcon` | `dot 图标` | status 模式下的前置图标 |
|
||||
| className | `string` | | 自定义 CSS 样式类名 |
|
||||
| style | `object` | {} | 自定义样式（行内样式），优先级最高 |
|
||||
|
||||
## 事件表
|
||||
|
||||
> 2.6.1 及以上版本
|
||||
|
||||
当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，详细查看[事件动作](../../docs/concepts/event-action)。
|
||||
|
||||
| 事件名称 | 事件参数 | 说明 |
|
||||
| ---------- | ------------------------ | -------------- |
|
||||
| click | nativeEvent 鼠标事件对象 | 点击时触发 |
|
||||
| mouseenter | nativeEvent 鼠标事件对象 | 鼠标移入时触发 |
|
||||
| mouseleave | nativeEvent 鼠标事件对象 | 鼠标移出时触发 |
|
||||
|
||||
@ -19,6 +19,8 @@ export interface TagProps extends ThemeProps {
|
||||
closeIcon?: string | React.ReactNode;
|
||||
onClose?: (e: React.MouseEvent) => void;
|
||||
onClick?: (e: React.MouseEvent) => void;
|
||||
onMouseEnter?: (e: React.MouseEvent) => void;
|
||||
onMouseLeave?: (e: React.MouseEvent) => void;
|
||||
}
|
||||
|
||||
export interface CheckableTagProps extends TagProps {
|
||||
@ -89,6 +91,18 @@ export class Tag extends React.Component<TagProps> {
|
||||
onClick?.(e);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleMouseEnter(e: React.MouseEvent<any>) {
|
||||
const {onMouseEnter} = this.props;
|
||||
onMouseEnter?.(e);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleMouseLeave(e: React.MouseEvent<any>) {
|
||||
const {onMouseLeave} = this.props;
|
||||
onMouseLeave?.(e);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
children,
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
import React from 'react';
|
||||
import {Renderer, RendererProps, filter, IconCheckedSchema} from 'amis-core';
|
||||
import {
|
||||
Renderer,
|
||||
RendererProps,
|
||||
filter,
|
||||
IconCheckedSchema,
|
||||
autobind,
|
||||
createObject
|
||||
} from 'amis-core';
|
||||
import {BaseSchema, SchemaTpl} from '../Schema';
|
||||
import {BadgeObject, withBadge} from 'amis-ui';
|
||||
import {getIcon} from 'amis-ui';
|
||||
@ -35,6 +42,39 @@ export class Icon extends React.Component<IconProps, object> {
|
||||
vendor: 'fa'
|
||||
};
|
||||
|
||||
@autobind
|
||||
handleClick(e: React.MouseEvent<any>) {
|
||||
const {dispatchEvent, data} = this.props;
|
||||
dispatchEvent(
|
||||
'click',
|
||||
createObject(data, {
|
||||
nativeEvent: e
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleMouseEnter(e: React.MouseEvent<any>) {
|
||||
const {dispatchEvent, data} = this.props;
|
||||
dispatchEvent(
|
||||
e,
|
||||
createObject(data, {
|
||||
nativeEvent: e
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleMouseLeave(e: React.MouseEvent<any>) {
|
||||
const {dispatchEvent, data} = this.props;
|
||||
dispatchEvent(
|
||||
e,
|
||||
createObject(data, {
|
||||
nativeEvent: e
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {vendor, classnames: cx, className, style, data} = this.props;
|
||||
let icon = this.props.icon;
|
||||
@ -48,7 +88,13 @@ export class Icon extends React.Component<IconProps, object> {
|
||||
(icon as IconCheckedSchema).id.startsWith('svg-')
|
||||
) {
|
||||
return (
|
||||
<svg className={cx('icon', className)} style={style}>
|
||||
<svg
|
||||
className={cx('icon', className)}
|
||||
style={style}
|
||||
onClick={this.handleClick}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
>
|
||||
<use
|
||||
xlinkHref={`#${(icon as IconCheckedSchema).id.replace(
|
||||
/^svg-/,
|
||||
@ -64,7 +110,15 @@ export class Icon extends React.Component<IconProps, object> {
|
||||
|
||||
let CustomIcon = getIcon(icon);
|
||||
if (CustomIcon) {
|
||||
return <CustomIcon className={cx(className, `icon-${icon}`)} style={style}/>;
|
||||
return (
|
||||
<CustomIcon
|
||||
className={cx(className, `icon-${icon}`)}
|
||||
style={style}
|
||||
onClick={this.handleClick}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const isURLIcon = icon?.indexOf('.') !== -1;
|
||||
@ -79,9 +133,22 @@ export class Icon extends React.Component<IconProps, object> {
|
||||
iconPrefix = `${icon}`;
|
||||
}
|
||||
return isURLIcon ? (
|
||||
<img className={cx('Icon')} src={icon} style={style}/>
|
||||
<img
|
||||
className={cx('Icon')}
|
||||
src={icon}
|
||||
style={style}
|
||||
onClick={this.handleClick}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
/>
|
||||
) : (
|
||||
<i className={cx(iconPrefix, className)} style={style}/>
|
||||
<i
|
||||
className={cx(iconPrefix, className)}
|
||||
style={style}
|
||||
onClick={this.handleClick}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
* @file Tag
|
||||
*/
|
||||
import React from 'react';
|
||||
import {Renderer, RendererProps} from 'amis-core';
|
||||
import {autobind, createObject, Renderer, RendererProps} from 'amis-core';
|
||||
import {BaseSchema, SchemaClassName, SchemaIcon} from '../Schema';
|
||||
import {getPropValue} from 'amis-core';
|
||||
import {isPureVariable, resolveVariableAndFilter} from 'amis-core';
|
||||
@ -83,6 +83,39 @@ export class TagField extends React.Component<TagProps, object> {
|
||||
displayMode: 'normal'
|
||||
};
|
||||
|
||||
@autobind
|
||||
handleClick(e: React.MouseEvent<any>) {
|
||||
const {dispatchEvent, data} = this.props;
|
||||
dispatchEvent(
|
||||
'click',
|
||||
createObject(data, {
|
||||
nativeEvent: e
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleMouseEnter(e: React.MouseEvent<any>) {
|
||||
const {dispatchEvent, data} = this.props;
|
||||
dispatchEvent(
|
||||
e,
|
||||
createObject(data, {
|
||||
nativeEvent: e
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
@autobind
|
||||
handleMouseLeave(e: React.MouseEvent<any>) {
|
||||
const {dispatchEvent, data} = this.props;
|
||||
dispatchEvent(
|
||||
e,
|
||||
createObject(data, {
|
||||
nativeEvent: e
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
let {
|
||||
label,
|
||||
@ -119,6 +152,9 @@ export class TagField extends React.Component<TagProps, object> {
|
||||
icon={icon}
|
||||
closable={closable}
|
||||
style={style}
|
||||
onClick={this.handleClick}
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
>
|
||||
{label}
|
||||
</Tag>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user