文章目录
-
Vue整合ElementUI
-
一. 按钮组件
-
二. Link 文件链接组件
-
三. Layout(栅格) 布局组件的使用
-
四. Container 布局容器
-
五. Radio 单选框
-
六. Checkbox 多选框
-
七. Input 输入框
-
八. Select选择器组件
=================================================================================
提示:这里我使用的Vue是2.0版本
推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。
- 下载elementui的依赖
npm i element-ui -S
- 在src下的main.js中指定当前项目中使用elementui
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
- 将elementui注册到vue实例上
Vue.use(ElementUI);
==========================================================================
1.默认样式按钮
默认按钮
主要按钮
成功按钮
信息按钮
警告按钮
危险按钮
2.简洁按钮 plain 鼠标移动上去才会显示背景颜色
朴素按钮
主要按钮
成功按钮
信息按钮
警告按钮
危险按钮
3.使用圆角按钮 round
圆角按钮
主要按钮
成功按钮
信息按钮
警告按钮
危险按钮
4.图标按钮 idco:具体要显示的图标
按钮组件的详细使用
- 日后使用element ui的相关组件时需要注意的是 所有组件都是
el-组件名称
开头
创建按钮:<el-button>默认按钮</el-button>
组件属性使用
- 总结:在element中所有的组件的属性使用都是直接将
属性名=属性值方式写在对应的组件标签上
,boolean类型的属性默认为false可以简写一个属性名字表示为true。