search

opentiny / tiny-vue

TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
https://opentiny.design/tiny-vue
MIT License
1.71k stars 266 forks source link

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

Open stwflyfox opened 2 months ago

stwflyfox commented 2 months ago

Version

latest

Vue Version

vue3

Link to minimal reproduction

none

Step to reproduce

image

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 commented 2 months ago

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 commented 2 months ago

@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
}

效果如下： image

示例代码可参考：

复制以下代码，在浏览器地址栏打开 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 commented 2 weeks ago

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

Issues-translate-bot commented 2 weeks ago

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.