mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-05 19:42:07 +08:00
2 lines
6.0 KiB
JavaScript
2 lines
6.0 KiB
JavaScript
import{m as f,b as u,J as e,O as t,V as l}from"./@vue_runtime-core@3.5.13-pPpmd6wL.js";import{N as i,e as a,ag as r,w as s,P as n,K as B,ah as p,M as d,J as E,r as m,I as h}from"./naive-ui@2.41.0_vue@3.5.13_typescript@5.6.3_-DW0tiym6.js";import{e as v,k as A,x as b}from"./@vue_reactivity@3.5.13-CVvlldVq.js";import"./@vue_shared@3.5.13-CQ6Z-5d1.js";import"./date-fns@3.6.0-CG906D2E.js";import"./seemly@0.3.9-BnJ6M8Cl.js";import"./vueuc@0.4.64_vue@3.5.13_typescript@5.6.3_-DZgPmxv3.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_-DvmkD8RF.js";import"./vooks@0.2.12_vue@3.5.13_typescript@5.6.3_-rG9g4GjQ.js";import"./vdirs@0.1.8_vue@3.5.13_typescript@5.6.3_-C0KV5pCE.js";import"./@juggle_resize-observer@3.4.0-DY95s5UV.js";import"./css-render@0.15.14-BwokE0u2.js";import"./@emotion_hash@0.8.0-WldOFDRm.js";import"./@vue_runtime-dom@3.5.13-DJqlZTHq.js";import"./lodash-es@4.17.21-BbYRMHep.js";import"./treemate@0.3.11-CWtmm0QO.js";import"./date-fns-tz@3.2.0_date-fns@3.6.0-CULxTaQG.js";import"./async-validator@4.2.5-P8scd9xB.js";import"./@css-render_plugin-bem@0.15.14_css-render@0.15.14-BrMTnGYY.js";const M=f({name:"RDirective",setup(){const F=v({copyValueOne:"我是待复制内容区域一",copyValueTwo:"我是待复制内容区域二",throttleBtnClickCount:0,debounceBtnClickCount:0,disabledValue:!1}),C=A(2),o=c=>{F[c]++};return{...b(F),updateDemoValue:o,ellipsisLineClamp:C}},render(){return u(a,null,{default:()=>[u(i,{title:"指令"},{default:()=>[e("该页面展示如何使用已封装好的指令")]}),u(i,{title:"水波纹"},{default:()=>[u(a,{vertical:!0},{default:()=>[u(r,{title:"modifiers",type:"info"},{default:()=>[e("你可以手动显示的声明水波纹效果，默认为 circle。你可以手动的声明为 center。")]}),u(r,{title:"vue template",type:"success"},{default:()=>[e('"v-ripple.center" 或者 "v-ripple.circle"。')]}),u(r,{title:"tsx",type:"success"},{default:()=>[JSON.stringify("v-ripple={[true, ['center']]}"),e(" 或者"),JSON.stringify("v-ripple={[true, ['circle']]}"),e("。")]}),u(a,null,{default:()=>[t(u(s,{type:"success",size:"large"},{default:()=>[e("水波纹效果的Tag")]}),[[l("ripple")]]),t(u(s,{type:"warning",size:"large"},{default:()=>[e("水波纹效果的Tag")]}),[[l("ripple")]]),t(u(s,{type:"error",size:"large"},{default:()=>[e("水波纹效果的Tag")]}),[[l("ripple")]]),t(u(n,{type:"info"},{default:()=>[e("水波纹效果的Button")]}),[[l("ripple")]]),t(u("div",{style:"height: 20px; line-height: 20px;text-align: center; border: 1px solid; padding: 6px;"},[e("原生元素绑定水波纹效果，并且手动绑定 modifiers 为 center")]),[[l("ripple"),!0,void 0,{center:!0}]])]})]})]}),u(i,{title:"文本省略"},{default:()=>[u(a,{vertical:!0},{default:()=>[u(i,{title:"单行省略"},{default:()=>[t(u("div",null,[e("我是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本。")]),[[l("ellipsis"),{type:"block",width:"100px"}]])]}),u(i,{title:"多行省略"},{default:()=>[u(a,{vertical:!0,size:"large"},{default:()=>[u(r,{title:"注意",type:"warning"},{default:()=>[e("该方法基于非标准属性实现（-webkit-line-clamp），可能会有兼容性问题，所以请谨慎使用。 详情参考："),u("a",{href:"https://caniuse.com/?search=line-clamp"},[e("can i use")])]}),t(u("div",null,[e("我是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本。")]),[[l("ellipsis"),{type:"line",width:"100px",line:this.ellipsisLineClamp}]]),u(B,{value:this.ellipsisLineClamp,"onUpdate:value":F=>this.ellipsisLineClamp=F,min:1},null)]})]})]})]}),u(i,{title:"文本复制示例一"},{default:()=>[u(p,null,{default:()=>[u(d,{value:this.copyValueOne,"onUpdate:value":F=>this.copyValueOne=F},null),t(u(n,null,{default:()=>[e("复制")]}),[[l("copy"),this.copyValueOne]])]})]}),u(i,{title:"文本复制示例二"},{default:()=>[u(p,null,{default:()=>[u(d,{value:this.copyValueTwo,"onUpdate:value":F=>this.copyValueTwo=F},null),t(u(n,null,{default:()=>[e("复制")]}),[[l("copy"),this.copyValueTwo]])]})]}),u(i,{title:"节流"},{default:()=>[u(a,{vertical:!0},{default:()=>[t(u(n,null,{default:()=>[e("点击执行")]}),[[l("throttle"),{func:this.updateDemoValue.bind(null,"throttleBtnClickCount"),trigger:"click",wait:3e3,options:{}}]]),u("p",null,[e("我执行了"),this.throttleBtnClickCount,e("次")]),u("p",null,[e("该方法 3s 内仅会执行一次")])]})]}),u(i,{title:"防抖"},{default:()=>[u(a,{vertical:!0},{default:()=>[t(u(n,null,{default:()=>[e("点击执行")]}),[[l("debounce"),{func:this.updateDemoValue.bind(null,"debounceBtnClickCount"),trigger:"click",wait:3e3,options:{}}]]),u("p",null,[e("我执行了"),this.debounceBtnClickCount,e("次")]),u("p",null,[e("该方法将延迟 3s 执行")])]})]}),u(i,{title:"禁用"},{default:()=>[u(a,{vertical:!0},{default:()=>[u(E,{value:this.disabledValue,"onUpdate:value":F=>this.disabledValue=F},{checked:()=>"取消",unchecked:()=>"禁用"}),u(i,{title:"描述"},{default:()=>[u("p",null,[e("该指令会强制禁用（通过 css 层面）禁用元素交互。但是 naive ui 组件提供了完整的 disabled 属性，所以在组件库有禁用需求时，直接调用组件库 disabled 属性即可。但是值得注意的是，该指令优先级最高，会覆盖组件 disabled 属性。")])]}),u(i,{title:"原生表单"},{default:()=>[t(u("form",null,[u("input",{type:"text",placeholder:"请输入"},null),u("button",null,[e("提交")])]),[[l("disabled"),this.disabledValue]])]}),u(i,{title:"文本内容"},{default:()=>[u(a,{vertical:!0},{default:()=>[t(u("p",null,[e("我是可以被禁用的文本内容")]),[[l("disabled"),this.disabledValue]])]})]}),u(i,{title:"naive 组件"},{default:()=>[u(a,{vertical:!0,justify:"start"},{default:()=>[t(u(m,null,{default:()=>[u(h,null,{default:()=>[u(d,null,null)]})]}),[[l("disabled"),this.disabledValue]]),t(u(n,null,{default:()=>[e("按钮")]}),[[l("disabled"),this.disabledValue]]),t(u(E,null,null),[[l("disabled"),this.disabledValue]])]})]})]})]})]})}});export{M as default};
|