一、国际化问题
日期选择组件
el-date-picker
无法显示中文问题
1、官网解决方案
2、github解决方案
方案代码摘录:
自定义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
选中区域问题
github官方回答
回答摘录:
请仔细查看文档,picker-options的属性已经平铺开了,还是说这些选项不满足你的需求?至于第一次选择的时间不是可以实现自己吗
分段选择实现:
代码实现:
...
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天之后变为不可点击样式
三、自定义样式问题
以el-date-picker
的左边距为例:
1、浏览器开发者工具查看其样式类为:
2、在全局作用域下的style中(不能是某个scoped的style标签)编写样式即可覆盖
.el-range-editor{
margin-left:20px;
}