Element | 快捷组件样式

最新推荐文章于 2026-05-11 14:34:28 发布

原创最新推荐文章于 2026-05-11 14:34:28 发布 · 1k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #vue.js

VSC 同时被 3 个专栏收录

5 篇文章

订阅专栏

Element

3 篇文章

订阅专栏

1 篇文章

订阅专栏

一、Element-UI

Element-UI是一个基于Vue.js的桌面端组件库，提供了丰富的UI组件和工具，旨在帮助开发者快速构建现代化、响应式的Web应用。它拥有高度的可定制性和易用性，是Vue.js开发者不可或缺的前端框架之一。

Element组件官网：组件 | Element

二、npm安装

// 推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S

三、快捷组件

3.1 导航栏

//导航栏：包含一级、二级选项
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3">消息中心</el-menu-item>
  <el-menu-item index="4">订单管理</el-menu-item>
</el-menu>

效果图：

3.2 侧边栏

// 侧边栏：可展开收起
  <el-col :span="2">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
       <el-menu-item index="0">
        <i class="el-icon-menu"></i>
        <span slot="title">系统名称</span>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>

效果图：

3.3 中间部分

HTML

// 带图片卡片，悬浮有阴影
<el-row>
  <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
    <el-card :body-style="{ padding: '0px' }" shadow="hover">
      <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
      <div style="padding: 14px;">
        <span>好吃的汉堡</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
          <el-button type="text" class="button">操作按钮</el-button>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>

CSS

 .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

JavaScript

data() {
    return {
      currentDate: new Date()
    };
  }

效果图：

3.4 弹窗

HTML

<el-row>
  <el-col :span="4" v-for="(o, index) in 4" :key="o" :offset="index > 0 ? 2 : 0">
    <el-card :body-style="{ padding: '0px' }" shadow="hover">
      <img :src="images[index]" class="image" />
      <div style="padding: 14px;">
        <span>{{ names[index] }}</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
<template><hr/>
  <el-button type="primary" size="mini"  round  @click="open(index)" >修改</el-button>
</template>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>

CSS

data() {
      return {
        images: Array.from({ length: 12 }, () =>  
        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'  
      ),  
         names: Array.from({ length: 12 }, (_, index) => `风景${index + 1}`),
      currentDate: new Date().toLocaleString(), 
      };
    },
    methods: {
       open(index) {  
      this.$prompt('请输入修改的图片URL', '提示', {  
        confirmButtonText: '确定',  
        cancelButtonText: '取消',  
        inputPlaceholder: '请输入新的图片URL',  
      }).then(({ value }) => {  
        if (value) {  
          this.$set(this.images, index, value); // 更新图片URL  
          this.$message({  
            type: 'success',  
            message: '修改成功！',  
          });  
        }  
      }).catch(() => {  
        this.$message({  
          type: 'info',  
          message: '取消输入',  
        });  
      });  
    },  
      
    }

效果图：

四、完整代码

HTML

 <el-col :span="3">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
       <el-menu-item index="0">
        <i class="el-icon-menu"></i>
        <span slot="title">系统名称</span>
      </el-menu-item>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  <el-col :span="20">
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
  <el-menu-item index="1">处理中心</el-menu-item>
  <el-submenu index="2">
    <template slot="title">我的工作台</template>
    <el-menu-item index="2-1">选项1</el-menu-item>
    <el-menu-item index="2-2">选项2</el-menu-item>
    <el-menu-item index="2-3">选项3</el-menu-item>
    <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
    </el-submenu>
  </el-submenu>
  <el-menu-item index="3">消息中心</el-menu-item>
  <el-menu-item index="4">订单管理</el-menu-item>
</el-menu>
<el-row>
  <el-col :span="4" v-for="(o, index) in 4" :key="o" :offset="index > 0 ? 2 : 0">
    <el-card :body-style="{ padding: '0px' }" shadow="hover">
      <img :src="images[index]" class="image" />
      <div style="padding: 14px;">
        <span>{{ names[index] }}</span>
        <div class="bottom clearfix">
          <time class="time">{{ currentDate }}</time>
<template><hr/>
  <el-button type="primary" size="mini"  round  @click="open(index)" >修改</el-button>
</template>
        </div>
      </div>
    </el-card>
  </el-col>
</el-row>
  </el-col>

CSS

.time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

JavaScript

data() {
      return {
        images: Array.from({ length: 12 }, () =>  
        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'  
      ),  
         names: Array.from({ length: 12 }, (_, index) => `风景${index + 1}`),
      currentDate: new Date().toLocaleString(), 
      };
    },
    methods: {
       open(index) {  
      this.$prompt('请输入修改的图片URL', '提示', {  
        confirmButtonText: '确定',  
        cancelButtonText: '取消',  
        inputPlaceholder: '请输入新的图片URL',  
      }).then(({ value }) => {  
        if (value) {  
          this.$set(this.images, index, value); // 更新图片URL  
          this.$message({  
            type: 'success',  
            message: '修改成功！',  
          });  
        }  
      }).catch(() => {  
        this.$message({  
          type: 'info',  
          message: '取消输入',  
        });  
      });  
    },  
      
    }

效果图：