当前位置：首页 > VUE

vue 实现jquery ui

2026-03-10 05:28:46VUE

Vue 实现 jQuery UI 功能的方法

在 Vue 中实现 jQuery UI 的功能，可以通过原生 Vue 组件或第三方库完成。以下是几种常见需求的实现方式：

拖拽功能（Draggable/Droppable）

使用 Vue 的 v-draggable 指令或第三方库如 vue-draggable：

<template>
  <div v-draggable>拖拽元素</div>
</template>

<script>
import { VueDraggable } from 'vue-draggable';
export default {
  directives: {
    draggable: VueDraggable
  }
}
</script>

或通过 draggable 属性实现原生 HTML5 拖拽：

<div 
  draggable 
  @dragstart="handleDragStart"
  @dragend="handleDragEnd"
>
  可拖拽元素
</div>

排序列表（Sortable）

使用 vue-draggable-next 库（推荐）：

npm install vue-draggable-next

实现代码：

vue 实现jquery ui

<template>
  <draggable 
    v-model="list" 
    @end="onSortEnd"
  >
    <div v-for="item in list" :key="item.id">{{ item.text }}</div>
  </draggable>
</template>

<script>
import draggable from 'vue-draggable-next';
export default {
  components: { draggable },
  data() {
    return { list: [{id: 1, text: 'Item 1'}] }
  }
}
</script>

模态框（Dialog）

使用 Vue 的过渡动画和 v-show：

<template>
  <button @click="showModal = true">打开弹窗</button>
  <transition name="fade">
    <div class="modal" v-show="showModal">
      <div class="modal-content">
        <span @click="showModal = false">&times;</span>
        <p>模态内容</p>
      </div>
    </div>
  </transition>
</template>

<style>
.modal {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
</style>

日期选择器（Datepicker）

使用 vue-datepicker 等第三方组件：

npm install vue-datepicker

实现代码：

vue 实现jquery ui

<template>
  <date-picker v-model="date" />
</template>

<script>
import DatePicker from 'vue-datepicker';
export default {
  components: { DatePicker },
  data() {
    return { date: '' }
  }
}
</script>

标签页（Tabs）

纯 Vue 实现方案：

<template>
  <div class="tabs">
    <div 
      v-for="(tab, index) in tabs" 
      :key="index"
      @click="currentTab = index"
      :class="{ active: currentTab === index }"
    >
      {{ tab.title }}
    </div>
  </div>
  <div class="tab-content">
    {{ tabs[currentTab].content }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tabs: [
        { title: 'Tab 1', content: 'Content 1' },
        { title: 'Tab 2', content: 'Content 2' }
      ]
    }
  }
}
</script>

工具提示（Tooltip）

使用 v-tooltip 指令库：

npm install v-tooltip

实现代码：

<template>
  <button v-tooltip="'提示信息'">悬停查看提示</button>
</template>

<script>
import { VTooltip } from 'v-tooltip';
export default {
  directives: {
    tooltip: VTooltip
  }
}
</script>