Использование JQuery UI и выбора времени с Vue - PullRequest
Новая
       17

Использование JQuery UI и выбора времени с Vue

1 голос
/ 19 апреля 2019

Я пытаюсь настроить vue cli с помощью jquery ui, но не могу понять, как использовать компоненты 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

Чтобы заставить работать таймер. Вот ссылка codepen, где я проверил функциональность. 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 Ответ

0 голосов
/ 19 апреля 2019

Редактировать 2: Я продолжил и написал демонстрационный проект, который вы можете отразить для достижения этой цели ..

Посмотреть демо здесь

Просмотреть исходный код / ​​репозиторий здесь

Опять же, не уверен, почему вы хотите это сделать, но ^ это ^ (другое) решение ..

Вы можете добавить эти сценарии иCSS-файлы внутри файла index.html (public -> index.html) и используйте его следующим образом:

Edit 1: это чрезвычайно важноОтметим, что нет причин, по которым вам нужно импортировать (довольно большой) jQuery или даже использовать jQuery.Экосистема Vue имеет множество существующих опций для таких вещей, как ..компоненты) ..

Edit Vue/jQuery Time Picker

[ Зеркало CodePen ] 

/* 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>
...