首页 > 其他分享 >Element-快速入门

Element-快速入门

时间:2023-07-04 15:13:13浏览次数:37  
标签:入门 成功 Element 按钮 危险 警告 快速

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <div>
        <el-button>默认按钮</el-button>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
        <el-button type="danger">危险按钮</el-button>
    </div>

    <div style="margin: 20px 0">
        <el-button plain>朴素按钮</el-button>
        <el-button type="primary" plain>主要按钮</el-button>
        <el-button type="success" plain>成功按钮</el-button>
        <el-button type="info" plain>信息按钮</el-button>
        <el-button type="warning" plain>警告按钮</el-button>
        <el-button type="danger" plain>危险按钮</el-button>
    </div>

    <div>
        <el-button round>圆形按钮</el-button>
        <el-button type="primary" round>主要按钮</el-button>
        <el-button type="success" round>成功按钮</el-button>
        <el-button type="info" round>信息按钮</el-button>
        <el-button type="warning" round>警告按钮</el-button>
        <el-button type="danger" round>危险按钮</el-button>
    </div>
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app"
    })
</script>
</body>
</html>

 

标签:入门,成功,Element,按钮,危险,警告,快速
From: https://www.cnblogs.com/Karl-hut/p/17525791.html

相关文章

  • rust入门(一)
    1、安装Rust无论使用何种系统,均可以根据Rust官方网站提供的rustup-init工具完成Rust的安装.rustup-init下载地址:  https://www.rust-lang.org/zh-CN/tools/install根据系统提示进行安装,安装完成后,验证是否安装成功rustc--version提示:如果你使用的是Linux......
  • kernel pwn入门
    LinuxKernel介绍Linux内核是Linux操作系统的核心组件,它提供了操作系统的基本功能和服务。它是一个开源软件,由LinusTorvalds在1991年开始开发,并得到了全球广泛的贡献和支持。Linux内核的主要功能包括进程管理、内存管理、文件系统、网络通信、设备驱动程序等。它负责管理......
  • CakePHP教程_编程入门自学教程_菜鸟教程-免费教程分享
    教程简介CakePHP是一个运用了诸如ActiveRecord、AssociationDataMapping、FrontController和MVC等著名设计模式的快速开发框架。该项目主要目标是提供一个可以让各种层次的PHP开发人员快速地开发出健壮的Web应用,而又不失灵活性。CakePHP是一个基于PHP,免费且开源的迅速发展框......
  • springMVC入门
    定义Controller//定义Controller//使用@Controller定义bean@ControllerpublicclassUserController{//设置当前操作的访问路径@RequestMapping("/save")//设置当前操作的返回值类型@ResponseBodypublicStringsave(){System.out.p......
  • Python递归算法从入门到精通
    递归是一种常见且重要的算法设计和解决问题的方法。它通过将问题分解为规模更小的子问题,并通过解决子问题来解决原始问题。递归算法的关键在于找到递归终止条件和递归调用的方式。本文将介绍递归的基本原理、应用场景,并通过相关的Python代码示例详细讲解递归算法的使用。一、递归......
  • Vue-快速入门
     <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divid="app"><inputv-model="username">......
  • 快速开租建站
    题目描述当前IT部门支撑了子公司颗粒化业务,该部门需要实现为子公司快速开租建站的能力,建站是指在一个全新的环境部署一套IT服务。每个站点开站会由一系列部署任务项构成,每个任务项部署完成时间都是固定和相等的,设为1。部署任务项之间可能存在依赖,假如任务2依赖任务1,那么等任务1部......
  • element-ui弹出框模板
    <el-dialogwidth="650px"append-to-body:show-close="false":modal="false":visible.sync="dialogRegisterVisible"><el-formv-show="!isLogin"ref......
  • notepad++如何快速格式化代码
     2023-03-25 4505 广东举报简介: notepad++如何快速格式化代码Notepad++可以使用插件来快速格式化代码,以下是一种使用插件进行代码格式化的方法:打开Notepad++编辑器,并打开需要格式化的代码文件。在菜单栏中选择“插件”->“PluginManager”->“ShowPluginManag......
  • element-ui表格模板
    <template><divclass="container"><divclass="breadcrumb"><el-breadcrumbseparator-class="el-icon-arrow-right"><el-breadcrumb-item>个人中心</el-breadcrumb-item>&......