element-UI

2023-09-27 17:25:10

常用组件

vue-admin里封装的组件，插件等，统一注册在framework/vab/index.js里，main.js再导入framework/vab，就可以全局使用framework/vab里的内容了

如果想全局使用自己封装的组件，可以放到vab/components里，比如多个页面需要用到的头像组件Avatar，这里有

另，也可以直接使用element-UI的组件，放在了vab/plugins里，全局的样式方法注册在framwork/plugins/vab，里面是对element-UI的一些方法重新封装注册，简便写法，直接在前面加base+大写首字母

vab.js除了element-UI外，还糅杂了store，token等，相当于框架内的main.js。因为framework/vab/index.js导入注册框架除了i18n和store的内容，main.js又导入了framework/vab/index.js，所以最后，其实都是注册到了main.js，不过还是不建议乱注册，不然很难找。

ps：token注册也在这里可以直接this.$baseToken( )获取token，csy-vue去掉了，只剩下框架里的插件的注册，之后如果需要getToken考虑直接在main.js注册，更加统一，符合阅读习惯，framwork/plugins/vab.js就只放element.UI的全局再封装方法。

import Vue from 'vue'
import { loadingText, messageDuration } from '@/config'
import { Loading, Message, MessageBox, Notification } from 'element-ui'
import { dependencies } from '../../../../package.json'

还有，framework/extra里有VabChart，如果要使用得自己去注册，可以和icon一样直接注册在framework/vab/index.js里

最后，样式变量在framework/style/variables里；全局样式定义在framework/style/vab.scss里

简单来说，i18n，store，token等方法的注册，直接放在main.js，组件相关的就不再注册在main.js了，直接在框架里的对应位置注册（自定义组件直接放在vab/components，是可以不用每一个都得去注册的，framework/vab/index.js做了一个封装可以自动导入

// 加载插件
const Plugins = require.context('./plugins', true, /\.js$/)
Plugins.keys().map(Plugins)


// 加载组件
const Components = require.context('.', true, /\.vue$/)
Components.keys()
.map(Components)
.forEach((item) => {
if (item.default.name && item.default.name !== 'Layouts')
Vue.component(item.default.name, item.default)
})

理论上js，也可以像上一面一样封装，但是因为js里，可能一个文件包含多个方法，注册一般是注册常用方法，方便使用，还是直接放在main.js，而且剥离了组件，其实main.js内容少了很多，不影响阅读，查看非常方便，如果项目再大型，可以考虑再封装试试。

自定义组件写在vab/components，自定义样式写在framework/style/vab.scss，vab/index.js封装了注册，自定义后，不用再注册

elementUI方法再封装且注册在framwork/plugins/vab.js，可以到在这个文件看方法名

element-UI文档：

https://element-plus.gitee.io/#/zh-CN/component/form

标签，属性，事件，方法

布局

x轴el-row和row-col

常用在x轴排列，24格分割，还可以响应式布局5阶

:gutter="10"
:xs="8" :sm="6" :md="4" :lg="3" :xl="1"

靠左，右，上，下VabQueryForm

<VabQueryForm>
  <VabQueryFormLeftPanel></VabQueryFormLeftPanel>
<VabQueryForm>

触发事件

点击el-button

@click，@mouseenter，@mouseleave

常用plain

type五种：primary，success，info，warning，danger

放上去会变色，点击后保持放上去的颜色，再点击别的地方，颜色会变回来

和切换框不同：切换框用按钮结合单选框组

登录按钮带加载中：:loading=“true”

大小：medium（默认）、small、mini

hover(el-popover)

hover或者点击显示小对话框

@show显示时 @hide @after-enter显示动画播放完毕 @after-leave隐藏动画

双向绑定

选择el-radio

@change

el-radio

单选框：border（可以加size）

el-check-box :indeterminate="isIndeterminate"全选

切换框（按钮形式结合单选框组）

// radio被选中的label值

<el-radio-group v-model="radio">
  <el-radio-button label="上海"></el-radio-button>
  <el-radio-button label="北京"></el-radio-button>
  <el-radio-button label="广州"></el-radio-button>
  <el-radio-button label="深圳"></el-radio-button>
