vue3实现时间分段选择
1. test.vue文件：
<template>
<div>
<el-button
size="default"
type="primary"
icon="Plus"
@click.prevent="timeClick"
>
时间段选择
</el-button>
<el-button
size="default"
type="primary"
icon="Edit"
@click.prevent="editClick"
>
时间段编辑
</el-button>
<!-- dialog弹窗加参数判断 v-if="dialog.visible", 是为解决弹窗加载子组件时只加载一次的问题，这样就是每次弹窗时重新渲染 -->
<el-dialog
v-model="dialog.visible"
:title="dialog.title"
@close="cancel"
width="720px"
v-if="dialog.visible"
>
<el-form
ref="dataForm"
:model="formData"
:rules="rules"
label-width="100px"
>
<el-form-item label="任务名称" prop="taskName">
<el-input v-model="formData.taskName" placeholder="请输入任务名称" />
</el-form-item>
<el-form-item label="时间分段" prop="times">
<div>
<time-plan
ref="PlanTime"
:week-list="weekList"
:width="formData.width"
:clickbtn="formData.clickbtn"
:period-num="formData.periodNum"
@change="selectBack"
@reserved="clickHandler"
/>
</div>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="cancel">{{ $t('messageBox.cancel') }}</el-button>
<el-button v-has-perm="['sys:dictItem:update','sys:dictItem:add']" type="primary" @click="submitForm">{{ $t('messageBox.determine') }}</el-button>
</div>
</template>
</el-dialog>
<el-dialog
v-model="dialog.taskVisible"
:title="dialog.taskTitle"
v-if="dialog.taskVisible"
>
<el-form
ref="dataFormRef"
:model="formData"
:rules="taskRules"
>
<el-form-item label="备注" prop="remark">
<el-input v-model="formData.remark" placeholder="请输入内容" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="taskCancel">{{ $t('messageBox.cancel') }}</el-button>
<el-button type="primary" @click="taskSubmit">{{ $t('messageBox.determine') }}</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script lang="ts" setup>
import { reactive, toRefs, ref } from 'vue'
import { ElForm, ElMessage, ElMessageBox } from 'element-plus'
import TimePlan from '@/components/TimePlan/index.vue'
const dataForm = ref(ElForm)
const dataFormRef = ref(ElForm)
const PlanTime = ref(ElForm)
const state = reactive({
loading: true,
// 选中ID数组
ids: [],
// 非单个禁用
// single: true,
// 非多个禁用
multiple: true,
dialog: {
title: '',
visible: false,
taskTitle: '',
taskVisible: false
},
formData: {
taskName: '',
remark: '',
width: '454px',
clickbtn: {
visible: true,
title: '配置算法'
},
time: undefined,
index: undefined,
periodNum: 3
},
rules: {
taskName: [
{ required: true, message: '任务名称不能为空', trigger: 'blur' }
]
},
taskRules: {
remark: [
{ required: true, message: '备注不能为空', trigger: 'blur' }
]
},
weekList: [
{
label: '周一',
active: false,
timeList: [],
popovisible: false
},
{
label: '周二',
active: false,
timeList: [],
popovisible: false
},
{
label: '周三',
active: false,
timeList: [],
popovisible: false
},
{
label: '周四',
active: false,
timeList: [],
popovisible: false
},
{
label: '周五',
active: false,
timeList: [],
popovisible: false
},
{
label: '周六',
active: false,
timeList: [],
popovisible: false
},
{
label: '周日',
active: false,
timeList: [],
popovisible: false
}
]
})
const { loading, ids, formData, rules, dialog, weekList, taskRules } = toRefs(state)
/**
* 时间分段组件回调函数
*/
const selectBack = (list) => {
// console.log(list)
state.weekList = list
}
const clickHandler = (data) => {
// 预留按钮触发函数
console.log(data)
state.formData.time = data.time
state.formData.index = data.index
state.dialog.taskTitle = '算法配置'
state.dialog.taskVisible = true
}
const taskCancel = () => {
state.dialog.taskVisible = false
state.formData.time = undefined
state.formData.index = undefined
dataFormRef.value.resetFields()
}
/**
* 时间段选择
*/
const timeClick = () => {
state.dialog.visible = true
state.dialog.title = '时间段选择'
}
/**
* 时间段编辑
*/
const editClick = () => {
state.formData.taskName = '任务1'
state.dialog.visible = true
state.dialog.title = '时间段编辑'
let timeList = [{
"startTime": "09:00",
"endTime": "18:00"
}]
state.weekList.forEach((value,index) => {
// 星期二的时间段
if (index == 1) {
value.timeList = timeList
}
})
}
const taskSubmit = () => {
dataFormRef.value.validate((valid: any) => {
if (valid) {
console.log('保存备注数据操作。。。')
state.weekList.forEach((value) => {
value.timeList.forEach((tm, ind) => {
if (ind == state.formData.index) {
tm.data = state.formData.remark
}
})
})
taskCancel()
}
})
}
const submitForm = () => {
dataForm.value.validate((valid: any) => {
if (valid) {
console.log('保存时间段数据操作。。。')
console.log(JSON.stringify(state.weekList))
cancel()
}
})
}
const cancel = () => {
state.dialog.visible = false
dataForm.value.resetFields()
// 关闭弹窗时清除timeList的数据
state.weekList.forEach((value) => {
value.timeList = []
})
}
</script>
<style lang="scss" scoped>
</style>
2. 时间分段组件index.vue:
<template>
<div class="week-plan-time-wrap">
<div class="tool-tips clearfix" :style="{maxWidth: boxwidths}">
<el-button
size="default"
type="danger"
class="fr"
plain
icon="Delete"
@click.stop="resetForm"
>清空</el-button>
</div>
<div class="scroll-box">
<div class="week-plan-time" :style="{width: boxwidths}">
<div class="az-time-list">
<ul ref="timeContainer">
<li v-for="index in 24" :key="index">{{ index-1 }}</li>
</ul>
</div>
<div :ref="weekId" class="az-week-list">
<div v-for="(item,index) in weekList" :key="index" class="week-item">
<span class="label">{{ item[props.label] }}</span>
<div
class="time-swiper"
@mousedown.stop="event => mousedownStart(event,[index,item[props.timeList].length-1])"
>
<s v-for="ind in 24" :key="ind" class="chunk"></s>
<el-popover
placement="top"
v-for="(time,ind) in item[props.timeList]"
:key="ind+'_'"
v-model:visible="time.popovisible"
trigger="click"
width="240"
>
<template #reference>
<div
class="slider-time"
:class="{'active': (activeTime[0] == index && activeTime[1] == ind)}"
:style="{width: time.width,left: time.pointX}"
>
<div
class="content"
:style="{background: time.style}"
@mousedown.stop="event => arrowsStart(event,time,'content',[index,ind])"
></div>
<div
v-if="(activeTime[0] == index && activeTime[1] == ind)"
class="left-arrows arrows"
@mousedown.stop="event => arrowsStart(event,time,'start')"
>
<i class="el-icon-caret-bottom">
<el-icon><CaretBottom /></el-icon>
</i>
<i class="el-icon-caret-top">
<el-icon><CaretTop /></el-icon>
</i>
</div>
<div
v-if="(activeTime[0] == index && activeTime[1] == ind)"
class="right-arrows arrows"
@mousedown.stop="event => arrowsStart(event,time,'end')"
>
<i class="el-icon-caret-bottom">
<el-icon><CaretBottom /></el-icon>
</i>
<i class="el-icon-caret-top">
<el-icon><CaretTop /></el-icon>
</i>
</div>
</div>
</template>
<!-- 加上该参数设置 :teleported="false"，解决选中时间段后el-popover弹窗会自动关闭的问题 -->
<div class="detail-box">
<el-time-picker
v-if="timeLevel=='mm'"
v-model="time.RangeTime"
:clearable="false"
style="width: 100%"
is-range
range-separator="-"
format="HH:mm"
value-format="HH:mm"
:teleported="false"
@change="value => timeChange(value,time)"
/>
<div class="btn-box" style="text-align: right;margin-top: 10px;">
<el-button
v-if="clickbtn.visible"
type="success"
@click.stop="reservedfun(time,ind)"
>{{ clickbtn.title }}</el-button>
<el-button
type="danger"
@click.stop="deleteTime(index,ind)"
>删除</el-button>
<el-button
type="primary"
@click.stop="saveTime(time)"
>确定</el-button>
</div>
</div>
</el-popover>
</div>
<el-popover
placement="left"
width="350"
trigger="click"
v-model:visible="item.popovisible"
append-to-body="false"
>
<template #reference>
<span class="copy-btn" @click.stop="actionCopy(index)">
<el-icon><DocumentCopy /></el-icon>
</span>
</template>
<p>复制到</p>
<p>
<el-checkbox
v-model="checkAll"
:indeterminate="isIndeterminate"
@change="handleCheckAllChange"
>全选</el-checkbox>
<el-checkbox-group v-model="copyList" @change="handleCheckedCitiesChange">
<el-checkbox
v-for="(val,i) in weekList"
:key="i+'__'"
:disabled="val.disabled"
:label="i"
>{{ val[props.label] }}</el-checkbox>
</el-checkbox-group>
</p>
<div class="text-right">
<el-button type="danger" @click="closePopover(index)">取消</el-button>
<el-button type="primary" @click="confirmCopy(index)">确认</el-button>
</div>
</el-popover>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, toRefs, defineProps, onMounted, watch, onUpdated, ref } from 'vue'
import { ElForm, ElMessage, ElMessageBox } from 'element-plus'
import { deepClone } from '@/utils/index'
const emit = defineEmits(['change','reserved'])
const prop = defineProps({
weekList: {
type: Array,
default() {
return []
}
},
width: {
type: String,
default: '454px'
},
clickbtn: {
type: Object,
default() {
return {
visible: false,
title: '预留按钮'
}
}
},
periodNum: {
type: Number,
default: 5
}
})
const state = reactive({
timeLevel: 'mm',
width: prop.width,
weekId: 'week' + new Date().getTime(),
boxwidths: '',
weekList: prop.weekList,
props: {
label: 'label',
timeList: 'timeList',
startTime: 'startTime',
endTime: 'endTime'
},
// 是否重复选择(即多个时间段有重叠部分)
repeat: false,
copyList: [],
checkAll: false,
isIndeterminate: false,
// 当前激活对象
activeTime: [],
// 组件操作对象
temp: undefined,
// 拖拽节点
dageDom: '',
secondWidth: '', // 1秒对应的容器总宽度
// 判断是否鼠标点下
ifDrag: false,
// 预留按钮
clickbtn: prop.clickbtn,
// 数据是否有所改变
dataChange: false,
// 一天允许选择时间段个数
periodNum: prop.periodNum
})
const resetForm = () => {
ElMessageBox.confirm('此操作将清空当前所有已选时段, 是否继续?', '警告', {
confirmButtonText: '确 定',
cancelButtonText: '取 消',
type: 'warning'
}).then(() => {
state.weekList.forEach(value => {
value[state.props.timeList] = []
})
state.temp = undefined
state.dageDom = ''
state.ifDrag = false
state.activeTime = []
state.copyList = []
state.checkAll = false
state.isIndeterminate = false
listenerChange()
}).catch(() =>
ElMessage.info('已取消清空')
)
}
const {
timeLevel,
weekId,
weekList,
props,
repeat,
copyList,
checkAll,
isIndeterminate,
activeTime,
temp,
dageDom,
secondWidth,
ifDrag,
boxwidths,
clickbtn
} = toRefs(state)
const initFormatData = () => {
// 重置参数
state.temp = undefined
state.dageDom = ''
state.ifDrag = false
state.activeTime = []
state.copyList = []
state.checkAll = false
state.isIndeterminate = false
// 格式化数据 转化成组件可操作格式
state.weekList.forEach(value => {
if (value[state.props.timeList] && value[state.props.timeList].length) {
value[state.props.timeList].forEach(val => {
val.pointX = ''
val.r_width = ''
val.r_pointX = ''
val.width = ''
val.startX = ''
val.endX = ''
val.id = ''
val.temporary = false
val.popovisible = false
val.style = randomRgb()
val.RangeTime = [
val[state.props.startTime],
val[state.props.endTime]
]
// 计算时段宽度
let st = formatSecond(val[state.props.startTime])
let et = formatSecond(val[state.props.endTime])
val.width = (et - st) * state.secondWidth + 'px'
// 计算时段定位
val.pointX = st * state.secondWidth + 'px'
})
// 按起始时间重新排序
value[state.props.timeList].sort((a, b) => {
return (a.pointX.replace('px', '') * 1) - (b.pointX.replace('px', '') * 1)
})
}
})
}
const formatSecond = (time) => {
if (!time) return
let t = time.split(':')
if (state.timeLevel === 'mm') {
if (t.length !== 2) return
// 去除前缀0
let ht = t[0].replace(/^0/, '')
let mt = t[1].replace(/^0/, '')
return (ht * 60 * 60) + mt * 60
}
}
const mousedownStart = (event, action) => {
if (action[1] > (state.periodNum - 2)) {
ElMessage.warning('只允许选择' + state.periodNum + '个时间段！')
return false
}
state.dageDom = 'addTime'
let temp = {
pointX: event.layerX + 'px', // 时段定位
r_width: '', // 备份
r_pointX: '', // 备份
width: `${state.secondWidth}px`, // 时段宽度
startX: '', // 操作时鼠标点击起始点位置
endX: '', // 操作时鼠标最终位置
[state.props.startTime]: '', // 计算出的起始时间
[state.props.endTime]: '', // 计算出的结束时间
RangeTime: [],
popovisible: false, // 时间选择弹窗显示/隐藏
isPre: true,
style: randomRgb(),
temporary: true // 标记当前操作项 操作结束后为false
}
recalcTime(temp)
state.weekList[action[0]][state.props.timeList].push(temp)
// 按起始时间重新排序
state.weekList[action[0]][state.props.timeList].sort((a, b) => {
return (a.pointX.replace('px', '') * 1) - (b.pointX.replace('px', '') * 1)
})
state.activeTime = [
action[0],
state.weekList[action[0]][state.props.timeList].length - 1
]
state.ifDrag = true
state.dageDom = 'end'
state.temp = temp
// 备份记录
state.temp.r_width = temp.width.replace('px', '') * 1
state.temp.r_pointX = temp.pointX.replace('px', '') * 1
state.temp.startX = event.clientX
}
// 点击结束
const mouseupEnd = (event) => {
try {
// 鼠标点击其他位置取消选中的操作对象
let item_index = state.weekList[state.activeTime[0]][state.props.timeList].findIndex((d) => {
return d.temporary
})
if (!state.temp) {
state.activeTime = []
} else {
// 数据有变化时才往上提交
if (state.dataChange) {
listenerChange()
}
}
// 并非真正想新增
if (state.temp && state.temp.isPre) {
state.weekList[state.activeTime[0]][state.props.timeList].splice(item_index, 1)
}
state.temp.temporary = false
state.dageDom = ''
state.ifDrag = false
} catch (error) {
}
}
// 时段点击拖拽
const arrowsStart = (event, temp, dom, action) => {
state.activeTime = action ? action : state.activeTime
state.ifDrag = true
state.dageDom = dom
state.temp = temp
state.temp.temporary = true
// 备份记录
state.temp.r_width = temp.width.replace('px', '') * 1
state.temp.r_pointX = temp.pointX.replace('px', '') * 1
state.temp.startX = event.clientX
}
// 鼠标移动
const mousemoveNow = () => {
if (state.ifDrag) {
state.temp.endX = event.clientX
state.temp.isPre = false
recalcAttr(state.temp)
state.dataChange = true
}
}
// 重新计算宽度和定位
const recalcAttr = (temp) => {
let point = temp.r_pointX
let minX = 0
let maxW = state.width.replace('px', '') * 1
// 复选模式
if (!state.repeat) {
let item_index = state.weekList[state.activeTime[0]][state.props.timeList].findIndex((d) => {
return d.temporary === true
})
// 最小不能小于前一个已有时段的最大值
if (item_index > 0) {
let last_item = state.weekList[state.activeTime[0]][state.props.timeList][item_index - 1]
minX = (last_item.pointX.replace('px', '') * 1) + (last_item.width.replace('px', '') * 1)
}
// 最大不能大于后一个已有时段的最小值
if (item_index < (state.weekList[state.activeTime[0]][state.props.timeList].length - 1)) {
let next_item = state.weekList[state.activeTime[0]][state.props.timeList][item_index + 1]
maxW = (next_item.pointX.replace('px', '') * 1)
}
}
// 拖拽左滑块
if (state.dageDom === 'start') {
let width = temp.r_width * 1 + (temp.startX - temp.endX)
point = point * 1 - (temp.startX - temp.endX)
if (point < minX) {
point = minX
width = temp.width.replace('px', '')
}
if (temp.startX - temp.endX + temp.r_width * 1 < 0) {
width *= -1
} else {
temp.pointX = point + 'px'
}
temp.width = width + 'px'
// 拖拽右滑块
} else if (state.dageDom === 'end') {
let width = temp.r_width * 1 + (temp.endX - temp.startX)
if (width < 0) {
point = point * 1 + width
if (point < minX) {
point = minX
width = temp.width.replace('px', '')
}
temp.pointX = point + 'px'
temp.width = width * -1 + 'px'
} else {
if (point + width > maxW) {
width = maxW - point
}
temp.width = width + 'px'
}
// 拖拽时段主体
} else if (state.dageDom === 'content') {
let width = temp.r_width
point = point + (temp.endX - temp.startX)
if (point < minX) {
point = minX
}
if (point + width > maxW) {
point = maxW - width
}
temp.pointX = point + 'px'
}
// 计算新时间
recalcTime(state.temp)
}
// 重新计算时间
const recalcTime = (temp) => {
let pointX = temp.pointX.replace('px', '') * 1
let width = temp.width.replace('px', '') * 1
let s_second = pointX / state.secondWidth
let e_second = (pointX + width) / state.secondWidth
temp[state.props.startTime] = formatMinute(s_second)
temp[state.props.endTime] = formatMinute(e_second)
temp.RangeTime = [temp[state.props.startTime], temp[state.props.endTime]]
}
// 秒数转
const formatMinute = (scNumber) => {
if (state.timeLevel === 'mm') {
let hour = Math.floor(scNumber / (60 * 60))
let minute = Math.floor(scNumber % (60 * 60) / 60)
// 判断是否是第24个小时
if (hour == 24) {
hour = 23
}
if (hour == 23 && minute == 0) {
minute = 59
}
hour = hour >= 10 ? hour : '0' + hour
minute = minute >= 10 ? minute : '0' + minute
return hour + ':' + minute
} else {
let hour = Math.floor(scNumber / (60 * 60))
let minute = Math.floor(scNumber % (60 * 60) / 60)
let second = Math.floor(scNumber % (60 * 60) % 60)
hour = hour >= 10 ? hour : '0' + hour
minute = minute >= 10 ? minute : '0' + minute
second = second >= 10 ? second : '0' + second
return hour + ':' + minute + ':' + second
}
}
// 关闭时间弹窗
const closeTimePopover = (temp) => {
temp.popovisible = false
}
// 编辑保存操作
const saveTime = (temp) => {
closeTimePopover(temp)
// 计算时段宽度
let st = formatSecond(temp[state.props.startTime])
let et = formatSecond(temp[state.props.endTime])
temp.width = (et - st) * state.secondWidth + 'px'
// 计算时段定位
temp.pointX = st * state.secondWidth + 'px'
listenerChange()
}
// 关闭复制弹窗popover
const closePopover = (index) => {
state.weekList.forEach((value, ind) => {
if (ind === index) {
value.popovisible = false
}
})
}
// 复制全选
const handleCheckAllChange = (val) => {
state.copyList = val ? state.weekList.map((d, i) => { return i }): []
state.isIndeterminate = false
}
// 复制选择回调
const handleCheckedCitiesChange = (value) => {
let checkedCount = value.length
state.checkAll = checkedCount === state.weekList.length
state.isIndeterminate = checkedCount > 0 && checkedCount < state.weekList.length
}
// 确认复制
const confirmCopy = (index) => {
// 复制时段
state.copyList.forEach(ind => {
state.weekList[ind][state.props.timeList] = deepClone(
state.weekList[index][state.props.timeList]
)
})
closePopover(index)
listenerChange()
}
// 通过输入框改变时间
const timeChange = (value, time) => {
time.RangeTime = value
time[state.props.startTime] = value[0]
time[state.props.endTime] = value[1]
}
// 复制
const actionCopy = (index) => {
// 清空选中
state.copyList = []
state.weekList.forEach((value, ind) => {
state.weekList[ind].disabled = false
if (ind === index) {
value.disabled = true
}
})
}
// 删除操作
const deleteTime = (index, ind) => {
state.weekList[index][state.props.timeList].splice(ind, 1)
listenerChange()
}
// 监听数据变动
const listenerChange = () => {
emit('change', state.weekList)
state.dataChange = false
}
// 预留按钮触发
const reservedfun = (time, ind) => {
emit('reserved', {time: time, index: ind})
}
// 随机获取颜色
const randomRgb = () => {
let R = Math.floor(Math.random() * 255)
let G = Math.floor(Math.random() * 255)
let B = Math.floor(Math.random() * 255)
return 'rgb(' + R + ',' + G + ',' + B + ')'
}
onUpdated(() => {
})
const boxWidth = () => {
return state.width.replace('px', '') * 1 + 122 + 'px'
}
onMounted(() => {
state.boxwidths = boxWidth()
window.addEventListener('mousemove', mousemoveNow)
window.addEventListener('mouseup', mouseupEnd)
// 获取1秒时间容器宽度
state.secondWidth = state.width.replace('px', '') / (24 * 60 * 60)
if (state.weekList) {
initFormatData()
}
})
</script>
<style lang="scss" scoped>
.fr {
float: right;
}
.week-plan-time-wrap {
width: 100%;
box-sizing: border-box;
.tool-tips {
padding: 10px 0;
box-sizing: border-box;
.circular{
display: inline-block;
width: 12px;
height: 12px;
vertical-align: middle;
border-radius: 50%;
background: #13C2C2;
margin-top: -2px;
margin-right: 8px;
}
}
.scroll-box {
width: 100%;
overflow: auto;
.week-plan-time {
height: 280px;
border: 1px solid #ddd;
overflow: auto;
.az-time-list {
width: 100%;
padding: 0 40px 0 80px;
box-sizing: border-box;
height: 28px;
background: #eee;
ul {
display: flex;
padding: 0;
margin: 0;
li {
list-style-type: none;
flex: 1;
width: calc(100% / 24);
height: 24px;
font-size: 12px;
line-height: 28px;
}
}
}
.az-week-list {
width: 100%;
.week-item {
width: 100%;
height: 35px;
padding: 0 40px 0 80px;
box-sizing: border-box;
position: relative;
&:hover {
background: rgba(0, 0, 0, 0.05);
}
.label {
box-sizing: border-box;
position: absolute;
left: 0;
top: 0;
width: 80px;
height: 35px;
line-height: 35px;
text-align: center;
border-right: 1px solid #ddd;
user-select: none;
}
.time-swiper {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
position: relative;
cursor: pointer;
.chunk {
display: block;
height: 100%;
flex: 1;
border-left: 1px solid #ddd;
&:first-child {
border: none;
}
}
.slider-time {
position: absolute;
height: 100%;
padding: 10px 0;
box-sizing: border-box;
z-index: 30;
.content {
width: 100%;
height: 100%;
background: #13c2c2;
opacity: .8;
}
.arrows {
position: absolute;
height: 100%;
size: 10px;
color: #11a983;
width: 14px;
cursor: e-resize;
.el-icon-postcard {
position: absolute;
top: 0;
left: 0;
}
.el-icon-caret-bottom {
position: absolute;
top: -2px;
left: 0;
}
.el-icon-caret-top {
position: absolute;
bottom: -5px;
left: 0;
}
&.left-arrows {
left: -7px;
top: 0;
}
&.right-arrows {
right: -7px;
top: 0;
}
}
}
}
.copy-btn {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
line-height: 40px;
background: #eee;
text-align: center;
font-size: 16px;
cursor: pointer;
&:hover {
color: #13c2c2;
}
}
}
}
}
.footer-chunk {
padding: 15px 0;
}
}
}
</style>
3. 工具文件index.ts:
/**
* Check if an element has a class
* @param {HTMLElement} elm
* @param {string} cls
* @returns {boolean}
*/
export function hasClass(ele: HTMLElement, cls: string) {
return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'))
}
/**
* Add class to element
* @param {HTMLElement} elm
* @param {string} cls
*/
export function addClass(ele: HTMLElement, cls: string) {
if (!hasClass(ele, cls)) ele.className += ' ' + cls
}
/**
* Remove class from element
* @param {HTMLElement} elm
* @param {string} cls
*/
export function removeClass(ele: HTMLElement, cls: string) {
if (hasClass(ele, cls)) {
const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)')
ele.className = ele.className.replace(reg, ' ')
}
}
export function mix(color1: string, color2: string, weight: number) {
weight = Math.max(Math.min(Number(weight), 1), 0)
let r1 = parseInt(color1.substring(1, 3), 16)
let g1 = parseInt(color1.substring(3, 5), 16)
let b1 = parseInt(color1.substring(5, 7), 16)
let r2 = parseInt(color2.substring(1, 3), 16)
let g2 = parseInt(color2.substring(3, 5), 16)
let b2 = parseInt(color2.substring(5, 7), 16)
let r = Math.round(r1 * (1 - weight) + r2 * weight)
let g = Math.round(g1 * (1 - weight) + g2 * weight)
let b = Math.round(b1 * (1 - weight) + b2 * weight)
const rStr = ('0' + (r || 0).toString(16)).slice(-2)
const gStr = ('0' + (g || 0).toString(16)).slice(-2)
const bStr = ('0' + (b || 0).toString(16)).slice(-2)
return '#' + rStr + gStr + bStr
}
export function deepClone(source: any) {
let result
let targetType = Object.prototype.toString.call(source).slice(8, -1)
if (targetType === 'Object') {
result = {}
} else if (targetType === 'Array') {
result = []
} else {
return source
}
for (let i in source) {
let value = source[i]
let valueType = Object.prototype.toString.call(value).slice(8, -1)
if (valueType === 'Array' || valueType === 'Object') {
result[i] = deepClone(value)
} else {
result[i] = value
}
}
return result
}
4. 最终效果如图：
备注说明：
根据网上找到的资源是根据 vue2通过element-ui实现的，现在改成vue3+element-plus实现的。觉得不错的功能就分享出来。完！！！
扫一扫
1460
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
