Vue 2.0 Hello World

by Manish Gupta

HTML

<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20182.524/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.20182.524/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20182.524/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20182.524/interop/vue2/wijmo.vue2.min.js"></script>


<div id="app">
  <h3>
  {{message}}
  </h3>
  <wj-menu :items-source="menuItems" header="File" display-member-path="header" sub-items-path="items" :open-on-hover="true" :item-clicked="itemClicked"></wj-menu>
</div>

CSS

#app{
  margin:50px;
}

/* customize wijmo default styles */

.wj-state-selected {
  color: black;
  background: orange;
}

.wj-menu {
  padding: 6px 14px;
  background-color:lightcoral;
}

.wj-menu:hover,
.wj-menu.wj-state-focused {
  background: lightcoral;
}

.wj-menu .wj-input-group .wj-input-group-btn {
  display: none;
  /* hide the menu's drop-down buttons */
}

.wj-listbox.wj-menu-items {
  min-width: 8em;
  border: none;
  background: #fddfa7;
}

.wj-listbox.wj-menu-items .wj-listbox-item:not(.wj-separator) {
  padding: 6px 12px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Wijmo with Vue2!',
    menuItems:getFileMenuItems()
  },
  methods:{
  	itemClicked:function(s,e){alert('Thank you for clicking ***' + s.text + '***!')}
  }
})

function getFileMenuItems() {
    return [{
        header: 'New',
        items: [{
            header: 'Project'
          },
          {
            header: 'Site'
          },
          {
            header: 'File'
          },
        ]
      },
      {
        header: 'Open'
      },
      {
        header: 'Save'
      },
      {
        header: 'Save As',
        items: [{
            header: 'Normal'
          },
          {
            header: 'Compressed'
          },
          {
            header: 'Encrypted'
          }
        ]
      },
      {
        header: '-'
      },
      {
        header: 'Exit'
      }
    ];
  }