vue quasar框架笔记

常用正则

{{data}} import { QList } from 'quasar' export default { components: { QList }, data () { return {} }, computed: {}, methods: {}, created: function () { }, mounted () { this.$nextTick(() => { }) }, beforeDestroy () { } }

...Your Content...

Title

Tab One

Tab Two

Tab Three

Tab Four

Tab Five

Tab One

Tab Two

Tab Three

Tab One

Tab Two

Tab Three

.........

11. 对齐 ...

...

... 12. 下拉刷新

Lorem ipsum dolor sit amet...

13. QSideLink 左右侧边栏可以像链接一样使用返回按钮(QSideLink只在“左”或“右” QLayout slot) Go to Route

Go to Route

Go to some other Route

14. Handling Back Button处理后退按钮

Logout 指令“v-go-back” Logout 调用window.history.back(),而不是 $router.push(“/”) 。 15. Context Menu右键单击(或长时间点击触摸设备能力)

16. Breadcrumbs 面包屑 17. Pagination 分页 18. Scroll Observable 滚动的(当页面溢出容器 .scroll 应用CSS类) 19. Directive "v-scroll" 指令“v-scroll” 20. Infinite Scroll 无限滚动(必须是当前高度大于一个屏幕高度才能生效)

Lorem ipsum dolor sit amet...

21. Scroll Area 滚动区域(自定义了滚动条样式)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

22. Scroll Fire (当页面往上滚动时在页面顶部显示的提示信息) 性能问题最小50ms触发一次 23. Back to Top 回到顶部

24. Scrolling Utils 滚动条工具类 // 获取设置滚动条位置 import { scroll } from 'quasar' const { getScrollPosition, setScrollPosition } = scroll // Get scroll position of a element or page. Use it in conjunction with `getScrollTarget()` (Number pixels) getScrollPosition(scrollTargetDomElement) // Setting scroll position of an element or page: setScrollPosition (scrollTargetElement, offset[, duration]) // 获取滚动条高度 import { scroll } from 'quasar' const { getScrollHeight } = scroll // get scrolling container inner height (Number) getScrollHeight(scrollTargetDomElement) console.log( getScrollHeight(el) ) // 824 (it's in pixels always) // 获取滚动条宽度 import { scroll } from 'quasar' const { getScrollbarWidth } = scroll console.log(getScrollbarWidth()) // 16 (it's in pixels) 25. Button 按钮 // 普通图文按钮 New item // 图标按钮

// 圆形按钮 (一般只有一个图标)

26. Field 字段组件

27. Input (Textfield)

28. Chips Input 标签输入框

29. Autocomplete 自动完成自动完成组件绑定到父文本框(如。 QInput QSearch)

30. Search (Textfield) 搜索(文本框) 31. Slider 滑块

32. Slider Range 滑块范围 33. Radio 单选

34. Checkbox 多选

35. Toggle 开关

36. Option Group 选项组 // checkboxes //radios 36. Datetime 时间日期

37. Inline Datetime 日历时间显示

38. Datetime Range 时间范围选择

39. Select 40. Dialog Select 弹出选择框 41. Rating 评级

42. Knob 以圈的形式显示分数百分比(按钮)

