关于商品活动的H5页面技术总结

背景

在单个html文件里面使用vue3、jquery等其他第三方js库，实现规定的页面效果，其中主要功能是从商品json数据中读取数据，然后可以通过搜索框、下拉框、左侧菜单来筛选商户信息。

页面布局

技术要点：

1、通过路由来进行页面布局

 <div class="tab-pane" >
            <router-view name="routerView-1"></router-view>
            <div class="content-wrapper">
                <router-view name="routerView-2"></router-view>
                <router-view name="routerView-3"></router-view>
                <router-view name="routerView-4"></router-view>
            </div>
 </div>

  // 创建路由
        const router = createRouter({
            history: createWebHashHistory(),
            routes: [
                {
                    path: '/',
                    components: {
                        routerView-1: routerView-1,
                    }

                },

                {
                    path: '/path2',
                    components: {
                       routerView-1: routerView-1,
                        routerView-2: routerView-2,
                       routerView-3: routerView-3,
                    }

                },

                {
                    path: '/path3',
                    components: {
                       routerView-1: routerView-1,
                        routerView-2: routerView-2,
                    }
                },


            ]
        });

（1）在视图中通过路由组件名字来显示，如果路由路径下没有传入对应的组件，那么视图中就不会显示该路由视图。

（2）在页面中，可以有多个路由出口，其中出口内容可以通用命名来指定，其中如果传入对应的组件，那么该路由视图出口就有内容，否则就不会展示，相当于没有内容。

（3）其中路由创建、组件定义都是在 const app = createApp(App);的App之外定义的，然后app.use（router)就可以引用进来。

（4）在单个html页面中定义组件，其中必须要引入vue，组件代码模板是：

 const module = {
            template: `
      
            `,
            setup() {
              
                return { };
            }

        };

其中如果需要用到vue中的App对象里面的内容，那么就会使用到provide、inject，provide需要在App对象里面注入组件需要的数据，inject是取出注入的数据。inject可以在不同的组件中使用。

2、布局CSS设置

现在实现一个效果，就是在div里面展示商户地址和商户类型，是左右布局展示，其中类型在右边底部，其中类型一定会显示出来，而地址始终在类型的左边，其中地址过长时会自动换行。

<div class="address-type">
    <div class="address"></div>
    <div class="type"></div>
</div>

css设置如下：

.address-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.address {
    flex: 1;
    text-alin: left;
}
.type {
    flex-shrink: 0;
    text-align: right;
    align-self: flex-end;
    width: auto;
}