feat(Workplace): Add wrokplace demo
feat(Component): Add Highlight component feat(hooks): Add useTimeAgo hookmaster
kailong321200875
4 years ago
parent
3fc79c0ae7
commit
c53fa562e5
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
@ -0,0 +1,3 @@
|
||||
import Highlight from './src/Highlight.vue'
|
||||
|
||||
export { Highlight }
|
||||
@ -0,0 +1,65 @@
|
||||
<script lang="tsx">
|
||||
import { defineComponent, PropType, computed, h, unref } from 'vue'
|
||||
import { propTypes } from '@/utils/propTypes'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Highlight',
|
||||
props: {
|
||||
tag: propTypes.string.def('span'),
|
||||
keys: {
|
||||
type: Array as PropType<string[]>,
|
||||
default: () => []
|
||||
},
|
||||
color: propTypes.string.def('var(--el-color-primary)')
|
||||
},
|
||||
emits: ['click'],
|
||||
setup(props, { emit, slots }) {
|
||||
const keyNodes = computed(() => {
|
||||
return props.keys.map((key) => {
|
||||
return h(
|
||||
'span',
|
||||
{
|
||||
onClick: () => {
|
||||
emit('click', key)
|
||||
},
|
||||
style: {
|
||||
color: props.color,
|
||||
cursor: 'pointer'
|
||||
}
|
||||
},
|
||||
key
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
const parseText = (text: string) => {
|
||||
props.keys.forEach((key, index) => {
|
||||
const regexp = new RegExp(key, 'g')
|
||||
text = text.replace(regexp, `{{${index}}}`)
|
||||
})
|
||||
return text.split(/{{|}}/)
|
||||
}
|
||||
|
||||
const renderText = () => {
|
||||
if (!slots?.default) return null
|
||||
const node = slots?.default()[0].children
|
||||
|
||||
if (!node) {
|
||||
return slots?.default()[0]
|
||||
}
|
||||
|
||||
const textArray = parseText(node as string)
|
||||
const regexp = /^[0-9]*$/
|
||||
const nodes = textArray.map((t) => {
|
||||
if (regexp.test(t)) {
|
||||
return unref(keyNodes)[Math.floor(Number(t))] || t
|
||||
}
|
||||
return t
|
||||
})
|
||||
return h(props.tag, nodes)
|
||||
}
|
||||
|
||||
return () => renderText()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,48 @@
|
||||
import { useTimeAgo as useTimeAgoCore, UseTimeAgoMessages } from '@vueuse/core'
|
||||
import { computed, unref } from 'vue'
|
||||
import { useLocaleStoreWithOut } from '@/store/modules/locale'
|
||||
|
||||
const TIME_AGO_MESSAGE_MAP: {
|
||||
'zh-CN': UseTimeAgoMessages
|
||||
en: UseTimeAgoMessages
|
||||
} = {
|
||||
'zh-CN': {
|
||||
justNow: '刚刚',
|
||||
past: (n) => (n.match(/\d/) ? `${n}前` : n),
|
||||
future: (n) => (n.match(/\d/) ? `${n}后` : n),
|
||||
month: (n, past) => (n === 1 ? (past ? '上个月' : '下个月') : `${n} 个月`),
|
||||
year: (n, past) => (n === 1 ? (past ? '去年' : '明年') : `${n} 年`),
|
||||
day: (n, past) => (n === 1 ? (past ? '昨天' : '明天') : `${n} 天`),
|
||||
week: (n, past) => (n === 1 ? (past ? '上周' : '下周') : `${n} 周`),
|
||||
hour: (n) => `${n} 小时`,
|
||||
minute: (n) => `${n} 分钟`,
|
||||
second: (n) => `${n} 秒`
|
||||
},
|
||||
en: {
|
||||
justNow: '刚刚',
|
||||
past: (n) => (n.match(/\d/) ? `${n} ago` : n),
|
||||
future: (n) => (n.match(/\d/) ? `in ${n}` : n),
|
||||
month: (n, past) =>
|
||||
n === 1 ? (past ? 'last month' : 'next month') : `${n} month${n > 1 ? 's' : ''}`,
|
||||
year: (n, past) =>
|
||||
n === 1 ? (past ? 'last year' : 'next year') : `${n} year${n > 1 ? 's' : ''}`,
|
||||
day: (n, past) => (n === 1 ? (past ? 'yesterday' : 'tomorrow') : `${n} day${n > 1 ? 's' : ''}`),
|
||||
week: (n, past) =>
|
||||
n === 1 ? (past ? 'last week' : 'next week') : `${n} week${n > 1 ? 's' : ''}`,
|
||||
hour: (n) => `${n} hour${n > 1 ? 's' : ''}`,
|
||||
minute: (n) => `${n} minute${n > 1 ? 's' : ''}`,
|
||||
second: (n) => `${n} second${n > 1 ? 's' : ''}`
|
||||
}
|
||||
}
|
||||
|
||||
export const useTimeAgo = (time: Date | number | string) => {
|
||||
const localeStore = useLocaleStoreWithOut()
|
||||
|
||||
const currentLocale = computed(() => localeStore.getCurrentLocale)
|
||||
|
||||
const timeAgo = useTimeAgoCore(time, {
|
||||
messages: TIME_AGO_MESSAGE_MAP[unref(currentLocale).lang]
|
||||
})
|
||||
|
||||
return timeAgo
|
||||
}
|
||||
Loading…
Reference in New Issue