import{m as c,d as u,J as t,O as e,V as l}from"./@vue_runtime-core@3.5.13-Moo8VrGQ.js";import{e as a,N as i,as as p,w as o,P as r,K as f,at as n,M as s,J as d,r as B,I as h}from"./naive-ui@2.41.0_vue@3.5.13_typescript@5.6.3_-bZwGa67N.js";import{h as v,k as A,x as D}from"./@vue_reactivity@3.5.13-Bs-wdPxR.js";import"./@vue_shared@3.5.13-CBbo5MAb.js";import"./date-fns@3.6.0-DkXg27G5.js";import"./seemly@0.3.9-BPHzmlAk.js";import"./utils-BjslFNLa.js";import"./lodash-es@4.17.21-UVJw7vmf.js";import"./hooks-ClCg6qvp.js";import"./@vueuse_core@12.4.0_typescript@5.6.3-CNo6ayCV.js";import"./@vueuse_shared@12.4.0_typescript@5.6.3-AIvkuZ7s.js";import"./currency.js@2.0.4-9OAR_aOO.js";import"./crypto-js@4.2.0-Dv3RD6s_.js";import"./call-bind-apply-helpers@1.0.1-D6-XlEtG.js";import"./dayjs@1.11.13-BPpqO9Hf.js";import"./print-js@1.6.0-CNuQ_Icd.js";import"./vue-hooks-plus@2.2.3_vue@3.5.13_typescript@5.6.3_-BF2NczCu.js";import"./lodash@4.17.21-MV68C9EV.js";import"./js-cookie@3.0.5-Z_8Sd105.js";import"./screenfull@5.2.0-D-G20XJY.js";import"./jsbarcode@3.11.6-Dw2l8iJP.js";import"./@logicflow_core@2.0.10-DN_57zVH.js";import"./mobx-preact@3.0.0_mobx@5.15.7_preact@10.25.4-SwmSNyX5.js";import"./preact@10.25.4-CrjB-ZC0.js";import"./mobx@5.15.7-DLDjekon.js";import"./uuid@9.0.1-CtRu48qb.js";import"./classnames@2.5.1-8E8W9FZl.js";import"./mousetrap@1.6.5-CGKHClW8.js";import"./mobx-utils@5.6.2_mobx@5.15.7-CmgHUCcI.js";import"./pinia-plugin-persistedstate@4.2.0_pinia@2.3.0_typescript@5.6.3_vue@3.5.13_typescript@5.6.3___rollup@4.40.0-_Zka_ujQ.js";import"./destr@2.0.3-CVtkxrq9.js";import"./deep-pick-omit@1.2.1-CegYQlcN.js";import"./pinia@2.3.0_typescript@5.6.3_vue@3.5.13_typescript@5.6.3_-BvAxE_q5.js";import"./html-to-image@1.11.11-3dFXpKWR.js";import"./vue-router@4.4.0_vue@3.5.13_typescript@5.6.3_-v7NbgajR.js";import"./@vue_runtime-dom@3.5.13-DAnkqHDQ.js";import"./interactjs@1.10.27-BhZFX4Iq.js";import"./vue-i18n@9.13.1_vue@3.5.13_typescript@5.6.3_-kfcArAjL.js";import"./@intlify_shared@9.13.1-CM6R_CZ5.js";import"./@intlify_core-base@9.13.1-BNWv53cz.js";import"./@intlify_message-compiler@9.13.1-4K4Nd_mc.js";import"./echarts@5.6.0-BRu9FGIM.js";import"./zrender@5.6.1-MHdZqf99.js";import"./tslib@2.3.0-BDyQ-Jie.js";import"./vueuc@0.4.64_vue@3.5.13_typescript@5.6.3_-BhYeX318.js";import"./evtd@0.2.4-CI_DDEu_.js";import"./@css-render_vue3-ssr@0.15.14_vue@3.5.13_typescript@5.6.3_-BATNlskH.js";import"./vooks@0.2.12_vue@3.5.13_typescript@5.6.3_-CUP4Zvk0.js";import"./vdirs@0.1.8_vue@3.5.13_typescript@5.6.3_-BAjskub0.js";import"./@juggle_resize-observer@3.4.0-C8OzoCMD.js";import"./css-render@0.15.14-C5toWlUr.js";import"./@emotion_hash@0.8.0-WldOFDRm.js";import"./treemate@0.3.11-DKekKYbv.js";import"./date-fns-tz@3.2.0_date-fns@3.6.0-CVEnaXEw.js";import"./async-validator@4.2.5-9PlIezaS.js";import"./@css-render_plugin-bem@0.15.14_css-render@0.15.14-Be8eOoM-.js";const Vu=c({name:"RDirective",setup(){const F=v({copyValueOne:"我是待复制内容区域一",copyValueTwo:"我是待复制内容区域二",throttleBtnClickCount:0,debounceBtnClickCount:0,disabledValue:!1}),E=A(2),C=m=>{F[m]++};return{...D(F),updateDemoValue:C,ellipsisLineClamp:E}},render(){return u(a,null,{default:()=>[u(i,{title:"指令"},{default:()=>[t("该页面展示如何使用已封装好的指令")]}),u(i,{title:"水波纹"},{default:()=>[u(a,{vertical:!0},{default:()=>[u(p,{title:"modifiers",type:"info"},{default:()=>[t("你可以手动显示的声明水波纹效果，默认为 circle。你可以手动的声明为 center。")]}),u(p,{title:"vue template",type:"success"},{default:()=>[t('"v-ripple.center" 或者 "v-ripple.circle"。')]}),u(p,{title:"tsx",type:"success"},{default:()=>[JSON.stringify("v-ripple={[true, ['center']]}"),t(" 或者"),JSON.stringify("v-ripple={[true, ['circle']]}"),t("。")]}),u(a,null,{default:()=>[e(u(o,{type:"success",size:"large"},{default:()=>[t("水波纹效果的Tag")]}),[[l("ripple")]]),e(u(o,{type:"warning",size:"large"},{default:()=>[t("水波纹效果的Tag")]}),[[l("ripple")]]),e(u(o,{type:"error",size:"large"},{default:()=>[t("水波纹效果的Tag")]}),[[l("ripple")]]),e(u(r,{type:"info"},{default:()=>[t("水波纹效果的Button")]}),[[l("ripple")]]),e(u("div",{style:"height: 20px; line-height: 20px;text-align: center; border: 1px solid; padding: 6px;"},[t("原生元素绑定水波纹效果，并且手动绑定 modifiers 为 center")]),[[l("ripple"),!0,void 0,{center:!0}]])]})]})]}),u(i,{title:"文本省略"},{default:()=>[u(a,{vertical:!0},{default:()=>[u(i,{title:"单行省略"},{default:()=>[e(u("div",null,[t("我是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本。")]),[[l("ellipsis"),{type:"block",width:"100px"}]])]}),u(i,{title:"多行省略"},{default:()=>[u(a,{vertical:!0,size:"large"},{default:()=>[u(p,{title:"注意",type:"warning"},{default:()=>[t("该方法基于非标准属性实现（-webkit-line-clamp），可能会有兼容性问题，所以请谨慎使用。 详情参考："),u("a",{href:"https://caniuse.com/?search=line-clamp"},[t("can i use")])]}),e(u("div",null,[t("我是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本。")]),[[l("ellipsis"),{type:"line",width:"100px",line:this.ellipsisLineClamp}]]),u(f,{value:this.ellipsisLineClamp,"onUpdate:value":F=>this.ellipsisLineClamp=F,min:1},null)]})]})]})]}),u(i,{title:"文本复制示例一"},{default:()=>[u(n,null,{default:()=>[u(s,{value:this.copyValueOne,"onUpdate:value":F=>this.copyValueOne=F},null),e(u(r,null,{default:()=>[t("复制")]}),[[l("copy"),this.copyValueOne]])]})]}),u(i,{title:"文本复制示例二"},{default:()=>[u(n,null,{default:()=>[u(s,{value:this.copyValueTwo,"onUpdate:value":F=>this.copyValueTwo=F},null),e(u(r,null,{default:()=>[t("复制")]}),[[l("copy"),this.copyValueTwo]])]})]}),u(i,{title:"节流"},{default:()=>[u(a,{vertical:!0},{default:()=>[e(u(r,null,{default:()=>[t("点击执行")]}),[[l("throttle"),{func:this.updateDemoValue.bind(null,"throttleBtnClickCount"),trigger:"click",wait:3e3,options:{}}]]),u("p",null,[t("我执行了"),this.throttleBtnClickCount,t("次")]),u("p",null,[t("该方法 3s 内仅会执行一次")])]})]}),u(i,{title:"防抖"},{default:()=>[u(a,{vertical:!0},{default:()=>[e(u(r,null,{default:()=>[t("点击执行")]}),[[l("debounce"),{func:this.updateDemoValue.bind(null,"debounceBtnClickCount"),trigger:"click",wait:3e3,options:{}}]]),u("p",null,[t("我执行了"),this.debounceBtnClickCount,t("次")]),u("p",null,[t("该方法将延迟 3s 执行")])]})]}),u(i,{title:"禁用"},{default:()=>[u(a,{vertical:!0},{default:()=>[u(d,{value:this.disabledValue,"onUpdate:value":F=>this.disabledValue=F},{checked:()=>"取消",unchecked:()=>"禁用"}),u(i,{title:"描述"},{default:()=>[u("p",null,[t("该指令会强制禁用（通过 css 层面）禁用元素交互。但是 naive ui 组件提供了完整的 disabled 属性，所以在组件库有禁用需求时，直接调用组件库 disabled 属性即可。但是值得注意的是，该指令优先级最高，会覆盖组件 disabled 属性。")])]}),u(i,{title:"原生表单"},{default:()=>[e(u("form",null,[u("input",{type:"text",placeholder:"请输入"},null),u("button",null,[t("提交")])]),[[l("disabled"),this.disabledValue]])]}),u(i,{title:"文本内容"},{default:()=>[u(a,{vertical:!0},{default:()=>[e(u("p",null,[t("我是可以被禁用的文本内容")]),[[l("disabled"),this.disabledValue]])]})]}),u(i,{title:"naive 组件"},{default:()=>[u(a,{vertical:!0,justify:"start"},{default:()=>[e(u(B,null,{default:()=>[u(h,null,{default:()=>[u(s,null,null)]})]}),[[l("disabled"),this.disabledValue]]),e(u(r,null,{default:()=>[t("按钮")]}),[[l("disabled"),this.disabledValue]]),e(u(d,null,null),[[l("disabled"),this.disabledValue]])]})]})]})]})]})}});export{Vu as default};