2022/07/08 vue3组件封装，根据props参数动态修改css值

背景
vue3项目中想封装一个button组件，能够通过变量控制颜色，圆角

难点
不知道怎么在css中使用变量

实现效果

解决方法
主要是css中用v-bind

官方用法
https://v3.cn.vuejs.org/guide/class-and-style.html#%E7%BB%91%E5%AE%9A-html-class
写的是直接在样式上绑定，而不是在下面整个的style样式中修改（至于为什么在style标签内能够直接修改不清楚原理）

思路一：多些几个不同样式的class名，然后动态切换绑定的class名，但我这个组件封装样式都差不多，只有颜色和圆角修改了，不想写太多重复的样式

思路二：直接修改变量的信息，然后样式共用一个class类名

调用
穿参即可

参考链接
1.vue3中css使用data中的变量
https://blog.youkuaiyun.com/weixin_45892086/article/details/114830902

2.怎么在vue的style标签里面使用变量？
思考启发
https://segmentfault.com/q/1010000015375955