vue3中使用element-plus的一些坑
一、国际化问题
日期选择组件
el-date-picker无法显示中文问题
1、[官网解决方案](https://links.jianshu.com/go?to=https%3A%2F%2Felement-
plus.gitee.io%2F%23%2Fzh-CN%2Fcomponent%2Fi18n)
方案代码摘录： 自定义configProvider
import { createApp,ref } from 'vue'
import App from './App.vue'
import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'
import ElementPlus from 'element-plus'
ElementPlus.useLang = (app, ref, locale) => {
const template = (str, option) => {
if (!str || !option) return str
return str.replace(/\{(\w+)\}/g, (_, key) => {
return option[key]
})
}
// 注入全局属性,子组件都能通过inject获取
app.provide('ElLocaleInjection', {
lang: ref(locale.name),
locale: ref(locale),
t: (...args) => {
const [path, option] = args
let value
const array = path.split('.')
let current = locale
for (let i = 0, j = array.length; i < j; i++) {
const property = array[i]
value = current[property]
if (i === j - 1) return template(value, option)
if (!value) return ''
current = value
}
},
})
}
const app = createApp(App)
ElementPlus.useLang(app, ref, zhLocale)
app.use(ElementPlus)
app.mount('#app')二、picker-options选中区域问题
回答摘录：
请仔细查看文档，picker-options的属性已经平铺开了，还是说这些选项不满足你的需求？至于第一次选择的时间不是可以实现自己吗
分段选择实现：
最近一周
代码实现：
<el-date-picker
type="daterange"
v-model="date"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="small"
format="YYYY 年 MM 月 DD 日"
:shortcuts="shortcuts"
@change="onChange"
></el-date-picker>
...
const date = ref('')
const shortcuts = reactive([{
text: '最近一周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
},
}, {
text: '最近一个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
},
}, {
text: '最近三个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
},
}]
)
...
function onChange(dat){
date.value = dat
}至于github论坛小哥提到的需求：
现在选项不满足我的需求，我想在我选择第一个时间后组件能直接把我选中的这个时间的30天之前和30天之后变为不可点击样式
<template>
<el-date-picker v-model="value" :disabledDate="isDisabled" @change="onChange" />
</template>
<script setup>
import { ref } from 'vue'
import dayjs from 'dayjs'
const value = ref('')
const firstSelectedDayRef = ref(null)
const isDisabled = date => {
const firstSelectedDay = firstSelectedDayRef.value
if (firstSelectedDay) {
const diff = dayjs(date).diff(firstSelectedDay, 'day')
return diff > 30 || diff < -30
}
return false
}
const onChange = date => {
if (!firstSelectedDayRef.value) firstSelectedDayRef.value = date
}
</script>三、自定义样式问题
以el-date-picker的左边距为例： 1、浏览器开发者工具查看其样式类为：
date-picker样式类
2、在全局作用域下的style中（不能是某个scoped的style标签）编写样式即可覆盖
.el-range-editor{
margin-left:20px;
}本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
作者已关闭评论
推荐阅读
目录
相关产品与服务
云开发 CLI 工具
云开发 CLI 工具（Cloudbase CLI Devtools，CCLID）是云开发官方指定的 CLI 工具，可以帮助开发者快速构建 Serverless 应用。CLI 工具提供能力包括文件储存的管理、云函数的部署、模板项目的创建、HTTP Service、静态网站托管等，您可以专注于编码，无需在平台中切换各类配置。
腾讯云开发者
