浅学一下element-ui

已于 2023-03-24 10:37:26 修改
阅读量396 收藏
点赞数
文章标签： vue.js javascript elementui
于 2022-07-26 16:10:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zlting_/article/details/125997093
版权
element-ui第三方组件的使用
1、安装npm依赖
npm i element-ui -S
2、引入element-ui

完整引入：

//在mian.js文件夹中写入一下内容

import ElementUI from 'element-ui';
//引入element-ui的样式
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

按需引入：（减小项目体积的目的）

安装babel-plugin-component依赖

npm install babel-plugin-component -D

然后，修改.babelrc文件：(文件在vue项目下)

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

然后，部分引入组件，比如Button和Select

//在main.js下写入一下代码

import {Button,Select}from 'element-ui';

//使用组件，两种方法，使用其中一个
//第一种方法
Vue.component(Button.name,Button);
Vue.component(Select.name,Select);

//第二种方法
Vue.use(Button)
Vue.use(Select)
3、Button的使用
<el-button type="primary">主要按钮</el-button>
4、Button与Notification通知的结合使用
<el-button plain @click="open1"> 弹出就关闭 </el-button>
<el-button plain @click="open2"> 弹出不关闭 </el-button>


methods: {
      open1() {
        const h = this.$createElement;
        //element注册了$notify方法
        this.$notify({
          title: '标题名称',
          message: h('i', { style: 'color: teal'}, '这是提示文案:弹出两秒'),
          duration:2000
        });
      },

      open2() {
        this.$notify({
          title: '提示',
          message: '这是一条不会自动关闭的消息',
          //duration设置为0表示不会自动关闭，默认设置为4500ms
          duration: 0
        });
      }
    }
5、Tree树形控件的使用
<el-tree :data="data"  @node-click="handleNodeClick"></el-tree>

data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{
              label: '三级 2-1-1'
            }]
          }, {
            label: '二级 2-2',
            children: [{
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            children: [{
              label: '三级 3-2-1'
            }]
          }]
        }]
      };
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
      }
    }
6.手敲弹框

教程：

在这里插入图片描述

在这里插入图片描述

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

7.手敲notice组件：

<template>
    <div v-if="isShow" class="el-notification" style="top: 16px;z-index:2000;">
      <h2 class="el-notification_title">{{ title }}</h2>
      <div class="el-notification_content">
        <p>{{ message }}</p>
      </div>
    </div>

</template>
<script>
export default {
  data() {
    return {
      title: "",
      message: "",
      duration:4500,
      isShow:false,
    };
    
  },
  methods:{
        hide(){
            this.isShow=false;
        }
    },
    //dom元素被挂载完成的时候调用mounted
    mounted(){
        console.log("dom挂载完成");
        this.isShow=true;
        setTimeout(()=>{
            this.isShow=false;
        },this.duration)
    }
};
</script>
<style scoped>
.el-notification.right {
  right: 16px;
}
.el-notification {
  right: 16px;
  display: flex;
  flex-direction:column;
  width: 330px;
  padding: 14px 26px 14px 13px;
  border-radius: 8px;
  box-sizing: border-box;
  border: 1px solid #ebeef5;
  position: fixed;
  background-color: #fff;
  transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s,
    bottom 0.3s, -webkit-transform 0.3s;
  overflow: hidden;
}
.el-notification_title {
  font-weight: 700;
  font-size: 16px;
  color: #303133;
  margin: 0;
}
h2 {
  display: block;
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.el-notification_content {
  font-size: 14px;
  line-height: 21px;
  margin: 6px 0 0;
  color: #606266;
  text-align: justify;
}
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
</style>

被调用的构造器：

import Vue from 'vue';

//导入组件
import Notice from './Noitce.vue'

//创建构造器
const NoitceContructor=Vue.extend(Notice);

//弹框供外界使用，所以要export
export default function notice(opions){
    /*  
    //options变量传递过来的参数格式
        options:{
            tittle:"XXX",
            message:'000'
        }
    */
   //1.实例化构造器
   const instance=new NoitceContructor({
        data:opions
   })
    //2.手动挂载
    //$mount('#app') 手动挂载到id为app的dom中的意思
    instance.$mount();//dom元素渲染完成
    //手动挂载到body
    document.body.appendChild(instance.$el) //instance.$el获取当前dom对象

    return instance
}

main.js：

import Vue from 'vue'
import App from './App'
import ElementUI from 'element-ui';
//引入element-ui的样式
import 'element-ui/lib/theme-chalk/index.css';

import notice from './components/notice/index'

Vue.prototype.$notice=notice;

Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  render: h => h(App)
}).$mount('#app')

