组件用.vue还是.js_适用于qart.js的vue 2.x的组件

2024-05-09 11:26:12

组件用.vue还是.js

Vue-Qart (vue-qart)

You should read it before you using vue-qart

在使用vue-qart之前，您应该阅读它

现场演示 (Live Demo)

https://chenhuichao.com/vue-qart/demo/

https://chenhuichao.com/vue-qart/demo/

安装 (Installation)

install with NPM

用NPM安装

npm install vue-qart --save

Import

进口

import VueQArt from 'vue-qart'new Vue({components: {VueQArt}
})

用法 (Usage)

In template

在模板中

<vue-q-art :config="config" :downloadButton="downloadButton"></vue-q-art>

Set config value

设置配置值

data () {return {msg: 'Welcome to Your Vue.js App',config: {value: 'https://www.baidu.com',imagePath: './examples/assets/logo.png',filter: 'color'},downloadButton: false}
}

downloadButton whether display donwload button.

downloadButton是否显示downloadButton按钮。

For more details you should definitely check out
有关更多详细信息，请务必查看

qart.js

qart.js

download to image

下载到图片

you can download the qrcode to image by using canvas.toDataURL()

您可以使用canvas.toDataURL()将canvas.toDataURL()下载到图像上

const myCanvas = this.$refs.qart.children[0];
const type = 'image/png';
let image = myCanvas.toDataURL(type).replace(type, "image/octet-stream");
window.location.href = image; // it will save locally

构建设置 (Build Setup)

# install dependencies
npm install# serve with hot reload at localhost:8080/demo/
npm run dev# build demo
npm run demo# export the directive as a library
npm run build

翻译自: https://vuejsexamples.com/the-compoent-of-vue-2-x-for-qart-js/

组件用.vue还是.js

组件用.vue还是.js_适用于qart.js的vue 2.x的组件相关推荐

vue + tone.js_用Tone.js和Vue.js构建的鼓合成器/音序器
vue + tone.js 循环器 (looperator) Looperator is a super cool browser based drum machine / sequencer. It ...
[转]vue项目中，main.js,App.vue,index.html如何调用
1.main.js是我们的入口文件,主要作用是初始化vue实例,并引入所需要的插件 2.App.vue是我们的主组件,所有页面都是在App.vue下进行切换的.其实你也可以理解为所有的路由也是App. ...
vue在html中执行js代码,Vue.js 和 Vue.runtime.js
Vue官方中文文档: Vue有两个版本: 完整版:vue.js.vue.min.js(运行时版+编译器)(编译器:将模板字符串编译成为JS渲染函数的代码) 运行时版:vue.runtime.js.vu ...
vue 父传子_Vue.js教程Vue基本指令
前言本文仅介绍基本常用指令(不包括自定义指令和相应的修饰符,这两个以后再写). 再附上官方API文档,大家也可以去看官方解释,更全面更具体.VueAPI 本文所有指令写在views文件夹下的Home ...
nuxt解决首屏加载慢问题_Nuxt.js超过Vue.js：你什么时候应该使用它，为什么
Nuxt.js是一个建立在Vue.js上的前端框架,它提供了很好的开发特性,比如服务器端渲染.自动生成路由.改进的元标签管理和SEO改进. Nuxt.js 我们的前端团队并没有真正考虑在客户端使用 N ...
如何单页面Vue应用转化成多页面的Vue应用
准备工作在本地用vue-cli新建一个项目,这个步骤vue的官网上有,我就不再说了. 这里有一个地方需要改一下,在执行npm install命令之前,在package.json里添加一个依赖,后面会 ...
组件用.vue还是.js_如何使用Vue.js 2.0构建灵活的图像上传器组件
组件用.vue还是.js by Cathy Ha 由凯茜·哈(Cathy Ha) 如何使用Vue.js 2.0构建灵活的图像上传器组件 (How to build a flexible image u ...
RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景？
RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? RxJS/Cycle.js 与 React/Vue 相比更适用于什么样的应用场景? - 知乎 https://www ...
vanilla js_用Vanilla js编写前端组件
vanilla js There's so much hype these days around front-end frameworks (React, Angular, Vue) that I ...
【Vue.js 牛刀小试】：第九章 - 组件基础再探（data、props）
系列目录地址一.基础知识概览第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的 ...

最新文章

热门文章