2021-07-09 vue笔记-PC端框架:Element-UI组件库(一) element-ui介绍安装和使用

前端OnTheRun

已于 2023-02-03 11:58:58 修改

阅读量139

点赞数

分类专栏： vue element-ui 文章标签： vue elementui 组件化 js

于 2021-07-09 08:28:09 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/118529532

版权

vue 同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

element-ui

2 篇文章 0 订阅

订阅专栏

Element-UI介绍

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，
手机端有对应框架是Mint UI 。

设计原则

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

安装,引入和使用

安装命令:`npm i element-ui -S`

引入:index.css和index.js文件

在线:

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

本地项目:

    <!-- 引入样式 -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <link rel="stylesheet" href="./node_modules/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
    <script src="./node_modules/element-ui/lib/index.js"></script>

学习文档:官网

Helloworld.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-button @click="visible = true">点击</el-button>
        <!-- 点击后出现的弹窗:先隐藏,点击后弹出 -->
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>你好世界!</p>
        </el-dialog>
    </div>
</body>
<!-- 引入vue -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            visible: false
        }
    })
</script>
</html>

element-ui的优缺点

优点

一致性,反馈,效率,可控

缺点

1.el-input不能完全兼容input场景

即el-input和vue结合起来时无法实现输入框的动态更新
解决方法:通过v-model和<input/>搭配来实现实时更新

2.el-button对disabled属性不支持

即:在有一个输入框的应用场景中,在框内没有内容时,禁用旁边的删除按钮
解决方法:在disabled属性中写document.getElementById("ididid").disabled = true/false,而这只能在JS层面上解决,但是它的disabled属性仍让不会显示在页面上,所以最终的解决方案是用到disabled属性时,用原生button标签,不要使用el-button

前端OnTheRun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-07-09 vue笔记-PC端框架:Element-UI组件库(一) element-ui介绍安装和使用

Element-UI介绍Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。设计原则一致性 Consistency与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。反馈 Feedback控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。效
复制链接

扫一扫