🐛 [Bug]: 日历视图里height高度值设置无效

[stwflyfox]

Version

latest

Vue Version

vue3

Link to minimal reproduction

none

Step to reproduce

What is expected

No response

What is actually happening

No response

What is your project name

TinyVue

Any additional comments (optional)

No response

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: 🐛 [Bug]: The height value setting in the calendar view is invalid

[kagol]

@stwflyfox 可以通过覆盖样式解决。

.tiny-calendar-view .tiny-calendar-view-month__main .main-container>ul>li {
  height: 50px; // 默认是 80px
}

vue项目中可以使用 :deep() 做样式穿透：

.my-calendar-view.tiny-calendar-view :deep(.tiny-calendar-view-month__main .main-container>ul>li) {
  height: 50px; // 默认是 80px
}

效果如下：

示例代码可参考：

复制以下代码，在浏览器地址栏打开

https://opentiny.design/vue-playground?mode=pc&theme=default#3.18|eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgbGFuZz1cInRzeFwiPlxyXG4vLyDlvJXlhaUgQG9wZW50aW55L3Z1ZSDnu4Tku7ZcclxuaW1wb3J0IHsgQnV0dG9uLCBMaW5rIH0gZnJvbSAnQG9wZW50aW55L3Z1ZSdcclxuXHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICBjb21wb25lbnRzOiB7XHJcbiAgICBUaW55QnV0dG9uOiBCdXR0b24sXHJcbiAgICBUaW55TGluazogTGlua1xyXG4gIH0sXHJcbiAgZGF0YSgpIHtcclxuICAgIHJldHVybiB7XHJcbiAgICAgIG1zZzogJ2hlbGxvIHdvcmxkISdcclxuICAgIH1cclxuICB9XHJcbn1cclxuPC9zY3JpcHQ+XHJcblxyXG48dGVtcGxhdGU+XHJcbiAgPFRpbnlCdXR0b24+56Gu5a6aPC9UaW55QnV0dG9uPlxyXG4gIDxoMT57eyBtc2cgfX08L2gxPlxyXG4gIDxkaXYgY2xhc3M9XCJ0aW55dnVlXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwidGlueXZ1ZS1wYWdlXCI+XHJcbiAgICAgIHRpbnl2dWVcclxuICAgICAgPHRpbnktbGluayB0eXBlPVwic3VjY2Vzc1wiIGhyZWY9J2h0dHBzOi8vZ2l0aHViLmNvbS9vcGVudGlueS90aW55LXZ1ZSc+XHJcbiAgICAgICAgdGlueXZ1ZVxyXG4gICAgICA8L3RpbnktbGluaz5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L3RlbXBsYXRlPlxyXG5cclxuPHN0eWxlIGxhbmc9XCJsZXNzXCIgc2NvcGVkPlxyXG4gIGgxe1xyXG4gICAgY29sb3I6IzVlN2NlMDtcclxuICB9XHJcbiAgLnRpbnl2dWV7XHJcbiAgICBmb250LXNpemU6IDE4eHA7XHJcbiAgICAmLXBhZ2V7XHJcbiAgICAgIGNvbG9yOiM1ZTdjZTA7XHJcbiAgICB9XHJcbiAgfVxyXG48L3N0eWxlPlxyXG4iLCIiOiJ7XCJpbXBvcnRzXCI6e1widnVlXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vdnVlLzMuNC4yNy9maWxlcy9kaXN0L3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCIsXCJlY2hhcnRzXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vZWNoYXJ0cy81LjQuMS9maWxlcy9kaXN0L2VjaGFydHMuZXNtLmpzXCIsXCJAdnVlL2NvbXBpbGVyLXNmY1wiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0B2dWUvY29tcGlsZXItc2ZjLzMuNC4yNy9maWxlcy9kaXN0L2NvbXBpbGVyLXNmYy5lc20tYnJvd3Nlci5qc1wiLFwiQG9wZW50aW55L3Z1ZVwiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtcnVudGltZS8zLjE4L2ZpbGVzL2Rpc3QzL3RpbnktdnVlLXBjLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1pY29uXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1ydW50aW1lLzMuMTgvZmlsZXMvZGlzdDMvdGlueS12dWUtaWNvbi5tanNcIixcIkBvcGVudGlueS92dWUtbG9jYWxlXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1ydW50aW1lLzMuMTgvZmlsZXMvZGlzdDMvdGlueS12dWUtbG9jYWxlLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1jb21tb25cIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9Ab3BlbnRpbnkvdnVlLXJ1bnRpbWUvMy4xOC9maWxlcy9kaXN0My90aW55LXZ1ZS1jb21tb24ubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWRpcmVjdGl2ZVwiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtcnVudGltZS8zLjE4L2ZpbGVzL2Rpc3QzL3RpbnktdnVlLWRpcmVjdGl2ZS5tanNcIixcIkBvcGVudGlueS92dWUtdGhlbWUvXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS10aGVtZS8zLjE4L2ZpbGVzL1wiLFwiQG9wZW50aW55L3Z1ZS10aGVtZS1tb2JpbGUvXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS10aGVtZS1tb2JpbGUvMy4xOC9maWxlcy9cIixcIkBvcGVudGlueS92dWUtcmVuZGVybGVzcy9cIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9Ab3BlbnRpbnkvdnVlLXJlbmRlcmxlc3MvMy4xOC9maWxlcy9cIixcInNvcnRhYmxlanNcIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9zb3J0YWJsZWpzLzEuMTUuMC9maWxlcy9tb2R1bGFyL3NvcnRhYmxlLmVzbS5qc1wifX0iLCJ0c2NvbmZpZy5qc29uIjoie1xyXG4gIFwiY29tcGlsZXJPcHRpb25zXCI6IHtcclxuICAgIFwiYWxsb3dKc1wiOiB0cnVlLFxyXG4gICAgXCJjaGVja0pzXCI6IHRydWUsXHJcbiAgICBcImpzeFwiOiBcInByZXNlcnZlXCIsXHJcbiAgICBcInRhcmdldFwiOiBcIkVTTmV4dFwiLFxyXG4gICAgXCJtb2R1bGVcIjogXCJFU05leHRcIixcclxuICAgIFwibW9kdWxlUmVzb2x1dGlvblwiOiBcIkJ1bmRsZXJcIixcclxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZVxyXG4gIH0sXHJcbiAgXCJ2dWVDb21waWxlck9wdGlvbnNcIjoge1xyXG4gICAgXCJ0YXJnZXRcIjogMy4zXHJcbiAgfVxyXG59XHJcbiIsImJhc2ljLXVzYWdlLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgPHRpbnktY2FsZW5kYXItdmlldyBjbGFzcz1cIm15LWNhbGVuZGFyLXZpZXdcIiA6ZXZlbnRzPVwiZXZlbnRzbGlzdFwiIDp5ZWFyPVwiMjAyM1wiIDptb250aD1cIjVcIj48L3RpbnktY2FsZW5kYXItdmlldz5cbjwvdGVtcGxhdGU+XG5cbjxzY3JpcHQgc2V0dXAgbGFuZz1cInRzXCI+XG5pbXBvcnQgeyByZWYgfSBmcm9tICd2dWUnXG5pbXBvcnQgeyBDYWxlbmRhclZpZXcgYXMgVGlueUNhbGVuZGFyVmlldyB9IGZyb20gJ0BvcGVudGlueS92dWUnXG5cbmNvbnN0IGV2ZW50c2xpc3QgPSByZWYoW1xuICB7XG4gICAgdGl0bGU6ICfliY3nq6/lkajkvJoxJyxcbiAgICBzdGFydDogJzIwMjMtMDUtMTUgODozMDowMCcsXG4gICAgZW5kOiAnMjAyMy0wNS0xNSA5OjAwOjAwJyxcbiAgICBjb250ZW50OiAn5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOoJyxcbiAgICB0aGVtZTogJ2JsdWUnXG4gIH0sXG4gIHtcbiAgICB0aXRsZTogJ+WJjeerr+WRqOS8mjInLFxuICAgIHN0YXJ0OiAnMjAyMy0wNS0xNSAxMDowMDowMCcsXG4gICAgZW5kOiAnMjAyMy0wNS0xNSAxMjowMDowMCcsXG4gICAgY29udGVudDogJ+aXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqCcsXG4gICAgdGhlbWU6ICdncmVlbidcbiAgfSxcbiAge1xuICAgIHRpdGxlOiAn5YmN56uv5ZGo5LyaMi0xJyxcbiAgICBzdGFydDogJzIwMjMtMDUtMTUgMTM6MDA6MDAnLFxuICAgIGVuZDogJzIwMjMtMDUtMTUgMTU6MDA6MDAnLFxuICAgIGNvbnRlbnQ6ICfml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6gnLFxuICAgIHRoZW1lOiAncmVkJ1xuICB9LFxuICB7XG4gICAgdGl0bGU6ICfliY3nq6/lkajkvJozJyxcbiAgICBzdGFydDogJzIwMjMtMDUtMTYgOTowMDowMCcsXG4gICAgZW5kOiAnMjAyMy0wNS0xNiAxMDowMDowMCcsXG4gICAgY29udGVudDogJ+aXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqCcsXG4gICAgdGhlbWU6ICd5ZWxsb3cnXG4gIH0sXG4gIHtcbiAgICB0aXRsZTogJ+WJjeerr+WRqOS8mjQnLFxuICAgIHN0YXJ0OiAnMjAyMy0wNS0xNiAxMTowMDowMCcsXG4gICAgZW5kOiAnMjAyMy0wNS0xNiAxNDowMDowMCcsXG4gICAgY29udGVudDogJ+aXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqCcsXG4gICAgdGhlbWU6ICdwdXJwbGUnXG4gIH0sXG4gIHtcbiAgICB0aXRsZTogJ+WJjeerr+WRqOS8mjUnLFxuICAgIHN0YXJ0OiAnMjAyMy0wNS0yNSA4OjAwOjAwJyxcbiAgICBlbmQ6ICcyMDIzLTA1LTI1IDk6MDA6MDAnLFxuICAgIGNvbnRlbnQ6ICfml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6gnLFxuICAgIHRoZW1lOiAnY3lhbidcbiAgfSxcbiAge1xuICAgIHRpdGxlOiAn5YmN56uv5ZGo5LyaNicsXG4gICAgc3RhcnQ6ICcyMDIzLTA1LTI2IDg6MDA6MDAnLFxuICAgIGVuZDogJzIwMjMtMDUtMjYgMTE6MzA6MDAnLFxuICAgIGNvbnRlbnQ6ICfml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6jml6XnqIvlpIfms6gnLFxuICAgIHRoZW1lOiAnYmx1ZSdcbiAgfSxcbiAge1xuICAgIHRpdGxlOiAn5YmN56uv5ZGo5LyaNycsXG4gICAgc3RhcnQ6ICcyMDIzLTA1LTI3IDg6MzA6MDAnLFxuICAgIGVuZDogJzIwMjMtMDUtMjcgOTozMDowMCcsXG4gICAgY29udGVudDogJ+aXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqOaXpeeoi+Wkh+azqCcsXG4gICAgdGhlbWU6ICdibHVlJ1xuICB9LFxuICB7XG4gICAgdGl0bGU6ICfoioLlgYfml6UyNS0yOCcsXG4gICAgc3RhcnQ6ICcyMDIzLTA1LTI1IDEwOjMwOjAwJyxcbiAgICBlbmQ6ICcyMDIzLTA1LTI4IDAzOjMwOjAwJyxcbiAgICBjb250ZW50OiAn5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOo5pel56iL5aSH5rOoJyxcbiAgICB0aGVtZTogJ2dyZWVuJ1xuICB9XG5dKVxuPC9zY3JpcHQ+XG48c3R5bGUgc2NvcGVkPlxuLm15LWNhbGVuZGFyLXZpZXcudGlueS1jYWxlbmRhci12aWV3IDpkZWVwKC50aW55LWNhbGVuZGFyLXZpZXctbW9udGhfX21haW4gLm1haW4tY29udGFpbmVyPnVsPmxpKSB7XG4gIGhlaWdodDogNTBweDtcbn1cbjwvc3R5bGU+XG4iLCJfbyI6e319

[Youyou-smiles]

height没有很好的处理接收值的类型，API里的描述也不够清楚。这里的height只支持时间线模式，并且值需要带上px。所以我们准备处理接下来的场景，兼容接收数字（500）和字符串（'500px'），并优化api描述。谢谢提出的意见。

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

height does not handle the type of received value well, and the description in the API is not clear enough. The height here only supports timeline mode, and the value needs to be in px. So we are ready to handle the next scenario, compatible with receiving numbers (500) and strings ('500px'), and optimize the API description. Thanks for your comments.