其它实用程序

TIP

有关UMD版本的使用,请参见此处.

打开外部URL

import { openURL } from 'quasar'

openURL('http://...')

// full syntax:
openURL(
  String url,
  Function rejectFn, // optional; gets called if window cannot be opened
  Object windowFeatures // (v1.13+) optional requested features for the new window
)

它将处理在Cordova、Electron或浏览器下运行时涉及的怪异行为,包括通知用户他/她必须确认打开弹出窗口。

当用Cordova(或Capacitor)包装时,如果InAppBrowserCordova插件还安装了那最好(但不是“必须做的”),这样openURL就可以挂接到这个插件中。

从Quasar v1.11+开始,如果运行在iOS并且cordova-plugin-safariviewcontroller安装了,则openURL将首先尝试挂接到它。

可选的windowFeatures参数应该是一个具有来自window.open()窗口功能的键和布尔值的对象(如下例所述)。请注意,当openURL不使用window.open()这种实现时,这些特性将不被考虑(例如,当它挂接在InAppBrowser或electron自己的窗口打开器时)。

// example of openURL() with windowFeatures:
// (requires Quasar v1.13+)

openURL(
  'http://...',
  null, // in this example we don't care about the rejectFn()

  // this is the windowFeatures Object param:
  {
    noopener: true, // this is set by default for security purposes
                    // but it can be disabled if specified with a Boolean false value
    menubar: true,
    toolbar: true,
    noreferrer: true,
    // .....any other window features
  }
)

TIP

如果要在Cordova应用程序中打开电话拨号器,请不要使用 openURL()。 相反,你应该直接使用 <a href="tel:123456789"> 标签或 <QBtn type="a" href="tel:123456789">

复制到剪贴板

以下是将一些文本复制到剪贴板的助手。 该方法返回一个Promise。

import { copyToClipboard } from 'quasar'

copyToClipboard('some text')
  .then(() => {
    // 成功!
  })
  .catch(() => {
    // 失败
  })

导出文件

以下是触发文件下载的助手。

import { exportFile } from 'quasar'

// mimeType是可选的;
// 默认的mimeType为“text/plain”
(status) exportFile(fileName, rawData[, mimeType])

最简单的例子:

import { exportFile } from 'quasar'

const status = exportFile('important.txt', 'Some important content')

if (status === true) {
  // 浏览器允许
}
else {
  // 浏览器拒绝
  console.log('Error: ' + status)
}

去抖(Debounce)函数

如果您的应用程序使用JavaScript来完成繁重的任务,那么去抖函数对于确保给定任务不会频繁触发以至于阻碍浏览器性能至关重要。去抖函数会限制函数的触发速率。

Debouncing强制一个函数不会被再次调用,直到经过一段时间而没有被调用。 正如“只有经过100毫秒而未被调用才执行此功能”。

一个简单的例子:在窗口上有一个调整大小的监听器,它执行一些元素尺寸计算并(可能)重新定位一些元素。 这本身并不是一项繁重的任务,但是经过多次调整后反复触发,真的会减慢你的App速度。 那么为什么不限制函数可以触发的速率呢?

// 返回一个函数,只要它继续被调用,就不会被触发。
// 该函数在停止被调用N毫秒后将被调用。 
// 如果传递`immediate`,则立即触发该函数
// 而不是拖延。
import { debounce } from 'quasar'

(Debounced Function) debounce(Function fn, Number milliseconds_to_wait, Boolean immediate)

// Example:
window.addEventListener(
  'resize',
  debounce(function() {
    //....要做的事情...
  }, 300 /*等待的毫秒*/)
)

或者作为.vue文件中的方法调用:

methods: {
  myMethod () { .... }
},

created () {
  this.myMethod = debounce(this.myMethod, 500)
}

WARNING

使用像myMethod: debounce(function () { // Code }, 500)这样的方法声明来将你的函数加上去抖效果(debouncing)将意味着debounce方法将在该组件的所有渲染实例之间共享,因此也可以共享去抖效果(debouncing)。 此外,this.myMethod.cancel()将不起作用,因为Vue将每个方法都由另一个函数封装以确保正确的this属性绑定。 应遵循上面的代码段来避免这种情况。

还有一个frameDebounce可用,它会延迟调用你的函数,直到下一个浏览器框架计划运行(阅读requestAnimationFrame)。

import { frameDebounce } from 'quasar'

(Debounced Function) frameDebounce(Function fn)

// 例子:
window.addEventListener(
  'resize',
  frameDebounce(function() {
    .... things to do ...
  })
)

节流(Throttle)功能

节流限制一定时间内一个函数可调用的最大次数。 如“每X毫秒最多执行一次该功能”。

import { throttle } from 'quasar'

(Throttled Function) throttle(Function fn, Number limit_in_milliseconds)

// 例子:
window.addEventListener(
  'resize',
  throttle(function() {
    .... things to do ...
  }, 300 /* 每0.3s最多执行一次 */)
)

或者作为.vue文件中的方法调用:

methods: {
  myMethod () { .... }
},

created () {
  this.myMethod = throttle(this.myMethod, 500)
}

WARNING

使用像myMethod: throttle(function () { // Code }, 500)这样的方法声明来将你的函数加上节流效果(throttling)将意味着throttle方法将在该组件的所有渲染实例之间共享,因此也可以共享节流效果(throttling)。 应遵循上面的代码段来避免这种情况。

(深)复制对象

和“jQuery.extend()`基本相同的方法。 采用相同的参数:

import { extend } from 'quasar'

let newObject = extend([Boolean deepCopy], targetObj, obj, ...)

注意对象内的方法。

生成UID

生成唯一标识符:

import { uid } from 'quasar'

let uid = uid()
// 例如: 501e7ae1-7e6f-b923-3e84-4e946bff31a8

处理DOM事件处理程序中的“事件”

它是跨浏览器的。

import { event } from 'quasar'

node.addEventListener('click', evt => {
  // 左点击?
  (Boolean) event.leftClick(evt)

  // 中间点击?
  (Boolean) event.middleClick(evt)

  // 右键点击?
  (Boolean) event.rightClick(evt)

  // 键入数字格式
  (Number) event.getEventKey(evt)

  // 鼠标滚轮滚动距离(以像素为单位)
  (Object {x, y}) event.getMouseWheelDistance(evt)

  // 在视区上的位置
   //适用于鼠标和触摸事件!
  (Object {top, left}) event.position(evt)

  // 获取目标DOM元素, 当鼠标或触摸
  // 事件已经发生时
  (DOM Element) event.targetElement(evt)

  // 调用stopPropagation和preventDefault
  event.stopAndPrevent(evt)
})