tiny-vue
tiny-vue copied to clipboard
opentiny
🐛 [Bug]: 日历视图里height高度值设置无效
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
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
@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
height没有很好的处理接收值的类型，API里的描述也不够清楚。这里的height只支持时间线模式，并且值需要带上px。所以我们准备处理接下来的场景，兼容接收数字（500）和字符串（'500px'），并优化api描述。谢谢提出的意见。
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.