diff --git a/package.json b/package.json index 874687dd1..cc4feaecd 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "@vant/icons": "^1.5.2", "@vant/lazyload": "^1.0.2", "@vant/popperjs": "^1.0.2", - "@vant/use": "^1.0.2" + "@vant/use": "^1.0.3" }, "peerDependencies": { "vue": "^3.0.0" diff --git a/src/action-bar-button/index.tsx b/src/action-bar-button/index.tsx index 8cdb0ae66..fc3087a32 100644 --- a/src/action-bar-button/index.tsx +++ b/src/action-bar-button/index.tsx @@ -29,14 +29,14 @@ export default createComponent({ const isFirst = computed(() => { if (parent) { - const prev = parent.children[index!.value - 1]; + const prev = parent.children[index.value - 1]; return !(prev && 'isButton' in prev); } }); const isLast = computed(() => { if (parent) { - const next = parent.children[index!.value + 1]; + const next = parent.children[index.value + 1]; return !(next && 'isButton' in next); } }); diff --git a/src/col/index.tsx b/src/col/index.tsx index 8a445f4fe..fcbe888f6 100644 --- a/src/col/index.tsx +++ b/src/col/index.tsx @@ -28,8 +28,8 @@ export default createComponent({ const { spaces } = parent; - if (spaces && spaces.value && spaces.value[index!.value]) { - const { left, right } = spaces.value[index!.value]; + if (spaces && spaces.value && spaces.value[index.value]) { + const { left, right } = spaces.value[index.value]; return { paddingLeft: left ? `${left}px` : null, paddingRight: right ? `${right}px` : null, diff --git a/src/sidebar-item/index.js b/src/sidebar-item/index.tsx similarity index 71% rename from src/sidebar-item/index.js rename to src/sidebar-item/index.tsx index e40d97867..3275f1878 100644 --- a/src/sidebar-item/index.js +++ b/src/sidebar-item/index.tsx @@ -1,7 +1,7 @@ import { createNamespace } from '../utils'; import { useParent } from '@vant/use'; import { useRoute, routeProps } from '../composables/use-route'; -import { SIDEBAR_KEY } from '../sidebar'; +import { SIDEBAR_KEY, SidebarProvide } from '../sidebar'; import Badge from '../badge'; const [createComponent, bem] = createNamespace('sidebar-item'); @@ -19,7 +19,16 @@ export default createComponent({ setup(props, { emit, slots }) { const route = useRoute(); - const { parent, index } = useParent(SIDEBAR_KEY); + const { parent, index } = useParent(SIDEBAR_KEY); + + if (!parent) { + if (process.env.NODE_ENV !== 'production') { + console.error( + '[Vant] SidebarItem must be a child component of Sidebar.' + ); + } + return; + } const onClick = () => { if (props.disabled) { @@ -27,14 +36,13 @@ export default createComponent({ } emit('click', index.value); - parent.emit('update:modelValue', index.value); parent.setActive(index.value); route(); }; return () => { const { dot, badge, title, disabled } = props; - const selected = index.value === parent.active(); + const selected = index.value === parent.getActive(); return ( diff --git a/src/sidebar/README.md b/src/sidebar/README.md index f6e75059e..2d916fe02 100644 --- a/src/sidebar/README.md +++ b/src/sidebar/README.md @@ -90,9 +90,9 @@ export default { ### Sidebar Events -| Event | Description | Arguments | -| ------ | -------------------------------- | ---------------------------- | -| change | Emitted when chosen item changed | index: index of current item | +| Event | Description | Arguments | +| ------ | -------------------------------- | --------------- | +| change | Emitted when chosen item changed | _index: number_ | ### SidebarItem Props @@ -108,9 +108,9 @@ export default { ### SidebarItem Events -| Event | Description | Arguments | -| ----- | ------------------------------- | ---------------------------- | -| click | Emitted when an item is clicked | index: index of current item | +| Event | Description | Arguments | +| ----- | ------------------------------- | --------------- | +| click | Emitted when an item is clicked | _index: number_ | ### SidebarItem Slots diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md index 44caadcb6..97104d2d0 100644 --- a/src/sidebar/README.zh-CN.md +++ b/src/sidebar/README.zh-CN.md @@ -98,9 +98,9 @@ export default { ### Sidebar Events -| 事件名 | 说明 | 回调参数 | -| ------ | ---------------- | ----------------------- | -| change | 切换导航项时触发 | index: 当前导航项的索引 | +| 事件名 | 说明 | 回调参数 | +| ------ | ---------------- | --------------- | +| change | 切换导航项时触发 | _index: number_ | ### SidebarItem Props @@ -116,9 +116,9 @@ export default { ### SidebarItem Events -| 事件名 | 说明 | 回调参数 | -| ------ | ---------- | ----------------------- | -| click | 点击时触发 | index: 当前导航项的索引 | +| 事件名 | 说明 | 回调参数 | +| ------ | ---------- | --------------- | +| click | 点击时触发 | _index: number_ | ### SidebarItem Slots diff --git a/src/sidebar/index.js b/src/sidebar/index.tsx similarity index 68% rename from src/sidebar/index.js rename to src/sidebar/index.tsx index e949277a1..d12913e7b 100644 --- a/src/sidebar/index.js +++ b/src/sidebar/index.tsx @@ -1,4 +1,3 @@ -import { watch } from 'vue'; import { createNamespace } from '../utils'; import { useChildren } from '@vant/use'; @@ -6,6 +5,11 @@ const [createComponent, bem] = createNamespace('sidebar'); export const SIDEBAR_KEY = 'vanSidebar'; +export type SidebarProvide = { + getActive: () => number; + setActive: (value: number) => void; +}; + export default createComponent({ props: { modelValue: { @@ -19,19 +23,17 @@ export default createComponent({ setup(props, { emit, slots }) { const { linkChildren } = useChildren(SIDEBAR_KEY); - const active = () => +props.modelValue; + const getActive = () => +props.modelValue; - const setActive = (value) => { - if (value !== active()) { + const setActive = (value: number) => { + if (value !== getActive()) { + emit('update:modelValue', value); emit('change', value); } }; - watch(active, setActive); - linkChildren({ - emit, - active, + getActive, setActive, }); diff --git a/yarn.lock b/yarn.lock index f8f407cb9..d7252805c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1981,10 +1981,10 @@ resolved "https://registry.yarnpkg.com/@vant/touch-emulator/-/touch-emulator-1.2.0.tgz#486300b23e57db9ce9231a04e0a0c621c68692d8" integrity sha512-sJ97zU85zOq51qoi7+CpBEcOyH3CitjP1KC7/GQwqaurUJni+EP7/F9n0HMnAh8GXMjgtgDBNJ5z48x+coNKYQ== -"@vant/use@^1.0.2": - version "1.0.2" - resolved "https://registry.npm.taobao.org/@vant/use/download/@vant/use-1.0.2.tgz?cache=0&sync_timestamp=1609472383302&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vant%2Fuse%2Fdownload%2F%40vant%2Fuse-1.0.2.tgz#75486aedf3539382baa922c77eeb8a2e2394a948" - integrity sha1-dUhq7fNTk4K6qSLHfuuKLiOUqUg= +"@vant/use@^1.0.3": + version "1.0.3" + resolved "https://registry.npmjs.org/@vant/use/-/use-1.0.3.tgz#ec3f82c30b883b1ceb36e49b60882e332ea04bf4" + integrity sha512-tnR6mdsjnN2mmiBznn8FNueyZYSFBavlOPNZd3Nf9SRP4QLPeHeebGSxWqYpFf6jpjYqOy0HHgtXz2Gu8dLeaw== dependencies: "@babel/runtime" "7.x"