我们先来看我们的选项卡
上代码 ：html部分
<template>
<div class="silder">
<div class="silder-title">
<div
@click="Fnstart(index)"
v-for="(item, index) in titList"
:key="item.id"
:class="
selectindex === index
? 'silder-title-item ac'
: 'silder-title-item'
"
>
{{ item.text }}
</div>
</div>
<div class="silder-content">
<div
v-for="(item, index) in contList"
:style="{ display: selectindex === index ? 'block' : 'none' }"
:key="item.id"
class="silder-content-item"
>
{{ item.text }}
</div>
</div>
</div>
</template>js部分
<script setup lang='ts'>
import { ref } from "vue";
interface info {
id: string;
text: string;
}
const selectindex = ref<number>(0);
const titList = ref<info[]>([
{ id: "tit1", text: "标题一" },
{ id: "tit2", text: "标题二" },
{ id: "tit3", text: "标题三" },
]);
const contList = ref<info[]>([
{ id: "con1", text: "内容一" },
{ id: "con2", text: "内容二" },
{ id: "con3", text: "内容三" },
]);
const Fnstart = function (index: number) {
selectindex.value = index;
};
</script>css部分
<script setup lang='ts'>
import { ref } from "vue";
interface info {
id: string;
text: string;
}
const selectindex = ref<number>(0);
const titList = ref<info[]>([
{ id: "tit1", text: "标题一" },
{ id: "tit2", text: "标题二" },
{ id: "tit3", text: "标题三" },
]);
const contList = ref<info[]>([
{ id: "con1", text: "内容一" },
{ id: "con2", text: "内容二" },
{ id: "con3", text: "内容三" },
]);
const Fnstart = function (index: number) {
selectindex.value = index;
};
</script>?然后选项卡没问题了再看拖拽
html部分
<template>
<div class="drag" ref="drag"></div>
</template>js部分
<script setup lang='ts'>
import { ref, onMounted } from "vue";
const disX = ref<number>(0);
const disY = ref<number>(0);
const x = ref<number>(0);
const y = ref<number>(0);
// const drag = ref<>
const drag = ref(null);
onMounted(() => {
(drag.value as HTMLDivElement).onmousedown = FnDown;
});
const FnDown = function (ev: MouseEvent) {
disX.value = ev.clientX - x.value;
disY.value = ev.clientY - y.value;
document.onmousemove = FnMove;
document.onmouseup = Fnup;
// ev.preventDefault || ev.preventDefault()
return false
};
const FnMove = function (ev: MouseEvent) {
x.value = ev.pageX - disX.value;
y.value = ev.pageY - disY.value;
drag.value.style.left = x.value + "px";
drag.value.style.top = y.value + "px";
};
const Fnup = function () {
document.onmousemove = null;
document.onmouseup = null;
};
</script>css部分
<style lang="less" scoped>
.drag {
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
top: 0;
left: 0;
}
</style>
