ASTRO轻应用 ASTROZERO-在线开发高级组件:场景描述

时间:2024-08-20 11:09:48

场景描述

本章节以开发网站中常用的标签切换页面为例,向您介绍如何基于组件模板在线开发组件。标签切换效果如图1所示,页面中主要包含标签栏详情展示模块两部分,可以通过切换标签来控制详情展示模块中的展示内容。

图1 标签切换效果

本章节主要在高级页面中,通过两个组件(标签页组件信息展示组件)复现上述场景。其中,标签页组件包含产品类别(手机、笔记本、平板等),信息展示组件用于展示不同产品类别的图片信息。两个组件通过事件-动作机制实现交互,在标签页组件中注册标签切换事件,此事件绑定信息展示组件中切换产品图片的动作。

本章节使用的示例组件开发过程中,使用了前端开发框架Vue及组件库Element事件-动作机制的详细介绍,请参见如何实现组件交互

support.huaweicloud.com/usermanual-astrozero/astrozero_05_0183.html