UI 框架:element-ui(二)-阿里云开发者社区

UI 框架:element-ui(二)

2024-10-16 14

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在当今快速发展的前端开发领域，用户界面的设计和交互体验日益成为软件成功的关键因素之一。Element UI，作为一款基于Vue.js的组件库，以其精美的界面和丰富的功能受到了广泛的关注与应用。它为开发者提供了一整套高质量的组件，帮助他们快速构建具有现代感的应用程序。Element UI不仅注重美观的设计，还提供了良好的文档支持和社区活跃度，使得开发者能够轻松上手并解决实施过程中的各种问题。在这篇文章中，我们将深入探讨Element UI的基本特点、安装步骤，以及如何利用其强大的组件系统高效地构建用户友好的界面。无论您是初学者还是有经验的开发者，这篇文章都将为您开辟一条通向更高效开发的道路。

引言

在当今快速发展的前端开发领域，用户界面的设计和交互体验日益成为软件成功的关键因素之一。Element UI，作为一款基于Vue.js的组件库，以其精美的界面和丰富的功能受到了广泛的关注与应用。它为开发者提供了一整套高质量的组件，帮助他们快速构建具有现代感的应用程序。

Element UI不仅注重美观的设计，还提供了良好的文档支持和社区活跃度，使得开发者能够轻松上手并解决实施过程中的各种问题。在这篇文章中，我们将深入探讨Element UI的基本特点、安装步骤，以及如何利用其强大的组件系统高效地构建用户友好的界面。无论您是初学者还是有经验的开发者，这篇文章都将为您开辟一条通向更高效开发的道路。

安装

在cmd中也可以

yarn add element-ui
npm i element-ul --save

引用

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

卸载

npm unstall element-ui

如果您使用 Volar，请在 jsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

第一个简单使用

第一个简单的使用

```HTML
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <el-button @click="visible = true">按钮</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>欢迎使用 Element</p>
        </el-dialog>
    </div>
</body>
<!-- 先引入 Vue -->
<script src="./vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return { visible: false }
        }
    })
</script>

</html>
```

引入和使用

yarn add element-ui

下载完成以后，在main.js 里面注册使用

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
// Vue.use() .... 全局使用 
Vue.use(ElementUI)
new Vue({
  render: h => h(App),
}).$mount('#app')
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

app.vue

<template>
  <div>
    <!-- 因为template里面只能有一个根元素，官方这里拷过来以后在外面加了一层div标签包起来 -->
    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio: "1"
    };
  }
};
</script>

提示信息

this.$message({
                message: "delete successfully",
                type: "success"
            })

this.$message.warning("hello,world!");

折叠菜单

<template>
    <!--  设置高度为 100% -->
    <el-container style="height: 100%;">
        <el-aside 
         动态 显示 宽度
        :width="sideWidth + 'px'"
        background
        style="background-color: rgb(249, 250, 252)">
            <el-menu 
            :default-openeds="['1']" 
            高度设置为100%
            style="height: 100%;
            横坐标 超出  hidden
            overflow-x: hidden;"
            text-color="#fff"
            background-color="rgb(35, 38, 44)" 
            正在活动  的 导航 颜色
            active-text-color="#ffd04b"
             动画关闭
                :collapse-transition="false"
               menu 的 绑定 显示和不 显示 
                :collapse="isCollapse">
                <!--  在 el-menu 下面 -->
                创建一个 头部的  导航
                <div style="height: 60px; line-height: 60px; text-align: center;">
                    <img src="@/assets/logo.png" style="width: 20px; position: relative; top:5px;margin-right:8px">
                    文字绑定  显示和 不显示
                    <b style="color:white" v-show="logoTextShow">后台管理系统</b>
                </div>

