# el-rrf-vue-element-base-components

演示地址：[el-rrf-vue-element-base-components]

#### 介绍
本项目基于Vue，对Element-UI常用组件进行二次封装，提供后台管理系统中常用组件的开箱即用。部分组件在相应文件夹下提供了配置文件，稍微改动配置或部分代码即可实现常见业务需求。本项目只提供组件的封装使用，不提供后台管理系统模板，请自行搭建或搭配其它后台管理系统模板 

#### 软件架构
1. Vue.js
2. element-ui
3. axios（理论上兼容其它基于Promise的网络请求库)

#### 安装教程
NPM:
1.  ```
    npm install el-rrf-vue-element-base-components
    ```
2.  main.js引入el-vrrf-vue-element-base-components:
    ```
        import ElRrfComponents from "el-rrf-vue-element-base-components";
        import ElementUI from 'element-ui';
        import "element-ui/lib/theme-chalk/index.css";
        import "el-rrf-vue-element-base-components/lib/el-rrf-vue-element-base-components.css";
        
        Vue.use(ElementUI);
        Vue.use(ElRrfComponents);

    ```
3.  引用组件。
   
克隆项目:
1.  下载或克隆本项目到本地；
2.  将根目录下packages文件夹内文件及其它依赖文件拷贝到开发项目中；
3.  配置组件默认参数，或根据自身需求修改源码；
4.  引用组件。

#### 使用说明

1.  ##### ElRrfButton
    <img src="./src/assets/img/button.png" width="80%"></img>

    ```
      <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: {
        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>
    ```

    
 2. ##### ElRrfLink

    <img src="./src/assets/img/link.png" width="80%"></img>

    ```
      <template>
        <div class="page-container">
            <div class="button-item">
                <span>Primary</span>
                <el-rrf-link>主要链接</el-rrf-link>
                <el-rrf-link  icon="el-icon-edit">主要链接</el-rrf-link>
                <el-rrf-link rightIcon="el-icon-edit">主要链接</el-rrf-link>
            </div>
            <div class="button-item">
                <span>Danger</span>
                <el-rrf-link type="danger" >危险链接</el-rrf-link>
                <el-rrf-link type="danger" icon="el-icon-edit">危险链接</el-rrf-link>
                <el-rrf-link type="danger" rightIcon="el-icon-edit">危险链接</el-rrf-link>
            </div>
            <div class="button-item">
                <span>Success</span>
                <el-rrf-link type="success" >成功链接</el-rrf-link>
                <el-rrf-link type="success" icon="el-icon-edit">成功链接</el-rrf-link>
                <el-rrf-link type="success" rightIcon="el-icon-edit">成功链接</el-rrf-link>
            </div>
        </div>
        </template>

        <script>
        import ElRrfLink from "pkgs/RfLink/src";
        export default {
            components: {
                ElRrfLink
            },
            data() {
                return {
                }
            }
        }
        </script>
    ```
 3. ##### ElRrfRadio
   <img src="./src/assets/img/radio.png" width="80%"></img>

   ```
    <template>
        <div class="page-container">
            <div>
                <el-row>
                    <el-col :sm="12" :lg="6">
                        <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
                        <template slot="extra">
                            <el-button type="primary" size="mini">返回</el-button>
                        </template>
                        </el-result>
                    </el-col>
                    <el-col :sm="12" :lg="6">
                        <el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作">
                            <template slot="extra">
                                <el-button type="primary" size="mini">返回</el-button>
                            </template>
                        </el-result>
                    </el-col>
                    <el-col :sm="12" :lg="6">
                        <el-result icon="error" title="错误提示" subTitle="请根据提示进行操作">
                        <template slot="extra">
                            <el-button type="primary" size="mini">返回</el-button>
                        </template>
                        </el-result>
                    </el-col>
                    <el-col :sm="12" :lg="6">
                        <el-result icon="info" title="信息提示" subTitle="请根据提示进行操作">
                        <template slot="extra">
                            <el-button type="primary" size="mini">返回</el-button>
                        </template>
                        </el-result>
                    </el-col>
                </el-row>
            </div>
        </div>
        </template>

        <script>
        import ElResult from "pkgs/RfResult/src"
        export default {
            components: {
                ElResult
            },
            data() {
                return {
                    activeName: 'second'
                }
            },
            methods: {
                handleClick(tab, event) {
                    console.log(tab, event);
                }
            }
        }
        </script>

        <style lang="css" scoped>
            .page-container{
                display: flex;
                flex-direction: column;
            }
            .page-container .button-item{
                margin: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        </style>
   ```
