[Vuejs]-Vue js use npm module as inline script

by

0👍

This is just a url https://github.com/stephan281094/vue-drag-select to dispaly package details not any file path

Here is the raw data of .js file might be you want to include, go this url and save contents of this file in your local and then import/include 

https://github.com/stephan281094/vue-drag-select/blob/master/dist/vue-drag-select.js

0👍

If you include cdn script, then DragSelect is global variable, you can access it directly

Vue.component('vue-drag-select', DragSelect.default)

Vue.component('vue-drag-select', DragSelect.default)
new Vue({
  el: "#app1",
  methods: {
    getClasses (item, selectedItems) {
      const isActive = !!(selectedItems.find((selectedItem) => {
        return parseInt(selectedItem.dataset.item, 10) === item
      }))
      return {
        item: true,
        active: isActive
      }
    }
  }
})
*,
  *:before,
  *:after {
    box-sizing: inherit;
  }
  html {
    box-sizing: border-box;
    user-select: none;
  }
  html,
  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
  }
  body {
    font: 16px / 1.5 'Helvetica Neue', sans-serif;
    padding: 5%;
  }
  /* Custom styling */
  .item {
    display: inline-flex;
    min-width: 80px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #ddd;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 10px;
  }
  .item.active {
    background-color: rgb(0, 162, 255);
    color: #fff;
  }
<script src="https://unpkg.com/vue-drag-select@0.1.5/dist/vue-drag-select.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>


  <div id="app1">
    <h1>Vue Drag Select Example</h1>
      <vue-drag-select selector-class="item">
        <template slot-scope="{ selectedItems }">
          <div
            v-for="item in 50"
            :class="getClasses(item, selectedItems)"
            :data-item="item"
          >
            Item {{ item }}
          </div>
        </template>
      </vue-drag-select>
  </div>

Leave a comment