Element-UI
一只爱好编程的程序猿
莫问收获,但问耕耘
展开
-
Timeline时间线
Timeline时间线可视化地呈现时间流信息。基础用法Timeline可拆分成多个按照时间戳正序或倒叙排列的activity,时间戳是其区分于其他控件的重要特征,使用时注意与Steps步骤条的区分。<div class="block"> <div class="radio"> 排序: <el-radio-group v-model="reverse"> <el-radio :label原创 2020-10-27 10:36:32 · 4859 阅读 · 4 评论 -
Progress进度条
Progress进度条用于展示操作进度,告知用户当前状态和预期。线形进度条Progress组件设置 percentage属性即可,表示进度调对应的百分比,必填,必须在0~100。通过format属性指定进度调文字内容。<el-progress :percentage="50"></el-progress><el-progress :percentage="100" :format="format"></el-progress><el原创 2020-09-03 16:27:11 · 3477 阅读 · 0 评论 -
Select选择器
基础用法v-model的值为当前被选中的el-option的value属性值<template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-op原创 2020-08-28 16:24:51 · 3885 阅读 · 0 评论 -
Input输入框
Input输入框通过鼠标和键盘输入字符。Input为受控组件,它总会显示Vue绑定值。通常情况下,应当处理input事件,并更新组件的绑定值(或使用v-model)。否则,输入框内显示的值将不会改变。不支持v-model修饰符。基础用法<el-input v-model="input" placeholder="请输入内容"></el-input><script>export default{ data(){ retu原创 2020-08-26 11:10:26 · 9479 阅读 · 0 评论 -
CheckBox多选框
CheckBox多选框基础用法单独使用可以表示两种状态之间的切换,写在标签中的内容为checkbox按钮的介绍在el-checkbox元素中定义v-model绑定变量,单一的checkbox中,默认绑定变量的值会是Boolean,选中为true,没选中为false。<template> <!-- `checked` 为 true 或 false --> <el-checkbox v-model="checked">备选项</el-check原创 2020-08-25 16:45:31 · 16209 阅读 · 0 评论 -
Radio单选框
Radio单选框在一组备选项中进行单选基础用法使用Radio组件,只需要设置v-model绑定变量,选中意味着变量的值为相应Radiolabel属性的值,label可以是string、number或boolean。<template> <el-radio v-model="radio" label="1">备选项</el-radio> <el-radio v-model="radio" label="2">备选项</el-ra.原创 2020-08-25 09:44:43 · 14340 阅读 · 0 评论 -
Dialog对话框
Dialog对话框在保留当前页面状态的情况下,告知用户并承载相关操作。基本用法需要设置visible属性,它接收Boolean,当为TRUE时,显示Dialog。Dialog分为两个属性:body和footer,footer需要具名为footer的slot。title属性用于定义标题,它是可选的,默认值为空。最后,本例还展示了before-close的用法。代码如下所示:<el-button type="text" @click="dialogVisible = true">原创 2020-08-24 10:54:29 · 509 阅读 · 0 评论 -
Link文字
基础用法基础的文字链接用法<div> <el-link href="https://element.eleme.io" target="_blank">默认链接</el-link> <el-link type="primary">主要链接</el-link> <el-link type="success">成功链接</el-link> <el-link type="warnin原创 2020-08-21 09:03:03 · 477 阅读 · 0 评论 -
Button按钮
基础用法使用type、plain、round和circle属性来定义Button的样式。<el-row> <el-button>默认按钮</el-button> <el-button type="primary">主要按钮</el-button> <el-button type="success">成功按钮</el-button> <el-button type="info">信息按钮&原创 2020-08-18 09:32:57 · 21320 阅读 · 3 评论 -
Container布局容器
Container布局容器用于布局的容器组件,方便快速搭建页面的基本结构;<el-container>:外层容器。当子元素中包含<el-header>或<el-footer>时,全部子元素回垂直上下排列,否则会水平左右排列。<el-header>:顶栏容器。<el-aside>:侧边栏容器。<el-main>:主要区域容器。<el-footer>:底栏容器。注意:<el-container&原创 2020-08-17 14:07:11 · 4042 阅读 · 0 评论 -
Element UI 基本组件
Layout布局基础布局通过row和col组件,并通过col组件的span属性我们就可以自由地组合布局。<el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row> <el-col :span="12"><div class="grid-co原创 2020-08-17 09:55:14 · 1115 阅读 · 0 评论