update

config.json

@@ -284,6 +284,13 @@
       "desc": "级联选择面板。多用于地区选择，支持异步拉取数据。",
       "type": "component",
       "showDemo": true
+    },
+    {
+      "name": "QRCode",
+      "chnName": "二维码生成组件",
+      "desc": "一种可以配置的二维码生成组件",
+      "type": "component",
+      "showDemo": false
     }
   ]
 }

package.json

@@ -59,6 +59,7 @@
     "inquirer": "^5.2.0",
     "node-sass": "^4.8.3",
     "postcss-loader": "^2.0.6",
+    "qrcodejs2": "0.0.2",
     "rimraf": "^2.6.2",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",

src/demo/qrcode.vue

@@ -0,0 +1,72 @@
+<template>
+    <div>
+       <nut-docheader 
+        :name="$route.name" 
+        :chName="$route.params.chnName" 
+        type="Filter" 
+        desc=""
+        :showQrCode="true"></nut-docheader>
+        <h5>示例</h5>
+        <nut-codebox :code="demo1"></nut-codebox>
+
+        <h5>Props</h5>
+        <div class="tbl-wrapper">
+            <table class="u-full-width">
+            <thead>
+                <tr>
+                <th>参数</th>
+                <th>说明</th>
+                <th>类型</th>
+                <th>默认值</th>
+                <th>可选值</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td></td>
+                </tr>
+            </tbody>
+            </table>
+        </div>
+        
+        <h5>Events</h5>
+        <div class="tbl-wrapper">
+            <table class="u-full-width">
+            <thead>
+                <tr>
+                <th>事件名</th>
+                <th>说明</th>
+                <th>回调参数</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                <td></td>
+                <td></td>
+                <td></td>
+                </tr>
+            </tbody>
+            </table>
+        </div>
+    </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            demo1:`test`
+        }
+    },
+    methods:{
+    }
+}
+</script>
+
+<style lang="scss">
+</style>

src/package/elevator/src/elevator.vue

@@ -127,6 +127,7 @@ export default {
             }
         },
         onPointerMove(e){
+            e.preventDefault();
             let fontSize = this.getFontSize();
             let dataArrayLength = this.dataArray.length;
             let navHeight = document.getElementById('nut-elevator-nav').clientHeight;

src/package/qrcode/index.js

@@ -0,0 +1,7 @@
+import QRCode from './src/qrcode.vue';
+
+QRCode.install = function(Vue) {
+  Vue.component(QRCode.name, QRCode);
+};
+
+export default QRCode

src/package/qrcode/src/qrcode.vue

@@ -0,0 +1,52 @@
+<template>
+	<div>
+    <div class="nut-qrcode" id="qrcode">二维码位置</div>
+    </div>
+</template>
+<script>
+import QRCode from 'qrcodejs2'
+export default {
+    name:'nut-qrcode',
+    props: {
+    	QCWidth:{
+    		type: Number,
+      		default: 100
+    	},
+    	QCHeight:{
+    		type: Number,
+      		default: 100
+    	},
+    	content:{
+    		type: String,
+      		required:true,
+    	},
+    	fontColor:{
+    		type: String,
+      		default: '#000'
+    	},
+    	backColor:{
+    		type: String,
+      		default: '#fff'
+    	}
+    },
+    data() {
+        return {};
+    },
+    mounted(){
+    	this.qrcode();
+    },
+    methods: {
+    	qrcode () {
+	      let qrcode = new QRCode('qrcode', {  
+	        width: this.QCWidth,  
+	        height: this.QCHeight,   // 高度  
+	        text: this.content, // 二维码内容  
+	        colorDark: this.fontColor,  
+	        colorLight: this.backColor,  
+	      })  
+	    }
+    }
+}
+</script>
+<style lang="scss">
+</style>

src/view/qrcode.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <nut-docheader 
+        :name="$route.name" 
+        :chName="$route.params.chnName" 
+        type="Component" 
+        desc="一种可以生成二维码的组件。" 
+        :showQrCode="true"></nut-docheader>
+        <h6>默认用法</h6>
+        <nut-codebox :code="demo1"  imgUrl="../asset/img/demo/qrcode1.png"></nut-codebox>
+
+        
+        <!-- <pre><code v-highlight v-text="demo1"></code></pre> -->
+        <h6>可配置二维码内容，和配置二维码的高度和宽度</h6>
+        <!-- DEMO代码 -->
+        <nut-codebox :code="demo2"  imgUrl="../asset/img/demo/qrcode2.png"></nut-codebox>
+        <!-- <pre><code v-highlight v-text="demo2" ></code></pre> -->
+        <h5>Props</h5>
+        <div class="tbl-wrapper">
+            <table class="u-full-width">
+              <thead>
+                <tr>
+                  <th>参数</th>
+                  <th>说明</th>
+                  <th>类型</th>
+                  <th>默认值</th>
+                  <th>可选值</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>content</td>
+                  <td>二维码内容（必填）</td>
+                  <td>String</td>
+                  <td>--</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>QCWidth</td>
+                  <td>二维码图片的宽度（单位px）</td>
+                  <td>Number</td>
+                  <td>100</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>QCHeight</td>
+                  <td>二维码图片的高度（单位px）</td>
+                  <td>Number</td>
+                  <td>100</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>fontColor</td>
+                  <td>二维码前面的颜色</td>
+                  <td>Number</td>
+                  <td>0.5</td>
+                  <td>--</td>
+                </tr>
+                <tr>
+                  <td>backColor</td>
+                  <td>二维码背景色</td>
+                  <td>Number</td>
+                  <td>0.5</td>
+                  <td>--</td>
+                </tr>
+              </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            QCWidth:100,
+            QCHeight:100,
+            text:'http://www.baidu.com',
+            fontColor:'#000',
+            backColor:'#fff',
+            demo1:`<nut-qrcode content='http://www.baidu.com'></nut-qrcode>`,
+            demo2:`<nut-qrcode QCWidth=150 
+            QCHeight=150 
+            content='http://www.baidu.com' 
+            fontColor='green' 
+            backColor='#fff'>
+</nut-qrcode>`
+        }
+        
+    },
+    methods:{
+        
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>