feat: ✨ Slider暴露initSlider方法用于外部初始化slider宽度信息

✅ Closes: #344

Author: Moonofweisheng

docs/component/drop-menu.md

@@ -62,8 +62,9 @@ function handleChange2({ value }) {
 ```html
 <wd-drop-menu>
   <wd-drop-menu-item v-model="value" :options="option" @change="handleChange" />
-  <wd-drop-menu-item title="筛选" ref="dropMenu">
+  <wd-drop-menu-item title="筛选" ref="dropMenu" @opened="handleOpened">
     <view>
+      <wd-slider v-model="sliderValue" ref="slider" />
       <wd-cell title="标题文字" value="内容" />
       <wd-cell title="标题文字" label="描述信息" value="内容" />
       <wd-button block size="large" suck @click="confirm">主要按钮</wd-button>
@@ -74,9 +75,11 @@ function handleChange2({ value }) {
 
 ```typescript
 const dropMenu = ref()
+const slider = ref<SliderInstance>() // slider 1.2.25支持
 
 
 const value = ref<number>(0)
+const sliderValue = ref<number>(30)
 const option = ref<Record<string, any>>([
   { label: '全部商品', value: 0 },
   { label: '新款商品', value: 1 },
@@ -90,6 +93,10 @@ function confirm() {
   dropMenu.value.close()
 }
 
+function handleOpened() {
+  slider.value?.initSlider()
+}
+
 ```
 
 ## 自定义菜单选项

docs/component/slider.md

@@ -1,3 +1,4 @@
+
 <frame/>
 
 #  Slider 滑块
@@ -75,6 +76,15 @@ const value = ref<number[]>([10, 30])
 | dragmove | 移动滑块时触发 | `{ value }` | - |
 | dragend | 移动结束时触发 | `{ value }` | - |
 
+
+## Methods
+
+对外暴露函数
+
+| 事件名称 | 说明 | 参数 | 最低版本 |
+|--------|------|-----|---------|
+| initSlider | 初始化slider宽度数据 | - | 1.2.25 |
+
 ## 外部样式类
 | 类名 | 说明 | 最低版本 |
 |-----|------|--------|

src/pages/dropMenu/Index.vue

@@ -10,8 +10,9 @@
       <demo-block title="自定义菜单内容" transparent>
         <wd-drop-menu>
           <wd-drop-menu-item v-model="value3" :options="option1" @change="handleChange3" />
-          <wd-drop-menu-item ref="dropMenu" title="筛选">
+          <wd-drop-menu-item ref="dropMenu" title="筛选" @opened="handleOpened">
             <view>
+              <wd-slider v-model="valuetest" ref="slider" />
               <wd-cell title="标题文字" value="内容" />
               <wd-cell title="标题文字" label="描述信息" value="内容" />
               <view style="padding: 0 10px 20px; box-sizing: border-box">
@@ -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<SliderInstance>()
+
+const valuetest = ref<number>(30)
 
 const show = ref<boolean>(false)
 const value1 = ref<number>(1)
@@ -76,6 +81,10 @@ const option2 = ref<Record<string, any>[]>([
   { label: '上架时间', value: 2 }
 ])
 
+function handleOpened() {
+  slider.value?.initSlider()
+}
+
 function handleChange1({ value }: any) {
   console.log(value)
 }

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<SliderExpose>

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<SliderExpose>({
+  initSlider
+})
 </script>
 <style lang="scss" scoped>
 @import './index.scss';

src/uni_modules/wot-design-uni/components/wd-table-col/wd-table-col.vue

@@ -27,7 +27,7 @@ export default {
 }
 </script>
 <script lang="ts" setup>
-import { type CSSProperties, computed, ref, reactive } from 'vue'
+import { type CSSProperties, computed, ref } from 'vue'
 import { addUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util'
 import { tableColumnProps, type SortDirection } from './types'
 import { useParent } from '../composables/useParent'