Merge branch 'v2' of https://github.com/jdf2e/nutui into v2

package.json

@@ -54,6 +54,7 @@
         "intersection-observer": "^0.5.1",
         "os": "^0.1.1",
         "progress-bar-webpack-plugin": "^1.12.1",
+        "vue-qr": "^2.2.1",
         "webpack-build-notifier": "^1.1.1"
     },
     "peerDependencies": {

src/config.json

@@ -606,6 +606,15 @@
     },
     {
       "version": "1.0.0",
+      "name": "Qart",
+      "chnName": "二维码",
+      "desc": "在指定位置快速生成二维码，方便推广和手机扫码使用",
+      "type": "component",
+      "sort": "0",
+      "showDemo": true,
+      "author": "wangyue"
+    },
+    {
       "name": "Drag",
       "chnName": "拖拽",
       "desc": "实现可拖拽的任意元素",

src/nutui.js

@@ -118,6 +118,7 @@ import SubSideNavBar from "./packages/subsidenavbar/index.js";
 import "./packages/subsidenavbar/subsidenavbar.scss";
 import SideNavBarItem from "./packages/sidenavbaritem/index.js";
 import "./packages/sidenavbaritem/sidenavbaritem.scss";
+import Qart from "./packages/qart/index.js";
 import Drag from "./packages/drag/index.js";
 import "./packages/drag/drag.scss";
 
@@ -180,6 +181,7 @@ const packages = {
   SideNavBar: SideNavBar,
   SubSideNavBar: SubSideNavBar,
   SideNavBarItem: SideNavBarItem,
+  Qart: Qart,
   Drag: Drag
 };
 

src/packages/qart/demo.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="qartDemo">
+        <h4>基础使用</h4>
+        <vue-qr :text="codeValue" :size="300"></vue-qr>
+        <h4>背景图</h4>
+        <vue-qr :bgSrc="imageUrl" :text="codeValue" :size="300"></vue-qr>
+        <h4>logo图</h4>
+        <vue-qr :logoSrc="imageUrl" :text="codeValue" :logoScale="0.5" :size="300"></vue-qr>
+        <h4>logo图+背景颜色</h4>
+        <vue-qr
+            :logoSrc="imageUrl"
+            :text="codeValue"
+            :logoScale="0.5"
+            :size="300"
+            backgroundColor="#F2140C"
+        ></vue-qr>
+        <h4>callback函数</h4>
+        <vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            imageUrl: require("./../../assets/img/logo.png"), //默认二维码中间图片
+            codeValue: "nutui.jd.com/"
+        };
+    },
+    methods: {
+        test(dataUrl, id) {
+            console.log(dataUrl, id, "hello");
+        }
+    }
+};
+</script>

src/packages/qart/doc.md

