在 vue 中使用 jquery ui 和时间选择器

Posted 2023-02-22

【中文标题】在 vue 中使用 jquery ui 和时间选择器

【英文标题】：Using jquery ui and time picker with vue

【发布时间】：2019-09-09 20:43:07

【问题描述】：

我正在尝试使用 jquery ui 设置 vue cli，但无法弄清楚如何使用 jquery ui 组件。我需要加载以下 js 文件

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.js
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js

和 css 文件

https://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css
https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.css

使时间选择器工作。这是一个代码笔链接，我在其中测试了该功能。 https://codepen.io/cksachdev/pen/EJgGVR

关于我应该如何使用 vue-cli/webpack 配置加载这些的任何建议。

这是我迄今为止尝试过的：

 module: 
    loaders: [
       test: /\.css$/, loader: ['style-loader', 'css-loader'] ,
       test: /\.(jpe?g|png|gif)$/i, loader: 'file-loader' ,
    ],
  ,
  plugins: [
    // eslint-disable-next-line no-undef
    new webpack.ProvidePlugin(
      $: 'jquery',
      jquery: 'jquery',
      'window.jQuery': 'jquery',
      jQuery: 'jquery',
    ),
  ],
  resolve: 
    alias: 
      'jquery-ui': '../../../node_modules/jquery-ui/ui/widgets',
      'jquery-ui-css': '../../../node_modules/jquery-ui/../../themes/base',
    ,
  ,

【参考方案1】：

---

---

编辑 2：我继续编写了一个演示项目，您可以镜像来完成此操作..

View the demo here

View the source code/repo here

同样，不确定您为什么要这样做，但 ^that^ 是（另一种）解决方案..

---

---

---

您可以将这些脚本和 css 文件添加到“index.html”文件（公共 -> index.html）中，并像这样使用它：

编辑 1： 非常重要的是要注意没有理由需要导入（相当大的）jQuery 甚至使用 jQuery。 Vue 生态系统有很多现有的选择来解决这样的问题。..

vue2-timepicker 和 Vuetify timepicker（Vuetify 更像是一个完整的预样式组件库）..

[CodePen mirror]

/* TIMEPICKER COMPONENT */
const VueTimepicker = 
  template: "#vue-timepicker",
  computed: 
    id() 
      // give the component a unique id/name
      return "time-picker-" + this._uid;
    
  ,
  mounted() 
    $("#" + this.id).timepicker(
      timeFormat: "HH:mm:ss:l"
    );
  
;

/* VUE APP */
new Vue(
  el: "#app",
  components: 
    VueTimepicker,
  
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.0/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.css" />

<!-- ******************** -->
<!-- VUE APP -->
<!-- ******************** -->
<div id="app">
  <div>
    <div>
      <span>Timepicker 1</span>
      <vue-timepicker/>
    </div>
    <div style="margin-top: 20px;">
      <span>Timepicker 2</span>
      <vue-timepicker/>
    </div>
  </div>
</div>

<!-- ******************** -->
<!-- TIMEPICKER COMPONENT -->
<!-- ******************** -->
<script type="text/x-template" id="vue-timepicker">
  <div>
    <input type="text" :name="id" :id="id" value=" ">
  </div>
</script>

【讨论】：

感谢您的回复。我正在寻找使用 vue-cli 的基于 webpack 的解决方案。

这将适用于 webpack 和 vue-cli。这就是 CodeSandbox 使用的。你的意思是你想使用 jQuery 作为一个模块而不是在 index.html 中导入？

是的，我想使用 webpack 导入 jQuery 和 jQuery ui。以下是我尝试过的，但加载 jQuery ui 图像失败。我尝试添加别名，但没有成功，并尝试手动复制粘贴图像文件夹，但没有运气。无法在此处粘贴，正在更新主要问题。

我试过codesandbox.io/s/o96mp85m86?fontsize=14链接，但我看不到时间选择器工作。

@ChetanSachdev 我继续为你写了一个演示。请查看我更新的答案 - 提供了一个演示站点，以及我将源代码存储在的 GitHub 存储库。