</el-radio-group>

还有各种选择期：下拉，级连，switch，slider，时间，日期，评分等，都和el-radio一样的道理

输入el-input

@blur，@focus，

@change值改变，失去焦点，按下回车触发（常用于提交请求）搜索框，提交用户常需更改的内容

@input值改变触发

@clear

<el-input
  placeholder="请输入内容"
  v-model="input">
</el-input>

clearable

show-password

debounce=“300”去抖延时，使用change后，大网站，防止受频繁请求攻击，考虑

上传文件图片等el-upload

slot方式：把类似下面的代码（template #xxxx），放在两个标签中间，指定放在标签里面的哪个位置，相当于开槽，prefix内前，suffix内后，prepend外前，append外后

带输入建议 el-autocomplete :fetch-suggestion

表单el-form

el-form，el-form-item等形式

el-form上加：rules=“rules”

el-form-item的；label（小标题）和prop（用于rules）

rules:{ prop值:[ { }, { } ] }

后台管理，用到很多表单，可以封装到rules.js中，但其实不是很建议，因为大部分表单的prop都有对应的实体，大部分都是不同的，虽然判断的内容差不多，但是prop的值不同，这样rules.js就很多，再导入到页面，不方便页面的阅读，可以考虑，将复杂多样的验证或用到比较多的放到rules里作为模版，比如手机号码验证，常规的required和blur即验证。

表单经常会再结合上面选择和输入等多种形式，放于表单，用于post请求

验证函数是一个promise，可以传入回调函数（回调前，记得把this赋值到别的变量比如that上），验证成功即会fulfilled，执行回调函数的内容，如果是提交post请求等异步操作，记得要用async-await

this.$refs[formName].validate( (valid) => { } )

如果formName确定的话，建议用object.的形式，[’ ']容易忘记加双引号

遮罩

加载中<el-table v-loading=“loading”

drawer遮罩

iframe：SfIframe封装示例

<template>
    <div class="iframe-show" >
        <div class="iframe-title">{{title}}
          <vab-remix-icon slot="prefix" class="iframe-setwin" icon="close-fill" @click="close"/>
        </div>

       <div class="iframe-container">
        <slot/>		// 用槽封装组件，放父组件的内容
       </div>
    </div>
</template>

<script>
  export default {
    name: 'SfIframe',
    props: {
        title:{
            type:String,
            default:'',
            required: true,
        }
    },
    methods:{
      close() {
        this.$emit('close')		// 将子组件的消息传递给父组件
      }
    }
  }
</script>

使用

<sf-iframe v-if="iframeVisible" title="编辑" @close="closeiframe">

奇怪名字为什么不一样，之后测试后，再看看能不能统一

弹框互动

置于页面最上方

消息提示（自动消失）

this.$notify ( object ) 边角

this.$message ( object ) 正上方小横条

弹出窗口（有确定按钮）

一般这种弹出窗口是需要对接后台数据的

$confirm then传入确认后需要执行的回调函数this和异步（小弹框）

				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

el-dialog大部分时候里面嵌套了表单了，防止用户误点击旁边的操作，:close-on-click-modal = ‘false’

但el-dialog放在iframe里，要再加 :append-to-body = ‘true’

美观展示

折叠面板

走马灯

时间线，分割线

卡片（其实就是加了阴影）

图标

elementUI

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

VabIcon

<VabIcon slot="prefix" icon="smartphone-line" />

AliIcon

<AliIcon :type="'jinggao1'" :color="'#ccc'" size="80" width="85" height="85" />

图表

表格:data = [ { }, ]

<el-table ref="tableSort" v-loading="payList.isLoading" height="418" :data="payList.list">
  <el-table-column align="center" label="排名" prop="index" width="55">
    // 插槽
    <template #default="{ $index }">
			{{ $index + 1 }}
    </template>
  </el-table-column>
  <el-table-column align="center" label="商品名称" prop="title" />
  <el-table-column align="center" label="支付金额" prop="num" />
</el-table>

VabChart：data在options里

<VabChart :options="options" theme="vab-echarts-theme" style="width:100%" />

码农公寓