zoukankan      html  css  js  c++  java
  • "动作面板"组件:<action-sheet> —— 快应用组件库H-UI

    Screenshot_20200417_161857_com.huawei.fastapp

    <import name="action-sheet" src="../Common/ui/h-ui/feedback/c_action_sheet"></import>
    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <action-sheet id="actionsheet"></action-sheet>
            <h-button text="基本实例" block="true" type="info" onclick="handleClick1"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    
    <script>
        import prompt from '@system.prompt'
    
        export default {
            private: {
                data: [
                    {
                        icon: 'home',
                        title: '回到首页',
                        uri: '/Home'
                    },
                    {
                        title: 'Disabled',
                        disabled: 'true'
                    },
                    {
                        title: '删除',
                        color: 'red'
                    }
                ]
            },
            onInit() {
                this.$on('actionsheet_dispatchEvt',this.dispatchEvt)
            },
            dispatchEvt(evt) {
                // 弹窗显示详细说明
                prompt.showToast({
                    message: '第 ' + evt.detail.value + ' 个菜单被点击了!',
                    duration: 1,
                    gravity: 'top'
                })
            },
            handleClick1() {
                this.$child('actionsheet').showActionSheet({
                    id: 'actionsheet',
                    data: this.data
                });
            }
        }
    </script>
    

    Screenshot_20200417_161908_com.huawei.fastapp

    <import name="action-sheet" src="../Common/ui/h-ui/feedback/c_action_sheet"></import>
    <import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
    <template>
        <div class="container">
            <action-sheet id="actionsheet"></action-sheet>
            <h-button text="设置自动消失时间" block="true" type="info" onclick="handleClick2"></h-button>
        </div>
    </template>
    
    <style lang="less">
        @import '../Common/styles/container.less';
    </style>
    
    <script>
        import prompt from '@system.prompt'
    
        export default {
            private: {
                data: [
                    {
                        icon: 'home',
                        title: '回到首页',
                        uri: '/Home'
                    },
                    {
                        title: 'Disabled',
                        disabled: 'true'
                    },
                    {
                        title: '删除',
                        color: 'red'
                    }
                ]
            },
            onInit() {
                this.$on('actionsheet_dispatchEvt',this.dispatchEvt)
            },
            dispatchEvt(evt) {
                // 弹窗显示详细说明
                prompt.showToast({
                    message: '第 ' + evt.detail.value + ' 个菜单被点击了!',
                    duration: 1,
                    gravity: 'top'
                })
            },
            handleClick2() {
                this.$child('actionsheet').showActionSheet({
                    id: 'actionsheet',
                    data: this.data,
                    duration: 5
                });
            }
        }
    </script>
    

    扫码体验

  • 相关阅读:
    pyinstall打包工具
    python中用xlsxwriter创建图表
    python打包工具 cx_Freeze介绍
    JavaScript、Dom和jQuery
    MHA原理
    mysql-mmm实现高可用和部署时须要考虑的问题
    jquery中attr和prop的区别
    FLUSH TABLES WITH READ LOCK 获取锁的速度
    Python Memcached、Redis & RabbitMQ使用
    innodb_flush_log_at_trx_commit
  • 原文地址:https://www.cnblogs.com/cloud-dev/p/dong-zuo-mian-banzu-jianltactionsheetgt--kuai-ying.html
Copyright © 2011-2022 走看看