Steps

步骤条组件

封装一个步骤条组件（vue3）

Example

example

⏱️

右边

默认文字在右边

左边

contentPosition=left 属性将内容展示在左边

⏱️

传递插槽

业务场景中有时需要对第三方组件进行二次封装, 比如弹窗,表格等组件, 有时项目内会根据业务进行二次封装成业务组件, 新的业务组件会需要把自己的slots透传给原本的组件, 也可以叫传递插槽

Code

vue

<n-step
  header-dot
  title="右边"
  description="默认content在右边"
></n-step>

<n-step
  contentPosition="left"
  title="左边"
  description="contentPosition=left  属性将内容展示在左边"
/></n-step>

<n-step>
  <template #title> 传递插槽 </template>
  <template #description>
    业务场景中有时需要对第三方组件进行二次封装, 比如弹窗,表格等组件,
    有时项目内会根据业务进行二次封装成业务组件,
    新的业务组件会需要把自己的slots透传给原本的组件, 也可以叫传递插槽
  </template>
</n-step>

Other Example

基于Step组件定制化开发一些业务组件

example

💡

2023-09-10

阅读

O’Reilly Media 通过图书、杂志、在线服务、调查研究和会议等方式传播创新知识。自 1978 年开始，O’Reilly 一直都是前沿发展的见证者和推动者。超级极客们正在开创着未来，而我们关注真正重要的技术趋势——通过放大那些“细微的信号”来刺激社会对新科技的应用。作为技术社区中活跃的参与者，O’Reilly 的发展充满了对创新的倡导、创造和发扬光大

2023-09-10

电影

O’Reilly 为软件开发人员带来革命性的“动物书”；创建第一个商业网站（GNN）；组织了影响深远的开放源代码峰会，以至于开源软件运动以此命名；创立了 Make 杂志，从而成为 DIY 革命的主要先锋；公司一如既往地通过多种形式缔结信息与人的纽带。 O’Reilly 的会议和峰会集聚了众多超级极客和高瞻远瞩的商业领袖，

📕

📺

2023-09-10

音乐

共同描绘出开创新产业的革命性思想。作为技术人士获取信息的选择，O’Reilly 现在还将先锋专家的知识传递给普通的计算机用户。无论是通过书籍出版，在线服务或者面授课程，每一项 O’Reilly 的产品都反映了公司不可动摇的理念——信息是激发创新的力量。

2023-09-10

开发

Tim 是位特立独行的商人，他不光放眼于最长远、最广阔的视野并且切实地按照 Yogi Berra 的建议去做了：‘如果你在路上遇到岔路口，走小路（岔路）。’回顾过去 Tim 似乎每一次都选择了小路，而且有几次都是一闪即逝的机会，尽管大路也不错。” ——Linux Journal

🥪

传递插槽

业务场景中有时需要对第三方组件进行二次封装, 比如弹窗,表格等组件,有时项目内会根据业务进行二次封装成业务组件, 新的业务组件会需要把自己的slots透传给原本的组件, 也可以叫传递插槽

// NStep.vue 组件中

vue

    <NStepLeft v-bind="$attrs">
      <!-- 将slot透传给NStepLeft -->
      <template
        v-for="(item, key, index) in $slots"
        :key="index"
        v-slot:[key]="slotScope"
      >
        <slot :name="key" v-bind="slotScope"></slot>
      </template>
    </NStepLeft>

NStepLeft 是需要被二次封装的组件

Steps #

步骤条组件 #

Example #

Code #

Other Example #

传递插槽 #

Steps

步骤条组件

Example

Code

Other Example

传递插槽