Element Ul快速入门

Element Ul快速入门

---

Element Ul是基于Vue的一套桌面端组件库，提前封装好的Ul模板，方便开发者快速搭建一个网站前端界面

官网：https://element.eleme.cn/

1.Element Ul安装

---

在插件中，点击添加插件 搜索element

安装成功，界面如下所示

如果安装成功，会看到如下界面

2.Icon图标的使用

---

<i class="el-icon-edit"></i>

<i class="el-icon-delete"></i>

<i class="el-icon-phone"></i>

3.Button按钮

---

是Element Ul 提供的一组常用的操作按钮组件，直接使用封装好的el-button,比如

<el-button>按钮</el-button>

基于el-button,按钮，可以使用type、plain、round、circle属性对按钮进行修饰。

type：设置按钮的样式

<el-button>默认按钮</el-button>

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

<el-button type="success">成功按钮</el-button>

<el-button type="info">信息按钮</el-button>

<el-button type="warning">警告按钮</el-button>

<el-button type="danger">危险按钮</el-button>

plain 可以减弱按钮的背景颜色效果

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

round 可以给按钮设置圆角

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

circle 将按钮设置为圆形

<el-button type="primary" icon="el-icon-edit" circle></el-button>

disabled设置按钮的可以状态

<el-button type="primary" icon="el-icon-edit " circle disabled></el-button>

loading属性可以给按钮设置"加载中"的效果

<template>

<div>

<el-button type="primary" icon="el-icon-edit " circle @click="test()" :loading=loading></el-button>

</div>

</template>

<script>

export default {

name: "test",

methods:{

test(){

// alert("11111");

this.loading = true;

setTimeout(()=>{

this.loading = false;

},3000)

}

},

data(){

return{

loading:false

}

}

}

</script>

​

<style scoped>

​

</style>

size属性可以设置按钮的大小，medium，small,mini

<el-button type="primary" size="medium">主要按钮</el-button>

4.Link超链接

---

文字超链接，使用 el-link标签来实现

<el-link href="https://www.baidu.com" target="_blank">baidu</el-link>

target="_blank 可以让页面在新的窗口打开

disabled 设置超链接不可用

underline设置下划线

:underline="false" 来去掉超链接的下划线

icon给文字超链接设置图标

<el-linkhref="https://www.baidu.com"icon="el-icon-phone-outline":underline="false" target="_blank">baidu</el-link>

5.Radio单选框

---

使用el-radio标签即可，通过v-model进行对象数据的绑定，label表示该单选框的值，文本直接写入到标签内部即可

<template>

<el-radiov-model="radio"label="1">选项1</el-radio>

<el-radiov-model="radio"label="2">选项2</el-radio>

</template>

​

<script>

exportdefault {

data () {

return {

radio: '1'

};

}

}

</script>

change绑定切换事件

<el-radio v-model="radio" label="2" @change="change">选项1</el-radio>

<el-radio v-model="radio" label="2" @change="change">选项2</el-radio>

methods:{

change(){

console.log('当前radio的值： '+this.radio);

}

}

6.Checkbox多选框的使用

---

<template>

<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

<div style="margin: 15px 0;"></div>

<el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">

<el-checkbox v-for="city in cities" :label="city" :key="city">{ {city}}</el-checkbox>

</el-checkbox-group>

</template>

<script>

const cityOptions = ['上海', '北京', '广州', '深圳'];

export default {

data() {

return {

checkAll: false,

checkedCities: ['上海', '北京'],

cities: cityOptions,

isIndeterminate: true

};

},

methods: {

handleCheckAllChange(val) {

this.checkedCities = val ? cityOptions : [];

this.isIndeterminate = false;

},

handleCheckedCitiesChange(value) {

let checkedCount = value.length;

this.checkAll = checkedCount === this.cities.length;

this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;

}

}

};

</script>

7.input输入框

---

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

<el-button type="success" @click="click">成功按钮</el-button>

methods:{

click(){

this.input="hello"

}

}

data(){

return{

input:''

}

}

通过size属性修改输入框的尺寸，large/medium / small / mini,size修改的是输入框的高度

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

修改宽度可以在外出嵌套一个div，通过修改div的宽度来实现输入框宽度的修改

<div style="width: 200px">

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

</div>

show-password 属性设置可以切换显示隐藏的密码框

通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标

<el-inputv-model="input"show-passwordprefix-icon="el-icon-phone"suffix-icon="el-icon-remove"placeholder="请输入内容"></el-input>

maxlength、minlength限制输入框的字符长度

show-word-limit //显示输入了几个字符，一共能输入几个字符

<el-inputv-model="input"maxlength="6"show-word-limit placeholder="请输入内容"></el-input>