Element-UI的使用_element ui 使用-程序员宅基地

技术标签: ui  前端  vue.js  

Element-ui概述

Element-ui,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。

element-ui的上手使用还是挺容易的,在理想情况下,只需要以下步骤:

  1. 找想要的样式组件

  2. 复制代码到对应的.vue组件

  3. 修改对应的数据

  4. 1.1 Element-ui介绍及文档

    非组件样式

    官方提供的样式中有一部分并非是组件样式,比如:字体图标、全局指令、全局事件等,这里简单说明下这类样式的使用方法

  5. 图标样式

    一般情况下,使用i标签,并将class属性设置成对应的图标名即可;而对于别的组件希望引入图标时(可使用icon属性,例如el-button),设置icon属性为对应的图标名。

    <i class='el-icon-user-solid'></i>

  6. 指令样式

    例如Loading加载,其提供的是一个指令v-loading,使用时直接调用就行。

  7. method

    <template>
        <div>
              <!-- 监听change事件 -->
              <el-input @change="handleChange" v-model="name" ref="nameInput">
                  <label slot="prepend">用户名:</label>
              </el-input>
              <el-button @click="handle">input组件 获取焦点</el-button>
          </div>
        </template>
        
        <script>
        export default {
        data() {
          return {
            name: "zhangsan"
          };
        },
        methods: {
          handle() {
            this.$refs.nameInput.focus();
            // 调用focus方法聚焦到对应的input组件
          }
        }
        };
        </script>

    option

  8. <template>
        <div>
          <el-time-select
            v-model="value1"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30'
        }"
          ></el-time-select>
          <!-- picker-options是object类型,option里则提供了各种该对象里的参数 -->
        </div>
      </template>
      
      <script>
      export default {
        data() {
          return {
            value1: ""
          };
        }
      };
      </script>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/smq011209/article/details/125606444

智能推荐

Lua 入门_lua_setupvalue-程序员宅基地

文章浏览阅读1.4k次。此篇文章所有操作都是基于上一篇安装的docker容器内进行操作案例来自于菜鸟教程首先进入容器安装vimapk add vimLua 变量变量就是给一块内存区域赋予一个值。使得程序可以读取和修改相应内存中内容。变量由字母、数字、下划线组成。必须以字母或下划线开头。Lua 是大小写敏感的。变量分为全局变量和局部变量type variable_listlocal a, b = 1, 10 --局部变量c, d = 2, 20 -- 全局变量如果变量只定义了没有初始化_lua_setupvalue

3.3 ORACLE 的 EMP&DEPT表 建表语句_oracle emp建表语句-程序员宅基地

