当前位置：首页 > VUE

vue实现jqueryui

2026-01-07 17:48:56VUE

Vue 实现 jQuery UI 功能

在 Vue 项目中实现类似 jQuery UI 的功能，可以通过原生 Vue 组件或第三方库来实现。以下是几种常见 jQuery UI 功能的 Vue 替代方案：

拖拽功能

使用 Vue.Draggable 库可以实现类似 jQuery UI 的拖拽排序功能。安装方式如下：

npm install vuedraggable

示例代码：

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

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('Drag ended')
    }
  }
}
</script>

日期选择器

使用 Vuetify 的日期选择器组件替代 jQuery UI 的日期选择器：

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

<script>
export default {
  data() {
    return {
      date: new Date().toISOString().substr(0, 10)
    }
  }
}
</script>

对话框/模态框

Vue 内置的过渡组件可以创建类似 jQuery UI 的对话框效果：

<template>
  <button @click="showModal = true">Open Modal</button>

  <transition name="fade">
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span @click="showModal = false">&times;</span>
        <p>Modal Content</p>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  }
}
</script>

<style>
.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

进度条

使用 Element UI 的进度条组件：

<template>
  <el-progress :percentage="50"></el-progress>
</template>

<script>
import { ElProgress } from 'element-plus'

export default {
  components: {
    ElProgress
  }
}
</script>

标签页

使用 Vue Router 实现标签页功能：

<template>
  <div>
    <router-link to="/tab1">Tab 1</router-link>
    <router-link to="/tab2">Tab 2</router-link>

    <router-view></router-view>
  </div>
</template>

工具提示

使用 Vuetify 的工具提示组件：

<template>
  <v-tooltip bottom>
    <template v-slot:activator="{ on }">
      <v-btn v-on="on">Hover Me</v-btn>
    </template>
    <span>Tooltip Text</span>
  </v-tooltip>
</template>

自动完成

使用 Element UI 的自动完成组件：

<template>
  <el-autocomplete
    v-model="state"
    :fetch-suggestions="querySearch"
    placeholder="请输入内容"
  ></el-autocomplete>
</template>

<script>
export default {
  data() {
    return {
      state: '',
      restaurants: []
    }
  },
  methods: {
    querySearch(queryString, cb) {
      const results = queryString
        ? this.restaurants.filter(this.createFilter(queryString))
        : this.restaurants
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    }
  }
}
</script>