我就知道学vue避不开学ElementUI)
但是breadcrumb确实香啊)
Element UI
Button按钮
button示例<el-row>
<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>
</el-row>
<el-row>
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
</el-row>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
<el-row>
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>
Dialog对话框
基本用法
弹出一个对话框,适合需要定制性更大的场景。
需要设置visible
属性,它接收Boolean
,当为true
时显示 Dialog。Dialog 分为两个部分:body
和footer
,footer
需要具名为footer
的slot
。title
属性用于定义标题,它是可选的,默认值为空。最后,本例还展示了before-close
的用法。
<el-button type="text" @click="dialogVisible = true">点我打开 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {});
}
}
};
</script>
:visible.sync 的作用
:visible
指的是属性绑定,表示弹框的显示隐藏,当:visible
的值为ture的时候,弹框显示,当为false
的时候,弹框隐藏后面的
.sync
是什么意思呢,指的就是同步动态双向的来表示visible
的值,当我们关闭窗口的时候,这个弹框隐藏了,visible
的值发生了变化,但是关闭窗口这个动作,我们没法用确定的动作去判断这个值,所以用到了vue中的双向绑定的原则,在vue中统一加上了.sync
来表示同步的修改了visible
的值。
说人话就是 elementUI里只有单向绑定没有同步双向绑定 那就用.sync
强行双向绑定
:before-close的作用
关闭前的回调
before-close
仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在footer
具名 slot 里添加了用于关闭 Dialog 的按钮,那么可以在按钮的点击回调函数里加入before-close
的相关逻辑。
slot的作用
父组件写在子组件标签内的内容,替换了子组件中slot标签
插槽,一种子组件预留空间的方法.也可以准备多个插槽
自定义用法
嵌套表格/表单
<!-- Table -->
<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
<el-table :data="gridData">
<el-table-column property="date" label="日期" width="150"></el-table-column>
<el-table-column property="name" label="姓名" width="200"></el-table-column>
<el-table-column property="address" label="地址"></el-table-column>
</el-table>
</el-dialog>
<!-- Form -->
<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>
<el-dialog title="收货地址" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="活动名称" :label-width="formLabelWidth">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="活动区域" :label-width="formLabelWidth">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
</div>
</el-dialog>
<script>
export default {
data() {
return {
gridData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
dialogTableVisible: false,
dialogFormVisible: false,
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
formLabelWidth: '120px'
};
}
};
</script>
嵌套Dialog
可以在一个Dialog里再套一个Dialog
如果需要在一个 Dialog 内部嵌套另一个 Dialog,需要使用 append-to-body
属性。
正常情况下,不建议使用嵌套的 Dialog,如果需要在页面上同时显示多个 Dialog,可以将它们平级放置。对于确实需要嵌套 Dialog 的场景,可用append-to-body
属性。将内层 Dialog 的该属性设置为 true,它就会插入至 body 元素上,从而保证内外层 Dialog 和遮罩层级关系的正确。
<template>
<el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
<el-dialog
width="30%"
title="内层 Dialog"
:visible.sync="innerVisible"
append-to-body>
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false">取 消</el-button>
<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
outerVisible: false,
innerVisible: false
};
}
}
</script>
居中布局
标题和底部可水平居中
将center
设置为true
即可使标题和底部居中。center
仅影响标题和底部区域。Dialog 的内容是任意的,在一些情况下,内容并不适合居中布局。如果需要内容也水平居中,需自行为其添加 CSS。
Dialog 的内容是懒渲染的,即在第一次被打开之前,传入的默认 slot 不会被渲染到 DOM 上。因此,如果需要执行 DOM 操作,或通过
ref
获取相应组件,请在open
事件回调中进行。
如果
visible
属性绑定的变量位于 Vuex 的 store 内,那么.sync
不会正常工作。此时需要去除.sync
修饰符,同时监听 Dialog 的open
和close
事件,在事件回调中执行 Vuex 中对应的 mutation 更新visible
属性绑定的变量的值。
<el-button type="text" @click="centerDialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
title="提示"
:visible.sync="centerDialogVisible"
width="30%"
center>
<span>需要注意的是内容是默认不居中的</span>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
centerDialogVisible: false
};
}
};
</script>
Form表单
Form表单的model和rules参数说明Form 组件提供了表单验证的功能,只需要通过 rules
属性传入约定的验证规则,并将 Form-Item 的 prop
属性设置为需校验的字段名即可。
校验规则:https://github.com/yiminghe/async-validator
Radio单选框
在一组备选项中进行单选
要使用 Radio 组件,需要设置v-model
绑定变量。选中意味着变量的值为相应 Radio label
属性的值,label
可以是String
、Number
或Boolean
。
<template>
<el-radio v-model="radio" label="1">备选项</el-radio>
<el-radio v-model="radio" label="2">备选项</el-radio>
</template>
<script>
export default {
data () {
return {
radio: '1'
};
}
}
</script>
禁用状态
单选框不可用的状态。
只要在el-radio
元素中设置disabled
属性即可,它接受一个Boolean
,true
为禁用。
单选框组
适用于在多个互斥的选项中选择的场景
结合el-radio-group
元素和子元素el-radio
可以实现单选组。在el-radio-group
中绑定v-model
,在el-radio
中设置好label
即可,无需再给每一个el-radio
绑定变量,另外,还提供了change
事件来响应变化,它会传入一个参数value
。
Select选择器
当选项过多时,使用下拉菜单展示并选择内容。
v-model
的值为当前被选中的el-option
的 value 属性值
Input输入框
<i slot="suffix" style="margin-right: 5px;">Hz</i>
name | 说明 |
---|---|
prefix | 输入框头部内容,只对 type="text" 有效 |
suffix | 输入框尾部内容,只对 type="text" 有效 |
prepend | 输入框前置内容,只对 type="text" 有效 |
append | 输入框后置内容,只对 type="text" 有效 |
Slider滑块
通过拖动滑块在一个固定区间内进行选择
通过设置绑定值自定义滑块的初始值
选项可以是离散的 改变step
的值可以改变步长,通过设置show-stops
属性可以显示间断点
设置 marks
属性可以展示标记
<el-slider
v-model="runV"
:max="30"
:marks="marks"
@change="changeSlider($event)"
height="200px">
</el-slider>
网友评论