Skip to content

feat(watermark): add watermark component#101

Merged
duenyang merged 3 commits into
TDesignOteam:mainfrom
zzzp9527:feature/watermark
Aug 27, 2024
Merged

feat(watermark): add watermark component#101
duenyang merged 3 commits into
TDesignOteam:mainfrom
zzzp9527:feature/watermark

Conversation

@zzzp9527
Copy link
Copy Markdown
Contributor

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

#33

💡 需求背景和解决方案

📝 更新日志

  • fix(组件名称): 处理问题或特性描述 ...

  • 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充
  • Changelog 已提供或无须提供

@zzzp9527 zzzp9527 changed the title feat(watermark): add watermark component WIP: feat(watermark): add watermark component Jul 17, 2024
Comment thread src/watermark/watermark.tsx Outdated

static propsType = {
alpha: Number,
content: Object,
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

TNode类型,使用[String, Number, Object, Function]

Comment thread src/watermark/watermark.tsx Outdated
const offsetLeft = offset[0] || gapX / 2;
const offsetTop = offset[1] || gapY / 2;

effect(() => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不需要使用effect

Comment thread src/watermark/watermark.tsx Outdated
});
});

effect(() => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不需要effect


stopObservation = signal(false);

ready(): void {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

此部分做了三件事,获取base64,获取style string,监听MutationObserve,建议各自单独抽取出对应的方法,不要放在一起。

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

对于 base64Url 只是为了获取 style string,不需要使用signal,ready里面的功能都不需要effect,如果想要在每次props改变时重新计算,可以使用omi的声明周期函数 https://omi.cdn-go.cn/home/latest/zh/lifecycle.html#%E7%94%A8%E6%B3%95

Comment thread src/watermark/watermark.tsx Outdated

watermarkImgRef = createRef<HTMLDivElement>();

styleStr = createRef<string>();
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不需要creatRef,直接this获取即可,createRef需要与dom做绑定用

@zzzp9527 zzzp9527 changed the title WIP: feat(watermark): add watermark component feat(watermark): add watermark component Jul 24, 2024
injectStyle(keyframesStyle);

// 水印节点的父节点 - 防删除
createMutationObservable(typeof document !== 'undefined' ? document.body : null, (mutations) => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在uninstall的时候,需要disconnect

@github-actions
Copy link
Copy Markdown
Contributor

失败


@tag('t-watermark')
export default class Watermark extends Component<WatermarkProps> {
static css = styleSheet;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里的css要去掉

@duenyang duenyang merged commit 2bff415 into TDesignOteam:main Aug 27, 2024
@duenyang
Copy link
Copy Markdown
Contributor

+目前水印显示不出来,以上问题由 @duenyang 接手修复

This was referenced Oct 17, 2024
This was referenced Dec 16, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants