Vue 3 Новые функции: использование модулей CSS в композиции API

Vue.js
Vue 3 Новые функции: использование модулей CSS в композиции API

В недавнем бета-обновлении Vue 3 Composition API обе библиотеки Vue 3 и 3vue-next, или для перехода Vue 2@vue/composition-apiВ библиотеке один обновляется синхронноuseCSSModuleФункции — используются для поддержки синтаксиса модулей CSS в экземплярах Vue с использованием Composition API.

Сначала давайте посмотрим, что такое CSS-модули:

CSS Modules

CSS Modules — это система модульности и компоновки для CSS. vue-loader интегрирует модули CSS в качестве альтернативы эмуляции CSS с ограниченной областью действия.

Включить CSS-модули

Если это проект, созданный с помощью vue cli, эта функция должна быть включена по умолчанию; если проект необходимо включить вручную, установите ее следующим образом:

// webpack.config.js
{
  module: {
    rules: [
      // ... 其它规则省略
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS Modules
              modules: true,
              // 自定义生成的类名
              localIdentName: '[local]_[hash:base64:8]'
            }
          }
        ]
      }
    ]
  }
}

Или используйте с другими препроцессорами:

// webpack.config.js -> module.rules
{
  test: /\.scss$/,
  use: [
    'vue-style-loader',
    {
      loader: 'css-loader',
      options: { modules: true }
    },
    'sass-loader'
  ]
}

затем в компоненте<style>Добавьте функцию модуля в:

<style module>
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
</style>

Доступ к модулям CSS в компонентах

существует<style>После добавления модуля к вышеуказанному вычисляемое свойство с именем $style будет автоматически внедрено в компонент.

<template>
  <div>
    <p :class="$style.red">
      hello red!
    </p>
  </div>
</template>

Поскольку это вычисляемое свойство, синтаксис объект/массив :class также поддерживается:

<template>
  <div>
    <p :class="{ [$style.red]: isRed }">
      Am I red?
    </p>
    <p :class="[$style.red, $style.bold]">
      Red and bold
    </p>
  </div>
</template>

Также доступно через JavaScript:

<script>
export default {
  created () {
    console.log(this.$style.red)
  }
}
</script>

Традиционное использование Vue 2.x

В компоненте API опций:

<template>
  <span :class="$style.span1">hello 111 - {{ text }}</span>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  }
};
</script>

<style lang="scss" module>
.span1 {
  color: red;
  font-size: 50px;
}
</style>

Для компонентов JSX, поскольку нет возможности использовать стили с ограниченной областью действия, CSS-модули являются хорошим выбором:

<script>
export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  render(h) {
    return <span class={this.$style.span1}>hello 222 - {this.text}</span>;
  }
};
</script>

<style lang="scss" module>
.span1 {
  color: blue;
  font-size: 40px;
}
</style>

USECSSModule в Vue 3.x

С введением функции useCSSModule появилось стандартное решение для использования модулей CSS в компонентах API композиции:

<template>
  <span :class="$style.span1">hello 333 - {{ text }}</span>
</template>

<script>
import { useCSSModule } from '@vue/composition-api';

export default {
  props: {
    text: {
      type: String,
      default: ''
    }
  },
  setup(props, context) {
    const $style = useCSSModule();
    return {
      $style
    };
  }
};
</script>

<style lang="scss" module>
.span1 {
  color: green;
  font-size: 30px;
}
</style>

Реализация его исходного кода также очень проста, просто возьмите this.$style:

export const useCSSModule = (name = '$style'): Record<string, string> => {
  const instance = getCurrentInstance()
  if (!instance) {
    __DEV__ && warn(`useCSSModule must be called inside setup()`)
    return EMPTY_OBJ
  }

  const mod = (instance as any)[name]
  if (!mod) {
    __DEV__ &&
      warn(`Current instance does not have CSS module named "${name}".`)
    return EMPTY_OBJ
  }

  return mod as Record<string, string>
}

Пользовательское имя внедрения модулей CSS

Наблюдая за исходным кодом useCSSModule, кажется, что имя модуля CSS может быть чем-то большим, чем просто$style; действительно, в файле .vue может быть определено более одного<style module>, чего можно добиться, установив значение атрибута модуля:

<style module="a">
  /* 注入标识符 a */
</style>

<style module="b">
  /* 注入标识符 b */
</style>


--End--

Посмотреть больше хороших статей о внешнем интерфейсе
Пожалуйста, найдите немного жизни и подпишитесь на публичный номер

Пожалуйста, укажите источник

Категории