设为首页收藏本站
开启辅助访问

Vue整合ElementUI，组件使用教程，适合新手

 您所在的位置：网站首页 › 原生html可以用elementui › Vue整合ElementUI，组件使用教程，适合新手

Vue整合ElementUI，组件使用教程，适合新手

#Vue整合ElementUI，组件使用教程，适合新手| 来源: 网络整理| 查看: 265

官网：Element

在这里插入图片描述

文章目录 Vue整合ElementUI一. 按钮组件二. Link 文件链接组件三. Layout(栅格) 布局组件的使用四. Container 布局容器五. Radio 单选框六. Checkbox 多选框七. Input 输入框八. Select选择器组件

Vue整合ElementUI

提示：这里我使用的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-组件名称开头

创建按钮：默认按钮

组件属性使用

总结：在element中所有的组件的属性使用都是直接将属性名=属性值方式写在对应的组件标签上，boolean类型的属性默认为false可以简写一个属性名字表示为true。

在这里插入图片描述 示例

创建简单的按钮 默认按钮 使用按钮的属性 primary primary

在这里插入图片描述 按钮组的使用

按钮组的使用就是通过把多个按钮包裹起来

在这里插入图片描述

二. Link 文件链接组件

文字链接组件的创建

默认链接

文字链接组件属性的使用 在这里插入图片描述 示例

使用文字链接组件 默认链接 默认链接 默认链接 默认链接 注意：有些属性需要通过Vue的绑定语法给组件赋值 :underline="false" 否则则会抛出异常

在这里插入图片描述

三. Layout(栅格) 布局组件的使用 通过基础的 24 分栏，迅速简便地创建布局。在element ui中布局组件将页面划分为多个行(row)，每行最多分为24栏(列)

使用Layout组件

el-row代表一行，行里面放的自然就是列el-col，span代表栅格占据的列数，是el-col的一个属性由于它是我们elementui中的一个属性这个属性必须要求我们写数字所以赋值的时候需要带上：。如果span等于8表示一列占用8份如果超过8份则会换行显示。 占用8份 占用8份 占用8份 占用6份 占用6份 占用6份 占用6份 占用6份 占用6份 占用6份 占用6份 占用6份 占用6份 占用6份 占用6份

在这里插入图片描述

注意：

在一个布局组件好 是由row和col组合而成在使用时要区分 row属性和col属性

行属性的使用 在这里插入图片描述

占用6份 占用6份 占用6份 占用6份

:gutter=“10”:表示格栅间隔 在这里插入图片描述 :tag=“span”：表示当前行使用哪种标签去构建 在这里插入图片描述

列属性的使用

在这里插入图片描述 偏移属性offset

我是占用12份 我是占用12份

在这里插入图片描述 向右移动push

我是占用12份 我是占用12份

在这里插入图片描述

注意以上两者的区别 四. Container 布局容器 用于布局的容器组件，方便快速搭建页面的基本结构。

创建一个布局容器

容器中包含的子元素

：顶栏容器。 ：侧边栏容器。 ：主要区域容器。 ：底栏容器。

嵌套容器

我是标题 我是菜单 我是内容 我是底部

在这里插入图片描述 容器的属性

注意：当子元素中没有 el-header 或 el-footer 时容器排列为水平

在这里插入图片描述

五. Radio 单选框 在一组备选项中进行单选

创建一个单选按钮

男 女

在这里插入图片描述

此时虽然创建出来两个单选按钮但是不能进行选中和取消，这里必须配合我们的value / v-model和label属性进行使用。 radio组件的使用 男 女 export default { name: "Radio", data(){ return{ label:'女' } } }

在这里插入图片描述 Radio按钮属性的使用 在这里插入图片描述

男 女 总结：属性的使用还是直接写在对应的组件标签上以 属性名 = 属性值 的方式使用。

Radio事件的使用

在这里插入图片描述

事件的使用也和属性的使用是一致的都是写在对应的组件标签上事件在使用时必须使用vue中绑定事件方式进行使用如@事件名=事件处理函数(绑定在vue组组件中对应函数) 男 女 export default { methods:{ aa(){ console.log(this.label) } } }

在这里插入图片描述 Radio单选按钮组的使用

在这里插入图片描述

备选项3 备选项6 备选项9 export default { data(){ return{ radio: '3' } }, methods:{ bb(){ console.log(this.radio) } } }

在这里插入图片描述

六. Checkbox 多选框 一组备选项中进行多选

创建Checkbox

北京 使用标签去构建我们的checkbox日后我们checkbox的值可以通过v-model进行绑定(true|false)。

属性和事件的使用

北京 洛阳 上海 曹县 export default { name: "Checkbox", data(){ return{ checked:1 } }, methods:{ aa(){ console.log("选中节点的true-label为："+this.checked) } } }

在这里插入图片描述 复选框组的使用

适用于多个复选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。 北京 洛阳 上海 曹县 export default { name: "Checkbox", data(){ return{ checkList:[] } }, methods:{ aa(){ console.log("选中节点的true-label为："+this.checkList) } } }

在这里插入图片描述

七. Input 输入框 通过鼠标或键盘输入字符

创建

Input属性的使用

在这里插入图片描述 在这里插入图片描述

在这里插入图片描述 事件的使用

在这里插入图片描述

export default { name: "Input", methods:{ ccc(value){ console.log(value) }, } }

在这里插入图片描述 方法的使用

在这里插入图片描述

focus方法 export default { methods:{ focusInputs(){ this.$refs.inputs.select(); } } }

在这里插入图片描述

总结：

在使用组件的方法时需要在对应的组件中加入 ref="组件别名"在调用方法时直接使用 this.$refs.组件别名.方法名()

注意：在elementui中所有组件 都存在 属性和方法 属性：直接写在对应的组件标签上 使用方式：属性名=属性值 方式 事件：直接使用vue绑定事件方式写在对应的组件标签上 使用方式：@事件名=vue中事件处理函数 方法：1.在对应组件标签上使用 ref=组件别名 2.通过使用this.$refs.组件别名.方法名() 进行调用。

八. Select选择器组件 当选项过多时，使用下拉菜单展示并选择内容。

选择器组件的使用

数据写死在页面上 北京 上海 澳门 曹县 注意：要求下拉列表中必须存在option的value属性值，select中必须使用v-modek进行数据绑定 在这里插入图片描述 如何动态获取数据 export default { data(){ return{ cityId:'', options:[ {id:'1',name:'研发部'}, {id:'2',name:'开发部'}, {id:'3',name:'小卖部'}, {id:'4',name:'销售部'}, ] } }, }

在这里插入图片描述

事件与属性的使用

export default { name: "Select", data(){ return{ cityId:'', options:[ {id:'1',name:'研发部'}, {id:'2',name:'开发部'}, {id:'3',name:'小卖部'}, {id:'4',name:'销售部'}, ] } }, methods:{ aa(value){ console.log(value) } } }

在这里插入图片描述 方法的使用

测试方法 export default { name: "Select", data(){ return{ city:'', options:[ {id:'1',name:'研发部'}, {id:'2',name:'开发部'}, {id:'3',name:'小卖部'}, {id:'4',name:'销售部'}, ] } }, methods:{ bbb(){ this.$refs.selects.focus(); } } }

在这里插入图片描述

剩下的组件大家可以下去自行练习！感谢观看！ 在这里插入图片描述



【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3