【Vue3+Vite+TS】3.0 组件二：图标选择器

Posted 2023-05-01

参考技术A 图标选择器将用到以下几个组件：
Icon 图标
Button 按钮
Message 消息提示
Dialog 对话框

修改路由src\router\index.ts

新建src\views\chooseIcon\index.vue

新增src\components\baseline\chooseIcon\src\index.vue

输入地址 http://localhost:8080/chooseIcon

效果如下：

优化css属性：
修改src\components\baseline\chooseIcon\src\index.vue

现在的效果是可以不停向下滚动，优化成页内滚动，方式如下：
新建src\style\ui.scss

修改src\style\index.scss

修改src\components\baseline\chooseIcon\src\index.vue

效果如下：

这里/style/index.scss在src\main.ts引入

滚动条还可以再优化一下：
修改src\style\ui.scss

hooks函数都是以use开头。
src\hooks\useCopy\index.ts

修改src\components\baseline\chooseIcon\src\index.vue

功能开发完毕。

Vite打包组件库

参考技术A 去年使用vue3 + TSX封装组件，结果卡在了打包上，直到最近发现，vite提供了tsx的打包插件。

手把手创建Vue3组件库

在 packages/index.ts 中引入相关的组件、工具库、样式。