app.js

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
    <el-button plain @click="open3"> 手敲弹框 </el-button>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods:{
    open3(){
      this.$notice({
        title:'组件化设计',
        message:'弹出内容',
        duration:2000
      })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
8.手敲tree树形控件（递归实现）

tree.vue中写一下代码：

<template>
  <div>
    <div @click='toggle'>
      {{ treeData.label }}
      <span v-if='isOpenFolder'>[{{ open ? "-" : "+" }}]</span>
    </div>
    <ul v-if='isOpenFolder' v-show='open'>
      <Item
        v-for="data in treeData.children"
        :treeData="data"
        :key="data.lable"
      ></Item>
    </ul>
  </div>
  <!-- 递归组件，主要是用v-for遍历 -->
</template>
<script>
export default {
  name: "Item", //name对递归组件是必须的,递归调用组件自己
  props: {
    treeData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      open: false,
    };
  },
  methods:{
      toggle(){
          if(this.isOpenFolder){
              this.open=!this.open; //取向反
          }
      }
  },
  computed:{
      isOpenFolder(){
          return this.treeData.children && this.treeData.children.length;
      }
  }
  
};
</script>
<style scoped>
</style>

app.vue中写入以下代码：

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <HelloWorld />
    <el-button plain @click="open3"> 手敲弹框 </el-button>
    <el-tree :data="data"></el-tree>
    <m-tree :treeData="treeData"></m-tree>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
import MTree from "./components/tree/Tree.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
    MTree,
  },
  data() {
    return {
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      treeData: {
        label: "web全栈课程",
        children: [
          {
            label: "js进阶+ES6",
            children: [
              {
                label: "js进阶+ES6",
                children: [
                  {
                    label: "js进阶+ES6",
                  },
                  {
                    label: "js进阶+ES6",
                  },
                ],
              },
            ],
          },
          {
            label: "js进阶+ES6",
            children: [
              {
                label: "js进阶+ES6",
                children: [
                  {
                    label: "js进阶+ES6",
                  },
                  {
                    label: "js进阶+ES6",
                  },
                ],
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    open3() {
      this.$notice({
        title: "组件化设计",
        message: "弹出内容",
        duration: 2000,
      });
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
9.手敲折叠面板

app.vue

<template>
  <div id="app">
    <img src="./assets/logo.png" />
    <HelloWorld />
    <el-button plain @click="open3"> 手敲弹框 </el-button>
    <!-- :data是自定义的 -->
    <el-tree :data="data"></el-tree>  
    <!-- :treeData是自定义的,重点是后面绑定的数据 -->
    <m-tree :treeData="treeData"></m-tree>

    
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
import MTree from "./components/tree/Tree.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
    MTree,
  },
  data() {
    return {
      data: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      treeData: {
        label: "web全栈课程",
        children: [
          {
            label: "js进阶+ES6",
            children: [
              {
                label: "js进阶+ES6",
                children: [
                  {
                    label: "js进阶+ES6",
                  },
                  {
                    label: "js进阶+ES6",
                  },
                ],
              },
            ],
          },
          {
            label: "js进阶+ES6",
            children: [
              {
                label: "js进阶+ES6",
                children: [
                  {
                    label: "js进阶+ES6",
                  },
                  {
                    label: "js进阶+ES6",
                  },
                ],
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    open3() {
      this.$notice({
        title: "组件化设计",
        message: "弹出内容",
        duration: 2000,
      });
    },
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Tree.vue中

<template>
  <div>
    <div @click='toggle'>
      {{ treeData.label }}
      <span v-if='isOpenFolder'>[{{ open ? "-" : "+" }}]</span>
    </div>
    <ul v-if='isOpenFolder' v-show='open'>
      <Item
        v-for="data in treeData.children"
        :treeData="data"
        :key="data.lable"
      ></Item>
    </ul>
  </div>
  <!-- 递归组件，主要是用v-for遍历 -->
</template>
<script>
export default {
  name: "Item", //name对递归组件是必须的,递归调用组件自己
  //子组件
  props: {
    treeData: {
      type: Object, //传递过来的类型是object
      required: true,//必传
    },
  },
  data() {
    return {
      open: false,
    };
  },
  methods:{
      toggle(){
          if(this.isOpenFolder){
              this.open=!this.open; //取反向
          }
      }
  },
  computed:{
      isOpenFolder(){
          return this.treeData.children && this.treeData.children.length;
      }
  }
  
};
</script>
<style scoped>
</style>
zlting_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element 学习记录之 elementui的安装
majunze123的博客
06-30 3229
vue-cli2 使用elementui配置安装第一步
ElementUI入门&Vue+ElementUI安装&搭建Node.js环境 &下载&配置环境变量&配置npm全局模块路径和cache默认安装位置&修改npm镜像提高下载速度&运行Node.js项目
qq_73126462的博客
10-24 902
Node.js是一个基于Chrome V8引擎的[JavaScript运行环境]。Node.js使用了一个事件驱动、非阻塞式I/O 的模型。Node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。nodejs让javascript不再局限于放在html的嵌入式脚本，同时可以作为服务端开发的语言。javascript和java除了在名称上优点类型，没有半毛钱关系。
在vue2项目中，使用element ui 的详细步骤
最新发布
zzz1780340的博客
04-28 440
这样一个简单的使用就完成了 ，其实element ui 还有很多细节的地方 ，未来的地方一点点填充吧。：现在你可以在你的Vue组件中使用Element UI提供的各种组件了。例如在组件中 使用菜单。）导入Element UI组件和样式。通常你需要导入整个库或者按需导入组件。这儿我是做了一个菜单之后显示的内容 ， 加了一个 跳转路由和 路由视口。首先，创建菜单组件，在vue文件中创建一个新的组件来呈现菜单，在app.vue 中 使用菜单组件。：在项目的入口文件中（一般是。
小程序（二）使用npm安装weui
camellia的博客
09-26 1142
作为一个不专业的前端，在开发前端的时候我喜欢用一些UI库。HTML页面一般习惯用bootstarp，layui等。VUE项目一般习惯用iview，elementui等。 小程序自然也不例外，我这里使用的是官方推荐的weui组件库，但是如何将其引入项目，这是一个很值得深思的问题。 最终我还是选择了VUE一样的管理方式，使用npm。 Vue的脚手架默认就是支持npm的。但是小程序需要你手动安装。 当然，这部分官方文档是有介绍的，想看官方文档的同学，请移步《npm支持》 写这篇博客的原因就是，官方文档我看不懂，反
【Vue | vue3】Vue2和Vue3中Element-Ui 的安装与使用
【敦厚的曹操】的专栏
03-31 9064
一、找到Vue脚手架项目的文件夹 输入： npm i element-ui -S 二、在脚手架环境中创建项目的components文件夹添加一个组件【EleTest.vue】，把Element-Ui中的组件内容放入 三、App.vue内容 <template> <div> <!-- <School></School> --> <br /> <!-- <Student na
入门指南：Element UI 组件的安装及使用
算命de博客
02-20 1103
随着前端开发技术的不断发展，越来越多的开发者选择使用现成的 UI 组件库来加速项目开发并提升用户体验。其中，Element UI 作为一款基于 Vue.js 的组件库，备受开发者们的青睐。本篇博客将为大家介绍如何安装并使用 Element UI 组件，帮助新手快速上手。
vue 项目安装element
weixin_44371237的博客
01-23 285
css： [v-cloak]{ display: none; } html： <div id="app" v-cloak> {{context}} </div> 在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。 但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令咯。 ...
Element-UI
qq_50048558的博客
10-26 9301
一、Element-UI介绍 element-ui 是饿了么前端出品的基于 Vue.js的 后台组件库，方便程序员进行页面快速布局和构建 Element-UI官方站点：点击此处 https://element.eleme.cn/#/zh-CN 二、Element-UI使用 1.命令行方式安装 创建 一个新的项目 当前项目下打开终端, 安装依赖包 ,执行下面的命令 npm i element-ui -S 打开 main.js , 导入Element-UI 相关资源. main.js是工程的入口文件
Element-UI简介
weixin_64704029的博客
08-07 9489
element-ui是一个前端的ui框架，封装了很多已经写好的ui组件，例如表单组件，布局组件，表格组件.......是一套桌面端组件。Element - 网站快速成型工具。
Element-ui的理解
weixin_49231143的博客
03-23 2万+
总而言之，学就完了！
Electron-Vue-ElementUI环境搭建
ordinary_brony的博客
09-26 1647
一开始Vue生态还尚未完善的时候，Electron和其他框架很难整合。现在Vue生态逐步完善了，整合Electron也方便很多了。注：本篇将默认大家都会使用nodeJS。
通过cmd和npm指令，快速引入element-ui组件
草巾冒小子的博客
05-21 6862
新建vue.js项目，快速引入Element-ui组件的流程简介 范例 - 项目路径截图参考： 流程说明： 新建项目文件夹，命名如： m2-vue-element 启动 cmd ，依次执行命令： cd c:\xxx\vuejs vue init webpack m2-vue-element 之后，进行项目基本配置 cd m2-vue-element npm install n...
Electron 与 vue 框架结合 + element UI框架 快速入门教程
爱我非你莫属的博客
05-21 4479
1. 安装Node npm install -g cnpm --registry=https://registry.npm.taobao.org 2. 安装/升级vue-cli 先执行以下命令，确认下本地安装的vue-cli版本。 vue -V 如果没有安装或者不是最新版，可以执行以下命令安装/升级。 npm install @vue/cli -g 3. 安装Electron 插件 cnpm install -g electron 验证是否安装成功 electron --version 4. 用v
Vue.js UI框架 - element
12-07 3万+
Vue.js UI框架 - element文档：http://element.eleme.io/#/zh-CN/component/installation安装：npm i element-ui -D 配置：http://element.eleme.io/#/zh-CN/component/quickstart引入：import ElementUI from 'element-ui'; import
手把手教你搭建vue+electron+element-ui环境
qq_52405606的博客
04-11 2729
手把手教你搭建vue+electron+element-ui环境
vue安装 搭建 以及在项目中安装elementui
xiasohuai的博客
06-03 2万+
vue安装步骤在安装vue之前，先确保node和npm是否安装。如果安装ok，那么接下来安装vue1.npm install vue (安装vue)2.npm install --global vue-cli （安装vue-cli）因为npm是国外的，使用起来比较慢，使安装vue会出现报错，那么你可以试着 安装 淘宝镜像：1.npm install -g cnpm --registry...
Vue进阶（幺零四）：elementUI 应用 $notify 提示信息中换行问题
IT全栈 华强工作室
03-28 7182
在项目开发过程中，遇到如下用户体验提升需求：需要实现错误提示时根据后台返回错误列表信息，换行展示。 实现方式如下： 通过F12元素查看，在对应的样式中加入white-space:pre-wrap，该样式的主要作用是识别字符串中的换行符"\n"，故需要在待展示的信息字符串中加入相应的换行标识符。在$notify消息提示中，作用于el-notification： .el-notification {w...
vue element-ui的$notify注意点
热门推荐
chiuwingyan的博客
02-22 4万+
我的初衷是把element-ui的$notify通知封装成一个组件，登录成功后调用获取低库存接口，如果获取接口的列表当中库存大于0，则显示这个通知，并且在文本当中提供点击事件。因此，首先想到的就是使用dangerouslyUseHTMLString属性，可以插入html字符串export default { methods: { open12() { this....
引入element-ui步骤（按需引入和全局引入）
caigoutu的博客
08-11 4961
elementui引入的两种方式
静态方法中使用jdbctemplate_JdbcTemplate浅学
06-13
可以在静态方法中使用JdbcTemplate，只需在方法中创建JdbcTemplate对象即可。以下是一个简单的示例： ```java import org.springframework.jdbc.core.JdbcTemplate; import org.springframework.jdbc.datasource....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值