基础知识

多语言

在使用 elementUi-plus 的日期选择组件时，会显示英文，下面定义顶级组件，使用日期等组件显示中文

<script setup lang="ts">
import { ElLoading } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'

const loadingInstance = ElLoading.service({
  background: 'rgba(255,255,255,.5)',
})

const resolve = () => {
  loadingInstance.close()
}
</script>

<template>
  <!-- element-plus多语言组件 -->
  <el-config-provider :locale="zhCn">
    <router-view #default="{ Component }">
      <suspense @resolve="resolve">
        <template #default>
          <component :is="Component" />
        </template>
      </suspense>
    </router-view>
  </el-config-provider>
</template>

文件上传

向军大叔每晚八点在 抖音 和 bilibli 直播

下面是文件上传组件在 vue3 与 element plus 中的使用

• 使用token进行身份验证
• 使用 vue setup 语法

<template>
    <div class="upload-image">
        <el-upload :action="action" :headers="headers" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <div v-if="imageUrl" class="image-container">
                <img :src="imageUrl" class="image-url" />
                <i class="fas fa-window-close fa-2x del-icon" @click.stop="del"></i>
            </div>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
    </div>
</template>

<script setup>
    import { ref } from 'vue'

    const action = import.meta.env.MODE == 'development' ? 'http://houdunren.test/api/upload' : '/api/upload'

    const headers = {
        Authorization: `Bearer ${window.localStorage.getItem('token')}`,
    }

    const imageUrl = ref('http://houdunren.test/attachment/2106/jpxPEU5hCcZKuJv0BsDFt1JIJ0W4hJ64SiJaWBUo.jpg')
    // const imageUrl = ref('')
    const handleAvatarSuccess = (res, file) => {
        imageUrl.value = file.response.data.path
    }

    const beforeAvatarUpload = file => {
        const isJPG = file.type === 'image/jpeg'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
    }

    const del = () => {
        imageUrl.value = ''
    }
</script>

<style lang="scss">
    .upload-image {
        position: relative;
        .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            &:hover {
                border-color: #409eff;
            }
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 150px;
            height: 150px;
            // line-height: 178px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .avatar {
            width: auto;
            // height: 178px;
            display: block;
            background: #f3f3f3;
        }
        .image-container {
            .del-icon {
                position: absolute;
                right: 10px;
                top: 10px;
                color: #fff;
                cursor: pointer;
            }
            .image-url {
                max-height: 200px;
            }
        }
    }
</style>

与tailwindcss冲突

同时使用tailwindcss与element-plus时会出现按钮显示不正确情况。一般情况下可以通过改变css优先级来解决，但如果是使用自动注册组件时则需要以下方式处理。

修改 tailwind.config.js 配置文件，向tailwindcss中添加新的样式

...
plugins: [
    function ({ addBase, theme }) {
      addBase({
        '.el-button': {
          'background-color': 'var(--el-button-bg-color,val(--el-color-white))',
        },
      })
    },
  ],
...