基础组件学习-button_button class=

属性

样式

type设置为非arc

除支持通用样式外，还支持如下样式：

说明

• 胶囊按钮（type=capsule）时，不支持border相关样式；
• 圆形按钮（type=circle）时，不支持文本相关样式；

• 文本按钮（type=text）时，自适应文本大小，不支持尺寸设置（radius，width，height），背景透明不支持background-color样式。

type设置为arc

除支持通用样式中background-color、opacity、display、visibility、position、[left|top|right|bottom外，还支持如下样式：

示例

html

<div class="div-button">
    <text class="title">普通按钮</text>
    <div class="circleall">
        <button class="buttons">确认按钮</button>
        <button class="buttons" waiting="true">Loading</button>
    </div>
    <div class="circleall">
        <button class="buttons icon" icon="/common/images/paobu.png" value="跑步" placement="start"></button>
        <button class="buttons white">禁用按钮</button>
    </div>
    <div class="circleall">
        <button class="buttons  oriage">重置</button>
        <button class="buttons  warn">告警按钮</button>
    </div>
    <text class="title">胶囊按钮</text>
    <div class="circleall">
        <button class="buttons" type="capsule">确认按钮</button>
        <button class="buttons" type="capsule" waiting="true">Loading</button>
    </div>
    <div class="circleall">
        <button class="buttons" type="capsule">清除</button>
        <button class="buttons  white" type="capsule" >禁用按钮</button>
    </div>
    <div class="circleall">
        <button class="buttons oriage" type="capsule">重置</button>
        <button class="buttons warn" type="capsule">告警按钮</button>
    </div>
    <text class="title">圆形按钮</text>
    <div class="circlealls">
        <button class="circle" type="circle" icon="/common/images/fenleifuben.png">icon按钮</button>
        <button class="circle cir" type="circle" icon="/common/images/rest-fill.png">icon按钮</button>
    </div>
    <text class="title">文本按钮</text>
    <div class="circleall">
        <button class="text" type="text">文本按钮1</button>
        <button class="text text1" type="text">文本按钮2</button>
        <button class="text text2" type="text">文本按钮3</button>
    </div>
    <text class="title">长胶囊按钮</text>
    <div class="all">
        <button class="download" type="download">下载按钮</button>
        <button class="download white" type="download">禁止下载</button>
        <button class="download" type="download" id="download-btn"
                onclick="setProgress">{{downloadText}}</button>
    </div>
</div>

css

.div-button {
    flex-direction: column;
    width: 100%;
}
.circleall{
    width: 90%;
    flex-direction: row;
    justify-content: space-around;
    margin-left: 4%;
}
.circlealls{
    flex-direction: row;
}
.buttons {
    margin-top: 15px;
    width: 45%;
    height: 45px;
    text-align: center;
    font-size: 14px;
    border-radius: 10px;
    background-color: #317aff;
}
.title{
    font-size: 13px;
    margin-top: 60px;
    margin-left: 20px;
    color: grey;
}
.all{
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}
.oriage{
    background-color: #ee8443;
}
.white{
    opacity: 0.4;
} 
.icon{
    icon-height: 30px;
    icon-width: 30px;
}
.warn{
   background-color: #f55a42;
}
.circle {
    radius: 30px;
    icon-width: 30px;
    icon-height: 30px;
    margin-left: 20px;
    margin-top: 20px;
    background-color: #317aff;
}
.cir{
    background-color: #f55a42;
}
.text {
    text-color: #0a59f7;
    font-size: 17px;
    font-weight: 600;
    font-family: sans-serif;
    font-style: normal;
}
.text1{
    text-color: #969696;
}
.text2{
    text-color: #e84026;
}
.download {
    margin-top: 15px;
    width: 88%;
    height: 45px;
    border-radius: 50px;
    text-color: white;
    background-color: #007dff;
}

js

export default {
    data: {
        progress: 10,
        downloadText: "进度条按钮"
    },
    setProgress(e) {
     var i=0
     var set= setInterval(()=>{
            i+=10
            this.progress=i
            this.downloadText = this.progress + "%";
            this.$element('download-btn').setProgress({ progress: this.progress });
            if(this.progress>=100){
                clearInterval(set)
                this.downloadText="完成"
            }
        },1000)
    },
}