@@ -0,0 +1,142 @@
+# Qart 二维码
+
+## 基本用法
+``` html
+<template>
+    <div class="qartDemo">
+        <vue-qr :text="codeValue" :size="300"></vue-qr>
+    </div>
+</template>
+```
+``` javascript
+<script>
+export default {
+    data() {
+        return {
+            imageUrl: require("./../../assets/img/logo.png"), 
+            codeValue: "nutui.jd.com/"
+        };
+    },
+};
+</script>
+
+```
+## 背景图
+``` html
+<template>
+    <div class="qartDemo">
+        <vue-qr :bgSrc="imageUrl" :text="codeValue" :size="300"></vue-qr>
+    </div>
+</template>
+```
+``` javascript
+<script>
+export default {
+    data() {
+        return {
+            imageUrl: require("./../../assets/img/logo.png"), 
+            codeValue: "nutui.jd.com/"
+        };
+    },
+};
+</script>
+
+```
+
+## logo图
+``` html
+<template>
+    <div class="qartDemo">
+       <vue-qr :logoSrc="imageUrl" :text="codeValue" :logoScale="0.5" :size="300"></vue-qr>
+    </div>
+</template>
+```
+``` javascript
+<script>
+export default {
+    data() {
+        return {
+            imageUrl: require("./../../assets/img/logo.png"), 
+            codeValue: "nutui.jd.com/"
+        };
+    },
+};
+</script>
+
+```
+## logo图+背景颜色
+``` html
+<template>
+    <div class="qartDemo">
+         <vue-qr
+            :logoSrc="imageUrl"
+            :text="codeValue"
+            :logoScale="0.5"
+            :size="300"
+            backgroundColor="#F2140C"
+        ></vue-qr>
+    </div>
+</template>
+```
+``` javascript
+<script>
+export default {
+    data() {
+        return {
+            imageUrl: require("./../../assets/img/logo.png"),
+            codeValue: "nutui.jd.com/"
+        };
+    },
+};
+</script>
+
+```
+
+## callback函数
+``` html
+<template>
+    <div class="qartDemo">
+        <vue-qr text="Hello world!" :callback="test" qid="testid"></vue-qr>
+    </div>
+</template>
+```
+``` javascript
+<script>
+export default {
+    methods: {
+        test(dataUrl, id) {
+            console.log(dataUrl, id, "hello");
+        }
+    }
+};
+</script>
+
+```
+
+
+## Prop
+
+| 字段                | 说明                                                                                                                                             | 类型     | 默认值  |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ------- |
+| text                | Contents to encode. 欲编码的内容                                                                                                                 | String   | 必传值  |
+| size                | 提前加载高度（数字 1 表示 1 屏的高度）                                                                                                           | Number   | 必传值  |
+| correctLevel        | Correct Level 0-3 容错级别 0-3                                                                                                                   | String   | -       |
+| margin              | 二维码图像的外边距, 默认 20px                                                                                                                    | String   | 20px    |
+| colorDark           | 实点的颜色                                                                                                                                       | String   | #000000 |
+| colorLight          | 空白区的颜色                                                                                                                                     | String   | #ffffff |
+| bgSrc               | 欲嵌入的背景图地址                                                                                                                               | String   | -       |
+| backgroundColor     | 背景色                                                                                                                                           | String   | -       |
+| backgroundDimming   | 叠加在背景图上的颜色, 在解码有难度的时有一定帮助                                                                                                 | String   | -       |
+| logoSrc             | 嵌入至二维码中心的 LOGO 地址                                                                                                                     | String   | -       |
+| logoScale           | 用于计算 LOGO 大小的值, 过大将导致解码失败, LOGO 尺寸计算公式 logoScale*(size-2*margin)                                                          | Number   | 0.2     |
+| logoMargin          | LOGO 标识周围的空白边框                                                                                                                          | Number   | 0       |
+| logoBackgroundColor | Logo 背景色,需要设置 logo margin                                                                                                                 | String   | -       |
+| logoCornerRadius    | 标识及其边框的圆角半径                                                                                                                           | Number   | 0       |
+| whiteMargin         | 背景图外将绘制白色边框                                                                                                                           | Boolean  | true    |
+| dotScale            | 数据区域点缩小比例(0 < scale < 1.0)                                                                                                              | Number   | 0.35    |
+| autoColor           | 背景图的主要颜色将作为实点的颜色                                                                                                                 | Boolean  | true    |
+| binarize            | 图像将被二值化处理, 未指定阈值则使用默认值                                                                                                       | Boolean  | true    |
+| binarizeThreshold   | 二值化处理的阈值(0 < threshold < 255)                                                                                                            | Number   | 128     |
+| callback            | 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序) | Function | —       |
+| bindElement         | 指定是否需要自动将生成的二维码绑定到HTML上                                                                                                       | Boolean  | true    |
+> 更多内容请参照：[vue-qr 官方文档](https://github.com/Binaryify/vue-qr)

src/packages/qart/index.js

@@ -0,0 +1,3 @@
+import VueQr from "vue-qr";
+VueQr.name = "vue-qr";
+export default VueQr;

types/nutui.d.ts

@@ -1,7 +1,7 @@
-import Vue  from 'vue';
+import Vue from 'vue';
 
 declare class UIComponent extends Vue {
-    static install (vue: typeof Vue): void
+    static install(vue: typeof Vue): void
 }
 
 export interface InstallationOptions {
@@ -11,71 +11,72 @@ export interface InstallationOptions {
 
 export const version: string
 
-export const locale: (l:any) => void
+export const locale: (l: any) => void
 
-export function install (vue: typeof Vue, options: InstallationOptions): void
+export function install(vue: typeof Vue, options: InstallationOptions): void
 
-export declare class ActionSheet extends UIComponent {}
-export declare class Badge extends UIComponent {}
-export declare class Button extends UIComponent {}
-export declare class ButtonGroup extends UIComponent {}
-export declare class Calendar extends UIComponent {}
-export declare class Cell extends UIComponent {}
-export declare class CheckBox extends UIComponent {}
-export declare class CheckBoxGroup extends UIComponent {}
-export declare class Col extends UIComponent {}
-export declare class DatePicker extends UIComponent {}
-export declare class Dialog extends UIComponent {}
-export declare class Flex extends UIComponent {}
-export declare class Grid extends UIComponent {}
-export declare class GridCol extends UIComponent {}
-export declare class GridRow extends UIComponent {}
-export declare class Icon extends UIComponent {}
-export declare class ImagePicker extends UIComponent {}
-export declare class Menu extends UIComponent {}
-export declare class NavBar extends UIComponent {}
-export declare class NoticeBar extends UIComponent {}
-export declare class Picker extends UIComponent {}
-export declare class Price extends UIComponent {}
-export declare class Progress extends UIComponent {}
-export declare class Radio extends UIComponent {}
-export declare class RadioGroup extends UIComponent {}
-export declare class Range extends UIComponent {}
-export declare class Rate extends UIComponent {}
-export declare class Row extends UIComponent {}
-export declare class SearchBar extends UIComponent {}
-export declare class ShortPassword extends UIComponent {}
-export declare class Skeleton extends UIComponent {}
-export declare class Slider extends UIComponent {}
-export declare class Stepper extends UIComponent {}
-export declare class Steps extends UIComponent {}
-export declare class Swiper extends UIComponent {}
-export declare class Switch extends UIComponent {}
-export declare class Tab extends UIComponent {}
-export declare class Tabbar extends UIComponent {}
-export declare class TabPanel extends UIComponent {}
-export declare class Toast extends UIComponent {}
-export declare class BackTop extends UIComponent {}
-export declare class Scroller extends UIComponent {}
-export declare class CountDown extends UIComponent {}
-export declare class Uploader extends UIComponent {}
-export declare class TextInput extends UIComponent {}
-export declare class TextBox extends UIComponent {}
-export declare class Avatar extends UIComponent {}
-export declare class Infiniteloading extends UIComponent {}
-export declare class Lazyload extends UIComponent {}
-export declare class Elevator extends UIComponent {}
-export declare class LeftSlip extends UIComponent {}
-export declare class TabSelect extends UIComponent {}
-export declare class Popup extends UIComponent {}
+export declare class ActionSheet extends UIComponent { }
+export declare class Badge extends UIComponent { }
+export declare class Button extends UIComponent { }
+export declare class ButtonGroup extends UIComponent { }
+export declare class Calendar extends UIComponent { }
+export declare class Cell extends UIComponent { }
+export declare class CheckBox extends UIComponent { }
+export declare class CheckBoxGroup extends UIComponent { }
+export declare class Col extends UIComponent { }
+export declare class DatePicker extends UIComponent { }
+export declare class Dialog extends UIComponent { }
+export declare class Flex extends UIComponent { }
+export declare class Grid extends UIComponent { }
+export declare class GridCol extends UIComponent { }
+export declare class GridRow extends UIComponent { }
+export declare class Icon extends UIComponent { }
+export declare class ImagePicker extends UIComponent { }
+export declare class Menu extends UIComponent { }
+export declare class NavBar extends UIComponent { }
+export declare class NoticeBar extends UIComponent { }
+export declare class Picker extends UIComponent { }
+export declare class Price extends UIComponent { }
+export declare class Progress extends UIComponent { }
+export declare class Radio extends UIComponent { }
+export declare class RadioGroup extends UIComponent { }
+export declare class Range extends UIComponent { }
+export declare class Rate extends UIComponent { }
+export declare class Row extends UIComponent { }
+export declare class SearchBar extends UIComponent { }
+export declare class ShortPassword extends UIComponent { }
+export declare class Skeleton extends UIComponent { }
+export declare class Slider extends UIComponent { }
+export declare class Stepper extends UIComponent { }
+export declare class Steps extends UIComponent { }
+export declare class Swiper extends UIComponent { }
+export declare class Switch extends UIComponent { }
+export declare class Tab extends UIComponent { }
+export declare class Tabbar extends UIComponent { }
+export declare class TabPanel extends UIComponent { }
+export declare class Toast extends UIComponent { }
+export declare class BackTop extends UIComponent { }
+export declare class Scroller extends UIComponent { }
+export declare class CountDown extends UIComponent { }
+export declare class Uploader extends UIComponent { }
+export declare class TextInput extends UIComponent { }
+export declare class TextBox extends UIComponent { }
+export declare class Avatar extends UIComponent { }
+export declare class Infiniteloading extends UIComponent { }
+export declare class Lazyload extends UIComponent { }
+export declare class Elevator extends UIComponent { }
+export declare class LeftSlip extends UIComponent { }
+export declare class TabSelect extends UIComponent { }
+export declare class Popup extends UIComponent { }
 
-export declare class LuckDraw extends UIComponent {}
-export declare class Video extends UIComponent {}
-export declare class Signature extends UIComponent {}
-export declare class CircleProgress extends UIComponent {}
-export declare class TimeLine extends UIComponent {}
-export declare class TimeLineItem extends UIComponent {}
-export declare class SideNavBar extends UIComponent {}
-export declare class SubSideNavBar extends UIComponent {}
-export declare class SideNavBarItem extends UIComponent {}
-export declare class Drag extends UIComponent {}
+export declare class LuckDraw extends UIComponent { }
+export declare class Video extends UIComponent { }
+export declare class Signature extends UIComponent { }
+export declare class CircleProgress extends UIComponent { }
+export declare class TimeLine extends UIComponent { }
+export declare class TimeLineItem extends UIComponent { }
+export declare class SideNavBar extends UIComponent { }
+export declare class SubSideNavBar extends UIComponent { }
+export declare class SideNavBarItem extends UIComponent { }
+export declare class Qart extends UIComponent { }
+export declare class Drag extends UIComponent { }