Element ui&图标、按钮、超链接、单选框

ElementUI&Vant ui

基于Vue的一套桌面端的组件库，提前封装好的UI模版，方便开发者快速搭建一个网站前端界面。

官网：https://element.eleme.cn/#/zh-CN/component/installation

先创建vue工程，然后再elemntui

安装ElementUI

1.安装vue环境

2.执行vue ui

vue -V

vue ui

1点击小房子

2.创建vue的项目

3.设置项目存放路径

4.点击按钮

5.输入工程名称---git

6.手动配置项目

• Babel
• Router
• Vuex
• history

7.等待项目创建成功

8.给项目安装ElementUI插件

9.搜索elementUI--完成安装

10.启动项目

11.导入到idea里面

npm run serve

ElementUI图标

提供了一套常用的图标集合

<i class="el-icon-edit"></i>

el-icon-iconName 官方定义的图标名称：直接官网查找对应的使用即可

ElementUI按钮

是ElementUI提供的常用组件

 <el-button>默认按钮</el-button>

可以使用type、plain、round、circle属性对按钮进行修饰

type设置按钮的样式：

 <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>

plain减弱背景颜色

  <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>

round:按钮设置圆角

<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>

circle将按钮设置成圆形：

 <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>

添加icon属性：

 <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>

disabled:设置按钮的使用状态

loading属性设置加载中的效果：

<template>
    <div>
        <el-button type="danger" icon="el-icon-delete" circle @click="tset":loading="loading"></el-button>
    </div>
</template>

<script>
    export default {
        name: "Test",
        methods:{
            tset(){
                this.loading=true;
                setTimeout(()=>{
                    this.loading=false
                },3000)
            }
        },
        data(){
            return{
                loading:false
            }
        }
    }
</script>

<style scoped>

</style>

size属性设置按钮的大小：

medium small mini

ElementUI超链接

Link：文字超链接

el-link

   <el-link href="https://www.baidu.com" target="_blank">Element</el-link>

disable:设置超链接不可用

underline:设置下划线

        <el-link href="https://www.baidu.com" target="_blank" :underline="underline">Element</el-link>

<script>
    export default {
        name: "Test",
        methods:{
            tset(){
                this.loading=true;
                setTimeout(()=>{
                    this.loading=false
                },3000)
            }
        },
        data(){
            return{
                loading:false,
                underline:false
            }
        }
    }
</script>

设置图标：

  <el-link href="https://www.baidu.com" target="_blank" :underline="underline" icon="el-icon-user-solid">Element</el-link>

ElementUI单选框

使用：

el-radion

使用:数据绑定

v-model:

@change=""绑定切换的事件

<template>
    <div>
        <el-radio v-model="radio" label="1" @change="change">备选项</el-radio>
        <el-radio v-model="radio" label="2" @change="change">备选项</el-radio>
    </div>
</template>

<script>
    export default {
        name: "Test",
        methods:{
            change(){
                console.log("选项的序号是"+this.radio)
            }
        },
        data(){
            return{
                loading:false,
                underline:false,
                radio:"2"
            }
        }
    }
</script>

<style scoped>

</style>