npm i vue-select
Basic Usage:
|
1 2 3 4 5 |
// With NPM or Yarn import Vue from 'vue'; import vSelect from 'vue-select'; import 'vue-select/dist/vue-select.css'; Vue.component('v-select', vSelect); |
|
1 2 3 4 |
<!-- For Browser --> <link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css" /> <script src="https://unpkg.com/vue@latest"></script> <script src="https://unpkg.com/vue-select@latest"></script> |
|
1 2 3 |
<v-select :options="['JavaScript', 'CSS', 'HTML']"></v-select> <!-- OR --> <v-select :options="[{label: 'JavaScript', code: 'js'}]"></v-select> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<template> <div class="col-span-3 mb ml-2"> <div class="font-semibold">Confirm</div> <div :class="{ 'bg-green-600': toggle }" class=" w-14 h-8 mt flex items-center bg-gray-300 rounded-full p-1 duration-300 cursor-pointer " > <div :class="{ 'translate-x-6': toggle }" class="bg-white w-6 h-6 rounded-full shadow-md transform duration-300" ></div> </div> </div> <v-select :options="['JavaScript', 'CSS', 'HTML']"></v-select> <div>{{ selected }}</div> </template> <script> import vSelect from 'vue-select'; export default { name: 'App', components: { vSelect, }, data() { return { selected: 5, }; }, }; </script> <style scoped> @import './app.css'; </style> |