4. ##### ElRrfCheckbox
   <img src="./src/assets/img/checkbox.png" width="80%"></img>

   ```
        <template>
        <div class="page-container">
            <div class="button-item">
                <p>checkbox 01</p>
                <el-rrf-checkbox v-model="radio1" >已选</el-rrf-checkbox>
                <el-rrf-checkbox v-model="radio2" >未选</el-rrf-checkbox>
                <el-rrf-checkbox v-model="radio1" disabled >已选--禁止</el-rrf-checkbox>
                <el-rrf-checkbox v-model="radio2" disabled >未选--禁止</el-rrf-checkbox>
                <el-rrf-checkbox v-model="radio1" :indeterminate="indeterminate">全选</el-rrf-checkbox>
            </div>
            <div class="button-item">
                <p>checkbox 02</p>
                <el-rrf-checkbox v-model="radio1" border>已选</el-rrf-checkbox>
                <el-rrf-checkbox v-model="radio2" border>未选</el-rrf-checkbox>
                <el-rrf-checkbox v-model="radio1" disabled border>已选--禁止</el-rrf-checkbox>
                <el-rrf-checkbox v-model="radio2" disabled border>未选--禁止</el-rrf-checkbox>
            </div>
            <div class="button-item">
                <p>checkbox 03</p>
                <el-rrf-checkbox-group v-model="checkboxGroup1" size="small">
                        <el-rrf-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-rrf-checkbox-button>
                </el-rrf-checkbox-group>
            </div>
        </div>
        </template>

        <script>
        import ElRrfCheckbox from "pkgs/RfCheckbox/src";
        import ElRrfCheckboxButton from "pkgs/RfCheckboxButton/src";
        import ElRrfCheckboxGroup from "pkgs/RfCheckboxGroup/src";

        const cityOptions = ['周一', '周二', '周三', '周四', '周五'];
        export default {
            components: {
                ElRrfCheckbox,
                ElRrfCheckboxButton,
                ElRrfCheckboxGroup
            },
            data() {
                return {
                    radio1: true,
                    radio2: false,
                    indeterminate: true,
                    checkboxGroup1: ['周一'],
                    cities: cityOptions
                }
            },
            methods: {
                radioChange(e) {
                    console.log("e========",e)
                },
                groupChange(e) {
                    console.log("e2======",e)
                }
            }
        }
        </script>

        <style lang="css" scoped>
            .page-container{
                display: flex;
                flex-direction: column;
            }
            .page-container .button-item{
                margin: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        </style>
   ```
