mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-06 03:57:49 +08:00
2 lines
3.1 KiB
JavaScript
2 lines
3.1 KiB
JavaScript
import{b3 as t,b9 as o,ax as s,aZ as n,an as d,am as F,aX as c,aY as E}from"./vendor-6dafcdec.js";import{d as p,k as f,P as B,K as u,a as e,l,a3 as a}from"./vue-vendor-0e3aae74.js";import"./utils-vendor-6e02b5fb.js";import"./css-vendor-7a3fe519.js";import"./__commonjsHelpers__-042e6b4d.js";const v=p({name:"RDirective",setup(){const i=f({copyValueOne:"我是待复制内容区域一",copyValueTwo:"我是待复制内容区域二",throttleBtnClickCount:0,debounceBtnClickCount:0,disabledValue:!1}),r=C=>{i[C]++};return{...B(i),updateDemoValue:r}},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};
|