fix(qr-code):[qr-code] fix qr-code documents (#1178)

* fix(qr-code):[qr-code] fix qr-code documents

* fix(qr-code):[qr-code] fix qr-code documents

examples/sites/demos/pc/app/qr-code/level-composition-api.vue

@@ -1,5 +1,6 @@
 <template>
   <tiny-qr-code v-bind="params" @change="change"></tiny-qr-code>
+
   <tiny-radio-group v-model="params.level" size="small">
     <tiny-radio-button label="Low">Low</tiny-radio-button>
     <tiny-radio-button label="Medium">Medium</tiny-radio-button>
@@ -9,18 +10,14 @@
 </template>
 
 <script setup>
-import {
-  QrCode as TinyQrCode,
-  Radio as TinyRadio,
-  RadioButton as TinyRadioButton,
-  RadioGroup as TinyRadioGroup
-} from '@opentiny/vue'
+import { QrCode as TinyQrCode, RadioButton as TinyRadioButton, RadioGroup as TinyRadioGroup } from '@opentiny/vue'
+import { reactive } from 'vue'
 
-const params = {
+const params = reactive({
   value: '测试二维码数据',
   size: 250,
   level: 'High'
-}
+})
 
 function change() {
   console.log('qrcode change')

examples/sites/demos/pc/app/qr-code/style-composition-api.vue

@@ -8,6 +8,7 @@ import { QrCode as TinyQrCode } from '@opentiny/vue'
 const params = {
   value: '测试二维码数据',
   color: '#1677ff',
+  size: 250,
   style: { background: '#f5f5f5', padding: '24px' }
 }
 </script>

examples/sites/demos/pc/app/qr-code/style.vue

@@ -14,6 +14,7 @@ export default {
       params: {
         value: '测试二维码数据',
         color: '#1677ff',
+        size: 250,
         style: { background: '#f5f5f5', padding: '24px' }
       }
     }

examples/sites/demos/pc/app/qr-code/webdoc/qr-code.js

@@ -11,25 +11,37 @@ export default {
     {
       'demoId': 'basic-usage',
       'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example' },
+      'desc': {
+        'zh-CN': '通过 <code>value</code> 设置二维码的内容， <code>size</code> 设置二维码的大小。',
+        'en-US': 'Set the content of the QR code<code>value</code> , and <code>type</code> Set the size of the QR code.'
+      },
       'codeFiles': ['basic-usage.vue']
     },
     {
       'demoId': 'style',
       'name': { 'zh-CN': '自定义样式', 'en-US': 'style' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>style</code> 设置二维码样式。</p>',
+        'en-US': '<p> <code>style</code>, see QR code style</p>'
+      },
       'codeFiles': ['style.vue']
     },
     {
       'demoId': 'icon',
-      'name': { 'zh-CN': '自定义icon', 'en-US': 'icon' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example' },
+      'name': { 'zh-CN': '自定义 icon ', 'en-US': 'icon' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>icon</code> 设置二维码图标。</p>',
+        'en-US': '<p> <code>icon</code>, see QR code icon</p>'
+      },
       'codeFiles': ['icon.vue']
     },
     {
       'demoId': 'level',
       'name': { 'zh-CN': '二维码纠错等级', 'en-US': 'Error Code Level' },
-      'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example' },
+      'desc': {
+        'zh-CN': '<p>通过 <code>level</code> 设置二维码纠错等级。</p>',
+        'en-US': '<p> <code>level</code> , see QR code error correction level</p>'
+      },
       'codeFiles': ['level.vue']
     }
   ],
@@ -61,7 +73,7 @@ export default {
         {
           'name': 'color',
           'type': 'string',
-          'defaultValue': '#000',
+          'defaultValue': "'#000'",
           'desc': {
             'zh-CN': '二维码颜色, 仅支持十六进制',
             'en-US': 'QRCode Color'
@@ -93,7 +105,7 @@ export default {
           'type': 'number',
           'defaultValue': '50',
           'desc': {
-            'zh-CN': '二维码中图片的大小，icon 覆盖面积不能超过 30%， 否则影响扫码',
+            'zh-CN': '二维码中图片的大小，icon 覆盖面积不能超过二维码面积的 30%， 否则影响扫码',
             'en-US': 'include image size，no more than 30%'
           },
           'demoId': 'icon'
@@ -101,7 +113,7 @@ export default {
         {
           'name': 'level',
           'type': 'string',
-          'defaultValue': 'Medium',
+          'defaultValue': "'Medium'",
           'desc': {
             'zh-CN': "二维码纠错等级, 可选 'Low' | 'Medium' | 'Quality' | 'High'",
             'en-US': 'Error Code Level'
@@ -112,9 +124,9 @@ export default {
       'events': [
         {
           'name': 'change',
-          'type': 'function',
+          'type': '()=> void',
           'desc': {
-            'zh-CN': '二维码变化回调',
+            'zh-CN': '二维码发生变化后的回调',
             'en-US': 'chang callback'
           },
           'demoId': 'level'