add select2 example

2024-12-03 12:38:24 +08:00 · 2015-08-04 16:21:10 -04:00 · 2015-08-04 16:21:10 -04:00 · d4bf067bb0
commit d4bf067bb0
parent ce16e4ef66
1 changed files with 63 additions and 0 deletions
--- a/examples/select2/index.html
+++ b/examples/select2/index.html
@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Vue.js custom directive integration example (select2)</title>
+    <script src="../../dist/vue.js"></script>
+    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
+    <link href="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet">
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
+    <style>
+      select {
+        min-width: 300px;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div id="el">
+      <p>Selected: {{selected}}</p>
+      <select v-select="selected" options="options">
+        <option value="0">default</option>
+      </select>
+    </div>
+
+    <script>
+    Vue.directive('select', {
+      twoWay: true,
+      bind: function () {
+        var optionsData
+        var optionsExpression = this._checkParam('options')
+        if (optionsExpression) {
+          optionsData = this.vm.$eval(optionsExpression)
+        }
+        var self = this
+        $(this.el)
+          .select2({
+            data: optionsData
+          })
+          .on('change', function () {
+            self.set(this.value)
+          })
+      },
+      update: function (value) {
+        $(this.el).val(value).trigger('change')
+      },
+      unbind: function () {
+        $(this.el).off().select2('destroy')
+      }
+    })
+
+    var vm = new Vue({
+      el: '#el',
+      data: {
+        selected: 0,
+        options: [
+          { id: 1, text: 'hello' },
+          { id: 2, text: 'what' }
+        ]
+      }
+    })
+    </script>
+  </body>
+</html>