Skip to content

feat: 为 wd-collapse-item 组件 为添加 title slot#372

Merged
Moonofweisheng merged 4 commits intoMoonofweisheng:masterfrom
guygubaby:master
Jun 17, 2024
Merged

feat: 为 wd-collapse-item 组件 为添加 title slot#372
Moonofweisheng merged 4 commits intoMoonofweisheng:masterfrom
guygubaby:master

Conversation

@guygubaby
Copy link
Copy Markdown
Contributor

@guygubaby guygubaby commented Jun 15, 2024

🤔 这个 PR 的性质是?(至少选择一个)

  • 日常 bug 修复
  • 新特性提交
  • 站点、文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • TypeScript 定义更新
  • CI/CD 改进
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 代码重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

[新功能需求] wd-collapse-item为title添加slot #356

💡 需求背景和解决方案

  1. wd-collapse-item 组件有自定义 title 的需要。
  2. 兼容之前的用法,可直接传递 title 属性,或者 使用 title slot 传入自定义内容,且支持接收 expandeddisabledisFirst 三个属性实现更好的内容控制

实现方式,为 wd-collapse-item 组件添加名为 titleslot

<slot name="title" :expanded="expanded" :disabled="disabled" :isFirst="isFirst">
    <text class="wd-collapse-item__title">{{ title }}</text>
    <wd-icon name="arrow-down" :custom-class="`wd-collapse-item__arrow ${expanded ? 'is-retract' : ''}`" />
</slot>

最终用法

<wd-collapse-item name="item3">
    <template #title="{ expanded, disabled, isFirst }">
      <span style="color: red">通过 slot 自定义标题</span>
      <span>{{ expanded ? '我展开了' : '我已收起' }}</span>
    </template>
    这是一条简单的示例文字。
</wd-collapse-item>
  1. 用法和效果截图
    image

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

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

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

@netlify
Copy link
Copy Markdown

netlify bot commented Jun 15, 2024

Deploy Preview for wot-design-uni ready!

Name Link
🔨 Latest commit 76f98fa
🔍 Latest deploy log https://app.netlify.com/sites/wot-design-uni/deploys/666da4e09970cc000855f077
😎 Deploy Preview https://deploy-preview-372--wot-design-uni.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@vercel
Copy link
Copy Markdown

vercel bot commented Jun 15, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
wot-design-uni ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 15, 2024 2:28pm

@guygubaby guygubaby changed the title [新功能需求] wd-collapse-item为title添加slot feat: 为 wd-collapse-item 组件 为添加 title slot Jun 15, 2024
Comment thread docs/component/collapse.md Outdated
@Moonofweisheng Moonofweisheng merged commit 0252bd9 into Moonofweisheng:master Jun 17, 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