doc

多次尝试后的收获

上一篇提到的vue-styled-components, 尝试了下, 发现它’侵入性’较大, 基本上可以改变vue官方提供的编写css的方式, 我还是想找个’小巧’一点的库

aphrodite和color库的结合

两个关注量数千的库, 感觉就是好些, 为了保证vue模板的简洁性, 我尝试了一些封装, 一定要尽量简洁, 为了UI而写大量冗余代码, 那后面的业务就更加困难了.

Using a Plugin

本次我学习了vue的插件功能, 为Vue添加全局功能

用法灵活, 在vue模板中表现简洁

<div class="input" :class="css('input')"/>
<div class="input" :class="css('input', conditionally && 'input2')"/>
<div class="input" :class="css(['input', 'input2'])"/>

// 每个页面得引入封装后的styled函数, 后面可能尝试使用插件, 添加全局功能, 减少导入.
import styled, { color } from '@/utils/styled';
const css = styled(({
  theme,
  modeColor,
}) => ({
  
  input: {
    color: modeColor('#333'), // 开启夜间模式后, 颜色自动反转
    'border-color': modeColor('#ddd'),
    'caret-color': theme, // 全局的主题色
    ':focus': {   // 轻松解决上篇提过的不能解决 pseudo class 的问题
      'border-color': theme,
    },
  },
}));