<script>
export default {
    data() {
        const item = {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        };
        return {
            //   填满
            tableData: Array(10).fill(item),
            //  收缩按钮的名称
            collapseBtnClass: 'el-icon-s-fold',
            //   open and close 
            isCollapse: false,
            sideWidth: 200,
            logoTextShow: true,
        }
    },
    methods: {
        switchMenu() {
            //  点击 取反
            this.isCollapse = !this.isCollapse
            //  如果 为真  则 点击 之后
            if (this.isCollapse) {
                //  宽度设置为 64 
                this.sideWidth = 64;
                //   点击 图标 的 改变
                this.collapseBtnClass = 'el-icon-s-unfold'
                //  文字显示 与 不显示 
                this.logoTextShow = false
            } else {
                this.sideWidth = 200;
                this.collapseBtnClass = 'el-icon-s-fold'
                this.logoTextShow = true
            }
        }
    }
};
</script>

表单验证

添加 prop
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="stuName">
          <el-input v-model="form.stuName" autocomplete="off"></el-input>
        </el-form-item>

rules

rules: {
        stuName: [
          { required: true, message: "请输入姓名", trigger: "blur" },
        ],

方法

add() {
      this.$refs.form.validate(valid => {
        if (valid) {
          addStu(this.form).then((res) => {
            if (res) {
              this.$message.success("添加成功")
            } else {
              this.$message.error("添加失败")
            }
          })
        }
      })
    },

自己写验证方法

绑定

1 为男，0 为女

<el-table-column label="Sex" prop="stuSex" :formatter="(row) => row.stuSex == 1 ? '男' : '女'">
      </el-table-column>

引入使用

```Plain Text
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')


```

绑定一些属性

<el-dialog v-model="dialogFormVisible" :title="state ? '添加学生信息': '修改学生信息'" width="600px" ref="qwe">

很多属性

// span 可以改变 属性多少
<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>

输入框

clearable>   可清楚
 show-password  密码框
  suffix-icon="el-icon-date"  和 prefix-icon

标签

closable
<el-tag
  v-for="tag in tags"
  :key="tag.name"
  closable
  :type="tag.type">
  {{tag.name}}
</el-tag>

一些操作

过滤实现

const getData = (params) => {
    students(params).then(res => {
        if (res.data.status === 200) {
            total = res.data.total
            tableData.value = res.data.data
            tableData.value.forEach(item => {
                //   一般不修改 原数据，  用 另一个变量 来 代替
                //  i =1 ? true  （则为这个） ： （否则为这个）
                //  i =1 ? true  （则为这个） ： 否则   i==2   ? true : false
                //  
                item.sex === 1 ? item.sex_text = '女' : item.sex_text = '男';
                item.state === "1" ? item.state_text = '已入学'
                    : item.state === "2" ? item.state_text = '未入学'
                        : item.state_text = '休学中'
            })
        }
    })
}

el-table的使用

加在 el-table 属性里面
@row-click=handleRow
点击每行 可以控制输出每行 的 数据

stripe  加 上之后会有 条纹 
border  加上 有表格


排序
:default-sort = "{prop: 'date', order: 'descending'}"   desc  asc

:format

el-table-cloumn

可在里面加图标
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
      
  鼠标移入得到更多的信息
        <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>

formatter

在 需要 绑定的数据 上 绑定  :formatter=test(row)
test(row){
conso.log(row)
if(row.status==0){
return "未处理") ....

懒加载

    <el-image v-for="url in urls" :key="url" :src="url" lazy></el-image>

深度样式

>>>

如果项目style使用的是css 原生样式,那么你可以直接使用 >>> 穿透修改

::v-deep在预处理器 scss 、sass、less 比较通用


<style scoped>
/*编译前*/
.a{
 ::v-deep .b { 
  color:blue
 }
} 
.a ::v-deep .b {
 color:blue
}
 
/*编译后*/
.a[data-v-fsdfg9] .b { color:blue}
</style>

.a{
  ::v-deep .b{
    width: 300px;
    border:4px solid red;
  }
}