ray-template/assets/index-d5b8d65a.js

import{V as e,_ as r,r as n,P as d,g as o,f as s,M as C,O as c}from"./naive-ui@2.34.4_vue@3.3.4-8a777692.js";import{k as E,b as u,p as t,G as l,ao as a}from"./@vue_runtime-core@3.3.4-073fad6e.js";import{h as f,v as m}from"./@vue_reactivity@3.3.4-2b3a1c4e.js";import"./date-fns@2.30.0-1707c6fa.js";import"./@babel_runtime@7.22.6-47b11949.js";import"./vueuc@0.4.51_vue@3.3.4-6588b5bd.js";import"./evtd@0.2.4-b614532e.js";import"./seemly@0.3.6-dc6f1e91.js";import"./@css-render_vue3-ssr@0.15.12_vue@3.3.4-24369cc5.js";import"./vooks@0.2.12_vue@3.3.4-59877c34.js";import"./vdirs@0.1.8_vue@3.3.4-4519c5fd.js";import"./@juggle_resize-observer@3.4.0-41516555.js";import"./css-render@0.15.12-57b1a53f.js";import"./@emotion_hash@0.8.0-8a8e73f6.js";import"./@vue_runtime-dom@3.3.4-d86573ec.js";import"./@vue_shared@3.3.4-896c5ecf.js";import"./lodash-es@4.17.21-b7de4195.js";import"./treemate@0.3.11-25c27bff.js";import"./date-fns-tz@1.3.8_date-fns@2.30.0-f45fcfa5.js";import"./async-validator@4.2.5-dee29e8b.js";import"./@css-render_plugin-bem@0.15.12_css-render@0.15.12-9dde7ffe.js";const M=E({name:"RDirective",setup(){const i=f({copyValueOne:"我是待复制内容区域一",copyValueTwo:"我是待复制内容区域二",throttleBtnClickCount:0,debounceBtnClickCount:0,disabledValue:!1}),p=F=>{i[F]++};return{...m(i),updateDemoValue:p}},render(){return u(o,{wrapItem:!1},{default:()=>[u(e,{title:"指令"},{default:()=>[t("该页面展示如何使用已封装好的指令")]}),u(e,{title:"文本复制示例一"},{default:()=>[u(r,null,{default:()=>[u(n,{value:this.copyValueOne,"onUpdate:value":i=>this.copyValueOne=i},null),l(u(d,null,{default:()=>[t("复制")]}),[[a("copy"),this.copyValueOne]])]})]}),u(e,{title:"文本复制示例二"},{default:()=>[u(r,null,{default:()=>[u(n,{value:this.copyValueTwo,"onUpdate:value":i=>this.copyValueTwo=i},null),l(u(d,null,{default:()=>[t("复制")]}),[[a("copy"),this.copyValueTwo]])]})]}),u(e,{title:"节流"},{default:()=>[u(o,{wrapItem:!0,vertical:!0},{default:()=>[l(u(d,null,{default:()=>[t("点击执行")]}),[[a("throttle"),{func:this.updateDemoValue.bind(null,"throttleBtnClickCount"),trigger:"click",wait:1e3,options:{}}]]),u("p",null,[t("我执行了"),this.throttleBtnClickCount,t("次")]),u("p",null,[t("该方法 1s 内仅会执行一次")])]})]}),u(e,{title:"防抖"},{default:()=>[u(o,{wrapItem:!0,vertical:!0},{default:()=>[l(u(d,null,{default:()=>[t("点击执行")]}),[[a("debounce"),{func:this.updateDemoValue.bind(null,"debounceBtnClickCount"),trigger:"click",wait:1e3,options:{}}]]),u("p",null,[t("我执行了"),this.debounceBtnClickCount,t("次")]),u("p",null,[t("该方法将延迟 1s 执行")])]})]}),u(e,{title:"禁用"},{default:()=>[u(o,{vertical:!0},{default:()=>[u(s,{value:this.disabledValue,"onUpdate:value":i=>this.disabledValue=i},{checked:()=>"取消",unchecked:()=>"禁用"}),u(e,{title:"描述"},{default:()=>[u("p",null,[t("该指令会强制禁用（通过 css 层面）禁用元素交互。但是 naive ui 组件提供了完整的 disabled 属性，所以在组件库有禁用需求时，直接调用组件库 disabled 属性即可。但是值得注意的是，该指令优先级最高，会覆盖组件 disabled 属性。")])]}),u(e,{title:"原生表单"},{default:()=>[l(u("form",null,[u("input",{type:"text",placeholder:"请输入"},null),u("button",null,[t("提交")])]),[[a("disabled"),this.disabledValue]])]}),u(e,{title:"文本内容"},{default:()=>[u(o,{vertical:!0},{default:()=>[l(u("p",null,[t("我是可以被禁用的文本内容")]),[[a("disabled"),this.disabledValue]])]})]}),u(e,{title:"naive 组件"},{default:()=>[u(o,{vertical:!0,justify:"start"},{default:()=>[l(u(C,null,{default:()=>[u(c,null,{default:()=>[u(n,null,null)]})]}),[[a("disabled"),this.disabledValue]]),l(u(d,null,{default:()=>[t("按钮")]}),[[a("disabled"),this.disabledValue]]),l(u(s,null,null),[[a("disabled"),this.disabledValue]])]})]})]})]})]})}});export{M as default};