vue-qart, qart.js的compoent 2.x

分享于 

3分钟阅读

GitHub

  繁體 雙語
the directive of vue 2.x for qart.js
  • 源代码名称:vue-qart
  • 源代码网址:http://www.github.com/superman66/vue-qart
  • vue-qart源代码文档
  • vue-qart源代码下载
  • Git URL:
    git://www.github.com/superman66/vue-qart.git
    Git Clone代码到本地:
    git clone http://www.github.com/superman66/vue-qart
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/superman66/vue-qart
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    Travisnpmnpm

    qart

    在使用 vue-qart之前,你应该先读一下

    因为 qart。js的作者没有将最新版本发布到 npm。 在 size。js'作者发布最新版本之前,新选项。versionbackground 在 vue-qart中不起作用。

    有关更多详细信息,请参见这里问题: 大小选项不能正常工作。

    kciter qart.js的Vue 2.x 组件。

    查看演示

    安装

    使用 NPM 安装

    npm install vue-qart --save

    导入

    importVueQArtfrom'vue-qart'newVue({
     components: {VueQArt}
    })

    用法

    模板

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

    设置配置值

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

    imagePath prop的,你可以使用base64而不是图像路径。

    要了解更多细节,你一定要检查一下 qart.js。

    下载到图像

    通过 download 道具,显示下载按钮,它支持:

    • 文本- 按钮文本
    • 可见- 设置下载按钮可见或者不可见
    • 样式- 设置下载按钮样式

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

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

    插件生成设置

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

    COM  
    相关文章