mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-05-06 18:26:36 +08:00
2 lines
3.4 KiB
JavaScript
2 lines
3.4 KiB
JavaScript
import{U as t,_ as s,p as o,P as n,f as d,e as r,M as C,O as F}from"./naive-ui-6aaba7d0.js";import{h as E,I as f,P as m,ad as u,e,A as l,aQ as a}from"./@vue-b109a2ec.js";import"./date-fns-6c225a00.js";import"./clipboard-9c798d85.js";import"./vueuc-7f8201e7.js";import"./evtd-b614532e.js";import"./seemly-dc6f1e91.js";import"./@css-render-555d5129.js";import"./vooks-5e400110.js";import"./vdirs-b0483831.js";import"./@juggle-41516555.js";import"./css-render-d3958e6a.js";import"./@emotion-8a8e73f6.js";import"./lodash-es-92f3d5bd.js";import"./treemate-25c27bff.js";import"./date-fns-tz-39604516.js";import"./async-validator-dee29e8b.js";const R=E({name:"RDirective",setup(){const i=f({copyValueOne:"我是待复制内容区域一",copyValueTwo:"我是待复制内容区域二",throttleBtnClickCount:0,debounceBtnClickCount:0,disabledValue:!1}),p=c=>{i[c]++};return{...m(i),updateDemoValue:p}},render(){return u(d,{wrapItem:!1},{default:()=>[u(t,{title:"指令"},{default:()=>[e("该页面展示如何使用已封装好的指令")]}),u(t,{title:"文本复制示例一"},{default:()=>[u(s,null,{default:()=>[u(o,{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(s,null,{default:()=>[u(o,{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,"debounceBtnClickCount"),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(r,{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(F,null,{default:()=>[u(o,null,null)]})]}),[[a("disabled"),this.disabledValue]]),l(u(n,null,{default:()=>[e("按钮")]}),[[a("disabled"),this.disabledValue]]),l(u(r,null,null),[[a("disabled"),this.disabledValue]])]})]})]})]})]})}});export{R as default};
|