5. ##### ElRrfInput
   <img src="./src/assets/img/input.png" width="80%"></img>

   ```
    <template>
        <div class="page-container">
            <div class="button-item">
                <p>Input 01</p>
                <el-rrf-input
                type="text"
                v-model="inputvalue1" 
                maxlength="20"
                :required="required"
                :tipTitle = "tipTitle"
                show-word-limit
                error
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                
                ></el-rrf-input>
                <el-rrf-input
                type="text"
                v-model="inputvalue1" 
                    maxlength="20"
                :tipTitle = "tipTitle"
                show-word-limit
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-rrf-input>
                <el-rrf-input
                type="text"
                v-model="inputvalue1" 
                :tipTitle = "tipTitle"
                disabled
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-rrf-input>
            </div>
            <div class="button-item">
                <p>Textarea 02</p>
                <el-rrf-input
                type="textarea"
                v-model="inputvalue1" 
                maxlength="20"
                :required="required"
                :tipTitle = "tipTitle"
                show-word-limit
                error
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                
                ></el-rrf-input>
                <el-rrf-input
                type="textarea"
                v-model="inputvalue1" 
                    maxlength="20"
                :tipTitle = "tipTitle"
                show-word-limit
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-rrf-input>
                <el-rrf-input
                type="textarea"
                v-model="inputvalue1" 
                :tipTitle = "tipTitle"
                disabled
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-rrf-input>
            </div>
            <div class="button-item">
                <p>Password 03</p>
                <el-rrf-input
                show-password
                v-model="inputvalue1" 
                maxlength="20"
                :required="required"
                :tipTitle = "tipTitle"
                clearable
                show-word-limit
                error
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                
                ></el-rrf-input>
                <el-rrf-input
                show-password
                clearable
                v-model="inputvalue1" 
                    maxlength="20"
                :tipTitle = "tipTitle"
                show-word-limit
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-rrf-input>
                <el-rrf-input
                show-password
                v-model="inputvalue1" 
                :tipTitle = "tipTitle"
                disabled
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-rrf-input>
            </div>
            <div class="button-item">
                <p>Password 04</p>
                <el-rrf-input
                show-password
                v-model="inputvalue1" 
                maxlength="20"
                prefix-icon="el-icon-search"
                :required="required"
                :tipTitle = "tipTitle"
                clearable
                show-word-limit
                error
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                
                ></el-rrf-input>
                <el-rrf-input
                show-password
                clearable
                prefix-icon="el-icon-search"
                v-model="inputvalue1" 
                    maxlength="20"
                :tipTitle = "tipTitle"
                show-word-limit
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-rrf-input>
                <el-rrf-input
                show-password
                prefix-icon="el-icon-search"
                v-model="inputvalue1" 
                :tipTitle = "tipTitle"
                disabled
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-rrf-input>
            </div>
        </div>
        </template>

        <script>
        import ElRrfInput from "pkgs/RfInput/src";
        export default {
            components: {
                ElRrfInput
            },
            data() {
                return {
                    inputvalue1: "1",
                    inputvalue2: "2",
                    radio3: "上海",
                    labelStyle: {
                        width: "20px",
                        color: "blue"
                    },
                    required: {
                            visible: true,
                            showRequiredError: false,
                            labelStyle: {
                                width: '70px'
                            },
                            label: '输入标签' 
                    },
                    tipTitle: '这是一段用来提醒的文字'
                }
            },
            methods: {
                handleInput1(e) {
                    console.log("handleInput1========",e)
                },
                handleInput2(e) {
                    console.log("handleInput2======",e)
                },
                handlefocus1(e) {
                    console.log("handlefocus1========",e)
                },
                handlefocus2(e) {
                    console.log("handlefocus2========",e)
                },
                handleChange1(e) {
                    console.log("handleChange1========",e)
                },
                handleChange2(e) {
                    console.log("handleChange2========",e)
                },
                handleblur1(e) {
                    console.log("handleblur1========",e)
                },
                handleblur2(e) {
                    console.log("handleblur2========",e)
                },
                handleClear1(e) {
                    console.log("handleClear1========",e)
                },
                handleClear2(e) {
                    console.log("handleClear2========",e)
                }
            }
        }
        </script>

        <style lang="css" scoped>
            .page-container{
                display: flex;
                flex-direction: column;
            }
            .page-container .button-item{
                margin: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        </style>
   ```

   6. ##### ElRrfInputNumber
   <img src="./src/assets/img/inputnumber.png" width="80%"></img>

   ```
        <template>
        <div class="page-container">
            <div class="button-item">
                <p>InputNumber 01</p>
                <el-rrf-input-number v-model="num1" size="small" controls-position="right" @change="handleChange" ontrolsIconType="updown" :min="1" :max="10" label="描述文字"></el-rrf-input-number>
                <el-rrf-input-number v-model="num1" size="small" error controls-position="right" ontrolsIconType="updown" @change="handleChange" :min="1" :max="10" label="描述文字"></el-rrf-input-number>
                <el-rrf-input-number v-model="num1" size="small" disabled controls-position="right" ontrolsIconType="updown" @change="handleChange" :min="1" :max="10" label="描述文字"></el-rrf-input-number>
            </div>
            <div class="button-item">
                <p>InputNumber 02</p>
                <el-rrf-input-number v-model="num2" size="small" @change="handleChange" :min="1" :max="10" label="描述文字" ontrolsIconType="updown"></el-rrf-input-number>
                <el-rrf-input-number v-model="num2" size="small" error @change="handleChange" :min="1" :max="10" label="描述文字" ontrolsIconType="updown"></el-rrf-input-number>
                <el-rrf-input-number v-model="num2" size="small" disabled @change="handleChange" :min="1" :max="10" label="描述文字" ontrolsIconType="updown"></el-rrf-input-number>
            </div>
            <div class="button-item">
                <p>InputNumber 03</p>
                <el-rrf-input-number v-model="num3" size="small" @change="handleChange" :min="1" :max="10" label="描述文字"></el-rrf-input-number>
                <el-rrf-input-number v-model="num3" size="small" error @change="handleChange" :min="1" :max="10" label="描述文字"></el-rrf-input-number>
                <el-rrf-input-number v-model="num3" size="small" disabled @change="handleChange" :min="1" :max="10" label="描述文字"></el-rrf-input-number>
            </div>
        </div>
        </template>

        <script>
        import ElRrfInputNumber from "pkgs/RfInputNumber/src";
        export default {
            components: {
                ElRrfInputNumber
            },
            data() {
                return {
                    num1: 1,
                    num2: 1,
                    num3: 1
                }
            },
            methods: {
                handleChange(e) {
                    console.log("e========",e)
                }
            }
        }
        </script>

        <style lang="css" scoped>
            .page-container{
                display: flex;
                flex-direction: column;
            }
            .page-container .button-item{
                margin: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        </style>
   ```
  7. ##### ElRrfSelect
   <img src="./src/assets/img/select.png" width="80%"></img>

   ```
     <template>
        <div class="page-container">
            <div class="button-item">
                <p>Select 01</p>
                <el-select
                placeholder="请选择"
                v-model="value"
                >
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled">
                    </el-option>
                </el-select>
                <el-select
                v-model="value"
                placeholder="请选择" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-select>
                <el-select
                disabled
                v-model="value"
                placeholder="请选择" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-select>
            </div>
            <div class="button-item">
                <p>Select 02</p>
                <el-select
                v-model="value"
                filterable
                placeholder="请搜索" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                
                ></el-select>
                <el-select
                v-model="value"
                filterable
                placeholder="请搜索" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-select>
                <el-select
                filterable
                disabled
                v-model="value"
                placeholder="请搜索" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-select>
            </div>
            <div class="button-item">
                <p>Select 03</p>
                <el-select
                v-model="value1"
                multiple
                filterable
                allow-create
                default-first-option
                error
                :required="required"
                :tipTitle = "tipTitle"
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                
                >
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-select
                multiple
                v-model="value1"
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                >
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
                <el-select
                disabled
                v-model="value1"
                placeholder="请输入内容" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-select>
            </div>
            <div class="button-item">
                <p>Select 04</p>
                <el-cascader
                v-model="value4"
                :options="options4"
                placeholder="请选择" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                
                ></el-cascader>
                <el-cascader
                v-model="value4"
                :options="options4"
                placeholder="请选择" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-cascader>
                <el-cascader
                v-model="value4"
                :options="options4"
                placeholder="请选择" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-cascader>
            </div>
        </div>
        </template>

        <script>
        import ElSelect from "pkgs/RfSelect/src";
        import ElCascader from "pkgs/RfCascader/src";
        export default {
            components: {
                ElSelect,
                ElCascader
            },
            data() {
                return {
                    options: [
                    {
                        value: '',
                        label: '请选择',
                    }
                    ,{
                        value: '选项1',
                        label: '黄金糕'
                    }, {
                        value: '选项2',
                        label: '双皮奶',
                        disabled: true
                    }, {
                        value: '选项3',
                        label: '蚵仔煎'
                    }, {
                        value: '选项4',
                        label: '龙须面'
                    }, {
                        value: '选项5',
                        label: '北京烤鸭'
                    }],
                    value: '',
                    value1: "",
                    value4: [],
                    required: {
                            visible: true,
                            showRequiredError: true,
                            labelStyle: {
                                width: '70px'
                            },
                            label: '姓名姓名' 
                    },
                    tipTitle: '这是一段用来提醒的文字',
                    options4: [{
                    value: 'zhinan',
                    label: '指南',
                    children: [{
                        value: 'shejiyuanze',
                        label: '设计原则',
                        children: [{
                        value: 'yizhi',
                        label: '一致'
                        }, {
                        value: 'fankui',
                        label: '反馈'
                        }, {
                        value: 'xiaolv',
                        label: '效率'
                        }, {
                        value: 'kekong',
                        label: '可控'
                        }]
                    }, {
                        value: 'daohang',
                        label: '导航',
                        children: [{
                        value: 'cexiangdaohang',
                        label: '侧向导航'
                        }, {
                        value: 'dingbudaohang',
                        label: '顶部导航'
                        }]
                    }]
                    }, {
                    value: 'zujian',
                    label: '组件',
                    children: [{
                        value: 'basic',
                        label: 'Basic',
                        children: [{
                        value: 'layout',
                        label: 'Layout 布局'
                        }, {
                        value: 'color',
                        label: 'Color 色彩'
                        }, {
                        value: 'typography',
                        label: 'Typography 字体'
                        }, {
                        value: 'icon',
                        label: 'Icon 图标'
                        }, {
                        value: 'button',
                        label: 'Button 按钮'
                        }]
                    }, {
                        value: 'form',
                        label: 'Form',
                        children: [{
                        value: 'radio',
                        label: 'Radio 单选框'
                        }, {
                        value: 'checkbox',
                        label: 'Checkbox 多选框'
                        }, {
                        value: 'input',
                        label: 'Input 输入框'
                        }, {
                        value: 'input-number',
                        label: 'InputNumber 计数器'
                        }, {
                        value: 'select',
                        label: 'Select 选择器'
                        }, {
                        value: 'cascader',
                        label: 'Cascader 级联选择器'
                        }, {
                        value: 'switch',
                        label: 'Switch 开关'
                        }, {
                        value: 'slider',
                        label: 'Slider 滑块'
                        }, {
                        value: 'time-picker',
                        label: 'TimePicker 时间选择器'
                        }, {
                        value: 'date-picker',
                        label: 'DatePicker 日期选择器'
                        }, {
                        value: 'datetime-picker',
                        label: 'DateTimePicker 日期时间选择器'
                        }, {
                        value: 'upload',
                        label: 'Upload 上传'
                        }, {
                        value: 'rate',
                        label: 'Rate 评分'
                        }, {
                        value: 'form',
                        label: 'Form 表单'
                        }]
                    }, {
                        value: 'data',
                        label: 'Data',
                        children: [{
                        value: 'table',
                        label: 'Table 表格'
                        }, {
                        value: 'tag',
                        label: 'Tag 标签'
                        }, {
                        value: 'progress',
                        label: 'Progress 进度条'
                        }, {
                        value: 'tree',
                        label: 'Tree 树形控件'
                        }, {
                        value: 'pagination',
                        label: 'Pagination 分页'
                        }, {
                        value: 'badge',
                        label: 'Badge 标记'
                        }]
                    }, {
                        value: 'notice',
                        label: 'Notice',
                        children: [{
                        value: 'alert',
                        label: 'Alert 警告'
                        }, {
                        value: 'loading',
                        label: 'Loading 加载'
                        }, {
                        value: 'message',
                        label: 'Message 消息提示'
                        }, {
                        value: 'message-box',
                        label: 'MessageBox 弹框'
                        }, {
                        value: 'notification',
                        label: 'Notification 通知'
                        }]
                    }, {
                        value: 'navigation',
                        label: 'Navigation',
                        children: [{
                        value: 'menu',
                        label: 'NavMenu 导航菜单'
                        }, {
                        value: 'tabs',
                        label: 'Tabs 标签页'
                        }, {
                        value: 'breadcrumb',
                        label: 'Breadcrumb 面包屑'
                        }, {
                        value: 'dropdown',
                        label: 'Dropdown 下拉菜单'
                        }, {
                        value: 'steps',
                        label: 'Steps 步骤条'
                        }]
                    }, {
                        value: 'others',
                        label: 'Others',
                        children: [{
                        value: 'dialog',
                        label: 'Dialog 对话框'
                        }, {
                        value: 'tooltip',
                        label: 'Tooltip 文字提示'
                        }, {
                        value: 'popover',
                        label: 'Popover 弹出框'
                        }, {
                        value: 'card',
                        label: 'Card 卡片'
                        }, {
                        value: 'carousel',
                        label: 'Carousel 走马灯'
                        }, {
                        value: 'collapse',
                        label: 'Collapse 折叠面板'
                        }]
                    }]
                    }, {
                    value: 'ziyuan',
                    label: '资源',
                    children: [{
                        value: 'axure',
                        label: 'Axure Components'
                    }, {
                        value: 'sketch',
                        label: 'Sketch Templates'
                    }, {
                        value: 'jiaohu',
                        label: '组件交互文档'
                    }]
                }]
                }
            },
            methods: {
                handleInput1(e) {
                    console.log("handleInput1========",e)
                },
                handleInput2(e) {
                    console.log("handleInput2======",e)
                },
                handlefocus1(e) {
                    console.log("handlefocus1========",e)
                },
                handlefocus2(e) {
                    console.log("handlefocus2========",e)
                },
                handleChange1(e) {
                    console.log("handleChange1========",e)
                },
                handleChange2(e) {
                    console.log("handleChange2========",e)
                },
                handleblur1(e) {
                    console.log("handleblur1========",e)
                },
                handleblur2(e) {
                    console.log("handleblur2========",e)
                },
                handleClear1(e) {
                    console.log("handleClear1========",e)
                },
                handleClear2(e) {
                    console.log("handleClear2========",e)
                }
            }
        }
        </script>

        <style lang="css" scoped>
            .page-container{
                display: flex;
                flex-direction: column;
            }
            .page-container .button-item{
                margin: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        </style>
   ```
 8. ##### ElRrfSelectTime
   <img src="./src/assets/img/time.png" width="80%"></img>

   ```
     <template>
        <div class="page-container">
            <div class="button-item">
                <p>time-select</p>
                <el-time-select
                v-model="value"
                :picker-options="{
                        start: '08:30',
                        step: '00:15',
                        end: '18:30'
                    }"
                    placeholder="选择时间"
                >
                </el-time-select>
                <el-time-select
                disabled
                v-model="value"
                placeholder="请选择" 
                @input="handleInput1"
                @focus="handlefocus1"
                @change="handleChange1"
                @blur="handleblur1"
                @clear="handleClear1"
                ></el-time-select>
            </div>
            <div class="button-item">
                <p>time-picker</p>
                <el-time-picker
                    v-model="value1"
                    :picker-options="{
                    selectableRange: '18:30:00 - 20:30:00'
                    }"
                    placeholder="任意时间点">
                </el-time-picker>
                <el-time-picker
                    disabled
                    v-model="value1"
                    :picker-options="{
                    selectableRange: '18:30:00 - 20:30:00'
                    }"
                    placeholder="任意时间点">
                </el-time-picker>
            </div>
            <div class="button-item">
                <p>time-picker-range</p>
                <el-time-picker
                    is-range
                    v-model="value3"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围">
                </el-time-picker>
                <el-time-picker
                    is-range
                    disabled
                    v-model="value3"
                    range-separator="至"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    placeholder="选择时间范围">
                </el-time-picker>
            </div>
            <div class="button-item">
                <p>date-pciker</p>
                <el-date-picker
                    v-model="value4"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
                <el-date-picker
                    disabled
                    v-model="value4"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </div>
            <div class="button-item">
                <p>date-pcik-range</p>
                <el-date-picker
                    v-model="value5"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
                <el-date-picker
                    v-model="value6"
                    disabled
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </div>
        </div>
        </template>

        <script>
        import ElTimeSelect from "pkgs/RfTimeSelect/src";
        import ElTimePicker from "pkgs/RfTimePicker/src";
        import ElDatePicker from "pkgs/RfDatePicker/src";
        export default {
            components: {
                ElTimeSelect,
                ElTimePicker,
                ElDatePicker
            },
            data() {
                return {
                    
                    value: '',
                    value1: new Date(2016, 9, 10, 18, 40),
                    value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
                    value4: '',
                    value5: '',
                    value6: '',
                    required: {
                            visible: true,
                            showRequiredError: true,
                            labelStyle: {
                                width: '70px'
                            },
                            label: '姓名姓名' 
                    },
                }
            },
            methods: {
            }
        }
        </script>

        <style lang="css" scoped>
            .page-container{
                display: flex;
                flex-direction: column;
            }
            .page-container .button-item{
                margin: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        </style>
   ```
