<template>
    <div class="page-container">
        <div class="button-item">
            <span>Primary</span>
            <el-rrf-button baseStyle="Primary"  @click="handleClick">常规</el-rrf-button>
            <el-rrf-button baseStyle="Primary" >悬停</el-rrf-button>
            <el-rrf-button baseStyle="Primary" >点击</el-rrf-button>
            <el-rrf-button baseStyle="Primary"  disabled>失效</el-rrf-button>
        </div>
        <div class="button-item">
            <span>Primary Small</span>
            <el-rrf-button baseStyle="Primary"  size="small" @click="handleClick">常规</el-rrf-button>
            <el-rrf-button baseStyle="Primary"  size="small">悬停</el-rrf-button>
            <el-rrf-button baseStyle="Primary"  size="small">点击</el-rrf-button>
            <el-rrf-button baseStyle="Primary"  size="small" disabled>失效</el-rrf-button>
        </div>
        <div class="button-item">
            <span>Stroke</span>
            <el-rrf-button baseStyle="Stroke" >常规</el-rrf-button>
            <el-rrf-button baseStyle="Stroke" >悬停</el-rrf-button>
            <el-rrf-button baseStyle="Stroke" >点击</el-rrf-button>
            <el-rrf-button baseStyle="Stroke" disabled>失效</el-rrf-button>
        </div>
        <div class="button-item">
            <span>Stroke Small</span>
            <el-rrf-button baseStyle="Stroke" size="small" >常规</el-rrf-button>
            <el-rrf-button baseStyle="Stroke" size="small" >悬停</el-rrf-button>
            <el-rrf-button baseStyle="Stroke" size="small" >点击</el-rrf-button>
            <el-rrf-button baseStyle="Stroke" size="small"  disabled>失效</el-rrf-button>
        </div>
        <div class="button-item">
            <span>Secondary</span>
            <el-rrf-button baseStyle="Secondary"  >常规</el-rrf-button>
            <el-rrf-button baseStyle="Secondary" >悬停</el-rrf-button>
            <el-rrf-button baseStyle="Secondary" >点击</el-rrf-button>
            <el-rrf-button baseStyle="Secondary"   disabled>失效</el-rrf-button>
        </div>
        <div class="button-item">
            <span>Secondary small</span>
            <el-rrf-button baseStyle="Secondary"  size="small">常规</el-rrf-button>
            <el-rrf-button baseStyle="Secondary" size="small">悬停</el-rrf-button>
            <el-rrf-button baseStyle="Secondary" size="small">点击</el-rrf-button>
            <el-rrf-button baseStyle="Secondary"  size="small" disabled>失效</el-rrf-button>
        </div>
        <div class="button-item">
            <span>LeftIcon</span>
            <el-rrf-button baseStyle="Primary" icon="el-icon-dianzan">常规</el-rrf-button>
            <el-rrf-button baseStyle="Primary" icon="el-icon-dianzan">悬停</el-rrf-button>
            <el-rrf-button baseStyle="Primary" icon="el-icon-dianzan">点击</el-rrf-button>
            <el-rrf-button baseStyle="Primary" disabled icon="el-icon-dianzan">失效</el-rrf-button>
        </div>
         <div class="button-item">
            <span>RightIcon</span>
            <el-rrf-button baseStyle="Primary" rightIcon="el-icon-dianzan">常规</el-rrf-button>
            <el-rrf-button baseStyle="Primary" rightIcon="el-icon-dianzan">悬停</el-rrf-button>
            <el-rrf-button baseStyle="Primary" rightIcon="el-icon-dianzan">点击</el-rrf-button>
            <el-rrf-button baseStyle="Primary" disabled rightIcon="el-icon-dianzan">失效</el-rrf-button>
        </div>
    </div>
</template>
<script>
import ElRrfButton from "pkgs/RfButton/src";
export default {
   components: {
       ElRrfButton
   },
   data() {
       return {
       }
   },
   methods: {
       handleConfirm() {
           this.visible2 = false;
       },
       handleClick(e) {
           console.log("e111======",e)
       }
   }
}
</script>
<style lang="css" scoped>
    .page-container{
        display: flex;
        flex-direction: column;
    }
    .page-container .button-item{
        margin: 30px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
</style>