Vue方向: Vue + ElementUI组件

Container容器:用于布局的容器组件,方便快速的搭建页面的基本结构


    <el-container>:外层容器,当子元素中包含<el-header>或<el-footer>时,全部子元素会垂直上下排列,否则会水平左右排列

    <el-header>:顶部容器

    <el-aside>: 侧边栏容器

    <el-main>: 主要区域容器

    <el-footer>: 底部容器

    以上组件采用了flex布局,使用前请确认目标浏览器是否兼容,此外,<el-container>的子元素只能是后四者,后四者的父元素也只能是<el-container>

Basic组件规范:


    颜色:主色,辅助色,中性色

    字体:字体,字号,行高

    边框:实线,虚线,圆角,投影

Button按钮


    Button按钮和Link文字一样,有固定的样式

    <el-button type="primary" >按钮</el-button>

    使用plain属性,可以实现镂空效果,使用disabled属性,可以禁用:

    <el-button type="primary" plain ></el-button>

    PS:round实现椭圆,circle实现圆;

使用type="text"可以将button转换成纯文本按钮:


    <el-button type="text">文字按钮</el-button>

    使用<el-button-group>可以将多个按钮设置成组合按钮:

    <el-button-group>

    <el-button class="el-icon-arrow-left">上一页</el-button>

    <el-button>下一页<i class="el-icon-arrow-right"/></el-button>

    </el-button-group>

    使用 :loading="true"实现加载中的效果

    <el-button :loading="true" type="primary">加载中</el-button>

    使用size="small"等属性,实现三种大小:

    <el-button type="info" size="mini">按钮</el-button>

Radio和Checkbox



    1.单选框radio

    <el-radio v-model="sex" label="1">男</el-radio>

    <el-radio v-model="sex" label="2">女</el-radio>

    data(){

        return {

            sex : '1'

            }

        }

    PS: 这里v-model和sex进行双向绑定,label相当于value,且和sex值一致则首选;

  2.  使用群组单选框,可以将双向绑定置顶操作,具体如下:

    <el-radio-group v-model="city">

    <el-radio  :label="1">北京</el-radio>

    <el-radio  :label="2">上海</el-radio>

    <el-radio  :label="3">广州</el-radio>

    </el-radio-group>

    data(){

        return {

                city : 1

        }

    }

    PS: 如果想禁用设置:disabled; 如想带有边框设置:border;

3.可以使用el-radio-button实现按钮式单选框,size可以设置大小

    <el-radio-button label="1" >北京</el-radio-button>

    PS:  可以在群组el-radio-button设置size属性,值为:medium/ samll /mini;

4.单选框或群组单选都具有change事件,改变后即可出发;

    <el-radio-group v-model="city" @change="radioChange">

Checkbox复选框


    <el-checkbox-group v-model="checkList">

    <el-checkbox label="音乐"></el-checkbox>

    <el-checkbox label="体育"></el-checkbox>

    <el-checkbox label="电脑"></el-checkbox>

    </el-checkbox-group>

    return {

        checkList  :['音乐','体育']

        }

    PS:单一复选框,比如协议确定,就直接使用el-checkbox不需要群组;

6.使用 :max/ :min,可选择最大/最小的勾选数量;

    <el-checkbox-group v-model="checkList" :max="2"></el-checkbox-button>

7.和单选框一样,支持使用el-checkbox-button样式;

    <el-checkbox-button label="音乐"></el-checkbox-button>

8.事件和radio一样,支持change, 具体如下:

    <el-checkbox-group v-model="checkList" @change="radioChange"></el-checkbox-button>

    PS:  其余和单选框类似,注意button样式和普通样式的属性区别;

Input输入框


基础输入框Input,带双向绑定;

    <el-input v-model="input" placeholder="请输入内容"></el-input>

        data() {

                return {

                        input : ' '

                    }

            }

使用clearable属性,提供框内清空按钮,使用show-password实现密码框;

    <el-input v-model="input" clearable></el-input>

    <el-input v-model="input" show-password></el-input>