文章浏览阅读1.5k次,点赞2次,收藏15次。ORACLE 的 EMP&DEPT表 建表语句-- 创建表与数据CREATE TABLE EMP(EMPNO NUMBER(4) NOT NULL,ENAME VARCHAR2(10),JOB VARCHAR2(9),MGR NUMBER(4),HIREDATE DATE,SAL NUMBER(7, 2),COMM NUMBER(7, 2),DEPTNO NUMBER(..._oracle emp建表语句

使django支持PUT,DELETE的方案_django如何简单快速实现put、delete方法-程序员宅基地

文章浏览阅读9.5k次。第一种方案修改ajax中type方式并设置header,同时对put重新构建数据字典在对views中的方法进行类对象封装时,发现django并不支持像post和get一样将数据封装。 由于网页端无法设置method方法,在用postman和ajax开启pycharm对接口进行debug测试时发现:提交数据后并没有进入代码逻辑。 查阅资料得知,django支持put和delete方法..._django如何简单快速实现put、delete方法

vscode通过跳板机(堡垒机)连接remote服务器_vscode 连接堡垒机-程序员宅基地

文章浏览阅读2.9w次,点赞17次,收藏45次。先吐槽: 搞了一上午!!! 我太难了!!! 最近服务器不够用, 就差动手算深度学习梯度了!!! 向本科朋友借了几台机子跑, 这要是没上过大学, 研究生还不能毕业了呢!!!目录1. 简单任务介绍2. 本机的配置3. 跳板机的配置4.内网服务器的配置5. 怎么样不需要密码访问嘤嘤嘤~~1. 简单的任务介绍:我现在用的电脑叫做A, 然后借了一台服务器叫做C..._vscode 连接堡垒机

【实战】python-docx---每页表格固定显示行数_python docx设置每页行数-程序员宅基地

文章浏览阅读1.1k次。例如100行数据填入word,每页固定展示5行,需要20页_python docx设置每页行数

OpenEmu:一个让你在Mac上爽快体验任天堂的模拟器_openemu苹果电脑-程序员宅基地

文章浏览阅读7k次。目录前言OpenEmu简介OpenEmu实际体验最后前言 这次的文章和以往不太一样, 不谈技术, 来谈谈情怀. 记得那是我小学二三年级的时候吧, 我妈给我买了一个Game Boy, 价格记不清了, 反正不贵, 而且是黑白的那种, 应该就是初代Game Boy吧. 然后还配了一张口袋妖怪青的卡. 在那个魔域啊, 传奇啊, 或者什么类似网游盛..._openemu苹果电脑

随便推点

TCP中的RST标志(Reset)详解_tcp的rst-程序员宅基地

文章浏览阅读2.9k次,点赞2次,收藏7次。TCP中的RST标志(Reset)详解_a_tu_的专栏-程序员宅基地_rst tcp在谈RST攻击前,必须先了解TCP:如何通过三次握手建立TCP连接、四次握手怎样把全双工的连接关闭掉、滑动窗口是怎么传输数据的、TCP的flag标志位里RST在哪些情况下出现。下面我会画一些尽量简化的图来表达清楚上述几点,之后再了解下RST攻击是怎么回事。1、TCP是什么?TCP是在IP网络层之上的传输层协议,用于提供port到port面向连接的可靠的字节流传输。我来用土语解释下上面的几个关键字:por_tcp的rst

日常问题集锦_el-input 居中-程序员宅基地

文章浏览阅读2.1k次,点赞2次,收藏5次。【①】运行项目时出现的端口被占用问题:【②】JS中获取当前时间:【③】一些常用的校验规则:【④】vue 表格中数据默认全部选中:【⑤】vue 获取表格中选中行的数据:【⑥】vue 强制更新数据:【⑦】vue 想要el-input框内文字居中显示:【⑧】vue 清除表单内的内容或者清除表单验证:【⑨】vue 表格分页的两种格式:【⑩】vue 中防止按钮重复点击提交的方法:_el-input 居中

Android11及以上 文件读写权限申请_android 11 write_external_storage-程序员宅基地

文章浏览阅读2.1w次,点赞9次,收藏50次。Android11及以上 文件读写权限申请_android 11 write_external_storage

yii2 在线教育系统,开办托管班需要什么手续?如何经营托管班?-程序员宅基地

文章浏览阅读330次,点赞8次,收藏6次。托管班店铺的装修风格,一定要结合学生喜欢的设计风格,颜色搭配一定要看起来舒适,让学生一进来就有学习的范围,不由自主就想学习的动力,所以装修的风格,是要符合学生学习的环境氛围,让学生一进来想呆着不想走,所以设计方面,一定一定多参考同行的装修风格。想要运营好一家托管班,那么需要有一个正规化的管理流程,那么就要为校区制定各种规章制度,按照规章制度来走,避免后期因为没有任何提示,导致出现一系列的问题,所以要出针对教师,学生,家长的不同规章制度。保护孩子的安全,预防托管机构火灾事故的发生,是托管班一项重要指标。

外观模式实例-智能手机一键备份_某软件公司为新开发的智能手机控制与管理软件提供了一键备份功能,通过该功能可以-程序员宅基地

文章浏览阅读2.2k次,点赞7次,收藏40次。外观模式实例问题描述结构图编程实现需要交互的类Facade类客户端问题描述某软件公司为新开发的智能手机控制与管理软件提供一键备份功能,通过该功能可以将原本存储在手机中的通讯录、短信、照片、音乐等资料一次性拷贝到移动存储介质中(例如:SD卡)中。在实现过程中需要与多个已有的类进行交互,如通讯录管理类、短信管理类。结构图编程实现需要交互的类public class ContactsManager { private String contacts; public Contacts_某软件公司为新开发的智能手机控制与管理软件提供了一键备份功能,通过该功能可以

走出MFC子类化的迷宫_vs怎么用mfc画出迷宫-程序员宅基地

文章浏览阅读1k次。本文转自:http://www.99inf.net/SoftwareDev/VC/22322.htmWindows给我们或是说给它自己定义了许多丰富的通用控件,如:Edit、ComboBox 、ListBox……等,这些控件功能丰富,能为我们开发工作带来极大方面,试想:我们单单是自己实现一个EDIT控件是多么的艰难!但是,在实际开发中还是有些情况这些标准控件也无能为力,比如:在我们的应用中要求_vs怎么用mfc画出迷宫

推荐文章

热门文章

相关标签