simple-menu-builder-vue

Simple menu builder for vue

Installation

Install the plugin:

npm install --save simple-menu-builder-vue

Use the plugin in your app:

import Vue from 'vue'
import SimpleMenuBuilderVue from 'simple-menu-builder-vue'

Vue.use(SimpleMenuBuilderVue)

Example

All elements that you see in the nestableItems object must be (show, id, link, text). You can: delete, edit menu items. You will implement the addition yourself by simply adding a new element with a unique id to nestableItems. To understand what the menu consists of, style with the styles described below. Icons: By default, the menu item opener is "+" and "-", you can add your own icons by adding the attribute icon =" true ", also adding slots to the menu.

<menu-builder icon="true" :nestableItems="nestableItems"  :lang="{text: 'Text', link: 'URL', delete: 'Delete'}">
    <template v-slot:plus> </template>
    <template v-slot:minus> </template>
    </menu-builder>

You can also specify your text in the menu editing

lang =" {text: 'Text', link: 'URL', delete: 'Delete'} "

<template>
  <div id="app">

    <menu-builder  :nestableItems="nestableItems" :lang="{text: 'Текст',link: 'URL',delete:'Удалить'}">

    </menu-builder>

  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
        nestableItems: [
            {
                link: 'https://google.com',
                id: 0,
                text: 'Andy',
                show: true
            }, {
                id: 1,
                link: 'https://google.com',
                text: 'Harry',
                show: false,
                children: [{
                    id: 2,
                    text: 'David',
                    link: 'https://google.com',
                    show: false
                },{
                    id: 4,
                    text: 'as',
                    link: 'https://google.com',
                    show: false
                }]
            }, {
                id: 3,
                text: 'Lisa',
                link: 'https://google.com',
                show: false
            }
        ]
    }
  }
}
</script>

<style>
  ul {
    cursor: pointer;
  }

  .slide-enter-active {
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    transition-timing-function: ease-in;
  }

  .slide-leave-active {
    -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  }

  .slide-enter-to, .slide-leave {
    max-height: 100px;
    overflow: hidden;
  }

  .slide-enter, .slide-leave-to {
    overflow: hidden;
    max-height: 0;
  }
  #app{
    display: flex;
    justify-content: center;
  }
  .dd { position: relative; display: block; margin: 0; padding: 0;  list-style: none;  line-height: 20px; }

  .dd-list { display: block; position: relative; margin: 0; padding: 0; list-style: none; }
  .dd-item .dd-list { padding-left: 30px; }
  .dd-collapsed .dd-list { display: none; }

  .dd-item,
  .dd-empty,
  .dd-placeholder {
    width: 300px;display: block; position: relative; margin: 0; padding: 0; min-height: 20px;  line-height: 20px; }


  .dd-handle { width: 300px; display: block;  margin-top: 10px; padding: 5px 10px; color: #333; text-decoration: none; font-weight: bold; border: 1px solid #ccc;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:    -moz-linear-gradient(top, #fafafa 0%, #eee 100%);
    background:         linear-gradient(top, #fafafa 0%, #eee 100%);

    box-sizing: border-box; -moz-box-sizing: border-box;
    user-select: none;
  }
  .dd-handle:hover { color: #2ea8e5; background: #fff; }

  .dd-item > button { display: block; position: relative; cursor: pointer; float: left; width: 25px; height: 20px; margin: 5px 0; padding: 0; text-indent: 100%; white-space: nowrap; overflow: hidden; border: 0; background: transparent; font-size: 12px; line-height: 1; text-align: center; font-weight: bold; }
  .dd-item > button:before { content: '+'; display: block; position: absolute; width: 100%; text-align: center; text-indent: 0; }
  .dd-item > button[data-action="collapse"]:before { content: '-'; }


  .dd-empty { margin: 5px 0; padding: 0; min-height: 30px; background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box; }
  .dd-empty { border: 1px dashed #bbb; min-height: 100px; background-color: #e5e5e5;
    background-image: -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
    -webkit-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image:    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
    -moz-linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-image:         linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff),
    linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%, #fff);
    background-size: 60px 60px;
    background-position: 0 0, 30px 30px;
  }

  .dd-dragel { position: absolute; pointer-events: none; z-index: 9999; }
  .dd-dragel > .dd-item .dd-handle { margin-top: 0; }
  .dd-dragel .dd-handle {
    -webkit-box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
    box-shadow: 2px 4px 6px 0 rgba(0,0,0,.1);
  }
  .edit-item{
    float: right;
    padding: 0 10px;
    color: #000;
    font-size: 20px;
    text-decoration: none;
  }


  .dd-placeholder{margin-top: 10px; padding: 0;  background: #f2fbff; border: 1px dashed #b6bcbf; box-sizing: border-box; -moz-box-sizing: border-box;}


  .dd-settings{
    border: 1px solid #e5e5e5;
    padding: 15px;
  background: #fff;
  }
  .dd-settings label{
    width: 100%;
    display: block;
    margin-bottom: 15px;
  }
  .dd-settings input{
    width: 100%;
  }
  .delete-item{
    color: #dc3232;
    text-decoration: underline;

  }

</style>