"按钮"组件:<h-button> —— 快应用组件库H-UI



<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <h-button id="button1"></h-button>
    </div>
</template>

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



<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <h-button id="button2" text="保存"></h-button>
    </div>
</template>

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



<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <h-button id="button3" text="默认按钮"></h-button>
        <h-button id="button4" text="原始按钮" type="primary"></h-button>
        <h-button id="button5" text="成功按钮" type="success"></h-button>
        <h-button id="button6" text="警告按钮" type="warning"></h-button>
        <h-button id="button7" text="危险按钮" type="danger"></h-button>
        <h-button id="button8" text="信息按钮" type="info"></h-button>
    </div>
</template>

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



<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <h-button id="button9" text="默认大小" type="info"></h-button>
        <h-button id="button10" text="大的按钮" type="info" size="lg"></h-button>
        <h-button id="button11" text="小的按钮" type="info" size="sm"></h-button>
    </div>
</template>

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



<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <h-button id="button12" text="默认大小块级按钮" type="info" block="true"></h-button>
        <h-button id="button13" text="大的块级按钮" type="info" size="lg" block="true"></h-button>
    </div>
</template>

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



<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <h-button id="button14" text="设置按钮圆角" type="info" circle="true"></h-button>
    </div>
</template>

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



<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <h-button id="button15" icon="warning" type="warning"></h-button>
        <h-button id="button16" icon="warning" type="warning" circle="true"></h-button>
    </div>
</template>

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



<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <h-button id="button17" text="跳转页面" type="info" uri="About"></h-button>
    </div>
</template>

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



<import name="h-button" src="../Common/ui/h-ui/basic/c_button"></import>
<template>
    <div class="container">
        <h-button id="button18" text="监控点击事件" type="info"></h-button>
    </div>
</template>

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

<script>
    import prompt from '@system.prompt'

    export default {
        onInit() {
            this.$on('button18_dispatchEvt',this.dispatchEvt)
        },
        dispatchEvt(evt) {
            // 弹窗显示缩略语的详细说明
            prompt.showToast({
                message: evt.detail.msg,
                duration: 1,
                gravity: 'top'
            })
        }
    }
</script>

扫码体验