mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
feat: ✨ Segmented 提供 updateActiveStyle 方法设置激活样式
This commit is contained in:
不如摸鱼去
parent
28ad03b7af
commit
529e57fc83
@ -3,9 +3,9 @@
|
||||
# Segmented 分段器 <el-tag text style="vertical-align: middle;margin-left:8px;" effect="plain">0.1.23</el-tag>
|
||||
|
||||
## 何时使用
|
||||
* 用于展示多个选项并允许用户选择其中单个选项；
|
||||
* 当切换选中选项时，关联区域的内容会发生变化。
|
||||
|
||||
- 用于展示多个选项并允许用户选择其中单个选项；
|
||||
- 当切换选中选项时，关联区域的内容会发生变化。
|
||||
|
||||
## 基本用法
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
```vue
|
||||
<wd-segmented :options="list" v-model:value="current"></wd-segmented>
|
||||
```
|
||||
|
||||
```ts
|
||||
const list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])
|
||||
|
||||
@ -28,7 +29,6 @@ const current = ref('点赞')
|
||||
<wd-segmented :options="list" v-model:value="current" size="large"></wd-segmented>
|
||||
```
|
||||
|
||||
|
||||
## 小型分段器
|
||||
|
||||
通过设置 `size` 属性为 `"small"`，创建一个小型分段器。
|
||||
@ -62,13 +62,12 @@ const current = ref('点赞')
|
||||
<template #label="{ option }">
|
||||
<view class="section-slot">
|
||||
<image style="border-radius: 50%; width: 32px; height: 32px" :src="option.payload.avatar" />
|
||||
<view class="name">
|
||||
{{ option.value }}
|
||||
</view>
|
||||
<view class="name">{{ option.value }}</view>
|
||||
</view>
|
||||
</template>
|
||||
</wd-segmented>
|
||||
```
|
||||
|
||||
```ts
|
||||
const list = ref([
|
||||
{
|
||||
@ -87,6 +86,7 @@ const list = ref([
|
||||
}
|
||||
])
|
||||
```
|
||||
|
||||
```scss
|
||||
.section {
|
||||
width: 100%;
|
||||
@ -96,47 +96,90 @@ const list = ref([
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## 在弹出框中使用
|
||||
微信小程序端，在弹出框中使用本组件时，需要调用 `updateActiveStyle` 方法更新分段器样式，参见[常见问题](/guide/common-problems.html#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%8A%E4%BD%BF%E7%94%A8popup%E3%80%81actionsheet%E3%80%81dropdownitem%E7%AD%89%E5%BC%B9%E5%87%BA%E6%A1%86%E7%BB%84%E4%BB%B6%E5%8C%85%E8%A3%B9slider%E3%80%81tabs%E7%AD%89%E7%BB%84%E4%BB%B6%E6%97%B6-slider%E3%80%81tabs%E8%A1%A8%E7%8E%B0%E5%BC%82%E5%B8%B8)。
|
||||
|
||||
|
||||
```html
|
||||
<wd-button @click="handleClick">打开弹窗</wd-button>
|
||||
<wd-popup v-model="showPopup" position="bottom" @after-enter="handlePopupShow" closable custom-style="height: 200px;padding: 0 24rpx;">
|
||||
<view class="title">在弹出框中使用</view>
|
||||
<wd-segmented :options="list" v-model:value="current" ref="segmentedRef"></wd-segmented>
|
||||
</wd-popup>
|
||||
```
|
||||
```ts
|
||||
const list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])
|
||||
const current = ref('点赞')
|
||||
|
||||
const segmentedRef = ref<SegmentedInstance>() // 获取分段器实例
|
||||
const showPopup = ref(false) // 控制popup显示
|
||||
/**
|
||||
* 点击按钮打开popup
|
||||
*/
|
||||
function handleClick() {
|
||||
showPopup.value = true
|
||||
}
|
||||
/**
|
||||
* popup打开后更新分段器样式
|
||||
*/
|
||||
function handlePopupShow() {
|
||||
segmentedRef.value?.updateActiveStyle()
|
||||
}
|
||||
```
|
||||
```css
|
||||
.title {
|
||||
display: flex;
|
||||
font-size: 32rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ------------ | ----------------------------- | --------------- | ------ | ------ | -------- |
|
||||
| value/v-model:value | 当前选中的值 | string \| number | - | - | 0.1.23 |
|
||||
| disabled | 是否禁用分段器 | boolean | true \| false | `false` | 0.1.23 |
|
||||
| size | 控件尺寸 | string | `large` \| `middle` \| `small` | `middle` | 0.1.23 |
|
||||
| options | 数据集合 | `string[] \| number[] \| SegmentedOption[]` | - | [] | 0.1.23 |
|
||||
| vibrateShort | 切换选项时是否振动 | boolean | true \| false | `false` | 0.1.23 |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ------------------- | ------------------ | ------------------------------------------- | ------------------------------ | -------- | -------- |
|
||||
| value/v-model:value | 当前选中的值 | string \| number | - | - | 0.1.23 |
|
||||
| disabled | 是否禁用分段器 | boolean | true \| false | `false` | 0.1.23 |
|
||||
| size | 控件尺寸 | string | `large` \| `middle` \| `small` | `middle` | 0.1.23 |
|
||||
| options | 数据集合 | `string[] \| number[] \| SegmentedOption[]` | - | [] | 0.1.23 |
|
||||
| vibrateShort | 切换选项时是否振动 | boolean | true \| false | `false` | 0.1.23 |
|
||||
|
||||
### SegmentedOption
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ---------- | ------------ | ---------------------- | ------ | ------ | -------- |
|
||||
| value | 选中值 | string \| number | - | - | 0.1.23 |
|
||||
| disabled | 是否禁用 | boolean | true \| false | - | 0.1.23 |
|
||||
| payload | 更多数据 | any | - | - | 0.1.23 |
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| -------- | -------- | ---------------- | ------------- | ------ | -------- |
|
||||
| value | 选中值 | string \| number | - | - | 0.1.23 |
|
||||
| disabled | 是否禁用 | boolean | true \| false | - | 0.1.23 |
|
||||
| payload | 更多数据 | any | - | - | 0.1.23 |
|
||||
|
||||
## Events
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
| -------- | -------------------------- | ----------- | -------- |
|
||||
| change | 选项切换时触发 | `SegmentedOption` | 0.1.23 |
|
||||
| click | 选项点击时触发 | `SegmentedOption` | 1.2.20 |
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
| -------- | -------------- | ----------------- | -------- |
|
||||
| change | 选项切换时触发 | `SegmentedOption` | 0.1.23 |
|
||||
| click | 选项点击时触发 | `SegmentedOption` | 1.2.20 |
|
||||
|
||||
## Methods
|
||||
|
||||
对外暴露函数
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
| ----------------- | --------------------------------------------------------- | ------------------------------ | -------- |
|
||||
| updateActiveStyle | 更新滑块偏移量，参数`animation`用于是否开启动画，默认开启 | `(animation: boolean) => void` | - |
|
||||
|
||||
## Slots
|
||||
|
||||
| name | 说明 | 参数 | 最低版本 |
|
||||
| ------ | -------------------- | ----------------------- | -------- |
|
||||
| label | 选项标签内容 | `{ option: SegmentedOption }` | 0.1.23 |
|
||||
|
||||
| name | 说明 | 参数 | 最低版本 |
|
||||
| ----- | ------------ | ----------------------------- | -------- |
|
||||
| label | 选项标签内容 | `{ option: SegmentedOption }` | 0.1.23 |
|
||||
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
| ------------ | ---------- | -------- |
|
||||
| customStyle | 自定义样式 | 0.1.23 |
|
||||
| customClass | 自定义样式类 | 0.1.23 |
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
| ----------- | ------------ | -------- |
|
||||
| customStyle | 自定义样式 | 0.1.23 |
|
||||
| customClass | 自定义样式类 | 0.1.23 |
|
||||
|
||||
@ -205,35 +205,81 @@ const tab = ref('Design')
|
||||
|
||||
标签页在标签数大于等于 6 个时，可以滑动；当标签数大于等于 10 个时，将会显示导航地图，便于快速定位到某个标签。可以通过设置 `slidable-num` 修改可滑动的数量阈值；设置 `map-num` 修改显示导航地图的阈值。`slidable`设置为`always`时，所有的标签会向左侧收缩对齐，超出即可滑动。
|
||||
|
||||
## 在弹出框中使用
|
||||
|
||||
微信小程序端，在弹出框中使用本组件时，需要调用 `updateLineStyle` 方法更新激活项样式，参见[常见问题](/guide/common-problems.html#%E4%B8%BA%E4%BB%80%E4%B9%88%E5%9C%A8%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%8A%E4%BD%BF%E7%94%A8popup%E3%80%81actionsheet%E3%80%81dropdownitem%E7%AD%89%E5%BC%B9%E5%87%BA%E6%A1%86%E7%BB%84%E4%BB%B6%E5%8C%85%E8%A3%B9slider%E3%80%81tabs%E7%AD%89%E7%BB%84%E4%BB%B6%E6%97%B6-slider%E3%80%81tabs%E8%A1%A8%E7%8E%B0%E5%BC%82%E5%B8%B8)。
|
||||
|
||||
```html
|
||||
<wd-button @click="handleClick">打开弹窗</wd-button>
|
||||
<wd-popup v-model="showPopup" position="bottom" @after-enter="handlePopupShow" closable custom-style="height: 200px;padding: 0 24rpx;">
|
||||
<view class="title">在弹出框中使用</view>
|
||||
<wd-tabs v-model="tab" ref="tabsRef">
|
||||
<wd-tab v-for="item in tabs" :key="item" :title="`${item}`" :name="item">
|
||||
<view class="content">内容{{ tab }}</view>
|
||||
</wd-tab>
|
||||
</wd-tabs>
|
||||
</wd-popup>
|
||||
```
|
||||
|
||||
```ts
|
||||
const tab = ref<number>(3)
|
||||
const tabs = ref(['这', '是', '一', '个', '例子'])
|
||||
|
||||
const showPopup = ref(false) // 控制popup显示
|
||||
const tabsRef = ref<TabsInstance>() // 获取分段器实例
|
||||
/**
|
||||
* 点击按钮打开popup
|
||||
*/
|
||||
function handleOpenClick() {
|
||||
showPopup.value = true
|
||||
}
|
||||
/**
|
||||
* popup打开后更新分段器样式
|
||||
*/
|
||||
function handlePopupShow() {
|
||||
tabsRef.value?.updateLineStyle(false)
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.title {
|
||||
display: flex;
|
||||
font-size: 32rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
```
|
||||
|
||||
## Tabs Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ------------- | ------------------------------------------------- | --------------- | -------- | ------ | ---------------- |
|
||||
| v-model | 绑定值 | string / number | - | - | - |
|
||||
| slidable-num | 可滑动的标签数阈值，`slidable`设置为`auto`时生效 | number | - | 6 | - |
|
||||
| map-num | 显示导航地图的标签数阈值 | number | - | 10 | - |
|
||||
| map-title | 导航地图标题 | string | - | - | 1.4.0 |
|
||||
| sticky | 粘性布局 | boolean | - | false | - |
|
||||
| offset-top | 粘性布局时距离窗口顶部距离 | number | - | 0 | - |
|
||||
| swipeable | 开启手势滑动 | boolean | - | false | - |
|
||||
| autoLineWidth | 底部条宽度跟随文字，指定`lineWidth`时此选项不生效 | boolean | - | false | 1.4.0 |
|
||||
| lineWidth | 底部条宽度，单位像素 | number | - | 19 | - |
|
||||
| lineHeight | 底部条高度，单位像素 | number | - | 3 | - |
|
||||
| color | 文字颜色 | string | - | - | - |
|
||||
| inactiveColor | 非活动标签文字颜色 | string | - | - | - |
|
||||
| animated | 是否开启切换标签内容时的转场动画 | boolean | - | false | - |
|
||||
| duration | 切换动画过渡时间，单位毫秒 | number | - | 300 | - |
|
||||
| slidable | 是否开启滚动导航 | TabsSlidable | `always` | `auto` | 1.4.0 |
|
||||
| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 1.4.0 |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| ------------- | ---------------------------------------------------------------------------------------- | --------------- | -------- | ------ | -------- |
|
||||
| v-model | 绑定值 | string / number | - | - | - |
|
||||
| slidable-num | 可滑动的标签数阈值，`slidable`设置为`auto`时生效 | number | - | 6 | - |
|
||||
| map-num | 显示导航地图的标签数阈值 | number | - | 10 | - |
|
||||
| map-title | 导航地图标题 | string | - | - | 1.4.0 |
|
||||
| sticky | 粘性布局 | boolean | - | false | - |
|
||||
| offset-top | 粘性布局时距离窗口顶部距离 | number | - | 0 | - |
|
||||
| swipeable | 开启手势滑动 | boolean | - | false | - |
|
||||
| autoLineWidth | 底部条宽度跟随文字，指定`lineWidth`时此选项不生效 | boolean | - | false | 1.4.0 |
|
||||
| lineWidth | 底部条宽度，单位像素 | number | - | 19 | - |
|
||||
| lineHeight | 底部条高度，单位像素 | number | - | 3 | - |
|
||||
| color | 文字颜色 | string | - | - | - |
|
||||
| inactiveColor | 非活动标签文字颜色 | string | - | - | - |
|
||||
| animated | 是否开启切换标签内容时的转场动画 | boolean | - | false | - |
|
||||
| duration | 切换动画过渡时间，单位毫秒 | number | - | 300 | - |
|
||||
| slidable | 是否开启滚动导航 | TabsSlidable | `always` | `auto` | 1.4.0 |
|
||||
| badge-props | 自定义徽标的属性，传入的对象会被透传给 [Badge 组件的 props](/component/badge#attributes) | BadgeProps | - | - | 1.4.0 |
|
||||
|
||||
## Tab Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| -------- | ------------------------------------------------------- | ------- | ------ | ------ | ---------------- |
|
||||
| name | 标签页名称 | string | - | - | - |
|
||||
| title | 标题 | string | - | - | - |
|
||||
| disabled | 禁用 | boolean | - | false | - |
|
||||
| lazy | 延迟渲染，默认开启，开启`animated`后此选项始终为`false` | boolean | - | true | 1.4.0 |
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||||
| -------- | ------------------------------------------------------- | ------- | ------ | ------ | -------- |
|
||||
| name | 标签页名称 | string | - | - | - |
|
||||
| title | 标题 | string | - | - | - |
|
||||
| disabled | 禁用 | boolean | - | false | - |
|
||||
| lazy | 延迟渲染，默认开启，开启`animated`后此选项始终为`false` | boolean | - | true | 1.4.0 |
|
||||
|
||||
## Tabs Events
|
||||
|
||||
@ -243,6 +289,16 @@ const tab = ref('Design')
|
||||
| click | 点击标题时触发 | event = { index, name },index 为 tab 下标，name 为 tab 绑定的值 | - |
|
||||
| disabled | 点击禁用的标题时触发 | event = { index, name },index 为 tab 下标，name 为 tab 绑定的值 | - |
|
||||
|
||||
## Methods
|
||||
|
||||
对外暴露函数
|
||||
|
||||
| 事件名称 | 说明 | 参数 | 最低版本 |
|
||||
| --------------- | --------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | -------- |
|
||||
| setActive | 设置激活项，参数分别为：`value` 激活值，`init` 是否已初始化 ，`setScroll` 是否设置 scroll-view 滚动 | `(value: number \| string, init: boolean, setScroll: boolean) => void` | - |
|
||||
| scrollIntoView | 使选中项滚动到可视区域 | - | - |
|
||||
| updateLineStyle | 更新激活项边框线样式，参数`animation`用于是否开启动画，默认开启 | `(animation: boolean) => void` | - |
|
||||
|
||||
## 外部样式类
|
||||
|
||||
| 类名 | 说明 | 最低版本 |
|
||||
|
||||
@ -46,11 +46,22 @@
|
||||
</wd-segmented>
|
||||
</view>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="在弹出框中使用" transparent>
|
||||
<view class="section">
|
||||
<wd-button @click="handleClick">打开弹窗</wd-button>
|
||||
</view>
|
||||
</demo-block>
|
||||
|
||||
<wd-popup v-model="showPopup" position="bottom" @after-enter="handlePopupShow" closable custom-style="height: 200px;padding: 0 24rpx;">
|
||||
<view class="title">在弹出框中使用</view>
|
||||
<wd-segmented :options="list" v-model:value="current6" @change="handleChange" ref="segmentedRef"></wd-segmented>
|
||||
</wd-popup>
|
||||
</page-wraper>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import type { SegmentedOption } from '@/uni_modules/wot-design-uni/components/wd-segmented/types'
|
||||
import type { SegmentedInstance, SegmentedOption } from '@/uni_modules/wot-design-uni/components/wd-segmented/types'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const list = ref<string[]>(['评论', '点赞', '贡献', '打赏'])
|
||||
@ -101,6 +112,16 @@ const current5 = ref('评论')
|
||||
function handleChange(option: SegmentedOption) {
|
||||
console.log(option)
|
||||
}
|
||||
|
||||
const current6 = ref('点赞')
|
||||
const segmentedRef = ref<SegmentedInstance>()
|
||||
const showPopup = ref(false)
|
||||
function handleClick() {
|
||||
showPopup.value = true
|
||||
}
|
||||
function handlePopupShow() {
|
||||
segmentedRef.value?.updateActiveStyle()
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.section {
|
||||
@ -111,4 +132,11 @@ function handleChange(option: SegmentedOption) {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
font-size: 32rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -120,10 +120,26 @@
|
||||
</block>
|
||||
</wd-tabs>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="在弹出框中使用" transparent>
|
||||
<view class="section">
|
||||
<wd-button @click="handleOpenClick">打开弹窗</wd-button>
|
||||
</view>
|
||||
</demo-block>
|
||||
|
||||
<wd-popup v-model="showPopup" position="bottom" @after-enter="handlePopupShow" closable custom-style="height: 200px;padding: 0 24rpx;">
|
||||
<view class="title">在弹出框中使用</view>
|
||||
<wd-tabs v-model="tab10" ref="tabsRef">
|
||||
<wd-tab v-for="item in tabs" :key="item" :title="`${item}`" :name="item">
|
||||
<view class="content">内容{{ tab10 }}</view>
|
||||
</wd-tab>
|
||||
</wd-tabs>
|
||||
</wd-popup>
|
||||
</page-wraper>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useToast } from '@/uni_modules/wot-design-uni'
|
||||
import type { TabsInstance } from '@/uni_modules/wot-design-uni/components/wd-tabs/types'
|
||||
import { ref } from 'vue'
|
||||
const tabs = ref(['这', '是', '一', '个', '例子'])
|
||||
const tab = ref('一')
|
||||
@ -168,6 +184,7 @@ const tab6 = ref<number>(0)
|
||||
const tab7 = ref<number>(0)
|
||||
const tab8 = ref<number>(0)
|
||||
const tab9 = ref<number>(0)
|
||||
const tab10 = ref<number>(3)
|
||||
|
||||
const toast = useToast()
|
||||
function handleClick({ index, name }: any) {
|
||||
@ -177,6 +194,22 @@ function handleClick({ index, name }: any) {
|
||||
function handleChange(event: any) {
|
||||
console.log('change', event)
|
||||
}
|
||||
|
||||
const showPopup = ref(false) // 控制popup显示
|
||||
const tabsRef = ref<TabsInstance>() // 获取分段器实例
|
||||
|
||||
/**
|
||||
* 点击按钮打开popup
|
||||
*/
|
||||
function handleOpenClick() {
|
||||
showPopup.value = true
|
||||
}
|
||||
/**
|
||||
* popup打开后更新分段器样式
|
||||
*/
|
||||
function handlePopupShow() {
|
||||
tabsRef.value?.updateLineStyle(false)
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
@ -190,4 +223,11 @@ function handleChange(event: any) {
|
||||
line-height: 320px;
|
||||
text-align: center;
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
font-size: 32rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2024-03-18 11:22:03
|
||||
* @LastEditTime: 2024-07-25 22:17:56
|
||||
* @LastEditTime: 2024-11-24 23:04:55
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-segmented/types.ts
|
||||
* 记得注释
|
||||
*/
|
||||
import type { PropType } from 'vue'
|
||||
import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
|
||||
import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
|
||||
|
||||
export type SegmentedType = 'large' | 'middle' | 'small'
|
||||
@ -66,3 +66,15 @@ export const segmentedProps = {
|
||||
*/
|
||||
vibrateShort: makeBooleanProp(false)
|
||||
}
|
||||
|
||||
export type SegmentedExpose = {
|
||||
/**
|
||||
* 更新滑块偏移量
|
||||
* @param animation 是否开启动画，默认开启
|
||||
*/
|
||||
updateActiveStyle: (animation?: boolean) => void
|
||||
}
|
||||
|
||||
export type SegmentedProps = ExtractPropTypes<typeof segmentedProps>
|
||||
|
||||
export type SegmentedInstance = ComponentPublicInstance<SegmentedProps, SegmentedExpose>
|
||||
|
||||
@ -34,7 +34,7 @@ export default {
|
||||
import { computed, getCurrentInstance, onMounted, reactive, watch } from 'vue'
|
||||
import { requestAnimationFrame, getRect, isObj, objToStyle, addUnit } from '../common/util'
|
||||
import type { CSSProperties } from 'vue'
|
||||
import { segmentedProps, type SegmentedOption } from './types'
|
||||
import { segmentedProps, type SegmentedExpose, type SegmentedOption } from './types'
|
||||
const $item = '.wd-segmented__item'
|
||||
|
||||
const props = defineProps(segmentedProps)
|
||||
@ -124,6 +124,10 @@ function handleClick(option: string | number | SegmentedOption, index: number) {
|
||||
emit('change', isObj(option) ? option : { value })
|
||||
emit('click', isObj(option) ? option : { value })
|
||||
}
|
||||
|
||||
defineExpose<SegmentedExpose>({
|
||||
updateActiveStyle
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
@ -84,12 +84,22 @@ export const tabsProps = {
|
||||
}
|
||||
|
||||
export type TabsExpose = {
|
||||
// 修改选中的tab Index
|
||||
/**
|
||||
* 设置激活项
|
||||
* @param value 激活值
|
||||
* @param init 是否已初始化
|
||||
* @param setScroll 是否设置scroll-view滚动
|
||||
*/
|
||||
setActive: (value: number | string, init: boolean, setScroll: boolean) => void
|
||||
// scroll-view滑动到active的tab_nav
|
||||
/**
|
||||
* 使选中项滚动到可视区域
|
||||
*/
|
||||
scrollIntoView: () => void
|
||||
// 更新底部条样式
|
||||
updateLineStyle: (animation: boolean) => void
|
||||
/**
|
||||
* 更新激活项边框线样式
|
||||
* @param animation 是否开启动画，默认开启
|
||||
*/
|
||||
updateLineStyle: (animation?: boolean) => void
|
||||
}
|
||||
|
||||
export type TabsProps = ExtractPropTypes<typeof tabsProps>
|
||||
|
||||
@ -143,7 +143,7 @@ import wdStickyBox from '../wd-sticky-box/wd-sticky-box.vue'
|
||||
import { computed, getCurrentInstance, onMounted, watch, nextTick, reactive, type CSSProperties, type ComponentInstance } from 'vue'
|
||||
import { addUnit, checkNumRange, debounce, getRect, isDef, isNumber, isString, objToStyle } from '../common/util'
|
||||
import { useTouch } from '../composables/useTouch'
|
||||
import { TABS_KEY, tabsProps } from './types'
|
||||
import { TABS_KEY, tabsProps, type TabsExpose } from './types'
|
||||
import { useChildren } from '../composables/useChildren'
|
||||
import { useTranslate } from '../composables/useTranslate'
|
||||
|
||||
@ -428,7 +428,7 @@ function getActiveIndex(value: number | string) {
|
||||
return value
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
defineExpose<TabsExpose>({
|
||||
setActive,
|
||||
scrollIntoView,
|
||||
updateLineStyle
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user