web-plus-ui/docs/assets/README.dfd6cb83.js

vue3+vite+ts+element-plus 组件库

import{_ as p}from"./index.17927878.js";import{r as m,l as a,E as u,a as n,o as y,f as _,w as i,e as l,c as f,b as g,R as h}from"./vendor.184a8d03.js";const E={name:"Slider",setup(){return{listQuery:m({sliderValue:0,sliderValue2:30,sliderValue3:0,sliderValue4:0,sliderValue5:0}),formItem:a([{type:"es-slider",label:"Default value",key:"sliderValue",col:24,attrs:{style:"width: 100%;",min:0,max:100},listeners:{change:t=>{u({message:"\u5DF2\u7ECF\u9009\u4E2D\uFF1A"+t,type:"success"})}}},{type:"es-slider",label:"Customized initial value",key:"sliderValue2",col:24,attrs:{style:"width: 100%;",min:0,max:100},listeners:{change:t=>{u({message:"\u5DF2\u7ECF\u9009\u4E2D2\uFF1A"+t,type:"success"})}}},{type:"es-slider",label:"Hide Tooltip",key:"sliderValue3",col:24,attrs:{style:"width: 100%;",min:0,max:100,"show-tooltip":!1},listeners:{change:t=>{u({message:"\u5DF2\u7ECF\u9009\u4E2D3\uFF1A"+t,type:"success"})}}},{type:"es-slider",label:"Customized initial value",key:"sliderValue4",col:24,attrs:{style:"width: 100%;",min:0,max:100,"show-tooltip":t=>t/100},listeners:{change:t=>{u({message:"\u5DF2\u7ECF\u9009\u4E2D2\uFF1A"+t,type:"success"})}}},{type:"es-slider",label:"Customized initial value",key:"sliderValue5",col:24,attrs:{style:"width: 100%;",min:0,max:100,disabled:!0},listeners:{change:t=>{u({message:"\u5DF2\u7ECF\u9009\u4E2D2\uFF1A"+t,type:"success"})}}}]),rules:a({sliderValue:[{required:!0,message:"\u4E0D\u80FD\u4E3A\u7A7A",trigger:"change"}]})}}};function F(s,r,t,e,x,d){const o=n("EsForm"),c=n("EsContainer");return y(),_(c,{title:"Slider\u7EC4\u4EF6"},{default:i(()=>[l(o,{ref:"EsForm","list-query":e.listQuery,"form-item":e.formItem,rules:e.rules},null,8,["list-query","form-item","rules"])]),_:1})}var C=p(E,[["render",F]]);const b={name:"Slider",setup(){const s=m({sliderValue:30,sliderValue2:30}),r=t=>t/100;return{listQuery:s,formItem:a([{type:"es-slider",label:"Step",key:"sliderValue",col:24,attrs:{style:"width: 100%;","format-tooltip":r,min:0,max:100,step:10},listeners:{change:t=>{u({message:"\u5DF2\u7ECF\u9009\u4E2D\uFF1A"+t,type:"success"})}}},{type:"es-slider",label:"Slider",key:"sliderValue2",col:24,attrs:{style:"width: 100%;","format-tooltip":r,min:0,max:100,step:10,showStops:!0},listeners:{change:t=>{u({message:"\u5DF2\u7ECF\u9009\u4E2D2\uFF1A"+t,type:"success"})}}}]),rules:a({sliderValue:[{required:!0,message:"\u4E0D\u80FD\u4E3A\u7A7A",trigger:"change"}],sliderValue2:[{required:!0,message:"\u4E0D\u80FD\u4E3A\u7A7A",trigger:"change"}]})}}};function D(s,r,t,e,x,d){const o=n("EsForm"),c=n("EsContainer");return y(),_(c,{title:"Slider\u7EC4\u4EF6 Step\u5C5E\u6027"},{default:i(()=>[l(o,{ref:"EsForm","list-query":e.listQuery,"form-item":e.formItem,rules:e.rules},null,8,["list-query","form-item","rules"])]),_:1})}var V=p(b,[["render",D]]);const v={name:"Slider",setup(){return{listQuery:m({sliderValue:0}),formItem:a([{type:"es-slider",label:"ShowInput",key:"sliderValue",col:24,attrs:{style:"width: 100%;","format-tooltip":t=>t/100,min:0,max:100,"show-input":!0},listeners:{change:t=>{u({message:"\u5DF2\u7ECF\u9009\u4E2D\uFF1A"+t,type:"success"})}}}]),rules:a({sliderValue:[{required:!0,message:"\u4E0D\u80FD\u4E3A\u7A7A",trigger:"change"}]})}}};function A(s,r,t,e,x,d){const o=n("EsForm"),c=n("EsContainer");return y(),_(c,{title:"Slider\u7EC4\u4EF6 ShowInput\u5C5E\u6027"},{default:i(()=>[l(o,{ref:"EsForm","list-query":e.listQuery,"form-item":e.formItem,rules:e.rules},null,8,["list-query","form-item","rules"])]),_:1})}var w=p(v,[["render",A]]);const S={name:"Slider",setup(){return{listQuery:m({sliderValue:[30,80]}),formItem:a([{type:"es-slider",label:"Range",key:"sliderValue",col:24,attrs:{style:"width: 100%;","format-tooltip":t=>t/100,min:0,max:100,range:!0},listeners:{change:t=>{u({message:"\u5DF2\u7ECF\u9009\u4E2D\uFF1A"+t,type:"success"})}}}]),rules:a({sliderValue:[{required:!0,message:"\u4E0D\u80FD\u4E3A\u7A7A",trigger:"change"}]})}}};function k(s,r,t,e,x,d){const o=n("EsForm"),c=n("EsContainer");return y(),_(c,{title:"Slider\u7EC4\u4EF6 Range\u5C5E\u6027"},{default:i(()=>[l(o,{ref:"EsForm","list-query":e.listQuery,"form-item":e.formItem,rules:e.rules},null,8,["list-query","form-item","rules"])]),_:1})}var q=p(S,[["render",k]]);const $={name:"Slider",setup(){return{listQuery:m({sliderValue:[30,80]}),formItem:a([{type:"es-slider",label:"Vertical",key:"sliderValue",col:24,attrs:{style:"width: 100%; height: 200px;","format-tooltip":t=>t/100,min:0,max:100,vertical:!0},listeners:{change:t=>{u({message:"\u5DF2\u7ECF\u9009\u4E2D\uFF1A"+t,type:"success"})}}}]),rules:a({sliderValue:[{required:!0,message:"\u4E0D\u80FD\u4E3A\u7A7A",trigger:"change"}]})}}};function I(s,r,t,e,x,d){const o=n("EsForm"),c=n("EsContainer");return y(),_(c,{title:"Slider\u7EC4\u4EF6 Vertical\u5C5E\u6027"},{default:i(()=>[l(o,{ref:"EsForm","list-query":e.listQuery,"form-item":e.formItem,rules:e.rules},null,8,["list-query","form-item","rules"])]),_:1})}var Q=p($,[["render",I]]);const T={name:"Slider",setup(){const s=m({sliderValue:[30,80]}),r=m({0:"0\xB0C",8:"8\xB0C",37:"37\xB0C",50:{style:{color:"#1989FA"},label:"50%"}});return{listQuery:s,formItem:a([{type:"es-slider",label:"Range",key:"sliderValue",col:24,attrs:{style:"width: 100%;","format-tooltip":e=>e/100,min:0,max:100,range:!0,marks:r},listeners:{change:e=>{u({message:"\u5DF2\u7ECF\u9009\u4E2D\uFF1A"+e,type:"success"})}}}]),rules:a({sliderValue:[{required:!0,message:"\u4E0D\u80FD\u4E3A\u7A7A",trigger:"change"}]})}}};function B(s,r,t,e,x,d){const o=n("EsForm"),c=n("EsContainer");return y(),_(c,{title:"Slider\u7EC4\u4EF6 Range\u5C5E\u6027"},{default:i(()=>[l(o,{ref:"EsForm","list-query":e.listQuery,"form-item":e.formItem,rules:e.rules},null,8,["list-query","form-item","rules"])]),_:1})}var R=p(T,[["render",B]]);const z={class:"markdown-body"},j=g("h1",null,"Slider\u7EC4\u4EF6",-1),N=g("h3",null,"\u793A\u4F8B",-1),P=g("h3",null,"\u79BB\u6563\u503C",-1),H=g("h3",null,"\u5E26\u6709\u8F93\u5165\u6846\u7684\u6ED1\u5757",-1),M=g("h3",null,"\u8303\u56F4\u9009\u62E9",-1),G=g("h3",null,"\u7AD6\u5411\u6A21\u5F0F",-1),J=g("h3",null,"\u5C55\u793A\u6807\u8BB0",-1),K=h('<h3>\u5C5E\u6027</h3><table><thead><tr><th style="text-align:center;">\u53C2\u6570</th><th style="text-align:center;">\u8BF4\u660E</th><th style="text-align:center;">\u7C7B\u578B</th><th style="text-align:center;">\u53EF\u9009\u503C</th><th style="text-align:center;">\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td style="text-align:center;"><code>model-value / v-model</code></td><td style="text-align:center;">\u9009\u4E2D\u9879\u7ED1\u5B9A\u503C</td><td style="text-align:center;">number</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">0</td></tr><tr><td style="text-align:center;"><code>min</code></td><td style="text-align:center;">\u6700\u5C0F\u503C</td><td style="text-align:center;">number</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">0</td></tr><tr><td style="text-align:center;"><code>max</code></td><td style="text-align:center;">\u6700\u5927\u503C</td><td style="text-align:center;">number</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">100</td></tr><tr><td style="text-align:center;"><code>disabled</code></td><td style="text-align:center;">\u662F\u5426\u7981\u7528</td><td style="text-align:center;">boolean</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">false</td></tr><tr><td style="text-align:center;"><code>step</code></td><td style="text-align:center;">\u6B65\u957F</td><td style="text-align:center;">number</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">1</td></tr><tr><td style="text-align:center;"><code>show-input</code></td><td style="text-align:center;">\u662F\u5426\u663E\u793A\u8F93\u5165\u6846\uFF0C\u4EC5\u5728\u975E\u8303\u56F4\u9009\u62E9\u65F6\u6709\u6548</td><td style="text-align:center;">boolean</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">false</td></tr><tr><td style="text-align:center;"><code>show-input-controls</code></td><td style="text-align:center;">\u5728\u663E\u793A\u8F93\u5165\u6846\u7684\u60C5\u51B5\u4E0B\uFF0C\u662F\u5426\u663E\u793A\u8F93\u5165\u6846\u7684\u63A7\u5236\u6309\u94AE</td><td style="text-align:center;">boolean</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">true</td></tr><tr><td style="text-align:center;"><code>input-size</code></td><td style="text-align:center;">\u8F93\u5165\u6846\u7684\u5C3A\u5BF8</td><td style="text-align:center;">string</td><td style="text-align:center;">large / medium / small / mini</td><td style="text-align:center;">small</td></tr><tr><td style="text-align:center;"><code>show-stops</code></td><td style="text-align:center;">\u662F\u5426\u663E\u793A\u95F4\u65AD\u70B9</td><td style="text-align:center;">boolean</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">false</td></tr><tr><td style="text-align:center;"><code>show-tooltip</code></td><td style="text-align:center;">\u662F\u5426\u663E\u793A</td><td style="text-align:center;">tooltip</td><td style="text-align:center;">boolean</td><td style="text-align:center;">\u2014</td></tr><tr><td style="text-align:center;"><code>format-tooltip</code></td><td style="text-align:center;">\u683C\u5F0F\u5316</td><td style="text-align:center;">tooltip message</td><td style="text-align:center;">function(value)</td><td style="text-align:center;">\u2014</td></tr><tr><td style="text-align:center;"><code>range</code></td><td style="text-align:center;">\u662F\u5426\u4E3A\u8303\u56F4\u9009\u62E9</td><td style="text-align:center;">boolean</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">false</td></tr><tr><td style="text-align:center;"><code>vertical</code></td><td style="text-align:center;">\u662F\u5426\u7AD6\u5411\u6A21\u5F0F</td><td style="text-align:center;">boolean</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">false</td></tr><tr><td style="text-align:center;"><code>height</code></td><td style="text-align:center;">Slider \u9AD8\u5EA6\uFF0C\u5F53\u7AD6\u5411\u6A21\u5F0F\u65F6\u5FC5\u586B</td><td style="text-align:center;">string</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">\u2014</td></tr><tr><td style="text-align:center;"><code>label</code></td><td style="text-align:center;">\u5C4F\u5E55\u9605\u8BFB\u5668\u6807\u7B7E</td><td style="text-align:center;">string</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">\u2014</td></tr><tr><td style="text-align:center;"><code>debounce</code></td><td style="text-align:center;">\u8F93\u5165\u65F6\u7684\u53BB\u6296\u5EF6\u8FDF\uFF0C\u6BEB\u79D2\uFF0C\u4EC5\u5728 show-input \u7B49\u4E8E true \u65F6\u6709\u6548</td><td style="text-align:center;">number</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">300</td></tr><tr><td style="text-align:center;"><code>tooltip-class</code></td><td style="text-align:center;">tooltip \u7684\u81EA\u5B9A\u4E49\u7C7B\u540D</td><td style="text-align:center;">string</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">\u2014</td></tr><tr><td style="text-align:center;"><code>marks</code></td><td style="text-align:center;">\u6807\u8BB0\uFF0C key \u7684\u7C7B\u578B\u5FC5\u987B\u4E3A number \u4E14\u53D6\u503C\u5728\u95ED\u533A\u95F4 [min, max] \u5185\uFF0C\u6BCF\u4E2A\u6807\u8BB0\u53EF\u4EE5\u5355\u72EC\u8BBE\u7F6E\u6837\u5F0F</td><td style="text-align:center;">object</td><td style="text-align:center;">\u2014</td><td style="text-align:center;">\u2014</td></tr></tbody></table><h3>\u4E8B\u4EF6</h3><table><thead><tr><th style="text-align:center;">\u4E8B\u4EF6\u540D</th><th style="text-align:center;">\u8BF4\u660E</th><th style="text-align:center;">\u53C2\u6570\u5217\u8868</th></tr></thead><tbody><tr><td style="text-align:center;"><code>change</code></td><td style="text-align:center;">\u503C\u6539\u53D8\u65F6\u89E6\u53D1\uFF08\u4F7F\u7528\u9F20\u6807\u62D6\u66F3\u65F6\uFF0C\u53EA\u5728\u677E\u5F00\u9F20\u6807\u540E\u89E6\u53D1\uFF09</td><td style="text-align:center;">val\uFF0C\u65B0\u72B6\u6001\u7684\u503C</td></tr><tr><td style="text-align:center;"><code>input</code></td><td style="text-align:center;">\u6570\u636E\u6539\u53D8\u65F6\u89E6\u53D1\uFF08\u4F7F\u7528\u9F20\u6807\u62D6\u66F3\u65F6\uFF0C\u6D3B\u52A8\u8FC7\u7A0B\u5B9E\u65F6\u89E6\u53D1\uFF09</td><td style="text-align:center;">val\uFF0C\u6539\u53D8\u540E\u7684\u503C</td></tr></tbody></table>',4),U={setup(s,{expose:r}){return r({frontmatter:{}}),(e,x)=>{const d=n("Preview");return y(),f("div",z,[j,N,l(d,{"comp-name":"Slider","demo-name":"demo"},{default:i(()=>[l(C)]),_:1}),P,l(d,{"comp-name":"Slider","demo-name":"demo2"},{default:i(()=>[l(V)]),_:1}),H,l(d,{"comp-name":"Slider","demo-name":"demo3"},{default:i(()=>[l(w)]),_:1}),M,l(d,{"comp-name":"Slider","demo-name":"demo4"},{default:i(()=>[l(q)]),_:1}),G,l(d,{"comp-name":"Slider","demo-name":"demo5"},{default:i(()=>[l(Q)]),_:1}),J,l(d,{"comp-name":"Slider","demo-name":"demo6"},{default:i(()=>[l(R)]),_:1}),K])}}};export{U as default};