From fc3e4ef3bb108e6bb6a660ffead40f4658c119e7 Mon Sep 17 00:00:00 2001 From: weisheng <1780903673@qq.com> Date: Thu, 6 Jun 2024 22:41:20 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20Slider=E6=9A=B4=E9=9C=B2ini?= =?UTF-8?q?tSlider=E6=96=B9=E6=B3=95=E7=94=A8=E4=BA=8E=E5=A4=96=E9=83=A8?= =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96slider=E5=AE=BD=E5=BA=A6=E4=BF=A1?= =?UTF-8?q?=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Closes: #344 --- docs/component/drop-menu.md | 9 +++++++- docs/component/slider.md | 10 +++++++++ src/pages/dropMenu/Index.vue | 11 +++++++++- .../components/wd-slider/types.ts | 22 +++++++++++++++++-- .../components/wd-slider/wd-slider.vue | 16 ++++++++++++-- .../components/wd-table-col/wd-table-col.vue | 2 +- 6 files changed, 63 insertions(+), 7 deletions(-) diff --git a/docs/component/drop-menu.md b/docs/component/drop-menu.md index 7a472a28..7b27f9bf 100644 --- a/docs/component/drop-menu.md +++ b/docs/component/drop-menu.md @@ -62,8 +62,9 @@ function handleChange2({ value }) { ```html - + + 主要按钮 @@ -74,9 +75,11 @@ function handleChange2({ value }) { ```typescript const dropMenu = ref() +const slider = ref() // slider 1.2.25支持 const value = ref(0) +const sliderValue = ref(30) const option = ref>([ { label: '全部商品', value: 0 }, { label: '新款商品', value: 1 }, @@ -90,6 +93,10 @@ function confirm() { dropMenu.value.close() } +function handleOpened() { + slider.value?.initSlider() +} + ``` ## 自定义菜单选项 diff --git a/docs/component/slider.md b/docs/component/slider.md index 13f13037..76c4872c 100644 --- a/docs/component/slider.md +++ b/docs/component/slider.md @@ -1,3 +1,4 @@ + # Slider 滑块 @@ -75,6 +76,15 @@ const value = ref([10, 30]) | dragmove | 移动滑块时触发 | `{ value }` | - | | dragend | 移动结束时触发 | `{ value }` | - | + +## Methods + +对外暴露函数 + +| 事件名称 | 说明 | 参数 | 最低版本 | +|--------|------|-----|---------| +| initSlider | 初始化slider宽度数据 | - | 1.2.25 | + ## 外部样式类 | 类名 | 说明 | 最低版本 | |-----|------|--------| diff --git a/src/pages/dropMenu/Index.vue b/src/pages/dropMenu/Index.vue index 3244462b..78f9f67e 100644 --- a/src/pages/dropMenu/Index.vue +++ b/src/pages/dropMenu/Index.vue @@ -10,8 +10,9 @@ - + + @@ -50,10 +51,14 @@ import { ref } from 'vue' import { useQueue } from '@/uni_modules/wot-design-uni' +import type { SliderInstance } from '@/uni_modules/wot-design-uni/components/wd-slider/types' const { closeOutside } = useQueue() const dropMenu = ref() +const slider = ref() + +const valuetest = ref(30) const show = ref(false) const value1 = ref(1) @@ -76,6 +81,10 @@ const option2 = ref[]>([ { label: '上架时间', value: 2 } ]) +function handleOpened() { + slider.value?.initSlider() +} + function handleChange1({ value }: any) { console.log(value) } diff --git a/src/uni_modules/wot-design-uni/components/wd-slider/types.ts b/src/uni_modules/wot-design-uni/components/wd-slider/types.ts index f2d10814..61c9faf5 100644 --- a/src/uni_modules/wot-design-uni/components/wd-slider/types.ts +++ b/src/uni_modules/wot-design-uni/components/wd-slider/types.ts @@ -1,5 +1,14 @@ -import type { PropType } from 'vue' -import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props' +/* + * @Author: weisheng + * @Date: 2024-06-03 23:43:43 + * @LastEditTime: 2024-06-06 22:03:57 + * @LastEditors: weisheng + * @Description: + * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-slider/types.ts + * 记得注释 + */ +import type { ComponentPublicInstance, PropType } from 'vue' +import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props' export const sliderProps = { ...baseProps, @@ -84,3 +93,12 @@ export const sliderProps = { default: 0 } } + +export type SliderExpose = { + /** + * 初始化slider宽度 + */ + initSlider: () => void +} + +export type SliderInstance = ComponentPublicInstance diff --git a/src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue b/src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue index 117589c0..477077ef 100644 --- a/src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue +++ b/src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue @@ -59,7 +59,7 @@ import { computed, getCurrentInstance, onMounted, ref } from 'vue' import { getRect, isArray, isDef, isNumber, uuid } from '../common/util' import { useTouch } from '../composables/useTouch' import { watch } from 'vue' -import { sliderProps } from './types' +import { sliderProps, type SliderExpose } from './types' const props = defineProps(sliderProps) const emit = defineEmits(['dragstart', 'dragmove', 'dragend', 'update:modelValue']) @@ -196,13 +196,20 @@ const buttonRightStyle = computed(() => { }) onMounted(() => { + initSlider() +}) + +/** + * 初始化slider宽度 + */ +function initSlider() { getRect(`#${sliderId.value}`, false, proxy).then((data) => { // trackWidth: 轨道全长 trackWidth.value = Number(data.width) // trackLeft: 轨道距离左侧的距离 trackLeft.value = Number(data.left) }) -}) +} function onTouchStart(event: any) { const { disabled, modelValue } = props @@ -224,6 +231,7 @@ function onTouchMove(event: any) { // 移动间距 deltaX 就是向左(-)向右(+) const diff = (touchLeft.deltaX.value / trackWidth.value) * (maxValue.value - minValue.value) newValue.value = startValue.value + diff + // 左滑轮滑动控制 leftBarSlider(newValue.value) emit('dragmove', { @@ -340,6 +348,10 @@ function calcBarPercent() { leftBarPercent.value = percent barStyle.value = `width: ${percent}%; height: ${barHeight.value};` } + +defineExpose({ + initSlider +})