HarmonyOS应用开发：鸿蒙自定义组件slot插槽，体现的更强大！ 原创 精华

<div id="drawer-container" class="drawer-container" on:touchstart="onTouchStart"
     on:touchmove="onTouchMove" on:touchend="onTouchEnd">

    <div class="drawer-content" >
        <!--插槽-->
        <slot name="content"></slot>
    </div>

    <stack class="drawer-content2">
        <!--插槽-->
        <slot name="content2"></slot>
    </stack>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

.drawer-container {
   width: 100%;
   height: 100%;
   flex-direction: column;
}
.drawer-content {
   width: 100%;
   height: 100%;
   background-color: white;
}
.drawer-content2 {
   width: 100%;
   height: 100%;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

<!--引入自定义组件-->
<element name='drawer' src='../sideslipcontent/sideslipcontent.hml'></element>
<div class="container">
<!--通过传值设置样式-->
    <drawer>
    <!--根据名称加入对应的插槽中-->
        <div slot='content' class="content-layout">
            <text>登录</text>
            <input class="input" type="text" placeholder="请输入账号..."></input>
            <input class="input" type="password" placeholder="请输入密码..."></input>
            <button class="button" onclick="butClick">登录</button>
        </div>

        <div slot='content2' class="menu-layout">
            <div class="my-info">
                <text>个人中心</text>
            </div>
            <div>
                <list scrollbar="on">
                    <list-item for="{{listData}}" class="list-container"
                               onclick="listClock({{$item.name}})">
                        <text>{{$item.name}}</text>
                    </list-item>
                </list>
            </div>
        </div>
    </drawer>
</div>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

.container {
    width: 100%;
    height: 100%;
}

.content-layout {
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
}

.content-layout text {
    width: 100%;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    font-weight: bold;
    background-color: darkgray;
}
.input{
    margin: 10px;
}
.button{
    width: 150px;
    padding: 10px;
    margin-top: 20px;
    font-size: 20px;
}

.menu-layout {
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-right: 1px solid #eeeded;
}

.my-info {
    flex-direction: column;
    width: 100%;
    height: 70px;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #fd3f3f;
    background-color: chocolate;
}

.my-info text {
    color: #ffffff;
    font-size: 20px;
}
.list-container{
    padding: 15px;
    border-bottom: 1px #000000;
}
.list-container text{
    font-size: 20px;
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.

import prompt from '@system.prompt';
export default {
    data: {
        title: 'World',
        listData:[
            {
                'id': 0,
                'name': '消息',
                'icon': '/common/images/message.png',
            },
            {
                'id': 1,
                'name': '收藏',
                'icon': '/common/images/collect.png',
            },
            {
                'id': 2,
                'name': '密码',
                'icon': '/common/images/password.png',
            },
            {
                'id': 3,
                'name': '反馈',
                'icon': '/common/images/feedback.png',
            },
            {
                'id': 4,
                'name': '设置',
                'icon': '/common/images/setting.png',
            }]
    },
    listClock(name){
        prompt.showToast({
            message:name,
            duration:3000
        })
    },
    butClick(){
        prompt.showToast({
            message:"登录成功！",
            duration:3000
        })
    }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.