"抽屉"组件:<drawer> —— 快应用组件库H-UI







<import name="drawer" src="../Common/ui/h-ui/navigation/c_drawer"></import>
<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <drawer id="drawer"></drawer>
        <h-button text="基本实例" block="true" type="info" onclick="handleClick1"></h-button>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: [
                {
                    icon: 'female',
                    bgColor: 'bg-success',
                    title: '美妆',
                    uri: '/About'
                },
                {
                    icon: 'bag',
                    bgColor: 'bg-danger',
                    title: '包包',
                    uri: '/About'
                },
                {
                    icon: 'ring',
                    bgColor: 'bg-indigo',
                    title: '戒指',
                    uri: '/About'
                },
                {
                    icon: 'necklace',
                    bgColor: 'bg-pink',
                    title: '项链',
                    uri: '/About'
                },
                {
                    icon: 'skirt',
                    bgColor: 'bg-orange',
                    title: '连衣裙',
                    uri: '/About'
                },
                {
                    icon: 'shoe',
                    bgColor: 'bg-teal',
                    title: '高跟鞋',
                    uri: '/About'
                },
                {
                    icon: 't-shirt',
                    bgColor: 'bg-purple',
                    title: 'T恤',
                    uri: '/About'
                },
                {
                    icon: 'pants',
                    bgColor: 'bg-cyan',
                    title: '裤子',
                    uri: '/About'
                },
                {
                    icon: 'coat',
                    bgColor: 'bg-warning',
                    title: '外套',
                    uri: '/About'
                }
            ]
        },
        handleClick1() {
            this.$child('drawer').showdrawer({
                data: this.data
            });
        }
    }
</script>







<import name="drawer" src="../Common/ui/h-ui/navigation/c_drawer"></import>
<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <drawer id="drawer"></drawer>
        <h-button text="左抽屉演示" block="true" type="info" onclick="handleClick2"></h-button>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: [
                {
                    icon: 'female',
                    bgColor: 'bg-success',
                    title: '美妆',
                    uri: '/About'
                },
                {
                    icon: 'bag',
                    bgColor: 'bg-danger',
                    title: '包包',
                    uri: '/About'
                },
                {
                    icon: 'ring',
                    bgColor: 'bg-indigo',
                    title: '戒指',
                    uri: '/About'
                },
                {
                    icon: 'necklace',
                    bgColor: 'bg-pink',
                    title: '项链',
                    uri: '/About'
                },
                {
                    icon: 'skirt',
                    bgColor: 'bg-orange',
                    title: '连衣裙',
                    uri: '/About'
                },
                {
                    icon: 'shoe',
                    bgColor: 'bg-teal',
                    title: '高跟鞋',
                    uri: '/About'
                },
                {
                    icon: 't-shirt',
                    bgColor: 'bg-purple',
                    title: 'T恤',
                    uri: '/About'
                },
                {
                    icon: 'pants',
                    bgColor: 'bg-cyan',
                    title: '裤子',
                    uri: '/About'
                },
                {
                    icon: 'coat',
                    bgColor: 'bg-warning',
                    title: '外套',
                    uri: '/About'
                }
            ]
        },
        handleClick2() {
            this.$child('drawer').showdrawer({
                data: this.data,
                mode: 'left'
            });
        }
    }
</script>







<import name="drawer" src="../Common/ui/h-ui/navigation/c_drawer"></import>
<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <drawer id="drawer"></drawer>
        <h-button text="右抽屉演示" block="true" type="info" onclick="handleClick3"></h-button>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: [
                {
                    icon: 'female',
                    bgColor: 'bg-success',
                    title: '美妆',
                    uri: '/About'
                },
                {
                    icon: 'bag',
                    bgColor: 'bg-danger',
                    title: '包包',
                    uri: '/About'
                },
                {
                    icon: 'ring',
                    bgColor: 'bg-indigo',
                    title: '戒指',
                    uri: '/About'
                },
                {
                    icon: 'necklace',
                    bgColor: 'bg-pink',
                    title: '项链',
                    uri: '/About'
                },
                {
                    icon: 'skirt',
                    bgColor: 'bg-orange',
                    title: '连衣裙',
                    uri: '/About'
                },
                {
                    icon: 'shoe',
                    bgColor: 'bg-teal',
                    title: '高跟鞋',
                    uri: '/About'
                },
                {
                    icon: 't-shirt',
                    bgColor: 'bg-purple',
                    title: 'T恤',
                    uri: '/About'
                },
                {
                    icon: 'pants',
                    bgColor: 'bg-cyan',
                    title: '裤子',
                    uri: '/About'
                },
                {
                    icon: 'coat',
                    bgColor: 'bg-warning',
                    title: '外套',
                    uri: '/About'
                }
            ]
        },
        handleClick3() {
            this.$child('drawer').showdrawer({
                data: this.data
                mode: 'right'
            });
        }
    }
</script>

扫码体验