vouill / vue-slideout Goto Github PK

https://snag.gy/J720KT.jpg

All code is from sample.

Setting touch prop/option to false doesn't seem to work

I set touch=false (or touch="false") and touch is still enabled

<template> <Slideout menu="#slideoutmenu" panel="#wrapper" touch=false :toggleSelectors="['.menu-trigger']" @on-beforeopen="open" @on-beforeclose="close"></Slideout> </template>

What I do to fix this issue is this.$children[0].slideout.disableTouch() when the instance is mounted but I'd like to avoid that.

Is this a bug, or is there another/better way to disable touch?

Please note, the only "touch" I want to disable is the touch events that open/close the menu. The other touch events like scroll (scrolling the menu) I want to keep them.

Thanks

Description:
When defining a class selector in toggleSelectors, the event listener is bound only to the first instance of elements matching the selector. Since it's accepting classes (and everything else) as selectors, it should bind the event listener to all instances.

My scenario:
I have a project where the toggle should be bound to all main menu links.

Additional details:

mounted: function () {
    // ...
   this.toggleSelectors.forEach(selector => {
        document.querySelector(selector).addEventListener('click', () => {
          this.slideout.toggle()
        })
    })
    // ...
}

This seems to be quite simple to fix by using querySelectorAll with iteration instead of querySelector. I can create a PR if you think this is reasonable.

As I calculate the padding attribute depending on the window width I would appreciate if it could be dynamic.
Maybe the attribute could be watched and adjusted when changed without having to refresh the page?

Hi! I can't find place where I can set that menu was always shown. Could you help me?

I think it should be near :toggleSelectors="['.toggle-button']" @on-open="open" but I can't figure out what I should to do? Find and modify class toggle-button ?

I want to make it's active only on desktop by default and hidden on mobile devices. Is it's possible to do with css?

Hey there,

Thanks for sharing the plugin!

I am trying to access the .toggle() function you mention in the docs via the component instance, but the method doesn't seem to be available. Am I missing anything?

Here is a screenshot showing there error. Thanks.

请问有解决办法么

Maybe it is trivial question, but what is the cleanest way to keep it open by default?

Thank you!

Version: 1.7.0

> vue init nuxt-community/starter-template nuxt-sidebar
> cd nuxt-sidebar/
> npm install
> npm install --save vue-slideout

// layouts/default.vue
<script>
import Slideout from 'vue-slideout'
export default {
  components: {
    Slideout
  }
}  
</script>

> npm run dev

Error: Cannot read property 'middleware' of undefined
Traceback:

  // nuxt/server.js
  midd = []
  if (layout.middleware) midd = midd.concat(layout.middleware)
  Components.forEach((Component) => {
    if (Component.options.middleware) {
      midd = midd.concat(Component.options.middleware)

Why is options undefined? Shouldn't all Vue components respond to options? Is this a problem with nuxt.js or this plugin?

Hi, if I don't want use npm can you give me install instructions and static resources (vue-slideout.js, css files ...) to include in our project?

I have slider that higher than screen size. I need to scroll its down. But I can't do it.

Using vue-slideout with CDN on HTML page will result in "Slideout is not a constructor" error.

You can check the demo that has the error below.

https://codepen.io/kabanoki/pen/xxbQmMR

How should I respond?

If i have more than one of any class defined in :toggle-selectors, either all of them don't work, or only one of them works at a time.

please,how to open a menu by js code,but dom click

Hi,
I'm trying to use your plugin with webpack but I receive an error, when I import it like this in my app.js file:

import Slideout from 'vue-slideout';

Error message:

ERROR in ./~/vue-slideout/lib/vue-slideout.js
Module build failed: ReferenceError: Unknown plugin "transform-runtime" specified in "myproject/node_modules/vue-slideout/.babelrc" at 0, attempted to resolve relative to "myproject/node_modules/vue-slideout"
    at myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:180:17
    at Array.map (native)
    at Function.normalisePlugins (myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)
    at OptionManager.mergeOptions (myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:234:36)
    at OptionManager.init (myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (myproject/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (myproject/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (myproject/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (myproject/node_modules/babel-loader/lib/index.js:48:20)
    at Object.module.exports (myproject/node_modules/babel-loader/lib/index.js:163:20)
 @ ./src/app.js 15:19-42
 @ multi (webpack)-dev-server/client?http://localhost:9001 ./src/app.js
webpack: Failed to compile.

You might have to add your .babelrc file to .npmignore.

I've found out that in slideout.vue line 54
this.$emit('on-' + event, event)
isn't populating the data to the event listener, perhaps change those lines to
this.slideout.on(event, (data) => { this.$emit('on-' + event, data)
could fix the issue?