使用maxlength属性,设置输入限制;

    <el-input v-model="input" maxlength="10" show-word-limit></el-input>

使用prefix-icon设置前缀内置图标;使用suffix-icon设置后缀内置图标

    前置图标:<el-input prefix-icon="el-icon-search"></el-input>

    后置图标:<el-input suffix-icon="el-icon-date"></el-input>

    PS:  支持slot方式,具体如下: 

    <el-input>

                <i slot="suffix" class="el-input_icon" el-icon-date></i>

    </el-input>

    使用type="textarea",可以将输入框设置成文本域;

    <el-input type="textarea" v-model="textarea"></el-input>

    PS:  使用属性autosize可以自动扩展其高度

复合型输入框

使用<template>可以实现复合型输入库;

    <el-input>

        <template slot="append"></template>

    </el-input>

    PS:  和之前的表单一样可以使用size来设置尺寸;

可以通过输入库激活或输入的方式匹配数据列表内的相关信息;

    <el-autocomplete :fetch-suggestions="querySearch" v-model="state">

    </el-autocomplete>

    PS:  这里相关的方法:querySearch和自动载入的loadAll()直接复制即可,固定格式;

    PS: 关于事件,输入框有:focus/blur/select; 自动完成有select/change;

InputNumber计数器框


1.基础InputNumber计数器,带双向绑定;

    <el-input-number v-model="number"></el-input-model>

          data() {

                return {

                        number :' '

                    }

            }

使用  :max  /  :min限制最大值和最小值,支持change事件

    <el-input-number v-model="number" :min="1" :max="5" @change="change" />

            change(e)  {

                    console.log(e)

            }

    PS:  设置disabled禁用,设置:step=1为增减步长,设置 :precision=2为小数点精度

    <el-input-number v-model="number" :step="1" :precision="2" >

    </el-input-number>

    事件支持:change/blur/focus,方法支持:focus/select(区别:无回调)

select选择器


1.基础select选择器,具体如下:

<el-row>

    <el-select    v-model="value"    placeholder="请选择">

    <el-option    v-for="item  in  options"

    :key="item.value"

    :label="item.label"

    :value="item.value" ></el-option>

    </el-select>

    </el-row>

    data () {

            return {

                    value: ' ',

                    option : [

                            {

                                    value : 1,

                                    label :'北京'

                                    },

                                {

                                    value : 2,

                                    label :'上海'

                                },

                               {

                                    value : 3,

                                    label :'广州'

                                }

                            ]

                        }

                    }

关于禁用,有两种:1.在el-select设置;2.在el-option设置;

    <el-select  v-model="value"  placeholder="请选择"  disabled>

    或

    <el-option      :disabled="item.value === 1"></el-option>

使用clearable属性,清空选择的项目;使用multiple,实现多选项目;

    <el-select    v-model="value"    placeholder="请选择"    clearable    multiple>

使用filterable属性,执行选择项搜索;

    <el-select    v-model="value"  placeholder="请选择"    fillterable>

Cascader选择器


1.默认是通过click点击来实现菜单的展开,我们也可以设置为hover悬浮

    <el-cascader v-model="value"  :options="options"  :props="{ expandTrigger  :  'hover' }">

2.使用disabled和clearable,禁用和清空,和Select选择器一样

    <el-cascader    v-model="value"  :options="options"  clearable  disabled>

3.使用: show-all-levels来限制获取到的是最后一级的内容,设置false即可

      <el-cascader  v-model="value"  :options="options"  :show-all-levels="false"  :props="props">

            data()  {

                        return {

                                    props :{

                                            multiple : true

                                                    },

                                    }

                                }

Switch开关


基础的switch开关,具体如下:

<el-switch  v-model="value"  active-color="#13ce66"  inactive-color="#ccc"  active-text="打开"  inactive-text="关闭">

        </el-switch>

                    data ()  {

                            return  {

                                    value : true

                                        }

                                },

