"use strict";(self["webpackChunklin_cms_vue"]=self["webpackChunklin_cms_vue"]||[]).push([[99],{30099:function(l,e,a){a.r(e),a.d(e,{default:function(){return H}});var n=a(20641),t=a(90033);const s=l=>((0,n.Qi)("data-v-48a9887e"),l=l(),(0,n.jt)(),l),o={class:"lin-container"},d=s((()=>(0,n.Lk)("div",{class:"lin-title"},"Slider 滑块",-1))),u={class:"lin-wrap-ui"},i=s((()=>(0,n.Lk)("div",{slot:"header"},[(0,n.Lk)("span",null,"基础用法")],-1))),r={class:"block demo-block"},p=s((()=>(0,n.Lk)("span",{class:"demonstration"},"默认",-1))),v={class:"block demo-block"},m=s((()=>(0,n.Lk)("span",{class:"demonstration"},"自定义初始值",-1))),c={class:"block demo-block"},k=s((()=>(0,n.Lk)("span",{class:"demonstration"},"隐藏 Tooltip",-1))),b={class:"block demo-block"},f=s((()=>(0,n.Lk)("span",{class:"demonstration"},"格式化 Tooltip",-1))),L={class:"block demo-block"},h=s((()=>(0,n.Lk)("span",{class:"demonstration"},"禁用",-1))),F={style:{"white-space":"pre-wrap"}},_=s((()=>(0,n.Lk)("div",{slot:"header"},[(0,n.Lk)("span",null,"离散值")],-1))),V={class:"block demo-block"},w=s((()=>(0,n.Lk)("span",{class:"demonstration"},"不显示间断点",-1))),x={class:"block demo-block"},g=s((()=>(0,n.Lk)("span",{class:"demonstration"},"显示间断点",-1))),y={style:{"white-space":"pre-wrap"}},C=s((()=>(0,n.Lk)("div",{slot:"header"},[(0,n.Lk)("span",null,"带有输入框")],-1))),U={class:"block"},T={style:{"white-space":"pre-wrap"}},S=s((()=>(0,n.Lk)("div",{slot:"header"},[(0,n.Lk)("span",null,"范围选择")],-1))),A={class:"block"},E={style:{"white-space":"pre-wrap"}},I=s((()=>(0,n.Lk)("div",{slot:"header"},[(0,n.Lk)("span",null,"竖向模式")],-1))),$={class:"block"},j={style:{"white-space":"pre-wrap"}},Q=s((()=>(0,n.Lk)("div",{slot:"header"},[(0,n.Lk)("span",null,"展示标记")],-1))),X={class:"block"},q={style:{"white-space":"pre-wrap"}};function z(l,e,a,s,z,B){const D=(0,n.g2)("el-slider"),G=(0,n.g2)("el-row"),H=(0,n.g2)("el-collapse-item"),J=(0,n.g2)("el-collapse"),K=(0,n.g2)("el-card");return(0,n.uX)(),(0,n.CE)("div",o,[d,(0,n.Lk)("div",u,[(0,n.bF)(K,{class:"box-card base-box-card",style:{"margin-bottom":"50px"}},{default:(0,n.k6)((()=>[i,(0,n.bF)(G,null,{default:(0,n.k6)((()=>[(0,n.Lk)("template",null,[(0,n.Lk)("div",r,[p,(0,n.bF)(D,{modelValue:z.value1,"onUpdate:modelValue":e[0]||(e[0]=l=>z.value1=l)},null,8,["modelValue"])]),(0,n.Lk)("div",v,[m,(0,n.bF)(D,{modelValue:z.value2,"onUpdate:modelValue":e[1]||(e[1]=l=>z.value2=l)},null,8,["modelValue"])]),(0,n.Lk)("div",c,[k,(0,n.bF)(D,{modelValue:z.value3,"onUpdate:modelValue":e[2]||(e[2]=l=>z.value3=l),"show-tooltip":!1},null,8,["modelValue"])]),(0,n.Lk)("div",b,[f,(0,n.bF)(D,{modelValue:z.value4,"onUpdate:modelValue":e[3]||(e[3]=l=>z.value4=l),"format-tooltip":B.formatTooltip},null,8,["modelValue","format-tooltip"])]),(0,n.Lk)("div",L,[h,(0,n.bF)(D,{modelValue:z.value5,"onUpdate:modelValue":e[4]||(e[4]=l=>z.value5=l),disabled:""},null,8,["modelValue"])])])])),_:1}),(0,n.bF)(J,null,{default:(0,n.k6)((()=>[(0,n.bF)(H,{title:"查看代码",name:"2"},{default:(0,n.k6)((()=>[(0,n.Lk)("div",F,(0,t.v_)(z.base),1)])),_:1})])),_:1})])),_:1}),(0,n.bF)(K,{class:"box-card",style:{"margin-bottom":"50px"}},{default:(0,n.k6)((()=>[_,(0,n.bF)(G,null,{default:(0,n.k6)((()=>[(0,n.Lk)("template",null,[(0,n.Lk)("div",V,[w,(0,n.bF)(D,{modelValue:z.value6,"onUpdate:modelValue":e[5]||(e[5]=l=>z.value6=l),step:10},null,8,["modelValue"])]),(0,n.Lk)("div",x,[g,(0,n.bF)(D,{modelValue:z.value7,"onUpdate:modelValue":e[6]||(e[6]=l=>z.value7=l),step:10,"show-stops":""},null,8,["modelValue"])])])])),_:1}),(0,n.bF)(J,null,{default:(0,n.k6)((()=>[(0,n.bF)(H,{title:"查看代码",name:"2"},{default:(0,n.k6)((()=>[(0,n.Lk)("div",y,(0,t.v_)(z.showStops),1)])),_:1})])),_:1})])),_:1}),(0,n.bF)(K,{class:"box-card",style:{"margin-bottom":"50px"}},{default:(0,n.k6)((()=>[C,(0,n.bF)(G,null,{default:(0,n.k6)((()=>[(0,n.Lk)("template",null,[(0,n.Lk)("div",U,[(0,n.bF)(D,{modelValue:z.value8,"onUpdate:modelValue":e[7]||(e[7]=l=>z.value8=l),"show-input":""},null,8,["modelValue"])])])])),_:1}),(0,n.bF)(J,null,{default:(0,n.k6)((()=>[(0,n.bF)(H,{title:"查看代码",name:"2"},{default:(0,n.k6)((()=>[(0,n.Lk)("div",T,(0,t.v_)(z.showInput),1)])),_:1})])),_:1})])),_:1}),(0,n.bF)(K,{class:"box-card",style:{"margin-bottom":"50px"}},{default:(0,n.k6)((()=>[S,(0,n.bF)(G,null,{default:(0,n.k6)((()=>[(0,n.Lk)("template",null,[(0,n.Lk)("div",A,[(0,n.bF)(D,{modelValue:z.value9,"onUpdate:modelValue":e[8]||(e[8]=l=>z.value9=l),range:"","show-stops":"",max:10},null,8,["modelValue"])])])])),_:1}),(0,n.bF)(J,null,{default:(0,n.k6)((()=>[(0,n.bF)(H,{title:"查看代码",name:"2"},{default:(0,n.k6)((()=>[(0,n.Lk)("div",E,(0,t.v_)(z.range),1)])),_:1})])),_:1})])),_:1}),(0,n.bF)(K,{class:"box-card",style:{"margin-bottom":"50px"}},{default:(0,n.k6)((()=>[I,(0,n.bF)(G,null,{default:(0,n.k6)((()=>[(0,n.Lk)("template",null,[(0,n.Lk)("div",$,[(0,n.bF)(D,{modelValue:z.value10,"onUpdate:modelValue":e[9]||(e[9]=l=>z.value10=l),vertical:"",height:"200px"},null,8,["modelValue"])])])])),_:1}),(0,n.bF)(J,null,{default:(0,n.k6)((()=>[(0,n.bF)(H,{title:"查看代码",name:"2"},{default:(0,n.k6)((()=>[(0,n.Lk)("div",j,(0,t.v_)(z.vertical),1)])),_:1})])),_:1})])),_:1}),(0,n.bF)(K,{class:"box-card",style:{"margin-bottom":"50px"}},{default:(0,n.k6)((()=>[Q,(0,n.bF)(G,null,{default:(0,n.k6)((()=>[(0,n.Lk)("template",null,[(0,n.Lk)("div",X,[(0,n.bF)(D,{modelValue:z.value11,"onUpdate:modelValue":e[10]||(e[10]=l=>z.value11=l),range:"",marks:z.marks},null,8,["modelValue","marks"])])])])),_:1}),(0,n.bF)(J,null,{default:(0,n.k6)((()=>[(0,n.bF)(H,{title:"查看代码",name:"2"},{default:(0,n.k6)((()=>[(0,n.Lk)("div",q,(0,t.v_)(z.marksCode),1)])),_:1})])),_:1})])),_:1})])])}var B={name:"",components:{},data(){return{marksCode:"\n<template>\n <div class=\"block\">\n <el-slider\n v-model=\"value\"\n range\n :marks=\"marks\">\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value: [30, 60],\n marks: {\n 0: '0°C',\n 8: '8°C',\n 37: '37°C',\n 50: {\n style: {\n color: '#1989FA'\n },\n label: this.$createElement('strong', '50%')\n }\n }\n }\n }\n }\n<\/script>",vertical:'\n<template>\n <div class="block">\n <el-slider\n v-model="value"\n vertical\n height="200px">\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value: 0\n }\n }\n }\n<\/script>',range:'\n<template>\n <div class="block">\n <el-slider\n v-model="value"\n range\n show-stops\n :max="10">\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value: [4, 8]\n }\n }\n }\n<\/script>',showInput:'\n<template>\n <div class="block">\n <el-slider\n v-model="value"\n show-input>\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value: 0\n }\n }\n }\n<\/script>',showStops:"",base:'\n<template>\n <div class="block">\n <span class="demonstration">默认</span>\n <el-slider v-model="value1"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">自定义初始值</span>\n <el-slider v-model="value2"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">隐藏 Tooltip</span>\n <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">格式化 Tooltip</span>\n <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n </div>\n <div class="block">\n <span class="demonstration">禁用</span>\n <el-slider v-model="value5" disabled></el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value1: 0,\n value2: 50,\n value3: 36,\n value4: 48,\n value5: 42\n }\n },\n methods: {\n formatTooltip(val) {\n return val / 100;\n }\n }\n }\n<\/script>',showStops:'\n<template>\n <div class="block">\n <span class="demonstration">不显示间断点</span>\n <el-slider\n v-model="value1"\n :step="10">\n </el-slider>\n </div>\n <div class="block">\n <span class="demonstration">显示间断点</span>\n <el-slider\n v-model="value2"\n :step="10"\n show-stops>\n </el-slider>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n value1: 0,\n value2: 0\n }\n }\n }\n<\/script>',value1:0,value2:50,value3:36,value4:48,value5:42,value6:0,value7:0,value8:0,value9:[4,8],value10:0,value11:[30,60],marks:{0:"0°C",8:"8°C",37:"37°C",50:{style:{color:"#1989FA"},label:this.$createElement("strong","50%")}}}},computed:{},watch:{},mounted(){this.init()},methods:{init(){},formatTooltip(l){return l/100}}},D=a(66262);const G=(0,D.A)(B,[["render",z],["__scopeId","data-v-48a9887e"]]);var H=G}}]);
|
