mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-05 19:42:07 +08:00
2 lines
2.3 KiB
JavaScript
2 lines
2.3 KiB
JavaScript
import{Q as e}from"./vue3-next-qrcode@2.0.10_typescript@5.2.2-CrPzMTkm.js";import{L as t}from"./ray-dCjhX_JK.js";const l=Vue.defineComponent({name:"RQRCodeDemo",setup(){const u=Vue.ref("ray template yes"),a=Vue.ref(),o=Vue.ref();return{qrcodeText:u,qrcodeStatus:a,rayQRCodeRef:o}},render(){return Vue.createVNode(naive.NFlex,null,{default:()=>[Vue.createVNode(naive.NCard,null,{default:()=>[Vue.createVNode("h2",null,[Vue.createTextVNode("基于 awesome-qr 进行封装,支持 LOGO、gif、backgroundImage 等属性。")]),Vue.createVNode("h2",null,[Vue.createTextVNode("该组件会自动监听文本内容变化,然后重新渲染(watchText)")]),Vue.createVNode("h2",null,[Vue.createTextVNode("具体使用请参考 props 配置项")])]}),Vue.createVNode(naive.NCard,{title:"基础二维码"},{default:()=>[Vue.createVNode(naive.NFlex,null,{default:()=>[Vue.createVNode(e,{text:"ray template yes"},null),Vue.createVNode(e,{text:"ray template yes",logoImage:t},null),Vue.createVNode(e,{text:"ray template yes",gifBackgroundURL:"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif?imageView2/1/w/80/h/80",dotScale:.5,colorDark:"#64d9d6"},null)]})]}),Vue.createVNode(naive.NCard,{title:"状态二维码"},{default:()=>[Vue.createVNode(naive.NFlex,null,{default:()=>[Vue.createVNode(e,{text:"ray template yes",logoImage:t,status:"error",onReload:()=>{window.$message.info("reload event")}},null),Vue.createVNode(e,{text:"ray template yes",logoImage:t,status:"loading"},null)]})]}),Vue.createVNode(naive.NCard,{title:"监听内容变化"},{default:()=>[Vue.createVNode(naive.NFlex,{vertical:!0},{default:()=>[Vue.createVNode(naive.NFlex,null,{default:()=>[Vue.createVNode(naive.NButton,{onClick:()=>{this.qrcodeStatus="loading",setTimeout(()=>{this.qrcodeText="text updated: "+new Date().getTime(),this.qrcodeStatus=void 0},1e3)}},{default:()=>[Vue.createTextVNode("更新二维码内容")]}),Vue.createVNode(naive.NButton,{onClick:()=>{var u;(u=this.rayQRCodeRef)==null||u.downloadQRCode()}},{default:()=>[Vue.createTextVNode("下载二维码")]})]}),Vue.createVNode(naive.NFlex,null,{default:()=>[Vue.createVNode(e,{text:this.qrcodeText,status:this.qrcodeStatus,logoImage:t,ref:"rayQRCodeRef"},null),Vue.createTextVNode("当前二维码内容:"),this.qrcodeText]})]})]})]})}});export{l as default};
|