其次将该文件注册到 router 对象上。
运行，该页面展示 123。
然后我们开始绘制页面，这次绘制的页面是物流追踪页面，整个页面分为上下两大块。这里我们开始引入样式。
新建样式文件。
在 tsx 中引入并使用样式。
我们计划将页面的上半部分划分为一个组件，接下来我们注册并引入一个组件。
新建一个组件。
在页面中引入并使用该组件。
现在页面展示如下：
接下来在组件 LogistTrackCard 内绘制静态页面。
组件整体分为两部分，下面的部分分裂为横向排列的 2 块，各占 50%，由 flex 布局而成。
这块没什么难点，直接给出。
现在页面呈现如下。
我们可以美化一下，将组件的白色背景色去掉，添加背景图片。将灰色的箭头图片换为橙色图片。
我们为刚刚留出的位置元素写上内边距和高度，注册组件并写在位置元素中，超出位置元素的部分滚动展示。
这里我们可以使用vant的公共组件来实现。
vant-Steps步骤条 地址：https://vant-contrib.gitee.io/vant/#/zh-CN/steps
1 为刚刚留出的位置元素写上内边距和高度。
2 注册组件，引入组件，在组件内部使用vant-step进度条组件实现。
3 优化step样式
接下来，我们修改一下LogistTrackStep组件展示内容，并添加一些样式。
现在，静态页面已经绘制完成了，接下来是添加动态数据。
建立变量，里面有我们所需要的数据，然后我们将数据传入对应组件中。传入的方式还是有props，但是tsx的props与vue文件中不同的是，不再用冒号来标志动态属性，而且使用大括号来包裹变量。
使用变量：
在第二个组件LogistTrackStep中，我们照常引入变量。
此时我们可以在页面中使用变量了，但是我们发现有两个问题：
1 logistTrackStepList是一个列表，我们需要循环展示，对应在vue组件中就是v-for属性，但是tsx中又有所不同。
2 deliverystatus是一个数字，我们需要展示对应的文字。
接下来解决第二个问题，我们新建一个对象，将deliverystatus的每一项与对应的字符串对应起来，根据deliverystatus的值取对应的项展示。
上面通过deliverystatusObj[(props.deliverystatus as keyof typeof deliverystatusObj)取得对应的值，在jsx中等价于deliverystatusObj[props.deliverystatus]，as keyof typeof deliverystatusObj是ts语法，是断言一个变量为一个对象的键类型的一种形式。
另外可以看到，这行还写了一个条件表达式，是为了仅在列表的最上方第一项展示物流状态。
到现在为止，物流页面已经编写完毕了，只要接上接口就好。
有同学发现，在物流页面上方的卡片中，有一部分没有接入数据。
在页面中有时会有这种情况，有的数据有时有，有时没有，可以使用插槽控制。
我们将没有接入数据的部分写在组件插槽中，如果有传入，就展示当前效果，如果没有传入，就展示简单模式效果。
tsx插槽使用起来很简单，首先我们在父组件logistTrack中，向LogistTrackCard组件注入插槽。
注入插槽分为两部，首先我们将插槽对应内容写在LogistTrackCardSlot方法中返回，然后将LogistTrackCardSlot方法绑定在子组件v-slots属性上，v-slots属性对应一个对象，键为插槽名称，值为返回插槽内容的方法。
在子组件中使用插槽也很简单，使用slots.default()引入即可，slots作为setup参数传入。
插槽准备完毕后我们可以修改一下样式，让其在插槽存在于不存在的时候展示不同的样式。
使用动态类即可(与vue不同)。
当slots.default也就是默认插槽存在时，simple类存在。
现在我们的页面已经开发完毕了，页面有两种状态，有插槽状态和没有插槽状态。
有插槽状态：
没有插槽状态：
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/2947.html