init
This commit is contained in:
Binary file not shown.
@@ -0,0 +1,46 @@
|
||||
import{r as o,o as d,j as g,h as a,g as s,v as t,i as n}from"./.pnpm.8fb36023.js";const y={class:"markdown-body"},_=n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("lay-field")]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("\u6807\u9898"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("\u5185\u5BB9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("lay-field")]),n("span",{class:"token punctuation"},">")]),t(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
|
||||
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),t(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token punctuation"},"{"),t(`
|
||||
`),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
|
||||
`),n("span",{class:"token punctuation"},"}"),t(`
|
||||
`),n("span",{class:"token punctuation"},"}"),t(`
|
||||
`),n("span",{class:"token punctuation"},"}"),t(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
|
||||
`)])],-1),m=n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("lay-field")]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("\u6807\u9898"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("\u5185\u5BB9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("lay-field")]),n("span",{class:"token punctuation"},">")]),t(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
|
||||
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),t(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token punctuation"},"{"),t(`
|
||||
`),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
|
||||
`),n("span",{class:"token punctuation"},"}"),t(`
|
||||
`),n("span",{class:"token punctuation"},"}"),t(`
|
||||
`),n("span",{class:"token punctuation"},"}"),t(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
|
||||
`)])],-1),f=n("pre",null,[n("code",{"v-pre":""},[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("lay-field")]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("\u6807\u9898"),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"},"</"),t("lay-field")]),n("span",{class:"token punctuation"},">")]),t(`
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
|
||||
|
||||
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
|
||||
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),t(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token punctuation"},"{"),t(`
|
||||
`),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
|
||||
|
||||
`),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
|
||||
`),n("span",{class:"token punctuation"},"}"),t(`
|
||||
`),n("span",{class:"token punctuation"},"}"),t(`
|
||||
`),n("span",{class:"token punctuation"},"}"),t(`
|
||||
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
|
||||
`)])],-1),h=n("table",null,[n("thead",null,[n("tr",null,[n("th",null,"Name"),n("th",null,"Description"),n("th",null,"Accepted Values")])]),n("tbody",null,[n("tr",null,[n("td",null,"title"),n("td",null,"\u6807\u9898"),n("td",null,"\u2013")])])],-1),w={style:{display:"flex","justify-content":"space-between","margin-top":"20px"}},j={},C={__name:"field",setup(v,{expose:u}){return u({frontmatter:{}}),(x,b)=>{const k=o("lay-anchor"),e=o("lay-field"),c=o("lay-code"),i=o("lay-table-box"),r=o("lay-contributor"),p=o("lay-icon"),l=o("router-link");return d(),g("div",y,[a(k,{anchors:"\u57FA\u7840\u4F7F\u7528,Field \u5C5E\u6027",currIndex:-1,show:!0}),a(e,{id:"\u57FA\u7840\u4F7F\u7528",title:"\u57FA\u7840\u4F7F\u7528",style:{"margin-top":"21px","margin-bottom":"20px"}}),a(c,null,{code:s(()=>[_]),default:s(()=>[a(e,{title:"\u6807\u9898"},{default:s(()=>[t("\u5185\u5BB9")]),_:1})]),_:1}),a(c,null,{code:s(()=>[m]),default:s(()=>[a(e,{title:"\u6807\u9898"},{default:s(()=>[t("\u5185\u5BB9")]),_:1})]),_:1}),a(c,null,{code:s(()=>[f]),default:s(()=>[a(e,{title:"\u6807\u9898"})]),_:1}),a(e,{id:"Field \u5C5E\u6027",title:"Field \u5C5E\u6027",style:{"margin-top":"21px","margin-bottom":"20px"}}),a(i,null,{default:s(()=>[h]),_:1}),a(r,{"file-path":"field"}),n("div",w,[n("div",null,[a(l,{to:"/zh-CN/components/line",class:"lay-link",style:{display:""}},{default:s(()=>[a(p,{type:"layui-icon-left"}),t("\u5206\u5272")]),_:1})]),n("div",null,[a(l,{to:"/zh-CN/components/tooltip",class:"lay-link",style:{display:""}},{default:s(()=>[t("\u6587\u5B57\u63D0\u793A "),a(p,{type:"layui-icon-right"})]),_:1})])])])}}};export{C as default,j as frontmatter};
|
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@@ -0,0 +1,184 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "StandardRange",
|
||||
};
|
||||
</script>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, toRef, Ref } from "vue";
|
||||
import { on, off } from "evtd";
|
||||
import LayTooltip from "../tooltip/index.vue";
|
||||
import { throttle, makeDots } from "./utils/index";
|
||||
|
||||
export interface StandardRangeProps {
|
||||
rangeValue: Array<number>;
|
||||
disabled?: boolean;
|
||||
step?: number;
|
||||
min?: number;
|
||||
max?: number;
|
||||
showDots?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<StandardRangeProps>(), {
|
||||
step: 0,
|
||||
min: 0,
|
||||
max: 100,
|
||||
disabled: false,
|
||||
showDots: true,
|
||||
});
|
||||
|
||||
let rv = toRef(props, "rangeValue");
|
||||
|
||||
const moveAction = throttle(rangeMove);
|
||||
let currbtn = -1;
|
||||
|
||||
function handle_mousedown() {
|
||||
currbtn = -1;
|
||||
tooptipHide.value = false;
|
||||
on("selectstart", window, handle_select, { once: true });
|
||||
on("mouseup", window, handle_mouseup);
|
||||
on("mousemove", window, moveAction);
|
||||
}
|
||||
|
||||
function handle_mouseup() {
|
||||
tooptipHide.value = true;
|
||||
off("selectstart", document, handle_select);
|
||||
off("mouseup", window, handle_mouseup);
|
||||
off("mousemove", window, moveAction);
|
||||
}
|
||||
function handle_select(e: Event): void {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
const tracker = ref<HTMLElement | null>(null);
|
||||
const emit = defineEmits(["link-val-hook"]);
|
||||
|
||||
const tooptipHide = ref<boolean>(true);
|
||||
|
||||
function rangeMove(e: MouseEvent) {
|
||||
// tooptipHide.value = false;
|
||||
if (!tracker.value) {
|
||||
return;
|
||||
}
|
||||
let tracker_rect = tracker.value.getBoundingClientRect();
|
||||
let origin_left = tracker_rect.left;
|
||||
let point_left = e.clientX;
|
||||
let distance = point_left - origin_left;
|
||||
if (distance < props.min) {
|
||||
rv.value[0] = props.min;
|
||||
} else {
|
||||
let rate = (distance / tracker_rect.width) * 100;
|
||||
let idx = -1;
|
||||
if (currbtn === -1) {
|
||||
currbtn = moveNeighbors(Math.floor(rate), rv);
|
||||
idx = currbtn;
|
||||
} else {
|
||||
idx = currbtn;
|
||||
}
|
||||
|
||||
calcWithStep(rate, rv, idx);
|
||||
if (rv.value[1] > props.max) {
|
||||
rv.value[1] = props.max;
|
||||
}
|
||||
if (rv.value[0] < props.min) {
|
||||
rv.value[0] = props.min;
|
||||
}
|
||||
}
|
||||
emit("link-val-hook", rv.value);
|
||||
}
|
||||
|
||||
function moveNeighbors(rate: number, rangeValues: any) {
|
||||
let d1 = Math.abs(rate - rangeValues.value[0]);
|
||||
let d2 = Math.abs(rate - rangeValues.value[1]);
|
||||
if (d1 > d2) {
|
||||
return 1;
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
function calcWithStep(
|
||||
rate: number | undefined,
|
||||
val: Ref<number> | Ref<number[]>,
|
||||
idx: number = -1
|
||||
) {
|
||||
if (typeof rate === "undefined") return false;
|
||||
|
||||
if (typeof val.value === "object") {
|
||||
let r = rate - val.value[idx];
|
||||
if (Math.abs(r) < props.step) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (props.step === 0) val.value[idx] = Math.floor(rate);
|
||||
|
||||
if (Array.isArray(val.value)) {
|
||||
if (r < 0 && props.step !== 0) {
|
||||
val.value[idx] -= props.step;
|
||||
} else {
|
||||
val.value[idx] += props.step;
|
||||
}
|
||||
cross(val);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function cross(val: any) {
|
||||
if (val.value[0] > val.value[1]) {
|
||||
let tmp = val.value[0];
|
||||
val.value[0] = val.value[1];
|
||||
val.value[1] = tmp;
|
||||
currbtn = currbtn === 0 ? 1 : 0;
|
||||
}
|
||||
}
|
||||
// 断点
|
||||
const dots = makeDots(props);
|
||||
|
||||
const focusDot = (item: number) => {
|
||||
let currbtn = moveNeighbors(item, rv);
|
||||
rv.value[currbtn] = item;
|
||||
emit("link-val-hook", rv.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="tracker"
|
||||
@mousedown.stop="handle_mousedown"
|
||||
class="layui-slider-srange"
|
||||
:class="[disabled ? 'layui-slider-disabled' : '']"
|
||||
>
|
||||
<lay-tooltip :content="'' + rv[0]" :is-can-hide="tooptipHide">
|
||||
<div
|
||||
:style="{ left: rv[0] + '%' }"
|
||||
class="layui-slider-btn-v"
|
||||
:class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
|
||||
></div>
|
||||
</lay-tooltip>
|
||||
|
||||
<lay-tooltip :content="'' + rv[1]" :is-can-hide="tooptipHide">
|
||||
<div
|
||||
:style="{ left: rv[1] + '%' }"
|
||||
class="layui-slider-btn-v"
|
||||
:class="[props.disabled ? 'layui-slider-disabled disable-btn' : '']"
|
||||
></div>
|
||||
</lay-tooltip>
|
||||
<div class="layui-slider-line-v"></div>
|
||||
<div
|
||||
:style="{
|
||||
width: rv[1] - rv[0] + '%',
|
||||
left: rv[0] + '%',
|
||||
}"
|
||||
class="layui-slider-rate-v"
|
||||
:class="[props.disabled ? 'layui-slider-disabled disable-line' : '']"
|
||||
></div>
|
||||
<div
|
||||
v-show="showDots"
|
||||
@click="focusDot(item)"
|
||||
class="layui-slider-dots"
|
||||
v-for="(item, index) in dots"
|
||||
:key="index"
|
||||
:style="{ left: item + '%' }"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: "TabsIcon",
|
||||
};
|
||||
</script>
|
||||
<script setup lang="ts">
|
||||
import LayIcon from "../component/icon/index";
|
||||
|
||||
const props = defineProps<{
|
||||
color?: string;
|
||||
size?: string;
|
||||
}>();
|
||||
</script>
|
||||
<template>
|
||||
<lay-icon :color="props.color" :size="props.size" type="layui-icon-tabs" />
|
||||
</template>
|
||||
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user