Skip to content

TinyVue如何自定义设计规范

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+XHJcbiAgICAgICAgdGlueXZ1ZVxyXG4gICAgICA8L3RpbnktbGluaz5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L3RlbXBsYXRlPlxyXG5cclxuPHN0eWxlIGxhbmc9XCJsZXNzXCIgc2NvcGVkPlxyXG4gIGgxe1xyXG4gICAgY29sb3I6IzVlN2NlMDtcclxuICB9XHJcbiAgLnRpbnl2dWV7XHJcbiAgICBmb250LXNpemU6IDE4eHA7XHJcbiAgICAmLXBhZ2V7XHJcbiAgICAgIGNvbG9yOiM1ZTdjZTA7XHJcbiAgICB9XHJcbiAgfVxyXG48L3N0eWxlPlxyXG4iLCIiOiJ7XCJpbXBvcnRzXCI6e1wiQG9wZW50aW55L3Z1ZVwiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vQG9wZW50aW55L3Z1ZUAzLjE1L3J1bnRpbWUvdGlueS12dWUubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWljb25cIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWVAMy4xNS9ydW50aW1lL3RpbnktdnVlLWljb24ubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWxvY2FsZVwiOlwiaHR0cHM6Ly9ucG0ub25taWNyb3NvZnQuY24vQG9wZW50aW55L3Z1ZUAzLjE1L3J1bnRpbWUvdGlueS12dWUtbG9jYWxlLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1jb21tb25cIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWVAMy4xNS9ydW50aW1lL3RpbnktdnVlLWNvbW1vbi5tanNcIixcIkBvcGVudGlueS92dWUtdGhlbWUvXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9Ab3BlbnRpbnkvdnVlLXRoZW1lQDMuMTUvXCIsXCJAb3BlbnRpbnkvdnVlLXRoZW1lLW1vYmlsZS9cIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL0BvcGVudGlueS92dWUtdGhlbWUtbW9iaWxlQDMuMTUvXCIsXCJAb3BlbnRpbnkvdnVlLXJlbmRlcmxlc3MvXCI6XCJodHRwczovL25wbS5vbm1pY3Jvc29mdC5jbi9Ab3BlbnRpbnkvdnVlLXJlbmRlcmxlc3NAMy4xNS9cIixcInNvcnRhYmxlanNcIjpcImh0dHBzOi8vbnBtLm9ubWljcm9zb2Z0LmNuL3NvcnRhYmxlanNAMS4xNS4wL21vZHVsYXIvc29ydGFibGUuZXNtLmpzXCJ9fSIsInRzY29uZmlnLmpzb24iOiJ7XHJcbiAgXCJjb21waWxlck9wdGlvbnNcIjoge1xyXG4gICAgXCJhbGxvd0pzXCI6IHRydWUsXHJcbiAgICBcImNoZWNrSnNcIjogdHJ1ZSxcclxuICAgIFwianN4XCI6IFwicHJlc2VydmVcIixcclxuICAgIFwidGFyZ2V0XCI6IFwiRVNOZXh0XCIsXHJcbiAgICBcIm1vZHVsZVwiOiBcIkVTTmV4dFwiLFxyXG4gICAgXCJtb2R1bGVSZXNvbHV0aW9uXCI6IFwiQnVuZGxlclwiLFxyXG4gICAgXCJhbGxvd0ltcG9ydGluZ1RzRXh0ZW5zaW9uc1wiOiB0cnVlXHJcbiAgfSxcclxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XHJcbiAgICBcInRhcmdldFwiOiAzLjNcclxuICB9XHJcbn1cclxuIiwic29ydC9kZWZhdWx0LXNvcnQudnVlIjoiPHRlbXBsYXRlPlxuICA8dGlueS1jb25maWctcHJvdmlkZXIgOmRlc2lnbj1cImRlc2lnblwiPlxuICA8dGlueS1ncmlkIDpkYXRhPVwidGFibGVEYXRhXCIgOnNvcnQtY29uZmlnPVwieyB0cmlnZ2VyOiAnY2VsbCcgfVwiIEB0b29sYmFyLWJ1dHRvbi1jbGljaz1cInRvb2xiYXJCdXR0b25DbGlja0V2ZW50XCI+XG4gICAgPHRlbXBsYXRlICN0b29sYmFyPlxuICAgICAgPHRpbnktZ3JpZC10b29sYmFyIDpidXR0b25zPVwidG9vbGJhckJ1dHRvbnNcIj4gPC90aW55LWdyaWQtdG9vbGJhcj5cbiAgICA8L3RlbXBsYXRlPlxuICAgIDx0aW55LWdyaWQtY29sdW1uIHR5cGU9XCJpbmRleFwiIHdpZHRoPVwiNjBcIj48L3RpbnktZ3JpZC1jb2x1bW4+XG4gICAgPHRpbnktZ3JpZC1jb2x1bW4gdHlwZT1cInNlbGVjdGlvblwiIHdpZHRoPVwiNjBcIj48L3RpbnktZ3JpZC1jb2x1bW4+XG4gICAgPHRpbnktZ3JpZC1jb2x1bW4gZmllbGQ9XCJuYW1lXCIgdGl0bGU9XCLlhazlj7jlkI3np7BcIiBzb3J0YWJsZT48L3RpbnktZ3JpZC1jb2x1bW4+XG4gICAgPHRpbnktZ3JpZC1jb2x1bW5cbiAgICAgIGZpZWxkPVwiZW1wbG95ZWVzXCJcbiAgICAgIHRpdGxlPVwi5ZGY5bel5pWw5o6S5bqP54K55Ye76KGo5aS05o6S5bqP77yM5Y+v5Lul6YCa6L+H6YWN572uIHRyaWdnZXIg6K6+572u6Kem5Y+R5rqQXCJcbiAgICAgIHNvcnRhYmxlXG4gICAgICBzaG93LWhlYWRlci1vdmVyZmxvd1xuICAgID48L3RpbnktZ3JpZC1jb2x1bW4+XG4gICAgPHRpbnktZ3JpZC1jb2x1bW4gZmllbGQ9XCJjcmVhdGVkRGF0ZVwiIHRpdGxlPVwi5Yib5bu65pel5pyfXCI+PC90aW55LWdyaWQtY29sdW1uPlxuICAgIDx0aW55LWdyaWQtY29sdW1uIGZpZWxkPVwiY2l0eVwiIHRpdGxlPVwi5Z+O5biCXCI+PC90aW55LWdyaWQtY29sdW1uPlxuICA8L3RpbnktZ3JpZD5cbiAgICA8L3RpbnktY29uZmlnLXByb3ZpZGVyPlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdCBzZXR1cCBsYW5nPVwianN4XCI+XG5pbXBvcnQgeyByZWYgfSBmcm9tICd2dWUnXG5pbXBvcnQgeyBHcmlkIGFzIFRpbnlHcmlkLCBHcmlkQ29sdW1uIGFzIFRpbnlHcmlkQ29sdW1uLCBHcmlkVG9vbGJhciBhcyBUaW55R3JpZFRvb2xiYXIsIENvbmZpZ1Byb3ZpZGVyIGFzIFRpbnlDb25maWdQcm92aWRlciB9IGZyb20gJ0BvcGVudGlueS92dWUnXG5pbXBvcnQgeyBpY29uQ2hldnJvblVwLCBpY29uQ2hldnJvbkRvd24gfSBmcm9tICdAb3BlbnRpbnkvdnVlLWljb24nXG4gIFxuLy8g6Ieq5a6a5LmJ6K6+6K6h6KeE6IyDXG5jb25zdCBkZXNpZ24gPSByZWYoe1xuICBuYW1lOiAnZWxlbWVudC11aScsIC8vIOiuvuiuoeinhOiMg+WQjeensFxuICB2ZXJzaW9uOiAnMS4wLjAnLCAvLyDorr7orqHop4TojIPniYjmnKzlj7dcbiAgY29tcG9uZW50czoge1xuICAgIEdyaWQ6IHtcbiAgICAgIGljb25zOiB7XG4gICAgICAgIHNvcnRBc2M6IGljb25DaGV2cm9uVXAoKSxcbiAgICAgICAgc29ydERlc2M6IGljb25DaGV2cm9uRG93bigpXG4gICAgICB9XG4gICAgfVxuICB9XG59KVxuY29uc3QgdG9vbGJhckJ1dHRvbnMgPSByZWYoW1xuICB7XG4gICAgY29kZTogJ2NsZWFyU29ydCcsXG4gICAgbmFtZTogJ+aJi+WKqOa4heepuuaOkuW6j+adoeS7tidcbiAgfVxuXSlcbmNvbnN0IHRhYmxlRGF0YSA9IHJlZihbXG4gIHtcbiAgICBpZDogJzEnLFxuICAgIG5hbWU6ICdHRkTnp5HmioBZWOWFrOWPuCcsXG4gICAgY2l0eTogJ+emj+W3nicsXG4gICAgZW1wbG95ZWVzOiA4MDAsXG4gICAgY3JlYXRlZERhdGU6ICcyMDE0LTA0LTMwIDAwOjU2OjAwJ1xuICB9LFxuICB7XG4gICAgaWQ6ICcyJyxcbiAgICBuYW1lOiAnV1dX56eR5oqAWVjlhazlj7gnLFxuICAgIGNpdHk6ICfmt7HlnLMnLFxuICAgIGVtcGxveWVlczogMzAwLFxuICAgIGNyZWF0ZWREYXRlOiAnMjAxNi0wNy0wOCAxMjozNjoyMidcbiAgfSxcbiAge1xuICAgIGlkOiAnMycsXG4gICAgbmFtZTogJ1JGVuaciemZkOi0o+S7u+WFrOWPuCcsXG4gICAgY2l0eTogJ+S4reWxsScsXG4gICAgZW1wbG95ZWVzOiAxMzAwLFxuICAgIGNyZWF0ZWREYXRlOiAnMjAxNC0wMi0xNCAxNDoxNDoxNCdcbiAgfSxcbiAge1xuICAgIGlkOiAnNCcsXG4gICAgbmFtZTogJ1RHQuenkeaKgFlY5YWs5Y+4JyxcbiAgICBjaXR5OiAn6b6Z5bKpJyxcbiAgICBlbXBsb3llZXM6IDM2MCxcbiAgICBjcmVhdGVkRGF0ZTogJzIwMTMtMDEtMTMgMTM6MTM6MTMnXG4gIH0sXG4gIHtcbiAgICBpZDogJzUnLFxuICAgIG5hbWU6ICdZSE7np5HmioBZWOWFrOWPuCcsXG4gICAgY2l0eTogJ+mftuWFsycsXG4gICAgZW1wbG95ZWVzOiA4MTAsXG4gICAgY3JlYXRlZERhdGU6ICcyMDEyLTEyLTEyIDEyOjEyOjEyJ1xuICB9LFxuICB7XG4gICAgaWQ6ICc2JyxcbiAgICBuYW1lOiAnV1NY56eR5oqAWVjlhazlj7gnLFxuICAgIGNpdHk6ICfpu4TlhognLFxuICAgIGVtcGxveWVlczogODAwLFxuICAgIGNyZWF0ZWREYXRlOiAnMjAxMS0xMS0xMSAxMToxMToxMSdcbiAgfSxcbiAge1xuICAgIGlkOiAnNycsXG4gICAgbmFtZTogJ0tCR+eJqeS4mllY5YWs5Y+4JyxcbiAgICBjaXR5OiAn6LWk5aOBJyxcbiAgICBlbXBsb3llZXM6IDQwMCxcbiAgICBjcmVhdGVkRGF0ZTogJzIwMTYtMDQtMzAgMjM6NTY6MDAnXG4gIH0sXG4gIHtcbiAgICBpZDogJzgnLFxuICAgIG5hbWU6ICfmt7HlnLPluILnpo/lvrflrp3nvZHnu5zmioDmnK9ZWOWFrOWPuCcsXG4gICAgY2l0eTogJ+WOpumXqCcsXG4gICAgZW1wbG95ZWVzOiA1NDAsXG4gICAgY3JlYXRlZERhdGU6ICcyMDE2LTA2LTAzIDEzOjUzOjI1J1xuICB9XG5dKVxuXG5mdW5jdGlvbiB0b29sYmFyQnV0dG9uQ2xpY2tFdmVudCh7IGNvZGUsICRncmlkIH0pIHtcbiAgc3dpdGNoIChjb2RlKSB7XG4gICAgY2FzZSAnY2xlYXJTb3J0Jzoge1xuICAgICAgJGdyaWQuY2xlYXJTb3J0KClcbiAgICAgIGJyZWFrXG4gICAgfVxuICB9XG59XG48L3NjcmlwdD5cbiIsIl9vIjp7fX0=)

Clone this wiki locally