除了Boolean类型,也可以是String或Number类型;

    < el-switch  v-model="value" 

            active-color="#13ce66" 

                    inactive-color="#cccccc" 

                    active-value="100" 

                    inactive-value="0"

                    @change="switchChange" >

        </el-switch>

                data ()  {

                    return {

                            value  :  '0'

                                }

                        },

Slider滑块


基础Slider滑块,具体如下:

<el-slider    v-model="value"></el-slider>

        data ()  {

                return {

                    value : 0

                           }

                    }

使用 : show-tooltip实现隐藏文本提示,: format-tooltip实现自定义格式化;

    <el-slider  v-model="value2"  :show-tooltip="false">

    </el-slider>

    <el-slider  v-model="value2"  :format-tooltip="formatTooltip">

    </el-slider>

    methods : {

        formatTooltip(value) {

                return  value / 100

                }

        }

使用show-input可自带输入框;

    <el-slider  v-model="value" show-input>

    </el-slider>

使用range实现范围选择;

    <el-slider  v-model="value6"  range    :min="1"  :max="10">

    </el-slider>

    value6  :  [4,6]

    使用:step实现离散效果,再使用show-stops实现断点效果;

    <el-slider  v-model="value4"  :step="10">

    </el-slider>

    <el-slider  v-model="value5" :step="10" show-stops>

    </el-slider>

TimePicker时间选择器


选择一个固定的时间点,具体如下:

<el-time-select    v-model="value"  :picker-options="{

start : '08:30',

step : '00:15',

end :  '18:30'

}"  placeholder="选择时间" />

data ()  {

return {

value : ' '

}

}

选择一个任意时间点,具体如下:

< el-time-picker    v-model="value2"  arrow-control  :picker-options="{

    selectableRange  :  '18:30:00 - 20:30:00'

}">

</el-time-picker>

PS: arrow-control属性可开启箭头选择,而selectableRange是限制时间范围;

丰富的任意时间范围,具体如下:

< el-time-picker    v-model="value3"

    is-range

    range-separator="至"

    start-placeholder='开始时间'

    end-placeholder='结束时间'

</el-time-picker>

PS:  is-range开启丰富的任意时间范围,其它字面意思

PS:属性方法和之前组件类似

DatePicker日期选择器


选择一个基础的

<el-date-picker  v-model="value">

</el-date-picker>

    data () {

        return {

            value : ' '

            }

        }

可以设置一个type属性,设置获取的值

<el-date-picker  v-model="value"

      type="date"

placeholder="选择日期"/>

PS: type设置为datetime,可以获取到日期+时间

自定义快捷选项的日期选择,具体如下;

<el-date-picker  v-model="value"

        type="datetime"

        placeholder="选择日期"

        :picker-options="getPicker"/>

    data () {

            return {

                        value :  ' ',

                        getPicker :  {

                                  //shortcuts是固定名称,表示设置快捷键

                        shortcuts  :  [{

                                        text : '今天',

                                        onClick (obj) {

                                                    obj.$emit('pick',new Date() )

                                                    }

                                                },{

                                        text : '昨天',

                                    onClick (obj) {

                                                const date = new Date();

                                                date.setTime(date.getTime() - 3600 * 1000 * 24)

                                                obj.$emit('pick',date )

                                                }

                                            },{

                                        text : '明天',

                                        onClick (obj) {

                                                const date = new Date();

                                                date.setTime(date.getTime() + 3600 * 1000 * 24)

                                                 obj.$emit('pick',new Date() )

                                                    }

                                            }

                                        ]

                                    }

                                }

                          }

选定一个日期范围,具体如下:

<el-date-picker v-model="value2"

      type="monthrange"

       range-separator="至"

       start-placeholder="开始月份"

       end-placeholder="结束月份">

</el-date-picker>

选定一个日期,并进行格式化,具体如下:

<el-date-picker  v-model="value"

        type="datetime"

        placeholder="选择日期"

        format="yyyy年MM月dd日"

        :picker-options="getPicker" />

</el-date-picker>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容