elementUi——适合于Vue的UI框架

2222 发表于 2021/04/10 23:21:30 2021/04/10
【摘要】 简介element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。npm 安装推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。    npm i element-ui -S引入 Element你可以引入整个 Element,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。完整引入在 main....

简介

element-ui是一个ui库,它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。
npm 安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

    npm i element-ui -S

引入 Element

你可以引入整个 Element,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

完整引入
在 main.js 中写入以下内容:

    import Vue from ‘vue’;
    import ElementUI from ‘element-ui’; //引入Element ui
    import ‘element-ui/lib/theme-chalk/index.css’;
    import App from ‘./App.vue’;
    Vue.use(ElementUI); //挂载
    new Vue({
    el: ‘#app’,
    render: h => h(App)
    });

按需引入

借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:

    npm install babel-plugin-component -D

然后,将 .babelrc 修改为:(此处.babelrc在VScode中变更为babel.config.js)

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

Layout 布局:

新建一个文件layout.js

<template>
  <div>
    <el-row>
      <el-col :span="6"><div class="content">11111111111</div></el-col>
      <el-col :span="6"><div class="content">2222222222222</div></el-col>
      <el-col :span="6"><div class="content">333333333333</div></el-col>
      <el-col :span="6"><div class="content">4444444444</div></el-col>
    </el-row>
  </div>
</template>

<script>
export default {};
</script>
// scoped  表示只在当前页面生效
<style  scoped>
.content {
  background-color: chartreuse;
}
</style>

在router.js中引入layout.js
在这里插入图片描述
结果:
在这里插入图片描述
对话框

在保留当前页面状态的情况下,告知用户并承载相关操作。
基本用法
Dialog弹出一个选项,适合需要定制性以上的场景。

新建Dialog.vue

<template>
  <div>
    <el-button type="text" @click="dialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭?")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

  

在router.js中 添加加载

{
            path: '/dialog',
            component: () => import('./element/Dialog')
        }

   

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。