9. ##### ElRrfAlert
<img src="./src/assets/img/notice.png" width="80%"></img>

    ```
      <template>
        <div class="page-container">
            <div class="button-item">
                <p>Notice Single</p>
                <el-rrf-alert
                        title="成功提示的文案"
                        type="success"
                        show-icon>
                    </el-rrf-alert>
                    <el-rrf-alert
                        title="消息提示的文案"
                        type="default"
                        show-icon>
                    </el-rrf-alert>
                    <el-rrf-alert
                        title="消息提示的文案"
                        type="info"
                        show-icon>
                    </el-rrf-alert>
                    <el-rrf-alert
                        title="警告提示的文案"
                        type="warning"
                        show-icon>
                    </el-rrf-alert>
                    <el-rrf-alert
                        title="错误提示的文案"
                        type="error"
                        show-icon>
                    </el-rrf-alert>
            </div>
            <div class="button-item">
                <p>Notice</p>
                <el-rrf-alert
                    title="成功提示的文案"
                    type="success"
                    description="文字说明文字说明文字说明文字说明文字说明文字说明"
                    show-icon>
                    </el-rrf-alert>
                    <el-rrf-alert
                        title="消息提示的文案"
                        type="default"
                        description="文字说明文字说明文字说明文字说明文字说明文字说明"
                        show-icon>
                    </el-rrf-alert>
                    <el-rrf-alert
                        title="消息提示的文案"
                        type="info"
                        description="文字说明文字说明文字说明文字说明文字说明文字说明"
                        show-icon>
                    </el-rrf-alert>
                    <el-rrf-alert
                        title="警告提示的文案"
                        type="warning"
                        description="文字说明文字说明文字说明文字说明文字说明文字说明"
                        show-icon>
                    </el-rrf-alert>
                    <el-rrf-alert
                        title="错误提示的文案"
                        type="error"
                        description="文字说明文字说明文字说明文字说明文字说明文字说明"
                        show-icon>
                    </el-rrf-alert>
            </div>
        </div>
        </template>

        <script>
        import ElRrfAlert from "pkgs/RfAlert/src"
        export default {
            components: {
                ElRrfAlert,
            },
            data() {
                return {
                }
            },
            methods: {}
        }
        </script>

        <style lang="css" scoped>
            .page-container{
                display: flex;
                flex-direction: column;
            }
            .page-container .button-item{
                margin: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        </style>
    ```
