ray-template/assets/index-15f1d754.js
2023-07-05 17:16:47 +08:00

2 lines
3.0 KiB
JavaScript

import{Y as t,a9 as o,H as s,I as n,S as d,aa as F,J as c,G as E}from"./index-1016cc88.js";import{d as p,p as f,R as B,P as u,e,t as l,a5 as a}from"./vue-vendor-dfef56cd.js";import"./utils-vendor-532067a6.js";const V=p({name:"RDirective",setup(){const i=f({copyValueOne:"我是待复制内容区域一",copyValueTwo:"我是待复制内容区域二",throttleBtnClickCount:0,debounceBtnClickCount:0,disabledValue:!1}),C=r=>{i[r]++};return{...B(i),updateDemoValue:C}},render(){return u(d,{wrapItem:!1},{default:()=>[u(t,{title:"指令"},{default:()=>[e("该页面展示如何使用已封装好的指令")]}),u(t,{title:"文本复制示例一"},{default:()=>[u(o,null,{default:()=>[u(s,{value:this.copyValueOne,"onUpdate:value":i=>this.copyValueOne=i},null),l(u(n,null,{default:()=>[e("复制")]}),[[a("copy"),this.copyValueOne]])]})]}),u(t,{title:"文本复制示例二"},{default:()=>[u(o,null,{default:()=>[u(s,{value:this.copyValueTwo,"onUpdate:value":i=>this.copyValueTwo=i},null),l(u(n,null,{default:()=>[e("复制")]}),[[a("copy"),this.copyValueTwo]])]})]}),u(t,{title:"节流"},{default:()=>[u(d,{wrapItem:!0,vertical:!0},{default:()=>[l(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(t,{title:"防抖"},{default:()=>[u(d,{wrapItem:!0,vertical:!0},{default:()=>[l(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(t,{title:"禁用"},{default:()=>[u(d,{vertical:!0},{default:()=>[u(F,{value:this.disabledValue,"onUpdate:value":i=>this.disabledValue=i},{checked:()=>"取消",unchecked:()=>"禁用"}),u(t,{title:"描述"},{default:()=>[u("p",null,[e("该指令会强制禁用(通过 css 层面)禁用元素交互。但是 naive ui 组件提供了完整的 disabled 属性,所以在组件库有禁用需求时,直接调用组件库 disabled 属性即可。但是值得注意的是,该指令优先级最高,会覆盖组件 disabled 属性。")])]}),u(t,{title:"原生表单"},{default:()=>[l(u("form",null,[u("input",{type:"text",placeholder:"请输入"},null),u("button",null,[e("提交")])]),[[a("disabled"),this.disabledValue]])]}),u(t,{title:"文本内容"},{default:()=>[u(d,{vertical:!0},{default:()=>[l(u("p",null,[e("我是可以被禁用的文本内容")]),[[a("disabled"),this.disabledValue]])]})]}),u(t,{title:"naive 组件"},{default:()=>[u(d,{vertical:!0,justify:"start"},{default:()=>[l(u(c,null,{default:()=>[u(E,null,{default:()=>[u(s,null,null)]})]}),[[a("disabled"),this.disabledValue]]),l(u(n,null,{default:()=>[e("按钮")]}),[[a("disabled"),this.disabledValue]]),l(u(F,null,null),[[a("disabled"),this.disabledValue]])]})]})]})]})]})}});export{V as default};