ray-template/assets/index-7d4bae01.js
2023-07-05 13:54:21 +08:00

2 lines
2.9 KiB
JavaScript

import{f as r,r as E,t as p,h as u,aD as l,ar as e,aL as o,K as s,aM as t,aN as a,aq as n,u as d,p as F,ao as f,ap as B}from"./.pnpm-8379147f.js";const b=r({name:"RDirective",setup(){const i=E({copyValueOne:"我是待复制内容区域一",copyValueTwo:"我是待复制内容区域二",throttleBtnClickCount:0,debounceBtnClickCount:0,disabledValue:!1}),C=c=>{i[c]++};return{...p(i),updateDemoValue:C}},render(){return u(d,{wrapItem:!1},{default:()=>[u(l,{title:"指令"},{default:()=>[e("该页面展示如何使用已封装好的指令")]}),u(l,{title:"文本复制示例一"},{default:()=>[u(o,null,{default:()=>[u(s,{value:this.copyValueOne,"onUpdate:value":i=>this.copyValueOne=i},null),t(u(n,null,{default:()=>[e("复制")]}),[[a("copy"),this.copyValueOne]])]})]}),u(l,{title:"文本复制示例二"},{default:()=>[u(o,null,{default:()=>[u(s,{value:this.copyValueTwo,"onUpdate:value":i=>this.copyValueTwo=i},null),t(u(n,null,{default:()=>[e("复制")]}),[[a("copy"),this.copyValueTwo]])]})]}),u(l,{title:"节流"},{default:()=>[u(d,{wrapItem:!0,vertical:!0},{default:()=>[t(u(n,null,{default:()=>[e("点击执行")]}),[[a("throttle"),{func:this.updateDemoValue.bind(null,"throttleBtnClickCount"),trigger:"click",wait:1e3,options:{}}]]),u("p",null,[e("我执行了"),this.throttleBtnClickCount,e("次")]),u("p",null,[e("该方法 1s 内仅会执行一次")])]})]}),u(l,{title:"防抖"},{default:()=>[u(d,{wrapItem:!0,vertical:!0},{default:()=>[t(u(n,null,{default:()=>[e("点击执行")]}),[[a("debounce"),{func:this.updateDemoValue.bind(null,"debounceBtnClickCount"),trigger:"click",wait:1e3,options:{}}]]),u("p",null,[e("我执行了"),this.debounceBtnClickCount,e("次")]),u("p",null,[e("该方法将延迟 1s 执行")])]})]}),u(l,{title:"禁用"},{default:()=>[u(d,{vertical:!0},{default:()=>[u(F,{value:this.disabledValue,"onUpdate:value":i=>this.disabledValue=i},{checked:()=>"取消",unchecked:()=>"禁用"}),u(l,{title:"描述"},{default:()=>[u("p",null,[e("该指令会强制禁用(通过 css 层面)禁用元素交互。但是 naive ui 组件提供了完整的 disabled 属性,所以在组件库有禁用需求时,直接调用组件库 disabled 属性即可。但是值得注意的是,该指令优先级最高,会覆盖组件 disabled 属性。")])]}),u(l,{title:"原生表单"},{default:()=>[t(u("form",null,[u("input",{type:"text",placeholder:"请输入"},null),u("button",null,[e("提交")])]),[[a("disabled"),this.disabledValue]])]}),u(l,{title:"文本内容"},{default:()=>[u(d,{vertical:!0},{default:()=>[t(u("p",null,[e("我是可以被禁用的文本内容")]),[[a("disabled"),this.disabledValue]])]})]}),u(l,{title:"naive 组件"},{default:()=>[u(d,{vertical:!0,justify:"start"},{default:()=>[t(u(f,null,{default:()=>[u(B,null,{default:()=>[u(s,null,null)]})]}),[[a("disabled"),this.disabledValue]]),t(u(n,null,{default:()=>[e("按钮")]}),[[a("disabled"),this.disabledValue]]),t(u(F,null,null),[[a("disabled"),this.disabledValue]])]})]})]})]})]})}});export{b as default};