vue3.0+typescript实现选项卡和拖拽

我们先来看我们的选项卡

上代码 ：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>