skybiu-ui

Appearance

On this page

tButton 按钮 ​

基本用法 ​

按钮分为多种类型，默认按钮，主要按钮，成功按钮，警告按钮，危险按钮，信息按钮等类型用于不同场景



code
vue
<template>
   <div>
      <tButton>默认</tButton>
      <tButton type="success">成功按钮</tButton>
      <tButton type="warning">警告按钮</tButton>
      <tButton type="danger">危险按钮</tButton>
      <tButton type="info">信息按钮</tButton>
      <tButton type="primary">主要按钮</tButton>
      <br>
      <tButton disabled>默认</tButton>
      <tButton type="success" disabled>成功按钮</tButton>
      <tButton type="warning" disabled>警告按钮</tButton>
      <tButton type="danger" disabled>危险按钮</tButton>
      <tButton type="info" disabled>信息按钮</tButton>
      <tButton type="primary" disabled>主要按钮</tButton>
      <br>
      <tButton type="primary" size="small">主要按钮</tButton>
      <tButton type="primary" size="middle">主要按钮</tButton>
      <tButton type="primary" size="large" onclick="open">主要按钮</tButton>
      <tButton type="success" circle size="small">成功</tButton>
      <tButton type="success" circle>成功</tButton>
      <tButton type="success" circle size="large">成功</tButton>
   </div>
</template>

<script setup>
</script>

<style lang='scss' scoped>
   div {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
   }
   
</style>
vue
// tButton 封装源码
<template>
   <div>
        <button :class="tClass" :disabled="disabled" @click="clickEvent"><slot></slot></button>
   </div>
</template>
<script>
export default {
    name: 'tButton'
}
</script>
<script setup>
import { computed } from 'vue'
// 获取 type 值
const props = defineProps({
    type: {
        type: String,
        default: 'default'  // 默认值 default
    },
    disabled: Boolean,
    round: Boolean,
    src: String,
    size: {
        size: String,
        default: ''
    },
    circle: Boolean,
})

// 计算 class 名
const tClass = computed(() => {
    return [
        "t-button",
        `t-button-${props.type}` ,
        props.disabled? 't-button-disabled':'',
        props.round? 't-button-round':'',
        props.circle? 'circle':'',
        `${props.size}`,
    ]
})

</script>

<style lang='scss' scoped>
div {
    // float: left;
    // margin: 6px;
}
button {
    outline: none;
    border: 0;
    background: none;
    cursor: pointer;
}
.t-button {
    padding: 10px 18px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    color: white;
    font-size: 14px;
    margin: 5px;
    &:hover,&:focus {
        opacity: 0.8;
    }
}
.t-button-default {
    color: black;
}
.t-button-success {
    background-color: $success;
}
.t-button-warning {
    background-color: $warning;
}
.t-button-danger {
    background-color: $danger;
}
.t-button-info {
    background-color: $info;
}
.t-button-primary {
    background-color: $primary;
}

.t-button-disabled {
    opacity: 0.4;
    cursor: no-drop;
    &:hover,&:focus {
        opacity: 0.4;
    }
}

.t-button-round {
    border-radius: 20px;
}
.small {
    padding: 8px 13px;
}

.middle {
    padding: 12px 18px;
}

.large {
    padding: 15px 20px;
}
.circle.large{
    height: 70px;
    width: 70px;
    border-radius: 70px;
}
.circle {
    height: 60px;
    width: 60px;
    border-radius: 60px;
    padding: 0;
}
.circle.small{
    height: 45px;
    width: 45px;
    border-radius: 45px;
    padding: 0;
}
</style>

Attributes ​

参数说明类型默认值
size设置按钮的大小small/middle/largemiddle
type设置按钮的类型default/primary/success/info/dangerdefault
round是否圆角按钮booleanfalse
circle是否圆形按钮booleanfalse
disabled是否禁用状态booleanfalse