theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: 合并slider代码

Browse Source
This commit is contained in:
halo 2022-05-03 22:52:48 +08:00
commit 717c218770
10 changed files with 4702 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
package/component/src/component/slider/Standard.vue
View File

@ -7,8 +7,9 @@ export default {
<script setup lang="ts">
import { Ref, ref } from "vue";
import { on, off } from "evtd";
import { throttle, handle_select } from "./utils/index";
// import { throttle, handle_select } from "./utils/index";
import LayTooltip from "../tooltip/index.vue";
import { throttle, handle_select, makeDots } from "./utils/index";
interface Prop {
val?: number | Array<number>;
@ -16,6 +17,7 @@ interface Prop {
step?: number;
min?: number;
max?: number;
showDots?: boolean;
}
const props = withDefaults(defineProps<Prop>(), {
@ -24,6 +26,7 @@ const props = withDefaults(defineProps<Prop>(), {
step: 0,
min: 0,
max: 100,
showDots: false,
});
const moveAction = throttle(standardMove);
@ -88,6 +91,15 @@ function calcWithStep(
}
}
}
// 断点
const dots = makeDots(props);
const focusDot = (val: number) => {
emit("link-val-hook", val);
};
// const focusClick = (e: MouseEvent)=>{
// console.log(e);
// standardMove(e)
// }
</script>
<template>
@ -111,5 +123,13 @@ function calcWithStep(
:class="[disabled ? 'layui-slider-disabled disable-line' : '']"
></div>
<div class="layui-slider-line-v"></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>

23
package/component/src/component/slider/StandardRange.vue
View File

@ -7,15 +7,16 @@ export default {
<script setup lang="ts">
import { ref, toRef, Ref } from "vue";
import { on, off } from "evtd";
import { throttle } from "./utils/index";
// import { throttle } from "./utils/index";
import LayTooltip from "../tooltip/index.vue";
import { throttle, makeDots } from "./utils/index";
interface Prop {
rangeValue: Array<number>;
disabled?: boolean;
step?: number;
min?: number;
max?: number;
showDots?: boolean;
}
const props = withDefaults(defineProps<Prop>(), {
@ -23,6 +24,7 @@ const props = withDefaults(defineProps<Prop>(), {
min: 0,
max: 100,
disabled: false,
showDots: true,
});
let rv = toRef(props, "rangeValue");
@ -129,6 +131,15 @@ function cross(val: any) {
currbtn = currbtn === 0 ? 1 : 0;
}
}
// 断点
const dots = makeDots(props);
console.log(dots);
const focusDot = (item: number) => {
let currbtn = moveNeighbors(item, rv);
rv.value[currbtn] = item;
emit("link-val-hook", rv.value);
};
</script>
<template>
@ -162,5 +173,13 @@ function cross(val: any) {
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>

26
package/component/src/component/slider/Vertical.vue
View File

@ -16,6 +16,7 @@ interface Prop {
step?: number;
min?: number;
max?: number;
showDots: boolean;
}
const props = withDefaults(defineProps<Prop>(), {
@ -24,6 +25,7 @@ const props = withDefaults(defineProps<Prop>(), {
step: 0,
min: 0,
max: 100,
showDots: false,
});
const moveAction = throttle(verticalMove);
@ -91,6 +93,22 @@ function calcWithStep(
}
}
}
// 断点
const makeDots = () => {
if (props.step === 0) return [];
let val = 0;
let dots = [];
let count = Math.floor(100 / props.step) - 1;
for (let i = 0; i < count; i++) {
val += props.step;
dots.push(val);
}
return dots;
};
const dots = makeDots();
const focusDot = (val: number) => {
emit("link-val-hook", val);
};
</script>
<template>
@ -115,6 +133,14 @@ function calcWithStep(
class="layui-slider-vertical-rate"
></div>
<div class="layui-slider-vertical-line"></div>
<div
v-show="showDots"
@click="focusDot(item)"
class="layui-slider-vertical-dots"
v-for="(item, index) in dots"
:key="index"
:style="{ bottom: item + '%' }"
></div>
</div>
</div>
</template>

23
package/component/src/component/slider/VerticalRange.vue
View File

@ -7,15 +7,16 @@ export default {
<script setup lang="ts">
import { ref, toRef, Ref } from "vue";
import { on, off } from "evtd";
import { throttle } from "./utils/index";
// import { throttle } from "./utils/index";
import LayTooltip from "../tooltip/index.vue";
import { throttle, makeDots } from "./utils/index";
interface Prop {
rangeValue: Array<number>;
disabled?: boolean;
step?: number;
min?: number;
max?: number;
showDots?: boolean;
}
const props = withDefaults(defineProps<Prop>(), {
@ -23,6 +24,7 @@ const props = withDefaults(defineProps<Prop>(), {
min: 0,
max: 100,
disabled: false,
showDots: false,
});
let rv = toRef(props, "rangeValue");
@ -128,6 +130,15 @@ function cross(val: any) {
currbtn = currbtn === 0 ? 1 : 0;
}
}
// 断点
const dots = makeDots(props);
console.log(dots);
const focusDot = (item: number) => {
let currbtn = moveNeighbors(item, rv);
rv.value[currbtn] = item;
emit("link-val-hook", rv.value);
};
</script>
<template>
@ -163,6 +174,14 @@ function cross(val: any) {
class="layui-slider-vertical-rate"
:class="[props.disabled ? 'layui-slider-disabled disable-line' : '']"
></div>
<div
v-show="showDots"
@click="focusDot(item)"
class="layui-slider-vertical-dots"
v-for="(item, index) in dots"
:key="index"
:style="{ bottom: item + '%' }"
></div>
</div>
</div>
</template>

23
package/component/src/component/slider/index.less
View File

@ -17,6 +17,7 @@
.layui-slider-btn-v {
width: 12px;
height: 12px;
// background-color: @global-back-color;
background-color: white;
position: absolute;
border: 2px solid var(--global-primary-color);
@ -39,7 +40,7 @@
.layui-slider-line-v {
width: 100%;
height: 4px;
background-color: #eee;
background-color: #cccccc;
position: absolute;
top: 6px;
}
@ -114,3 +115,23 @@
position: relative;
cursor: pointer;
}
.layui-slider-dots {
margin-top: 4px;
width: 8px;
height: 8px;
background-color: #ffffff;
border-radius: 5px;
position: absolute;
top:0;
z-index: 1;
}
.layui-slider-vertical-dots {
width: 8px;
height: 8px;
background-color: #ffffff;
border-radius: 5px;
position: absolute;
z-index: 1;
margin-left: 5px;
}

6
package/component/src/component/slider/index.vue
View File

@ -21,6 +21,7 @@ export interface LaySliderProps {
disabled?: boolean;
range?: boolean;
rangeValue?: number[];
showDots?: boolean
}
const emit = defineEmits(["update:modelValue"]);
@ -32,6 +33,7 @@ const props = withDefaults(defineProps<LaySliderProps>(), {
step: 0,
min: 0,
max: 100,
showDots: false
});
let rangeValues: Ref<number[]> | any = toRef(props, "rangeValue");
@ -53,6 +55,7 @@ function valHook(val: any) {
:rangeValue="rangeValues"
:min="min"
:max="max"
:showDots="showDots"
/>
</div>
<div v-else>
@ -64,6 +67,7 @@ function valHook(val: any) {
:val="modelValue"
:min="min"
:max="max"
:showDots="showDots"
/>
</div>
</div>
@ -77,6 +81,7 @@ function valHook(val: any) {
:rangeValue="rangeValues"
:min="min"
:max="max"
:showDots="showDots"
/>
</div>
<div v-else>
@ -88,6 +93,7 @@ function valHook(val: any) {
:step="step"
:min="min"
:max="max"
:showDots="showDots"
></StandardVue>
</div>
</div>

13
package/component/src/component/slider/utils/index.ts
View File

@ -13,3 +13,16 @@ export function throttle(func: Function) {
export function handle_select(e: Event): void {
e.preventDefault();
}
export function makeDots(props: any) {
if (props.step === 0) return [];
let val = 0;
let dots = [0];
let count = Math.floor(100 / props.step) - 1;
for (let i = 0; i < count; i++) {
val += props.step;
dots.push(val);
}
dots.push(100);
return dots;
}

7
package/document/src/document/zh-CN/components/slider.md
View File

@ -13,7 +13,7 @@
::: demo 使用 `lay-slider` 标签, 创建滑块
<template>
<lay-slider :max="88" v-model="value1" :disabled="false"></lay-slider>
<lay-slider :showDots="true" :step="10" :max="100" v-model="value1" :disabled="false"></lay-slider>
<lay-input-number v-model="value1"></lay-input-number>
</template>
@ -37,7 +37,7 @@ export default {
::: demo
<template>
<lay-slider v-model="value2" :vertical="true" :disabled="false"></lay-slider>
<lay-slider :showDots="false" :step="10" v-model="value2" :vertical="true" :disabled="false"></lay-slider>
</template>
<script>
@ -63,7 +63,7 @@ export default {
::: demo
<template>
<lay-slider :disabled="false" :min="10" :max="80" v-model:rangeValue="value3" :range="true"></lay-slider>
<lay-slider :disabled="false" :min="0" :max="100" v-model:rangeValue="value3" :range="true"></lay-slider>
</template>
<script>
@ -115,6 +115,7 @@ export default {
| step | 步长 | `Number` | - | - |
| min | 最小值 | `Number` | - | - |
| max | 最大值 | `Number` | - | - |
| showDots | 是否显示断点 | `Boolean` | - | false |
:::

111
yarn-error.log Normal file
View File

@ -0,0 +1,111 @@
Arguments:
/home/halo/.nvm/versions/node/v14.18.2/bin/node /home/halo/.nvm/versions/node/v14.18.2/bin/yarn
PATH:
/home/halo/.vscode-server/bin/899d46d82c4c95423fb7e10e68eba52050e30ba3/bin:/home/halo/.nvm/versions/node/v14.18.2/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/usr/lib/wsl/lib:/mnt/c/WINDOWS/system32:/mnt/c/WINDOWS:/mnt/c/WINDOWS/System32/Wbem:/mnt/c/WINDOWS/System32/WindowsPowerShell/v1.0/:/mnt/c/WINDOWS/System32/OpenSSH/:/mnt/c/Program Files/PowerShell/7/:/mnt/c/Users/13522/AppData/Local/Microsoft/WindowsApps
Yarn version:
1.22.17
Node version:
14.18.2
Platform:
linux x64
Trace:
Error: https://registry.yarnpkg.com/@layui%2fhooks-vue: ETIMEDOUT
at Timeout._onTimeout (/home/halo/.nvm/versions/node/v14.18.2/lib/node_modules/yarn/lib/cli.js:141543:19)
at listOnTimeout (internal/timers.js:557:17)
at processTimers (internal/timers.js:500:7)
npm manifest:
{
"name": "@layui/layui-vue",
"version": "0.3.3",
"author": "sleeprite",
"license": "MIT",
"description": "a component library for Vue 3 base on layui-vue",
"homepage": "http://layui-vue.pearadmin.com",
"module": "lib/layui-vue.es.js",
"main": "lib/layui-vue.umd.js",
"types": "types/index.d.ts",
"style": "lib/index.css",
"keywords": [
"layui-vue",
"layui",
"vue"
],
"exports": {
".": {
"import": "./lib/layui-vue.es.js",
"require": "./lib/layui-vue.umd.js"
},
"./lib/": "./lib/"
},
"scripts": {
"dev": "vite",
"build": "vite build --emptyOutDir && npm run build:types",
"build:types": "rimraf types && tsc -d",
"build:example": "vite build example",
"lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
"lint:prettier": "prettier --write 'src/**/*'",
"commit": "git cz",
"prepublishOnly": "npm run build"
},
"dependencies": {
"@layui/hooks-vue": "^0.1.6",
"@layui/icons-vue": "^1.0.2",
"@layui/layer-vue": "^1.2.4",
"async-validator": "^4.0.7",
"countup.js": "^2.0.8",
"evtd": "^0.2.3",
"vue": "^3.2.26",
"vue-router": "^4.0.12"
},
"devDependencies": {
"@babel/core": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-typescript": "^7.15.0",
"@rollup/plugin-babel": "^5.3.0",
"@types/markdown-it": "^12.2.3",
"@types/markdown-it-container": "^2.0.4",
"@types/node": "^16.11.9",
"@typescript-eslint/eslint-plugin": "^5.8.0",
"@typescript-eslint/parser": "^5.8.0",
"@vitejs/plugin-vue": "^1.9.3",
"@vue/compiler-sfc": "^3.2.26",
"@vue/server-renderer": "^3.2.26",
"commitizen": "^4.2.4",
"cz-conventional-changelog": "3.3.0",
"escape-html": "^1.0.3",
"eslint": "^8.5.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.2.0",
"less": "^4.1.2",
"markdown-it-container": "^3.0.0",
"prettier": "^2.5.1",
"prismjs": "^1.25.0",
"rimraf": "^3.0.2",
"rollup": "^2.61.0",
"typescript": "^4.5.2",
"vite": "2.7.6",
"vite-plugin-md": "^0.11.6"
},
"files": [
"lib",
"types"
],
"browserslist": [
"current node",
"last 2 versions and > 2%",
"ie > 10"
]
}
yarn manifest:
No manifest
Lockfile:
No lockfile

4457
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff