vue3与element plus使用详记

本文记录个人开发中从搭建框架到开发业务等记录,记录开发过程中的想法与思维,方便后续进行迭代与反省

一、vue3调用子组件函数

对比与vue2,vue3调用子组件函数时注意事项

子组件函数需要使用defineExpose进行函数暴露

JavaScript
 //子组件
 import { defineExpose } from 'vue';
 const son = () => {};
 defineExpose({
     son,
 })

二、将loading与request封装成hooks实例

(1)、提供loading指令变量
(2)、提供封装好的request或者未封装的都可

JavaScript
import { ref, reactive } from 'vue';

/**
 * 请求与dom的loading关联,非全局loading
 * @param {* 请求} service
 * @param {* 形参} option
 * @returns Object
 */
const useBHLoading = (service, option) => {
  const loading = ref(false);
  const res = reactive({});
  // eslint-disable-next-line no-underscore-dangle
  const request = async (url, arg) => {
    loading.value = true;
    return service(url, arg).then((_res) => {
      console.log('_res = ', _res);
      res.payload = _res.payload;
    }).catch((err) => {

    }).finally(() => {
      loading.value = false;
      // eslint-disable-next-line no-underscore-dangle
      // const _timer = setTimeout(() => {
      //   loading.value = false;
      //   clearTimeout(_timer);
      // }, 2000);
    });
  };

  return {
    loading,
    request,
    res,
  };
};

export default useBHLoading;

使用实例:

JavaScript
import useBHLoading from '@/hooks/requset-loading-hook';
import http from '@/utils/http/index';
// http.get为请求
const _useBHLoading = useBHLoading(http.get);
// loading 控制loading
//res 请求返回值
// requst 请求
const { loading, res, request } = _useBHLoading;
// 请求
await request(url, { isLoading: false });

html
    <el-table v-YniiLoading="loading" :data="res.payload?.data" style="width: 100%" 
    </el-table>

三、结合分页hooks使用

JavaScript
import { reactive } from 'vue';

const useBHPagination = () => {
  const pagination = reactive({
    currentPage: 0,
    pageSize: 0,
    total: 0,
    pageSizes: [100, 200, 300, 400],
  });

  const sizeChange = (data) => {
    pagination.currentPage = data.page;
    pagination.pageSize = data.page_size;
    pagination.total = data.total;
  };

  const setPageSizes = (list) => {
    pagination.pageSizes = list || [100, 200, 300, 400];
  };

  return {
    pagination,
    sizeChange,
    setPageSizes,
  };
};

export default useBHPagination;

JavaScript
import useBHPagination from '@/hooks/pagination-hooks';
const { pagination, sizeChange } = useBHPagination();

await request(props.url, { isLoading: false });
sizeChange(res.payload?.pagination);

html
<el-pagination
    v-model:current-page="pagination.currentPage"
    v-model:page-size="pagination.pageSize"
    small="small"
    :hide-on-single-page="true"
    :page-sizes="pagination.pageSizes"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pagination.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    />

四、自定义loading指令,替换原先图标改成自定义布局

(1)、首先提供一个花里胡哨布局的loading
(2)、其次写个指令与dom进行关联操作的函数
(3)、最后两者结合,导出去
(4)、最最后main里面声明下指令

甲、制造轮毂-指令与dom

JavaScript
import { createApp } from 'vue';
import { addClass, removeClass } from '@/utils/index';

const relativeCls = 'relative';

export default function createLikeDirective(Comp) {
  function append(el) {
    const { name } = Comp;
    const style = getComputedStyle(el);
    if (['absolute', 'fixed', 'relative'].indexOf(style.position) === -1) {
      addClass(el, relativeCls);
    }
    el.appendChild(el[name].instance.$el);
  }

  function remove(el) {
    const { name } = Comp;
    removeClass(el, relativeCls);
    el.removeChild(el[name].instance.$el);
  }
  return {
    mounted(el, binding) {
      const app = createApp(Comp);
      const instance = app.mount(document.createElement('div'));
      const { name } = Comp;
      if (!el[name]) {
        // eslint-disable-next-line no-param-reassign
        el[name] = {};
      }
      // eslint-disable-next-line no-param-reassign
      el[name].instance = instance;
      const title = binding.arg;
      if (typeof title !== 'undefined') {
        instance.setTitle(title);
      }

      if (binding.value) {
        append(el);
      }
    },
    updated(el, binding) {
      const title = binding.arg;
      const { name } = Comp;
      if (typeof title !== 'undefined') {
        el[name].instance.setTitle(title);
      }
      if (binding.value !== binding.oldValue) {
        // eslint-disable-next-line no-unused-expressions
        binding.value ? append(el) : remove(el);
      }
    },
  };
}

乙、制造轮辋-dom操作与布局结合

JavaScript
// loading花里胡哨布局
import Loading from '@/components/Loading/index.vue';
// dom操作
import createLikeDirective from '@/directive/create-like-directive';

const loadingDirective = createLikeDirective(Loading);

export default loadingDirective;

丙、制造轮胎-搞一个花里胡哨的loading

