星如雨

Appearance

xl-qr-code ​

基础使用 ​

使用代码
vue
<script>
  import { XlQRCode } from 'xing-ly'
</script>
<XlQRCode text="hello world, this is xl-qr-code component"/>
<script>
  import { XlQRCode } from 'xing-ly'
</script>
<XlQRCode text="hello world, this is xl-qr-code component"/>

不同质量 ​

使用代码
html
<script>
  import { XlQRCode } from 'xing-ly'
</script>
<el-row>
  <el-col :span="12" >
    <XlQRCode text="hello world,hello world,hello world,hello world,hello world,hello world" :quality="0"/>
  </el-col>
  <el-col :span="12" >
    <XlQRCode text="hello world,hello world,hello world,hello world,hello world,hello world" :quality="1" />
  </el-col>
</el-row>
<script>
  import { XlQRCode } from 'xing-ly'
</script>
<el-row>
  <el-col :span="12" >
    <XlQRCode text="hello world,hello world,hello world,hello world,hello world,hello world" :quality="0"/>
  </el-col>
  <el-col :span="12" >
    <XlQRCode text="hello world,hello world,hello world,hello world,hello world,hello world" :quality="1" />
  </el-col>
</el-row>

不同颜色 ​

使用代码
vue
<script>
  import { XlQRCode } from 'xing-ly'
</script>
<XlQRCode text="hello world, this is xl-qr-code component" dark="#ffd26f" light="#3677ff" :margin="1" :scale="1"/>
<script>
  import { XlQRCode } from 'xing-ly'
</script>
<XlQRCode text="hello world, this is xl-qr-code component" dark="#ffd26f" light="#3677ff" :margin="1" :scale="1"/>

下载与刷新 ​

下载
刷新
下载 & 刷新
使用代码
html
<script setup>
  import { ref } from 'vue'
  const text = ref(`${Date.now()}`)
  function handleRefreshBefore(done){
    text.value = `${Date.now()}`
    done()
  }
</script>
<el-row>
  <el-col :span="8">
    <div style="text-align: center;">下载</div>
    <XlQRCode text="hello world,hello world,hello world,hello world,hello world,hello world" download />
  </el-col>
  <el-col :span="8">
    <div style="text-align: center;">刷新</div>
    <XlQRCode :text="text" :refresh-before="handleRefreshBefore" refresh/>
  </el-col>
  <el-col :span="8">
    <div style="text-align: center;">下载 & 刷新</div>
    <XlQRCode :text="text" :refresh-before="handleRefreshBefore" refresh download />
  </el-col>
</el-row>
<script setup>
  import { ref } from 'vue'
  const text = ref(`${Date.now()}`)
  function handleRefreshBefore(done){
    text.value = `${Date.now()}`
    done()
  }
</script>
<el-row>
  <el-col :span="8">
    <div style="text-align: center;">下载</div>
    <XlQRCode text="hello world,hello world,hello world,hello world,hello world,hello world" download />
  </el-col>
  <el-col :span="8">
    <div style="text-align: center;">刷新</div>
    <XlQRCode :text="text" :refresh-before="handleRefreshBefore" refresh/>
  </el-col>
  <el-col :span="8">
    <div style="text-align: center;">下载 & 刷新</div>
    <XlQRCode :text="text" :refresh-before="handleRefreshBefore" refresh download />
  </el-col>
</el-row>

参数类型 ​

参数说明类型是否必填默认值
text二维码的字符串stringtrue-
type图片类型image/png,image/jpeg,image/webpfalseimage/jpeg
quality图片质量(0-1)numberfalse0.8
margin外边距numberfalse4
scale码元尺寸numberfalse4
width二维码宽度numberfalse200
dark码元颜色hex-colorfalse#000000
light背景颜色hex-colorfalse#ffffff
level容错等级low,medium,quartile,high,L,M,Q,Hfalselow
download是否可下载booleanfalsefalse
refresh是否可刷新booleanfalsefalse
download-before下载之前Functionfalse-
refresh-before刷新之前Functionfalse-

事件类型 ​

事件名说明回调参数
downloaded下载之后-
refreshed刷新之后-