zoukankan      html  css  js  c++  java
  • "抽屉"组件:<drawer> —— 快应用组件库H-UI

    Screenshot_20200417_131415_com.huawei.fastapp

    <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>
    

    Screenshot_20200417_131426_com.huawei.fastapp

    <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>
    

    Screenshot_20200417_131434_com.huawei.fastapp

    <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>
    

    扫码体验

  • 相关阅读:
    人脸识别总结(附开源项目代码与各大数据集下载路径)
    simpledet 的配置
    论文笔记--PCN:Real-Time Rotation-Invariant Face Detection with Progressive Calibration Networks
    smallcorgi/Faster-RCNN_TF训练自己的数据
    保存文件名至txt文件中,不含后缀
    训练 smallcorgi/Faster-RCNN_TF 模型(附ImageNet model百度云下载地址)
    调试 smallcorgi/Faster-RCNN_TF 的demo过程遇到的问题
    python字符串前缀和格式化
    摩斯电码与字母相互转换
    django配置mysql
  • 原文地址:https://www.cnblogs.com/cloud-dev/p/chou-tizu-jianltdrawergt--kuai-ying-yong-zu-jian-k.html
Copyright © 2011-2022 走看看