Как подключить плагин аккордеон без сборщика?

Question

[danilr]

Есть плагин, который устанавливается через npm, но мне нужно без всяких npm и сборщиков его поставить. Как не его подключить, чтобы он работал(куда и что прописать)?

Comments

[Andrey Suha]

А чем Вам сборщики не угодили?

Answer 1

[Сергей delphinpro]

Подключите через теги script сам vue.js и дист-сборку плагина https://github.com/phegman/v-show-slide/blob/maste...

UPD

Dist там собран неправильно! С флагом development. Работать будет, но лучше пересобрать.

UPD2

В принципе там плагин простой, можно онлайн тулзами сделать:
Здесь https://es6console.com/ транспилируем в es5
Здесь https://skalman.github.io/UglifyJS-online/ минифицируем

В результате получаем код

"use strict";var _createClass=function(){function e(e,i){for(var t=0;t<i.length;t++){var n=i[t];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(i,t,n){return t&&e(i.prototype,t),n&&e(i,n),i}}();function _classCallCheck(e,i){if(!(e instanceof i))throw new TypeError("Cannot call a class as a function")}var VShowSlide=function(){function e(){_classCallCheck(this,e),this.easingOptions={builtIn:["linear","ease","ease-in","ease-out","ease-in-out"],custom:{}}}return _createClass(e,[{key:"install",value:function(e,i){this.validateOptions(i),e.directive("show-slide",{bind:this.bind.bind(this),inserted:this.inserted.bind(this),componentUpdated:this.componentUpdated.bind(this)})}},{key:"bind",value:function(e,i){this.parseArgs(e,i)}},{key:"inserted",value:function(e,i){this.initializeTarget(e,i.value)}},{key:"componentUpdated",value:function(e,i){this.toggleSlide(e,i)}},{key:"validateOptions",value:function(e){void 0!==e&&e.hasOwnProperty("customEasing")&&(this.easingOptions.custom=e.customEasing)}},{key:"kebabToCamel",value:function(e){return e.replace(/-([a-z])/g,function(e){return e[1].toUpperCase()})}},{key:"parseArgs",value:function(e,i){if(i.hasOwnProperty("arg")){var t=i.arg.split(":");this.validateEasing(e,t),this.validateDuration(e,t)}else e.duration=300,e.durationInSeconds="0.3s",e.easing="ease"}},{key:"validateEasing",value:function(e,i){i.hasOwnProperty(1)?this.easingOptions.builtIn.includes(i[1])?e.easing=i[1]:this.easingOptions.custom.hasOwnProperty(this.kebabToCamel(i[1]))?e.easing=this.easingOptions.custom[this.kebabToCamel(i[1])]:e.easing="ease":e.easing="ease"}},{key:"validateDuration",value:function(e,i){e.duration=i.hasOwnProperty(0)?parseInt(i[0]):300,e.durationInSeconds=e.duration/1e3+"s"}},{key:"initializeTarget",value:function(e,i){i||(e.style.height="0px"),e.style.overflow="hidden",e.style.transition="height "+e.easing+" "+e.durationInSeconds}},{key:"toggleSlide",value:function(e,i){i.value!==i.oldValue&&(i.value?this.slideOpen(e):this.slideClosed(e))}},{key:"slideOpen",value:function(e){e.isAnimating&&clearTimeout(e.timeout),e.isAnimating=!0;var i=e.scrollHeight;e.style.height=i+"px",e.timeout=setTimeout(function(){e.style.height="auto",e.isAnimating=!1},e.duration)}},{key:"slideClosed",value:function(e){e.isAnimating&&clearTimeout(e.timeout),e.isAnimating=!0;var i=e.scrollHeight;e.style.height=i+"px",setTimeout(function(){e.style.height="0px"},25),e.timeout=setTimeout(function(){e.isAnimating=!1},e.duration)}}]),e}(),vShowSlide=new VShowSlide;

Который сохраняем себе в файлик, подключаем через script, и используем:

Vue.use(vShowSlide, {
  customEasing: {
    exampleEasing: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
  }
});

Comments

[danilr]

спасибо)

Answer 2

[0xD34F]

Подключаете файл v-show-slide.js из папки dist.

Затем Vue.use(window['v-show-slide'].default);.

Comments

[danilr]

спасибо)