<!-- 功能：设计给的按钮大小; 作者：LZJ; 时间：2022年10月11日 18:00:05-->
<template>
    <div id="ButtonTest" class="pd20">
        <h2 class="mb30"> 设计的按钮大小要求size为small</h2>
        <el-button size="small">默认按钮</el-button>
        <el-button type="primary" size="small">主要按钮</el-button>
        <el-button type="success" size="small">成功按钮</el-button>
        <el-button type="info" size="small">信息按钮</el-button>
        <el-button type="warning" size="small">警告按钮</el-button>
        <el-button type="danger" size="small">危险按钮</el-button>
        <el-button type="primary" icon="el-icon-search" size="small">带图标的按钮</el-button>
        <el-button type="primary" size="small">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
        <div class="pd20 ft18 border br8 bgc-f5f5f5 fw-500 mt20">
            <code>
                <pre><font class="keyword-tag">&lt;el-button size=<font class="string-tag">"small"</font>&gt;</font><span class="fw-500 ft16">默认按钮</span><font class="keyword-tag">&lt;/el-button&gt;</font></pre>
                <br>
                <div v-for="(item, index) in arr" :key="index">
                    <pre><font class="keyword-tag">&lt;el-button type=<font class="string-tag">"{{ item.type }}"</font> <font v-if="item.icon">icon=<font class="string-tag">"{{ item.icon }}"</font> </font>size=<font class="string-tag">"small"</font>&gt;</font><span class="fw-500 ft16">{{ item.text }}</span><font class="keyword-tag">&lt;/el-button&gt;</font></pre>
                    <br>
                </div>
                <pre><font class="keyword-tag">&lt;el-button type=<font class="string-tag">"primary"</font> size=<font class="string-tag">"small"</font>&gt;</font><span class="fw-500 ft16">下一页</span>&lt;i class=<font class="string-tag">"el-icon-arrow-right el-icon--right"</font> /&gt;<font class="keyword-tag">&lt;/el-button&gt;</font></pre>
                <br>
            </code>
        </div>
    </div>
</template>

<script>
export default {
    // 组件名称
    name: 'ButtonTest',
    // 局部注册的组件
    components: {},
    // 组件参数 接收来自父组件的数据
    props: {},
    // 组件状态值
    data() {
        return {
            arr: [
                { type: 'primary', text: '主要按钮' },
                { type: 'success', text: '成功按钮' },
                { type: 'info', text: '信息按钮' },
                { type: 'warning', text: '警告按钮' },
                { type: 'danger', text: '危险按钮' },
                { type: 'primary', text: '带图标的按钮', icon: 'el-icon-search' }
            ]
        };
    },
    // 侦听器
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {}
};
</script>

<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<style scoped lang='less'>

</style>
