init
This commit is contained in:
@@ -0,0 +1,11 @@
|
||||
import MarkdownIt from "markdown-it";
|
||||
|
||||
export default (md: MarkdownIt): void => {
|
||||
const fence = md.renderer.rules.fence!;
|
||||
md.renderer.rules.fence = (...args) => {
|
||||
const [tokens, idx] = args;
|
||||
const token = tokens[idx];
|
||||
const rawCode = fence(...args);
|
||||
return `<div class="language-${token.info.trim()}">${rawCode}</div>`;
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1 @@
|
||||
export declare type CheckboxSize = "lg" | "md" | "sm" | "xs";
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1 @@
|
||||
export declare type SwitchSize = "lg" | "md" | "sm" | "xs";
|
||||
Binary file not shown.
@@ -0,0 +1,66 @@
|
||||
import{f as y,r as o,o as V,j as q,h as s,g as l,B as u,a7 as k,i as n,v as a}from"./.pnpm.8fb36023.js";const N={class:"markdown-body"},B=n("p",{class:"describe-plugin"},"\u4F5C\u4E3A\u4E00\u4E2A\u62D6\u62FD\u5F0F\u7684\u4EA4\u4E92\u6027\u7EC4\u4EF6\uFF0C\u6ED1\u5757\u5F80\u5F80\u80FD\u7ED9\u4EA7\u54C1\u5E26\u6765\u66F4\u597D\u7684\u64CD\u4F5C\u4F53\u9A8C\u3002",-1),j=n("p",null,[a("\u4F7F\u7528 "),n("code",null,"lay-slider"),a(" \u6807\u7B7E, \u521B\u5EFA\u6ED1\u5757")],-1),D=n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-slider")]),a(),n("span",{class:"token attr-name"},":showDots"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("true"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":step"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("10"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":max"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("100"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("value1"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":disabled"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-slider")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-input-number")]),a(),n("span",{class:"token attr-name"},"v-model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("value1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-input-number")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
|
||||
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token keyword"},"const"),a(" value1 "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token number"},"50"),n("span",{class:"token punctuation"},")"),a(`
|
||||
`),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
value1
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`)])],-1),U=n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-slider")]),a(),n("span",{class:"token attr-name"},":showDots"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":step"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("10"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},"v-model"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("value2"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":vertical"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("true"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":disabled"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-slider")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
|
||||
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"const"),a(" value2 "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token number"},"10"),n("span",{class:"token punctuation"},")"),a(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
value2
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`)])],-1),C=n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-slider")]),a(),n("span",{class:"token attr-name"},":disabled"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":min"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("0"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":max"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("100"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("rangeValue")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("value3"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":range"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("true"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-slider")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
|
||||
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),a(`
|
||||
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token keyword"},"const"),a(" value3 "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"20"),n("span",{class:"token punctuation"},","),n("span",{class:"token number"},"50"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),a(`
|
||||
`),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
value3
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`)])],-1),S=n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("lay-slider")]),a(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),a("rangeValue")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("value4"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":range"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("true"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":vertical"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("true"),n("span",{class:"token punctuation"},'"')]),a(),n("span",{class:"token attr-name"},":disabled"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),a("false"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("lay-slider")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("template")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),a("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[a(`
|
||||
`),n("span",{class:"token keyword"},"import"),a(),n("span",{class:"token punctuation"},"{"),a(" ref "),n("span",{class:"token punctuation"},"}"),a(),n("span",{class:"token keyword"},"from"),a(),n("span",{class:"token string"},"'vue'"),a(`
|
||||
`),n("span",{class:"token keyword"},"export"),a(),n("span",{class:"token keyword"},"default"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
`),n("span",{class:"token keyword"},"const"),a(" value4 "),n("span",{class:"token operator"},"="),a(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token number"},"23"),n("span",{class:"token punctuation"},","),n("span",{class:"token number"},"56"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),a(`
|
||||
`),n("span",{class:"token keyword"},"return"),a(),n("span",{class:"token punctuation"},"{"),a(`
|
||||
value4
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`),n("span",{class:"token punctuation"},"}"),a(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),a("script")]),n("span",{class:"token punctuation"},">")]),a(`
|
||||
`)])],-1),z=n("table",null,[n("thead",null,[n("tr",null,[n("th",null,"\u5C5E\u6027"),n("th",null,"\u63CF\u8FF0"),n("th",null,"\u7C7B\u578B"),n("th",null,"\u53EF\u9009\u503C"),n("th",null,"\u9ED8\u8BA4\u503C")])]),n("tbody",null,[n("tr",null,[n("td",null,"v-model"),n("td",null,"\u9009\u4E2D\u503C"),n("td",null,[n("code",null,"Number")]),n("td",null,"-"),n("td",null,"-")]),n("tr",null,[n("td",null,"vertical"),n("td",null,"\u662F\u5426\u5782\u76F4"),n("td",null,[n("code",null,"Boolean")]),n("td",null,"-"),n("td",null,"-")]),n("tr",null,[n("td",null,"range"),n("td",null,"\u662F\u5426\u533A\u95F4"),n("td",null,[n("code",null,"Boolean")]),n("td",null,"-"),n("td",null,"-")]),n("tr",null,[n("td",null,"rangeValue"),n("td",null,"\u533A\u95F4\u503C"),n("td",null,[n("code",null,"Array")]),n("td",null,"-"),n("td",null,"-")]),n("tr",null,[n("td",null,"step"),n("td",null,"\u6B65\u957F"),n("td",null,[n("code",null,"Number")]),n("td",null,"-"),n("td",null,"-")]),n("tr",null,[n("td",null,"min"),n("td",null,"\u6700\u5C0F\u503C"),n("td",null,[n("code",null,"Number")]),n("td",null,"-"),n("td",null,"-")]),n("tr",null,[n("td",null,"max"),n("td",null,"\u6700\u5927\u503C"),n("td",null,[n("code",null,"Number")]),n("td",null,"-"),n("td",null,"-")]),n("tr",null,[n("td",null,"showDots"),n("td",null,"\u662F\u5426\u663E\u793A\u65AD\u70B9"),n("td",null,[n("code",null,"Boolean")]),n("td",null,"-"),n("td",null,"false")])])],-1),A={style:{display:"flex","justify-content":"space-between","margin-top":"20px"}},T={},F={__name:"slider",setup(E,{expose:_}){let p=y(50),i=y(10),r=y([20,50]),d=y([23,56]);return _({frontmatter:{}}),(I,e)=>{const b=o("lay-anchor"),c=o("lay-field"),m=o("lay-slider"),w=o("lay-input-number"),g=o("lay-code"),x=o("lay-table-box"),h=o("lay-contributor"),v=o("lay-icon"),f=o("router-link");return V(),q("div",N,[s(b,{anchors:"\u57FA\u672C\u4ECB\u7ECD,\u6A2A\u5411,\u7EB5\u5411,\u533A\u95F4,\u7EB5\u5411\u533A\u95F4,Slider \u5C5E\u6027",currIndex:-1,show:!0}),s(c,{id:"\u57FA\u672C\u4ECB\u7ECD",title:"\u57FA\u672C\u4ECB\u7ECD",style:{"margin-top":"21px","margin-bottom":"20px"}}),B,s(c,{id:"\u6A2A\u5411",title:"\u6A2A\u5411",style:{"margin-top":"21px","margin-bottom":"20px"}}),s(g,null,{description:l(()=>[j]),code:l(()=>[D]),default:l(()=>[s(m,{showDots:!0,step:10,max:100,modelValue:u(p),"onUpdate:modelValue":e[0]||(e[0]=t=>k(p)?p.value=t:p=t),disabled:!1},null,8,["modelValue"]),s(w,{modelValue:u(p),"onUpdate:modelValue":e[1]||(e[1]=t=>k(p)?p.value=t:p=t)},null,8,["modelValue"])]),_:1}),s(c,{id:"\u7EB5\u5411",title:"\u7EB5\u5411",style:{"margin-top":"21px","margin-bottom":"20px"}}),s(g,null,{code:l(()=>[U]),default:l(()=>[s(m,{showDots:!1,step:10,modelValue:u(i),"onUpdate:modelValue":e[2]||(e[2]=t=>k(i)?i.value=t:i=t),vertical:!0,disabled:!1},null,8,["modelValue"])]),_:1}),s(c,{id:"\u533A\u95F4",title:"\u533A\u95F4",style:{"margin-top":"21px","margin-bottom":"20px"}}),s(g,null,{code:l(()=>[C]),default:l(()=>[s(m,{disabled:!1,min:0,max:100,rangeValue:u(r),"onUpdate:rangeValue":e[3]||(e[3]=t=>k(r)?r.value=t:r=t),range:!0},null,8,["rangeValue"])]),_:1}),s(c,{id:"\u7EB5\u5411\u533A\u95F4",title:"\u7EB5\u5411\u533A\u95F4",style:{"margin-top":"21px","margin-bottom":"20px"}}),s(g,null,{code:l(()=>[S]),default:l(()=>[s(m,{rangeValue:u(d),"onUpdate:rangeValue":e[4]||(e[4]=t=>k(d)?d.value=t:d=t),range:!0,vertical:!0,disabled:!1},null,8,["rangeValue"])]),_:1}),s(c,{id:"Slider \u5C5E\u6027",title:"Slider \u5C5E\u6027",style:{"margin-top":"21px","margin-bottom":"20px"}}),s(x,null,{default:l(()=>[z]),_:1}),s(h,{"file-path":"slider"}),n("div",A,[n("div",null,[s(f,{to:"/zh-CN/components/rate",class:"lay-link",style:{display:""}},{default:l(()=>[s(v,{type:"layui-icon-left"}),a("\u8BC4\u5206")]),_:1})]),n("div",null,[s(f,{to:"/zh-CN/components/form",class:"lay-link",style:{display:""}},{default:l(()=>[a("\u8868\u5355 "),s(v,{type:"layui-icon-right"})]),_:1})])])])}}};export{F as default,T as frontmatter};
|
||||
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,712 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "LayLayer",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Shade from "./Shade.vue";
|
||||
import Iframe from "./Iframe.vue";
|
||||
import Title from "./Title.vue";
|
||||
import CloseBtn from "./CloseBtn.vue";
|
||||
import Resize from "./Resize.vue";
|
||||
import Photos from "./Photos.vue";
|
||||
import Notifiy from "./Notifiy.vue";
|
||||
import {
|
||||
Ref,
|
||||
ref,
|
||||
watch,
|
||||
computed,
|
||||
useSlots,
|
||||
VNodeTypes,
|
||||
nextTick,
|
||||
inject,
|
||||
} from "vue";
|
||||
import {
|
||||
nextId,
|
||||
maxArea,
|
||||
maxOffset,
|
||||
getArea,
|
||||
calculateArea,
|
||||
calculateOffset,
|
||||
calculateContent,
|
||||
calculateType,
|
||||
minArea,
|
||||
minOffset,
|
||||
updateMinArrays,
|
||||
getDrawerAnimationClass,
|
||||
calculateDrawerArea,
|
||||
calculatePhotosArea,
|
||||
calculateNotifOffset,
|
||||
removeNotifiyFromQueen,
|
||||
getNotifyAnimationClass,
|
||||
} from "../utils";
|
||||
import useResize from "../composable/useResize";
|
||||
import useMove from "../composable/useMove";
|
||||
import { zIndexKey } from "../tokens";
|
||||
|
||||
export interface LayerProps {
|
||||
id?: string;
|
||||
title?: string | boolean | Function;
|
||||
icon?: string | number;
|
||||
skin?: string;
|
||||
zIndex?: number | Function;
|
||||
setTop?: boolean;
|
||||
offset?: string[] | string;
|
||||
area?: string[] | "auto";
|
||||
modelValue?: boolean;
|
||||
maxmin?: boolean | string;
|
||||
btn?: Record<string, Function>[] | false;
|
||||
move?: boolean | string;
|
||||
resize?: boolean | string;
|
||||
type?:
|
||||
| 0
|
||||
| 1
|
||||
| 2
|
||||
| 3
|
||||
| 4
|
||||
| 5
|
||||
| 6
|
||||
| "dialog"
|
||||
| "page"
|
||||
| "iframe"
|
||||
| "loading"
|
||||
| "drawer"
|
||||
| "photos"
|
||||
| "notifiy";
|
||||
content?: string | Function | object | VNodeTypes;
|
||||
isHtmlFragment?: boolean;
|
||||
shade?: boolean | string;
|
||||
shadeClose?: boolean | string;
|
||||
shadeOpacity?: string;
|
||||
closeBtn?: boolean | string;
|
||||
btnAlign?: "l" | "c" | "r";
|
||||
time?: number;
|
||||
load?: number;
|
||||
anim?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
|
||||
isOutAnim?: boolean;
|
||||
destroy?: Function;
|
||||
success?: Function;
|
||||
end?: Function;
|
||||
yes?: Function;
|
||||
yesText?: string;
|
||||
isFunction?: boolean;
|
||||
isMessage?: boolean;
|
||||
appContext?: any;
|
||||
startIndex?: number;
|
||||
imgList?: { src: string; alt: string; thumb: string }[];
|
||||
min?: Function;
|
||||
full?: Function;
|
||||
restore?: Function;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<LayerProps>(), {
|
||||
title: "标题",
|
||||
setTop: false,
|
||||
offset: () => ["50%", "50%"],
|
||||
area: "auto",
|
||||
modelValue: false,
|
||||
maxmin: false,
|
||||
move: true,
|
||||
type: 1,
|
||||
time: 0,
|
||||
shade: true,
|
||||
shadeClose: true,
|
||||
shadeOpacity: "0.1",
|
||||
closeBtn: "1",
|
||||
btnAlign: "r",
|
||||
load: 0,
|
||||
anim: 0,
|
||||
resize: false,
|
||||
isHtmlFragment: false,
|
||||
isOutAnim: true,
|
||||
destroy: () => {},
|
||||
success: () => {},
|
||||
end: () => {},
|
||||
full: () => {},
|
||||
min: () => {},
|
||||
restore: () => {},
|
||||
yesText: "确定",
|
||||
isFunction: false,
|
||||
isMessage: false,
|
||||
startIndex: 0,
|
||||
imgList: () => [],
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close", "update:modelValue"]);
|
||||
|
||||
const slots = useSlots();
|
||||
const max: Ref<boolean> = ref(false);
|
||||
const min: Ref<boolean> = ref(false);
|
||||
const id: Ref<string> = ref(props.id || nextId());
|
||||
const layero = ref<HTMLElement | null>(null);
|
||||
const type: number = calculateType(props.type);
|
||||
const area: Ref<string[]> = ref(
|
||||
calculateArea(props.type, props.area, props.offset)
|
||||
);
|
||||
const offset: Ref<string[]> = ref(
|
||||
calculateOffset(props.offset, area.value, props.type)
|
||||
);
|
||||
const contentHeight = ref(
|
||||
calculateContent(props.title, area.value[1], props.btn, type, props.isMessage)
|
||||
);
|
||||
const index: Ref<number | Function> = ref(
|
||||
props.zIndex ?? inject(zIndexKey, 99999)
|
||||
);
|
||||
const visible: Ref<boolean> = ref(false);
|
||||
const first: Ref<boolean> = ref(true);
|
||||
|
||||
const w: Ref<string> = ref(area.value[0]);
|
||||
const h: Ref<string> = ref(area.value[1]);
|
||||
const t: Ref<string> = ref(offset.value[0]);
|
||||
const l: Ref<string> = ref(offset.value[1]);
|
||||
|
||||
const _w: Ref<string> = ref(area.value[0]);
|
||||
const _h: Ref<string> = ref(area.value[0]);
|
||||
const _t: Ref<string> = ref(offset.value[0]);
|
||||
const _l: Ref<string> = ref(offset.value[1]);
|
||||
|
||||
/**
|
||||
* 首次打开
|
||||
* <p>
|
||||
*/
|
||||
const firstOpenDelayCalculation = function () {
|
||||
nextTick(async () => {
|
||||
area.value = getArea(layero.value);
|
||||
if (type == 4) {
|
||||
area.value = calculateDrawerArea(props.offset, props.area);
|
||||
}
|
||||
if (type == 5) {
|
||||
area.value = await calculatePhotosArea(
|
||||
props.imgList[props.startIndex].src,
|
||||
props
|
||||
);
|
||||
}
|
||||
offset.value = calculateOffset(props.offset, area.value, props.type);
|
||||
if (type == 6) {
|
||||
offset.value = calculateNotifOffset(props.offset, area.value, id.value);
|
||||
}
|
||||
w.value = area.value[0];
|
||||
h.value = area.value[1];
|
||||
_w.value = area.value[0];
|
||||
_l.value = area.value[1];
|
||||
t.value = offset.value[0];
|
||||
l.value = offset.value[1];
|
||||
_t.value = offset.value[0];
|
||||
_l.value = offset.value[1];
|
||||
supportMove();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 普通打开
|
||||
* <p>
|
||||
*/
|
||||
const notFirstOpenLayerInit = function () {
|
||||
w.value = _w.value;
|
||||
h.value = _h.value;
|
||||
t.value = _t.value;
|
||||
l.value = _l.value;
|
||||
supportMove();
|
||||
};
|
||||
|
||||
/**
|
||||
* Component 模式, 关闭事件
|
||||
* <p>
|
||||
* 在 Component 模式下, 隐藏前需要恢复正常窗体位置与尺寸, 保存
|
||||
**/
|
||||
const beforeCloseSaveData = function () {
|
||||
if (min.value) minHandle();
|
||||
if (max.value) maxHandle();
|
||||
_w.value = w.value;
|
||||
_h.value = h.value;
|
||||
_t.value = t.value;
|
||||
_l.value = l.value;
|
||||
};
|
||||
|
||||
/**
|
||||
* 弹层最大化
|
||||
* <p>
|
||||
*/
|
||||
const maxHandle = () => {
|
||||
if (max.value) {
|
||||
w.value = _w.value;
|
||||
h.value = _h.value;
|
||||
t.value = _t.value;
|
||||
l.value = _l.value;
|
||||
props.restore(props.id);
|
||||
} else {
|
||||
_t.value = t.value;
|
||||
_l.value = l.value;
|
||||
_w.value = w.value;
|
||||
_h.value = h.value;
|
||||
w.value = maxArea().w;
|
||||
h.value = maxArea().h;
|
||||
t.value = maxOffset().t;
|
||||
l.value = maxOffset().l;
|
||||
props.full(props.id);
|
||||
}
|
||||
max.value = !max.value;
|
||||
};
|
||||
|
||||
/**
|
||||
* 弹层最小化
|
||||
* <p>
|
||||
*/
|
||||
const minHandle = () => {
|
||||
let left = 180 * updateMinArrays(id.value, !min.value);
|
||||
if (left > document.documentElement.clientWidth - 180) {
|
||||
left = document.documentElement.clientWidth - 180;
|
||||
}
|
||||
if (min.value) {
|
||||
w.value = _w.value;
|
||||
h.value = _h.value;
|
||||
t.value = _t.value;
|
||||
l.value = _l.value;
|
||||
props.restore(props.id);
|
||||
} else {
|
||||
_w.value = w.value;
|
||||
_h.value = h.value;
|
||||
_t.value = t.value;
|
||||
_l.value = l.value;
|
||||
h.value = minArea().h;
|
||||
w.value = minArea().w;
|
||||
t.value = minOffset(left).t;
|
||||
l.value = minOffset(left).l;
|
||||
props.min(props.id);
|
||||
}
|
||||
min.value = !min.value;
|
||||
};
|
||||
|
||||
/**
|
||||
* 重置弹层
|
||||
* <p>
|
||||
*/
|
||||
const reset = function () {
|
||||
if (!first.value) {
|
||||
min.value = false;
|
||||
max.value = false;
|
||||
w.value = area.value[0];
|
||||
h.value = area.value[1];
|
||||
t.value = offset.value[0];
|
||||
l.value = offset.value[1];
|
||||
_w.value = area.value[0];
|
||||
_h.value = area.value[1];
|
||||
_t.value = offset.value[0];
|
||||
_l.value = offset.value[1];
|
||||
}
|
||||
if (!props.modelValue) {
|
||||
emit("update:modelValue", true);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 监听 modalValue 的值
|
||||
* <p>
|
||||
* 只有 Component 模式会触发
|
||||
*/
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
visible.value = props.modelValue;
|
||||
if (visible.value) {
|
||||
if (first.value) {
|
||||
first.value = false;
|
||||
firstOpenDelayCalculation();
|
||||
} else {
|
||||
notFirstOpenLayerInit();
|
||||
}
|
||||
} else {
|
||||
beforeCloseSaveData();
|
||||
}
|
||||
},
|
||||
{ deep: true, immediate: true }
|
||||
);
|
||||
|
||||
/**
|
||||
* 监听 visible 值
|
||||
* <p>
|
||||
*/
|
||||
watch(
|
||||
() => visible.value,
|
||||
() => {
|
||||
if (visible.value) {
|
||||
if (props.isFunction) {
|
||||
firstOpenDelayCalculation();
|
||||
}
|
||||
props.success();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
watch(
|
||||
() => visible.value,
|
||||
() => {
|
||||
if (!visible.value) {
|
||||
props.end();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 高度监听
|
||||
* <p>
|
||||
*
|
||||
* 在发生拖拽时, 需根据弹出层的外层高度计算 content 高度, 需要
|
||||
* 考虑 btn 操作栏, 计算公式：contentHeight = h - btnHeight
|
||||
*
|
||||
* @param h 弹层高度
|
||||
* @param btn 操作栏
|
||||
* @param type 弹层类型
|
||||
*/
|
||||
watch(
|
||||
() => h.value,
|
||||
() => {
|
||||
contentHeight.value = calculateContent(
|
||||
props.title,
|
||||
h.value,
|
||||
props.btn,
|
||||
type,
|
||||
props.isMessage
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
/**
|
||||
* 弹层类型
|
||||
*
|
||||
* @param type 类型
|
||||
* @param isMessage 是消息
|
||||
* @param icon 图标类型
|
||||
*/
|
||||
const boxClasses = computed(() => {
|
||||
return [
|
||||
{
|
||||
"layui-layer-dialog": type === 0,
|
||||
"layui-layer-page": type === 1,
|
||||
"layui-layer-iframe": type === 2,
|
||||
"layui-layer-loading": type === 3,
|
||||
"layui-layer-drawer": type === 4,
|
||||
"layui-layer-photos": type === 5,
|
||||
"layui-layer-notifiy": type === 6,
|
||||
"layui-layer-msg": props.isMessage,
|
||||
"layui-layer-hui": props.isMessage && !props.icon,
|
||||
},
|
||||
props.skin,
|
||||
];
|
||||
});
|
||||
|
||||
/**
|
||||
* 拖拽拉伸
|
||||
* <p>
|
||||
*/
|
||||
const supportMove = function () {
|
||||
if (props.move && type != 4) {
|
||||
nextTick(() => {
|
||||
// 拖拽
|
||||
if (!layero.value) return;
|
||||
useMove(layero.value, (left: string, top: string) => {
|
||||
l.value = left;
|
||||
t.value = top;
|
||||
});
|
||||
// 拉伸
|
||||
useResize(layero.value, (width: string, height: string) => {
|
||||
h.value = height;
|
||||
w.value = width;
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 弹层样式
|
||||
* <p>
|
||||
*/
|
||||
const styles = computed<any>(() => {
|
||||
let style = {
|
||||
top: t.value,
|
||||
left: l.value,
|
||||
width: w.value,
|
||||
height: h.value,
|
||||
zIndex: index.value,
|
||||
};
|
||||
return style;
|
||||
});
|
||||
|
||||
/**
|
||||
* 弹层内容
|
||||
* <p>
|
||||
* @param type 类型
|
||||
* @param load 加载动画
|
||||
* @param icon 图标
|
||||
*/
|
||||
const contentClasses = computed(() => {
|
||||
return [
|
||||
type === 3 ? `layui-layer-loading${props.load}` : "",
|
||||
props.icon ? "layui-layer-padding" : "",
|
||||
];
|
||||
});
|
||||
|
||||
/**
|
||||
* 关闭操作
|
||||
* <p>
|
||||
* @param null
|
||||
*/
|
||||
const closeHandle = () => {
|
||||
emit("close");
|
||||
emit("update:modelValue", false);
|
||||
props.destroy();
|
||||
if (type === 6) {
|
||||
//@ts-ignore
|
||||
removeNotifiyFromQueen(props.id);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 确定操作
|
||||
* <p>
|
||||
* @param null
|
||||
*/
|
||||
const yesHandle = () => {
|
||||
if (props.yes != undefined) props.yes();
|
||||
else closeHandle();
|
||||
};
|
||||
|
||||
/**
|
||||
* 遮盖层点击
|
||||
* <p>
|
||||
* @param null
|
||||
*/
|
||||
const shadeHandle = () => {
|
||||
if (props.shadeClose) closeHandle();
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取内容
|
||||
* <p>
|
||||
* @param content 文本 / 方法
|
||||
*/
|
||||
const renderContent = function (content: any) {
|
||||
if (content instanceof Function) {
|
||||
return content();
|
||||
}
|
||||
return content;
|
||||
};
|
||||
|
||||
/**
|
||||
* 弹层图标
|
||||
* <p>
|
||||
* @param icon 图标
|
||||
*/
|
||||
const iconClass = computed(() => {
|
||||
return ["layui-layer-ico", `layui-layer-ico${props.icon}`];
|
||||
});
|
||||
|
||||
/**
|
||||
* 入场动画
|
||||
* <p>
|
||||
* @param type 类型
|
||||
* @param anim 入场动画
|
||||
*/
|
||||
const enterActiveClass = computed(() => {
|
||||
if (type === 4) {
|
||||
return getDrawerAnimationClass(props.offset);
|
||||
}
|
||||
if (type === 6) {
|
||||
return getNotifyAnimationClass(props.offset);
|
||||
}
|
||||
return `layer-anim layer-anim-0${props.anim}`;
|
||||
});
|
||||
|
||||
/**
|
||||
* 离场动画
|
||||
* <p>
|
||||
* @param type 类型
|
||||
* @param isOutAnim 离场动画
|
||||
*/
|
||||
const leaveActiveClass = computed(() => {
|
||||
if (type === 4) {
|
||||
return getDrawerAnimationClass(props.offset, true);
|
||||
}
|
||||
return props.isOutAnim ? `layer-anim-close` : "";
|
||||
});
|
||||
|
||||
/**
|
||||
* 打开弹层
|
||||
* <p>
|
||||
*/
|
||||
const open = () => {
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭弹层
|
||||
* <p>
|
||||
*/
|
||||
const close = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
|
||||
/**
|
||||
* 显示遮盖
|
||||
* <p>
|
||||
* @param visible 弹层状态
|
||||
* @param shade 开启遮盖
|
||||
* @param min 最小化
|
||||
*/
|
||||
const shadeVisible = computed(() => {
|
||||
return visible.value && props.shade && !min.value;
|
||||
});
|
||||
|
||||
/**
|
||||
* 拉伸支持
|
||||
* <p>
|
||||
* @param resize 拉伸
|
||||
* @param max 最大化
|
||||
* @param min 最小化
|
||||
*/
|
||||
const showResize = computed(() => {
|
||||
return props.resize && !max.value && !min.value;
|
||||
});
|
||||
|
||||
/**
|
||||
* 显示标题
|
||||
* <p>
|
||||
* @param title 标题
|
||||
* @param type 类型
|
||||
*/
|
||||
const showTitle = computed(() => {
|
||||
return props.title && props.type != 3 && props.type != 5 && props.type != 6;
|
||||
});
|
||||
|
||||
/*
|
||||
* 图片弹层重新计算
|
||||
*/
|
||||
const resetCalculationPohtosArea = function (index: number) {
|
||||
nextTick(async () => {
|
||||
area.value = await calculatePhotosArea(props.imgList[index].src, props);
|
||||
offset.value = calculateOffset(props.offset, area.value, props.type);
|
||||
w.value = area.value[0];
|
||||
h.value = area.value[1];
|
||||
t.value = offset.value[0];
|
||||
l.value = offset.value[1];
|
||||
_w.value = area.value[0];
|
||||
_l.value = area.value[1];
|
||||
_t.value = offset.value[0];
|
||||
_l.value = offset.value[1];
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({ reset, open, close });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- 遮盖层 -->
|
||||
<Shade
|
||||
:index="index"
|
||||
:visible="shadeVisible"
|
||||
:opacity="shadeOpacity"
|
||||
@shadeClick="shadeHandle"
|
||||
></Shade>
|
||||
<!-- 动画容器 -->
|
||||
<transition
|
||||
:enter-active-class="enterActiveClass"
|
||||
:leave-active-class="leaveActiveClass"
|
||||
>
|
||||
<!-- 弹出层 -->
|
||||
<div
|
||||
ref="layero"
|
||||
class="layui-layer layui-layer-border"
|
||||
:class="boxClasses"
|
||||
:style="styles"
|
||||
v-if="visible"
|
||||
>
|
||||
<!-- 标题 -->
|
||||
<Title v-if="showTitle" :title="title"></Title>
|
||||
<!-- 内容 -->
|
||||
<div
|
||||
class="layui-layer-content"
|
||||
:style="{ height: contentHeight }"
|
||||
:class="contentClasses"
|
||||
>
|
||||
<template v-if="type === 0 || type === 1 || type === 4">
|
||||
<i v-if="icon" :class="iconClass"></i>
|
||||
<slot v-if="slots.default"></slot>
|
||||
<template v-else>
|
||||
<template v-if="isHtmlFragment">
|
||||
<span v-html="renderContent(props.content)"></span>
|
||||
</template>
|
||||
<template v-else>{{ renderContent(props.content) }}</template>
|
||||
</template>
|
||||
</template>
|
||||
<Iframe v-if="type === 2" :src="props.content"></Iframe>
|
||||
<Photos
|
||||
v-if="type === 5"
|
||||
:imgList="props.imgList"
|
||||
:startIndex="props.startIndex"
|
||||
@resetCalculationPohtosArea="resetCalculationPohtosArea"
|
||||
></Photos>
|
||||
<Notifiy
|
||||
v-if="type === 6"
|
||||
@close="closeHandle"
|
||||
:title="props.title"
|
||||
:content="props.content"
|
||||
:isHtmlFragment="props.isHtmlFragment"
|
||||
:icon="props.icon"
|
||||
:iconClass="iconClass"
|
||||
></Notifiy>
|
||||
</div>
|
||||
<!-- 工具栏 -->
|
||||
<span
|
||||
class="layui-layer-setwin"
|
||||
v-if="type != 3 && type != 5 && type != 6"
|
||||
>
|
||||
<a
|
||||
v-if="maxmin && !max"
|
||||
class="layui-layer-min"
|
||||
:class="[min ? 'layui-layer-ico layui-layer-maxmin' : '']"
|
||||
href="javascript:;"
|
||||
@click="minHandle"
|
||||
>
|
||||
<cite v-if="!min"></cite>
|
||||
</a>
|
||||
<a
|
||||
v-if="maxmin && !min"
|
||||
class="layui-layer-ico layui-layer-max"
|
||||
:class="[max ? 'layui-layer-maxmin' : '']"
|
||||
href="javascript:;"
|
||||
@click="maxHandle"
|
||||
></a>
|
||||
<CloseBtn
|
||||
v-if="closeBtn != false"
|
||||
:close-btn="closeBtn"
|
||||
@closeHandle="closeHandle"
|
||||
></CloseBtn>
|
||||
</span>
|
||||
<!-- 操作栏 -->
|
||||
<div
|
||||
v-if="((btn && btn.length > 0) || type === 0) && !isMessage"
|
||||
class="layui-layer-btn"
|
||||
:class="[`layui-layer-btn-${btnAlign}`]"
|
||||
>
|
||||
<template v-if="btn && btn.length > 0">
|
||||
<template v-for="(b, index) in btn" :key="index">
|
||||
<a :class="[`layui-layer-btn${index}`]" @click="b.callback(id)">{{
|
||||
b.text
|
||||
}}</a>
|
||||
</template>
|
||||
</template>
|
||||
<template v-else>
|
||||
<template v-if="type === 0">
|
||||
<a class="layui-layer-btn0" @click="yesHandle()">{{ yesText }}</a>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<!-- 辅助栏 -->
|
||||
<Resize v-if="showResize"></Resize>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user