Skip to content

TinyVue如何自定义设计规范

Jump to bottom
Kagol edited this page May 14, 2024 · 10 revisions

TinyVue提供了自定义设计规范的能力。

比如：我想修改Grid表格组件排序图标。

Playground 代码演练场 https://opentiny.design/vue-playground?mode=pc&theme=default#3.15|eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgbGFuZz1cInRzeFwiPlxyXG4vLyDlvJXlhaUgQG9wZW50aW55L3Z1ZSDnu4Tku7ZcclxuaW1wb3J0IHsgQnV0dG9uLCBMaW5rIH0gZnJvbSAnQG9wZW50aW55L3Z1ZSdcclxuXHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICBjb21wb25lbnRzOiB7XHJcbiAgICBUaW55QnV0dG9uOiBCdXR0b24sXHJcbiAgICBUaW55TGluazogTGlua1xyXG4gIH0sXHJcbiAgZGF0YSgpIHtcclxuICAgIHJldHVybiB7XHJcbiAgICAgIG1zZzogJ2hlbGxvIHdvcmxkISdcclxuICAgIH1cclxuICB9XHJcbn1cclxuPC9zY3JpcHQ+XHJcblxyXG48dGVtcGxhdGU+XHJcbiAgPFRpbnlCdXR0b24+56Gu5a6aPC9UaW55QnV0dG9uPlxyXG4gIDxoMT57eyBtc2cgfX08L2gxPlxyXG4gIDxkaXYgY2xhc3M9XCJ0aW55dnVlXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwidGlueXZ1ZS1wYWdlXCI+XHJcbiAgICAgIHRpbnl2dWVcclxuICAgICAgPHRpbnktbGluayB0eXBlPVwic3VjY2Vzc1wiIGhyZWY9J2h0dHBzOi8vZ2l0aHViLmNvbS9vcGVudGlueS90aW55LXZ1ZSc+XHJcbiAgICAgICAgdGlueXZ1ZVxyXG4gICAgICA8L3RpbnktbGluaz5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L3RlbXBsYXRlPlxyXG5cclxuPHN0eWxlIGxhbmc9XCJsZXNzXCIgc2NvcGVkPlxyXG4gIGgxe1xyXG4gICAgY29sb3I6IzVlN2NlMDtcclxuICB9XHJcbiAgLnRpbnl2dWV7XHJcbiAgICBmb250LXNpemU6IDE4eHA7XHJcbiAgICAmLXBhZ2V7XHJcbiAgICAgIGNvbG9yOiM1ZTdjZTA7XHJcbiAgICB9XHJcbiAgfVxyXG48L3N0eWxlPlxyXG4iLCJzcmMvIjoie1wiaW1wb3J0c1wiOntcIkBvcGVudGlueS92dWVcIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWVAMy4xNS9ydW50aW1lL3RpbnktdnVlLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1pY29uXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9Ab3BlbnRpbnkvdnVlQDMuMTUvcnVudGltZS90aW55LXZ1ZS1pY29uLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1sb2NhbGVcIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWVAMy4xNS9ydW50aW1lL3RpbnktdnVlLWxvY2FsZS5tanNcIixcIkBvcGVudGlueS92dWUtY29tbW9uXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9Ab3BlbnRpbnkvdnVlQDMuMTUvcnVudGltZS90aW55LXZ1ZS1jb21tb24ubWpzXCIsXCJAb3BlbnRpbnkvdnVlLXRoZW1lL1wiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vQG9wZW50aW55L3Z1ZS10aGVtZUAzLjE1L1wiLFwiQG9wZW50aW55L3Z1ZS10aGVtZS1tb2JpbGUvXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9Ab3BlbnRpbnkvdnVlLXRoZW1lLW1vYmlsZUAzLjE1L1wiLFwiQG9wZW50aW55L3Z1ZS1yZW5kZXJsZXNzL1wiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vQG9wZW50aW55L3Z1ZS1yZW5kZXJsZXNzQDMuMTUvXCIsXCJzb3J0YWJsZWpzXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9zb3J0YWJsZWpzQDEuMTUuMC9tb2R1bGFyL3NvcnRhYmxlLmVzbS5qc1wifX0iLCJ0c2NvbmZpZy5qc29uIjoie1xyXG4gIFwiY29tcGlsZXJPcHRpb25zXCI6IHtcclxuICAgIFwiYWxsb3dKc1wiOiB0cnVlLFxyXG4gICAgXCJjaGVja0pzXCI6IHRydWUsXHJcbiAgICBcImpzeFwiOiBcInByZXNlcnZlXCIsXHJcbiAgICBcInRhcmdldFwiOiBcIkVTTmV4dFwiLFxyXG4gICAgXCJtb2R1bGVcIjogXCJFU05leHRcIixcclxuICAgIFwibW9kdWxlUmVzb2x1dGlvblwiOiBcIkJ1bmRsZXJcIixcclxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZVxyXG4gIH0sXHJcbiAgXCJ2dWVDb21waWxlck9wdGlvbnNcIjoge1xyXG4gICAgXCJ0YXJnZXRcIjogMy4zXHJcbiAgfVxyXG59XHJcbiIsInNyYy9zb3J0L2RlZmF1bHQtc29ydC52dWUiOiI8dGVtcGxhdGU+XG4gIDx0aW55LWNvbmZpZy1wcm92aWRlciA6ZGVzaWduPVwiZGVzaWduXCI+XG4gIDx0aW55LWdyaWQgOmRhdGE9XCJ0YWJsZURhdGFcIiA6c29ydC1jb25maWc9XCJ7IHRyaWdnZXI6ICdjZWxsJyB9XCIgQHRvb2xiYXItYnV0dG9uLWNsaWNrPVwidG9vbGJhckJ1dHRvbkNsaWNrRXZlbnRcIj5cbiAgICA8dGVtcGxhdGUgI3Rvb2xiYXI+XG4gICAgICA8dGlueS1ncmlkLXRvb2xiYXIgOmJ1dHRvbnM9XCJ0b29sYmFyQnV0dG9uc1wiPiA8L3RpbnktZ3JpZC10b29sYmFyPlxuICAgIDwvdGVtcGxhdGU+XG4gICAgPHRpbnktZ3JpZC1jb2x1bW4gdHlwZT1cImluZGV4XCIgd2lkdGg9XCI2MFwiPjwvdGlueS1ncmlkLWNvbHVtbj5cbiAgICA8dGlueS1ncmlkLWNvbHVtbiB0eXBlPVwic2VsZWN0aW9uXCIgd2lkdGg9XCI2MFwiPjwvdGlueS1ncmlkLWNvbHVtbj5cbiAgICA8dGlueS1ncmlkLWNvbHVtbiBmaWVsZD1cIm5hbWVcIiB0aXRsZT1cIuWFrOWPuOWQjeensFwiIHNvcnRhYmxlPjwvdGlueS1ncmlkLWNvbHVtbj5cbiAgICA8dGlueS1ncmlkLWNvbHVtblxuICAgICAgZmllbGQ9XCJlbXBsb3llZXNcIlxuICAgICAgdGl0bGU9XCLlkZjlt6XmlbDmjpLluo/ngrnlh7vooajlpLTmjpLluo/vvIzlj6/ku6XpgJrov4fphY3nva4gdHJpZ2dlciDorr7nva7op6blj5HmupBcIlxuICAgICAgc29ydGFibGVcbiAgICAgIHNob3ctaGVhZGVyLW92ZXJmbG93XG4gICAgPjwvdGlueS1ncmlkLWNvbHVtbj5cbiAgICA8dGlueS1ncmlkLWNvbHVtbiBmaWVsZD1cImNyZWF0ZWREYXRlXCIgdGl0bGU9XCLliJvlu7rml6XmnJ9cIj48L3RpbnktZ3JpZC1jb2x1bW4+XG4gICAgPHRpbnktZ3JpZC1jb2x1bW4gZmllbGQ9XCJjaXR5XCIgdGl0bGU9XCLln47luIJcIj48L3RpbnktZ3JpZC1jb2x1bW4+XG4gIDwvdGlueS1ncmlkPlxuICAgIDwvdGlueS1jb25maWctcHJvdmlkZXI+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IHNldHVwIGxhbmc9XCJqc3hcIj5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCB7IEdyaWQgYXMgVGlueUdyaWQsIEdyaWRDb2x1bW4gYXMgVGlueUdyaWRDb2x1bW4sIEdyaWRUb29sYmFyIGFzIFRpbnlHcmlkVG9vbGJhciwgQ29uZmlnUHJvdmlkZXIgYXMgVGlueUNvbmZpZ1Byb3ZpZGVyIH0gZnJvbSAnQG9wZW50aW55L3Z1ZSdcbmltcG9ydCB7IGljb25DaGV2cm9uVXAsIGljb25DaGV2cm9uRG93biB9IGZyb20gJ0BvcGVudGlueS92dWUtaWNvbidcbiAgXG4vLyDoh6rlrprkuYnorr7orqHop4TojINcbmNvbnN0IGRlc2lnbiA9IHJlZih7XG4gIG5hbWU6ICdlbGVtZW50LXVpJywgLy8g6K6+6K6h6KeE6IyD5ZCN56ewXG4gIHZlcnNpb246ICcxLjAuMCcsIC8vIOiuvuiuoeinhOiMg+eJiOacrOWPt1xuICBjb21wb25lbnRzOiB7XG4gICAgR3JpZDoge1xuICAgICAgaWNvbnM6IHtcbiAgICAgICAgc29ydERlZmF1bHQ6IG51bGwsXG4gICAgICAgIHNvcnRBc2M6IGljb25DaGV2cm9uVXAoKSxcbiAgICAgICAgc29ydERlc2M6IGljb25DaGV2cm9uRG93bigpXG4gICAgICB9XG4gICAgfVxuICB9XG59KVxuY29uc3QgdG9vbGJhckJ1dHRvbnMgPSByZWYoW1xuICB7XG4gICAgY29kZTogJ2NsZWFyU29ydCcsXG4gICAgbmFtZTogJ+aJi+WKqOa4heepuuaOkuW6j+adoeS7tidcbiAgfVxuXSlcbmNvbnN0IHRhYmxlRGF0YSA9IHJlZihbXG4gIHtcbiAgICBpZDogJzEnLFxuICAgIG5hbWU6ICdHRkTnp5HmioBZWOWFrOWPuCcsXG4gICAgY2l0eTogJ+emj+W3nicsXG4gICAgZW1wbG95ZWVzOiA4MDAsXG4gICAgY3JlYXRlZERhdGU6ICcyMDE0LTA0LTMwIDAwOjU2OjAwJ1xuICB9LFxuICB7XG4gICAgaWQ6ICcyJyxcbiAgICBuYW1lOiAnV1dX56eR5oqAWVjlhazlj7gnLFxuICAgIGNpdHk6ICfmt7HlnLMnLFxuICAgIGVtcGxveWVlczogMzAwLFxuICAgIGNyZWF0ZWREYXRlOiAnMjAxNi0wNy0wOCAxMjozNjoyMidcbiAgfSxcbiAge1xuICAgIGlkOiAnMycsXG4gICAgbmFtZTogJ1JGVuaciemZkOi0o+S7u+WFrOWPuCcsXG4gICAgY2l0eTogJ+S4reWxsScsXG4gICAgZW1wbG95ZWVzOiAxMzAwLFxuICAgIGNyZWF0ZWREYXRlOiAnMjAxNC0wMi0xNCAxNDoxNDoxNCdcbiAgfSxcbiAge1xuICAgIGlkOiAnNCcsXG4gICAgbmFtZTogJ1RHQuenkeaKgFlY5YWs5Y+4JyxcbiAgICBjaXR5OiAn6b6Z5bKpJyxcbiAgICBlbXBsb3llZXM6IDM2MCxcbiAgICBjcmVhdGVkRGF0ZTogJzIwMTMtMDEtMTMgMTM6MTM6MTMnXG4gIH0sXG4gIHtcbiAgICBpZDogJzUnLFxuICAgIG5hbWU6ICdZSE7np5HmioBZWOWFrOWPuCcsXG4gICAgY2l0eTogJ+mftuWFsycsXG4gICAgZW1wbG95ZWVzOiA4MTAsXG4gICAgY3JlYXRlZERhdGU6ICcyMDEyLTEyLTEyIDEyOjEyOjEyJ1xuICB9LFxuICB7XG4gICAgaWQ6ICc2JyxcbiAgICBuYW1lOiAnV1NY56eR5oqAWVjlhazlj7gnLFxuICAgIGNpdHk6ICfpu4TlhognLFxuICAgIGVtcGxveWVlczogODAwLFxuICAgIGNyZWF0ZWREYXRlOiAnMjAxMS0xMS0xMSAxMToxMToxMSdcbiAgfSxcbiAge1xuICAgIGlkOiAnNycsXG4gICAgbmFtZTogJ0tCR+eJqeS4mllY5YWs5Y+4JyxcbiAgICBjaXR5OiAn6LWk5aOBJyxcbiAgICBlbXBsb3llZXM6IDQwMCxcbiAgICBjcmVhdGVkRGF0ZTogJzIwMTYtMDQtMzAgMjM6NTY6MDAnXG4gIH0sXG4gIHtcbiAgICBpZDogJzgnLFxuICAgIG5hbWU6ICfmt7HlnLPluILnpo/lvrflrp3nvZHnu5zmioDmnK9ZWOWFrOWPuCcsXG4gICAgY2l0eTogJ+WOpumXqCcsXG4gICAgZW1wbG95ZWVzOiA1NDAsXG4gICAgY3JlYXRlZERhdGU6ICcyMDE2LTA2LTAzIDEzOjUzOjI1J1xuICB9XG5dKVxuXG5mdW5jdGlvbiB0b29sYmFyQnV0dG9uQ2xpY2tFdmVudCh7IGNvZGUsICRncmlkIH0pIHtcbiAgc3dpdGNoIChjb2RlKSB7XG4gICAgY2FzZSAnY2xlYXJTb3J0Jzoge1xuICAgICAgJGdyaWQuY2xlYXJTb3J0KClcbiAgICAgIGJyZWFrXG4gICAgfVxuICB9XG59XG48L3NjcmlwdD5cbiIsIiI6IntcImltcG9ydHNcIjp7XCJAb3BlbnRpbnkvdnVlXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9Ab3BlbnRpbnkvdnVlQDMuMTUvcnVudGltZS90aW55LXZ1ZS5tanNcIixcIkBvcGVudGlueS92dWUtaWNvblwiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vQG9wZW50aW55L3Z1ZUAzLjE1L3J1bnRpbWUvdGlueS12dWUtaWNvbi5tanNcIixcIkBvcGVudGlueS92dWUtbG9jYWxlXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9Ab3BlbnRpbnkvdnVlQDMuMTUvcnVudGltZS90aW55LXZ1ZS1sb2NhbGUubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWNvbW1vblwiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vQG9wZW50aW55L3Z1ZUAzLjE1L3J1bnRpbWUvdGlueS12dWUtY29tbW9uLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS10aGVtZS9cIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWUtdGhlbWVAMy4xNS9cIixcIkBvcGVudGlueS92dWUtdGhlbWUtbW9iaWxlL1wiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vQG9wZW50aW55L3Z1ZS10aGVtZS1tb2JpbGVAMy4xNS9cIixcIkBvcGVudGlueS92dWUtcmVuZGVybGVzcy9cIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWUtcmVuZGVybGVzc0AzLjE1L1wiLFwic29ydGFibGVqc1wiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vc29ydGFibGVqc0AxLjE1LjAvbW9kdWxhci9zb3J0YWJsZS5lc20uanNcIn19IiwiX28iOnt9fQ==

Clone this wiki locally