最近在学习使用 Vue 开发简单的页面，界面库使用了 Quasar 。
由于刚刚开始接触 Vue，很多地方不熟悉，浪费了不少时间。
以如下的页面为例：
|
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 |
<!DOCTYPE html> <html> <!-- WARNING! Make sure that you match all Quasar related tags to the same version! (Below it's "@1.12.8") http://www.quasarchs.com/start/pick-quasar-flavour --> <head> <!-- <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css"> --> <link href="https://cdn.jsdelivr.net/npm/quasar@1.12.5/dist/quasar.min.css" rel="stylesheet" type="text/css"> </head> <body> <div id="q-app"> <div class="q-ma-md"> <q-select filled v-model="model" use-input use-chips hide-hint input-debounce="0" @new-value="createValue" :options="filterOptions" @filter="filterFn" style="width:300px;"> </q-select> </div> </div> <!-- Add the following at the end of your body tag --> <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.8/dist/quasar.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/quasar@1.12.8/dist/icon-set/svg-material-icons.umd.min.js"></script> <script> Quasar.iconSet.set(Quasar.iconSet.svgMaterialIcons) stringOptions = [ 'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle' ] /* Example kicking off the UI. Obviously, adapt this to your specific needs. Assumes you have a <div id="q-app"></div> in your <body> above */ var vm = new Vue({ el: '#q-app', data: function () { return { model: null, filterOptions: stringOptions } }, //监听属性的变化 watch: { model: function (val) { console.log("val") }, }, methods: { createValue (val, done) { // Calling done(var) when new-value-mode is not set or "add", or done(var, "add") adds "var" content to the model // and it resets the input textbox to empty string // ---- // Calling done(var) when new-value-mode is "add-unique", or done(var, "add-unique") adds "var" content to the model // only if is not already set // and it resets the input textbox to empty string // ---- // Calling done(var) when new-value-mode is "toggle", or done(var, "toggle") toggles the model with "var" content // (adds to model if not already in the model, removes from model if already has it) // and it resets the input textbox to empty string // ---- // If "var" content is undefined/null, then it doesn't tampers with the model // and only resets the input textbox to empty string if (val.length > 0) { if (!stringOptions.includes(val)) { stringOptions.push(val) } done(val, 'toggle') } }, filterFn (val, update) { update(() => { if (val === '') { this.filterOptions = stringOptions } else { const needle = val.toLowerCase() this.filterOptions = stringOptions.filter( v => v.toLowerCase().indexOf(needle) > -1 ) } }) }, } }) </script> </body> </html> |
代码很简单，但是涉及到多个方面的问题
Quasar 图标问题
Quasar 文档给出的例子中，默认使用 Google字库提供的图标文件来实现控件的图标，比如下箭头,如下图：
这个箭头图标就是通过如下代码引入的：
|
1 |
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css"> |
比较麻烦的是，上面的链接引入了太多的东西，导致我们在打包的时候，非常麻烦，因此最简单的方式就是使用SVG图标库提供的CSS文件。这个CSS文件可以直接下载到本地，部署到本地就可以了。
代码如下：
|
1 |
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.8/dist/icon-set/svg-material-icons.umd.min.js"></script> |
但是注意，需要在使用 Quasar 之前声明使用 SVG图标库，代码如下：
|
1 |
Quasar.iconSet.set(Quasar.iconSet.svgMaterialIcons) |
如果不使用上面的代码，界面会变成如下图的样子：
QSelect内容变更通知
我们希望当用户输入或者下拉选中的时候，得到控件的通知，把用户选中的数据记录到数据库中。在实际操作的时候，一直以为这个数据会有 QSelect 的事件通知，结果文档找了半天都没找到。
其实所有的 Vue 插件，都是通过 v-model 实现了数据的双向绑定，相关的代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
............. <q-select v-model="model" ............ <script> .............. var vm = new Vue({ .............. data: function () { return { model: null, ............... } }, .............. |
QSelect 会在用户选中之后，更新model中的数据。
要实现上面的需要，我们使用 Vue 提供的侦听器(watch)功能来跟踪数据的变化，当model变化的时候，调用我们的函数。
相关的代码如下：
|
1 2 3 4 5 6 7 8 |
.......................... //监听属性的变化 watch: { model: function (val) { console.log("val") }, }, ............................. |