html
<template>
    <div class="ynii-loading-box flex items-center justify-center p-5">
        <div class="la-ball-atom">
        <div>
            <img class="logo select-none" src="../../assets/logo.png" alt="logo" />
        </div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    </div>
</template>
<style scoped>

.ynii-loading-box{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: var(--black-color-10);
  transform: translate3d(-50%, -50%, 0);
}

.logo{
  width: 100%;
  height: 100%;
}

.la-ball-atom, .la-ball-atom > div {
  position: relative;
  box-sizing: border-box;
}

.la-ball-atom {
  display: block;
  width: 100px;
  height: 100px;
  font-size: 0;
  color: var(--primary-color);
}

.la-ball-atom.la-dark {
  color: #333;
}

.la-ball-atom > div {
  display: inline-block;
  float: none;
  background-color: currentColor;
  border: 0 solid currentColor;
}

.la-ball-atom > div:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 60%;
  height: 60%;
  background: #fff;
  border-radius: 100%;
  transform: translate(-50%, -50%);
  animation: ball-atom-shrink 4.5s infinite linear;
}

.la-ball-atom > div:not(:nth-child(1)) {
  position: absolute;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: none;
  animation: ball-atom-zindex 1.5s 0s infinite steps(2, end);
}

.la-ball-atom > div:not(:nth-child(1))::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  margin-top: -5px;
  margin-left: -5px;
  background: currentColor;
  border-radius: 50%;
  content: '';
  opacity: .75;
  animation: ball-atom-position 1.5s 0s infinite ease, ball-atom-size 1.5s 0s infinite ease;
}

.la-ball-atom > div:nth-child(2) {
  animation-delay: .75s;
}

.la-ball-atom > div:nth-child(2)::before {
  animation-delay: 0s, -1.125s;
}

.la-ball-atom > div:nth-child(3) {
  transform: rotate(120deg);
  animation-delay: -.25s;
}

.la-ball-atom > div:nth-child(3)::before {
  animation-delay: -1s, -.75s;
}

.la-ball-atom > div:nth-child(4) {
  transform: rotate(240deg);
  animation-delay: .25s;
}

.la-ball-atom > div:nth-child(4)::before {
  animation-delay: -.5s, -.125s;
}

.la-ball-atom.la-sm {
  width: 16px;
  height: 16px;
}

.la-ball-atom.la-sm > div:not(:nth-child(1))::before {
  width: 4px;
  height: 4px;
  margin-top: -2px;
  margin-left: -2px;
}

.la-ball-atom.la-2x {
  width: 64px;
  height: 64px;
}

.la-ball-atom.la-2x > div:not(:nth-child(1))::before {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
}

.la-ball-atom.la-3x {
  width: 96px;
  height: 96px;
}

.la-ball-atom.la-3x > div:not(:nth-child(1))::before {
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
}

/*
 * Animations
 */
@keyframes ball-atom-position {
  50% {
    top: 100%;
    left: 100%;
  }
}
@keyframes ball-atom-position {
  50% {
    top: 100%;
    left: 100%;
  }
}
@keyframes ball-atom-position {
  50% {
    top: 100%;
    left: 100%;
  }
}
@keyframes ball-atom-position {
  50% {
    top: 100%;
    left: 100%;
  }
}
@keyframes ball-atom-size {
  50% {
    transform: scale(.5, .5);
  }
}
@keyframes ball-atom-size {
  50% {
    transform: scale(.5, .5);
  }
}
@keyframes ball-atom-size {
  50% {
    transform: scale(.5, .5);
  }
}
@keyframes ball-atom-size {
  50% {
    transform: scale(.5, .5);
  }
}
@keyframes ball-atom-zindex {
  50% {
    z-index: 10;
  }
}
@keyframes ball-atom-zindex {
  50% {
    z-index: 10;
  }
}
@keyframes ball-atom-zindex {
  50% {
    z-index: 10;
  }
}
@keyframes ball-atom-zindex {
  50% {
    z-index: 10;
  }
}
@keyframes ball-atom-shrink {
  50% {
    transform: translate(-50%, -50%) scale(.8, .8);
  }
}
@keyframes ball-atom-shrink {
  50% {
    transform: translate(-50%, -50%) scale(.8, .8);
  }
}
@keyframes ball-atom-shrink {
  50% {
    transform: translate(-50%, -50%) scale(.8, .8);
  }
}
@keyframes ball-atom-shrink {
  50% {
    transform: translate(-50%, -50%) scale(.8, .8);
  }
}
</style>

丁、组装出货-`main`里面声明

JavaScript
import loadingDirective from '@/directive/loading';
app.directive('YniiLoading', loadingDirective);

戍、这个就是造轮子

五、记录一个在tabs中使用table时，`el-table__empty-text`上级在无限增高

tabs中嵌套table涵盖分页
全程使用flex布局
el-tab-pane中设置样式h-full
之后el-table__empty-block就开始无限极增高,源码js设置高度
在代码段中没有复现出来

解决方法(与原版本一模一样)

css
.el-table__empty-block{
    height: 100% !important;
  }

  .el-scrollbar__view{
    height: 100%;
  }

目录