1.  ##### ElRrfTabs
<img src="./src/assets/img/tabs.png" width="80%"></img>

    ```
        <template>
        <div class="page-container">
            <div class="button-item">
                <p>Tabs</p>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
                    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
                </el-tabs>
                <el-tabs v-model="activeName" size="small" @tab-click="handleClick">
                    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
                    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
                </el-tabs>
                </div>
                <div class="button-item">
                    <p>Card</p>
                    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
                        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
                    </el-tabs>
                    <el-tabs v-model="activeName" size="small" type="card" @tab-click="handleClick">
                        <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
                        <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
                        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
                        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
                    </el-tabs>
                </div>
                </div>
        </template>

        <script>
        import ElTabs from "pkgs/RfTabs/src"
        export default {
            components: {
                ElTabs
            },
            data() {
                return {
                    activeName: 'second'
                }
            },
            methods: {
                handleClick(tab, event) {
                    console.log(tab, event);
                }
            }
        }
        </script>

        <style lang="css" scoped>
            .page-container{
                display: flex;
                flex-direction: column;
            }
            .page-container .button-item{
                margin: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        </style>
    ```
  11. ##### ElRrfResult
   <img src="./src/assets/img/result.png" width="80%"></img>

   ```
    <template>
        <div class="page-container">
            <div>
                <el-row>
                    <el-col :sm="12" :lg="6">
                        <el-result icon="success" title="成功提示" subTitle="请根据提示进行操作">
                            <template slot="extra">
                                <el-button type="primary" size="mini">返回</el-button>
                            </template>
                        </el-result>
                    </el-col>
                    <el-col :sm="12" :lg="6">
                        <el-result icon="warning" title="警告提示" subTitle="请根据提示进行操作">
                            <template slot="extra">
                                <el-button type="primary" size="mini">返回</el-button>
                            </template>
                        </el-result>
                    </el-col>
                    <el-col :sm="12" :lg="6">
                        <el-result icon="error" title="错误提示" subTitle="请根据提示进行操作">
                            <template slot="extra">
                                <el-button type="primary" size="mini">返回</el-button>
                            </template>
                        </el-result>
                    </el-col>
                    <el-col :sm="12" :lg="6">
                        <el-result icon="info" title="信息提示" subTitle="请根据提示进行操作">
                            <template slot="extra">
                                <el-button type="primary" size="mini">返回</el-button>
                            </template>
                        </el-result>
                    </el-col>
                </el-row>
            </div>
        </div>
        </template>

        <script>
        import ElResult from "pkgs/RfResult/src"
        export default {
            components: {
                ElResult
            },
            data() {
                return {
                    activeName: 'second'
                }
            },
            methods: {
                handleClick(tab, event) {
                    console.log(tab, event);
                }
            }
        }
        </script>

        <style lang="css" scoped>
            .page-container{
                display: flex;
                flex-direction: column;
            }
            .page-container .button-item{
                margin: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        </style>
   ```
  12. ##### ElRrfTag
   <img src="./src/assets/img/tag.png" width="80%"></img>

   ```
        <template>
        <div class="page-container">
            <div class="button-item">
                <p>Tabs</p>
                <el-rrf-tag
                    v-for="tag in tags"
                    :key="tag.name"
                    closable
                    :type="tag.type">
                    {{tag.name}}
                    </el-rrf-tag>
                </div>
                <div class="button-item">
                <p>Tabs-label</p>
                <el-rrf-tag
                    v-for="item in items"
                    :key="item.label"
                    :type="item.type"
                    effect="dark">
                    {{ item.label }}
                </el-rrf-tag>
                </div>
                <div class="button-item">
                <p>Tabs-label</p>
                <el-rrf-tag
                    v-for="item in items"
                    :key="item.label"
                    :type="item.type"
                    effect="plain">
                    {{ item.label }}
                </el-rrf-tag>
                </div>
        </div>   
        </template>

        <script>
        import ElRrfTag from "pkgs/RfTag/src"
        export default {
            components: {
                ElRrfTag
            },
            data() {
                return {
                    tags: [
                            { name: '标签一', type: '' },
                            { name: '标签三', type: 'info' },
                        ],
                    items: [
                        { type: '', label: '标签一' },
                        { type: 'success', label: '标签二' },
                        { type: 'info', label: '标签三' },
                        { type: 'danger', label: '标签四' },
                        { type: 'warning', label: '标签五' },
                        { type: 'other', label: '其他' }
                    ]
                }
            },
            methods: {
                handleClick(tab, event) {
                    console.log(tab, event);
                }
            }
        }
        </script>

        <style lang="css" scoped>
            .page-container{
                display: flex;
                flex-direction: column;
            }
            .page-container .button-item{
                margin: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        </style>
   ```
  13. ##### ElRrfSwitch and ElRrfTree
   <img src="./src/assets/img/switch.png" width="80%"></img>
   <img src="./src/assets/img/tree.png" width="80%"></img>

   ```
      <template>
          <div class="page-container">
            <div class="button-item">
                <p>switch</p>
                <el-rrf-switch
                    v-model="value"
                    style="width: 32px;"
                    active-color="#456CE6"
                    inactive-color="#CFD0D3">
                </el-rrf-switch>
                <el-rrf-switch
                    v-model="value1"
                    style="width: 32px;"
                    active-color="#456CE6"
                    inactive-color="#CFD0D3">
                </el-rrf-switch>
                <el-rrf-switch
                    v-model="value"
                    disabled
                    style="width: 32px;"
                    active-color="#456CE6"
                    inactive-color="#CFD0D3">
                </el-rrf-switch>
                <el-rrf-switch
                    v-model="value1"
                    disabled
                    style="width: 32px;"
                    active-color="#456CE6"
                    inactive-color="#CFD0D3">
                </el-rrf-switch>
                </div>
                <div style="padding-left: 30px;">
                    <p>tree</p>
                    <el-rrf-tree
                        :data="data"
                        show-checkbox
                        node-key="id"
                        :default-expanded-keys="[2, 3]"
                        :default-checked-keys="[5]">
                    </el-rrf-tree>
                </div>
        </div>
        </template>

        <script>
        import ElRrfSwitch from "pkgs/RfSwitch/src"
        import ElRrfTree from "pkgs/RfTree/src"
        export default {
            components: {
                ElRrfSwitch,
                ElRrfTree
            },
            data() {
                return {
                value: false,
                value1: true,
                    data: [{
                id: 1,
                label: '一级 2',
                children: [{
                    id: 3,
                    label: '二级 2-1',
                    children: [{
                    id: 4,
                    label: '三级 3-1-1'
                    }, {
                    id: 5,
                    label: '三级 3-1-2',
                    disabled: true
                    }]
                }, {
                    id: 2,
                    label: '二级 2-2',
                    disabled: true,
                    children: [{
                    id: 6,
                    label: '三级 3-2-1'
                    }, {
                    id: 7,
                    label: '三级 3-2-2',
                    disabled: true
                    }]
                }]
                }],
                defaultProps: {
                children: 'children',
                label: 'label'
                } 
            }
            },
            methods: {
                handleClick(tab, event) {
                    console.log(tab, event);
                }
            }
        }
        </script>

        <style lang="css" scoped>
            .page-container{
                display: flex;
                flex-direction: column;
            }
            .page-container .button-item{
                margin: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        </style>
   ```
  14. ##### Other
   <img src="./src/assets/img/other.png" width="80%"></img>
   <img src="./src/assets/img/other_1.png" width="80%"></img>
   <img src="./src/assets/img/other_2.png" width="80%"></img>
   <img src="./src/assets/img/other_3.png" width="80%"></img>
   <img src="./src/assets/img/other_4.png" width="80%"></img>

   ```
      <template>
        <div class="page-container">
            <div class="button-item">
                <p>Pagination</p>
                <el-rrf-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage1"
                        :page-size="10"
                        :page-sizes="[10, 20, 30, 40]"
                        layout="total,sizes, prev, pager, next"
                        :total="100">
                </el-rrf-pagination>
            </div>
            <div class="button-item">
                <p>Color Picker</p>
                <el-rrf-color-picker v-model="color1" > </el-rrf-color-picker>
            </div>
            <div class="button-item">
                <p>Rate</p>
                <el-rrf-rate
                    v-model="value2"
                    allow-half
                    text-color="#FFBF47"
                    disabled-void-color="red"
                    >
                </el-rrf-rate>
            </div>
            <div class="button-item">
                <p>Badge</p>
                <el-rrf-badge :value="12">
                <el-button>评论</el-button>
                </el-rrf-badge>
                <el-rrf-badge :value="200" :max="99">
                <el-button>评论</el-button>
                </el-rrf-badge>
                <el-rrf-badge value="new" >
                    <el-button>评论</el-button>
                </el-rrf-badge>
                <el-rrf-badge is-dot><el-button>数据查询</el-button></el-rrf-badge>
            </div>
            <div>
                <p>Progress</p>
                <div>
                    <el-rrf-progress :percentage="69"></el-rrf-progress>
                </div>
                <div>
                    <el-rrf-progress :percentage="100" status="success"></el-rrf-progress>
                    <el-rrf-progress :percentage="100" status="warning"></el-rrf-progress>
                    <el-rrf-progress :percentage="50" status="exception"></el-rrf-progress>
                </div>
            </div>
            <div>
                <p>Slider</p>
                <div class="block">
                    <span class="demonstration">默认</span>
                    <el-rrf-slider v-model="value3"></el-rrf-slider>
                </div>
            </div>
            <div>
                <div class="block">
                    <span class="demonstration">赋值</span>
                    <el-rrf-slider v-model="value4"></el-rrf-slider>
                </div>
           </div>
            <div>
                <span class="demonstration">分段</span>
                <el-rrf-slider
                        v-model="value5"
                        range
                        show-stops
                        :max="10">
                </el-rrf-slider>
            </div>
            <div>
                <span class="demonstration">steps</span>
                <el-rrf-steps  :active="2" align-center finish-status="success">
                    <el-step title="步骤01" description="这是一段很长很长很长的描述性文字"></el-step>
                    <el-step title="步骤02" description="这是一段很长很长很长的描述性文字"></el-step>
                    <el-step title="步骤03" description="这是一段很长很长很长的描述性文字"></el-step>
                    <el-step title="步骤04" description="这是一段很长很长很长的描述性文字"></el-step>
                </el-rrf-steps>
            </div>
            <div style="height: 300px;margin-top: 30px;">
                <el-rrf-steps direction="vertical" :active="2" align-center finish-status="success">
                    <el-step title="步骤01" description="这是一段很长很长很长的描述性文字"></el-step>
                    <el-step title="步骤02" description="这是一段很长很长很长的描述性文字"></el-step>
                    <el-step title="步骤03" description="这是一段很长很长很长的描述性文字"></el-step>
                    <el-step title="步骤04" description="这是一段很长很长很长的描述性文字"></el-step>
                </el-rrf-steps>
            </div>
            <div>
                <span class="demonstration">timeline</span>
                <el-rrf-timeline  :reverse="reverse">
                <el-timeline-item
                    v-for="(activity, index) in activities"
                    :key="index"
                    :timestamp="activity.timestamp">
                    {{activity.content}}
                    </el-timeline-item>
                </el-rrf-timeline>
            </div>
            <div>
                <el-rrf-timeline>
                    <el-timeline-item timestamp="2018/4/12" placement="top">
                        <el-card>
                            <h4>更新 Github 模板</h4>
                            <p>王小虎 提交于 2018/4/12 20:46</p>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2018/4/3" placement="top">
                        <el-card>
                            <h4>更新 Github 模板</h4>
                            <p>王小虎 提交于 2018/4/3 20:46</p>
                        </el-card>
                    </el-timeline-item>
                    <el-timeline-item timestamp="2018/4/2" placement="top">
                        <el-card>
                            <h4>更新 Github 模板</h4>
                            <p>王小虎 提交于 2018/4/2 20:46</p>
                        </el-card>
                    </el-timeline-item>
                </el-rrf-timeline>
            </div>
            <div style="margin-top: 20px;">
                <el-row>
                    <el-col :span="8">
                        <el-rrf-card :body-style="{ padding: '0px', }">
                            <div style="padding: 14px;display: flex;align-items: center;">
                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image-small-right">
                                <div class="content" style="padding-left: 8px;">
                                    <span>主标题文字</span>
                                    <div>辅助文字</div>
                                </div>
                            </div>
                        </el-rrf-card>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-top: 20px;">
                <el-row>
                    <el-col :span="8">
                        <el-rrf-card :body-style="{ padding: '0px' }">
                            <div  class="content" style="padding: 16px;">
                                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image-small">
                                <span>主标题文字</span>
                                <div>辅助文字或者描述性文字都可以</div>
                            </div>
                        </el-rrf-card>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-top: 20px;">
                <el-row>
                    <el-col :span="8">
                        <el-rrf-card :body-style="{ padding: '0px' }">
                            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                            <div class="content" style="padding: 16px;">
                                <span>主标题文字</span>
                                <div>辅助文字或者描述性文字都可以</div>
                            </div>
                        </el-rrf-card>
                    </el-col>
                </el-row>
            </div>
            <div style="margin-top: 20px;">
                <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top">
                    <el-button>top</el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="left">
                    <el-button>left</el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="right">
                    <el-button>right</el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="bottom">
                    <el-button>bottom</el-button>
                </el-tooltip>
            </div>
            <div style="margin-top: 20px;">
                <el-rrf-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <div class="avatar-uploader-icon" v-else>
                        <i  class="el-icon-plus"></i>
                        <span>上传图片</span>
                    </div>
                </el-rrf-upload>
            </div>
            <div style="margin-top: 20px;">
                <el-rrf-upload
                    class="avatar-uploader disabled"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <div class="avatar-uploader-icon" v-else>
                        <i  class="el-icon-plus"></i>
                        <span>上传图片</span>
                    </div>
                </el-rrf-upload>
            </div>
        </div>
        </template>
        <script>
        import ElRrfPagination from "pkgs/RfPagination/src"
        import ElRrfColorPicker from "pkgs/RfColorPicker/src"
        import ElRrfRate from "pkgs/RfRate/src"
        import ElRrfBadge from "pkgs/RfBadge/src"
        import ElRrfProgress from "pkgs/RfProgress/src"
        import ElRrfSlider from "pkgs/RfSlider/src"
        import ElRrfSteps from "pkgs/RfSteps/src"
        import ElRrfTimeline from "pkgs/RfTimeline/src"
        import ElRrfUpload from "pkgs/RfUpload/src"
        import ElRrfCard from "pkgs/RfCard/src"
        export default {
            components: {
                ElRrfPagination,
                ElRrfColorPicker,
                ElRrfRate,
                ElRrfBadge,
                ElRrfProgress,
                ElRrfSlider,
                ElRrfSteps,
                ElRrfTimeline,
                ElRrfUpload,
                ElRrfCard,
            },
            data() {
                return {
                value: false,
                value1: true,
                value2: 3.7,
                value3: 0,
                value4: 50,
                value5: [4, 8],
                currentPage1: 5,
                color1: '#456CE6',
                reverse: true,
                imageUrl: '',
                activities: [
                    {
                        content: '活动按期开始',
                        timestamp: '2018-04-15'
                    }, 
                    {
                        content: '通过审核',
                        timestamp: '2018-04-13'
                    }, 
                    {
                        content: '创建成功',
                        timestamp: '2018-04-11'
                    }],
                    currentDate: new Date()
                }
            },
            methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            format(percentage) {
                return percentage === 100 ? '满' : `${percentage}%`;
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            }
            }
        }
        </script>

        <style lang="css" scoped>
            .page-container{
                display: flex;
                flex-direction: column;
            }
            .page-container .button-item{
                margin: 30px;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        </style>
   ```



#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request