42. Uploader 文件上传 43. Action Sheet 手机端底部弹出的按钮组 import { ActionSheet } from 'quasar' ActionSheet.create({ title: 'Article Actions', // specify ONLY IF you want gallery mode: gallery: true, actions: [ { label: 'Delete', // Choose one of the following two: icon: 'delete', // specify ONLY IF using icon avatar: 'assets/some-avatar.png', // specify ONLY IF using avatar handler: function() { console.log('Deleted Article') } }, ... ], // optional: dismiss: { // label is used only for iOS theme label: 'Cancel', // tell what to do when Action Sheet // is dismised (doesn't trigger when // any of the actions above are clicked/tapped) handler: function() { // console.log('Cancelled...') } } }) 44. Alert import { Alert } from 'quasar' Alert.create({html: 'Warning, warning, Will Robinson!'}) 45. Toast 手机端底部弹出的信息提示框 import { Toast } from 'quasar' Toast.create(String or Object) 46. Dialog 弹出框 (对话框选择框) import { Dialog } from 'quasar' Dialog.create(configObj) (Object with `close` method) 47. Modal 模态弹出框 (弹出一个全屏的内容页)

Basic Modal

48. Popover 弹出一组按钮组等 Email

...

49. Tooltip tip 弹出一个小的提示信息(一句话) Email

Some text as content of Tooltip

// ------------------------布局板块 ---------------------------------- 49. Cards 卡片

Card Title

Card Content

Cafe Basilico

250 ft

$・Italian, Cafe

Small plates, salads & sandwiches in an intimate setting.

5:30PM

7:30PM

9:00PM

Reserve

50. Collapsible (+ Accordion) 可折叠(+手风琴)

Content

51. Data Table 数据表 52. HTML Tables 表格

Name	Price	In Stock
Item #1	$10.11	101
Item #2	$8.88	34
Item #3	$0.15	1670

Name	Price	In Stock
Item #1	$10.11	101
Item #2	$8.88	34
Item #3	$0.15	1670

53. Lists and List Items 列表列表项

Recent chats

John Doe

Quasar enthusiast

Previous chats

54. Carousel 轮播显示内容信息(轮播图)

Slide 1

Slide 2

Slide 3

55. Quasar Stepper 通过编号的步骤

...Step content, components, ...

...

Back

Step 1

Continue

Step 2

Back

Step 3

Back

Step 4

Back

Step 5

Restart

Back

56. Ajax Bar 异步进度条 57. Loading import { Loading, // optional!, for example below // with custom spinner QSpinnerGears } from 'quasar' // default options Loading.show() // with a custom delay Loading.show({ delay: 300 // milliseconds }) // customizable (all props available) Loading.show({ spinner: QSpinnerGears, message: 'Some message', messageColor: 'blue', spinnerSize: 250, // in pixels spinnerColor: 'white', customClass : 'bg-primary' }) 58. Inner Loading

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel magna eu risus laoreet tristique. Nulla ut fermentum elit, nec consequat augue. Morbi et dolor nec metus tincidunt pellentesque. Nullam non semper ante. Fusce pellentesque sagittis felis quis porta. Aenean condimentum neque sed erat suscipit malesuada. Nulla eget rhoncus enim. Duis dictum interdum eros.

59. Progress Bar (QProgress) 进度条

60. Spinners londing 显示 ** 过程正在发生

61. Handler Parameter 平移触摸/鼠标动作

...

// "handler" is a Function which receives an Object as parameter 62. Swipe Touch/Mouse Action 滑动触摸/鼠标动作

...

// "handler" is a Function which receives an Object as parameter 63. Swipe Touch/Mouse Action 滑动触摸/鼠标动作

...

// "handler" is a Function which receives an Object as parameter 64. Image Gallery 图片库

65. Parallax 视差滚动

Parallax

66. Video Embedding 视频嵌入

67. Transition (QTransition) css3 过渡动画

Lorum Ipsum

68. Slide Transition css3 幻灯片过渡 ... 69. JS Animations js 动画 import { animate } from 'quasar' let id = animate.start({ name: 'unique-animation-name', // optional, if none is supplied a unique one is created and returned from: '0', // current position to: '100', // final position duration: 300, // duration of the animation done (finalPosition) {...}, // function to call when animation is done cancel (currentPosition) {...}, // function to call when animation is aborted apply (currentPosition) {...}, // function called on each step so you can apply changes easing (currentPosition) { // custom easing function, see below // ...return transformation of currentPosition... } }) // Starting an animation with same name will abort the previous one // Stop an animation using its name animate.stop('unique-animation-name') // or animate.stop(id) // id returned from above 70. Animation CSS Helper Classes CSS动画助手类 animate-spin 应用连续旋转/旋转到DOM元素 animate-spin-reverse 应用连续旋转/旋转相反的方向 animate-spin DOM元素) animate-blink 闪烁效应应用于DOM元素 animate-pop 突然出现的效果应用到DOM元素 animate-scale 缩小的效果应用到DOM元素 animate-fade 淡入效果应用到DOM元素 animate-bounce 应用连续反弹效应的DOM元素 71. Handling JS Date 日期处理方法 // we import all of `date` import { date } from 'quasar' // destructuring to keep only what is needed const { addToDate } = date let date = addToDate(new Date(), { days: 7, months: 1 }) import { date } from 'quasar' let timeStamp = Date.now() let formattedString = date.formatDate(timeStamp, 'YYYY-MM-DDTHH:mm:ss.SSSZ') let formattedString = date.formatDate(timesStamp, 'MMMM - dddd', { dayNames: ['Duminica', 'Luni'], monthNames: ['Ianuarie', 'Februarie'] }) 72. DOM Utils DOM操作方法 import { dom } from 'quasar' const { offset } = dom // Offset on screen console.log(offset(DomElement)) // { top: 10, left: 100 } import { dom } from 'quasar' // Offset on screen console.log(dom.offset(DomElement)) // { top: 10, left: 100 } 73. Formatter Utils 数据格式化方法 // we import all of `date` import { format } from 'quasar' // destructuring to keep only what is needed const { capitalize, humanStorageSize } = format console.log( capitalize('some text') ) // Some text console.log( humanStorageSize(13087) ) // 12.78 kB 74. Other Utils 其他方法 import { openURL } from 'quasar' openURL('http://...') // Debounce Function 防抖方法 (过去300毫秒没有执行过,才会执行) import { debounce } from 'quasar' (Debounced Function) debounce(Function fn, Number milliseconds_to_wait, Boolean immediate) // Example: window.addEventListener( 'resize', debounce(function() { .... things to do ... }, 300 ) ) // Throttle Function 节流方法 (每隔300毫秒只能执行一次) import { throttle } from 'quasar' (Throttled Function) throttle(Function fn, Number limit_in_milliseconds) // Example: execute at most once every 0.3s window.addEventListener( 'resize', throttle(function() { .... things to do ... }, 300 ) ) 75. Tree 树 treeModel: [ { title: 'Item 1', expanded: true, children: [ { title: 'Item 1.1', expanded: false, children: [ { title: 'Item 1.1.1', expanded: false, children: [ { title: 'Item 1.1.1.1', expanded: false, children: [] } ] }, { title: 'Item 1.1.2', expanded: false, handler () { console.log('Tapped on Item 1.1.2') }, children: [] } ] }, { title: 'Item 1.2', expanded: false, children: [] } ] }, { title: 'Item 2', expanded: false, children: [] } ] 76. Chip 右上角显示数字的角标

q-chip

q-chip 77. Chat IM