Config Provider

Config Provider (전역 설정 제공자)

출처: 문서

본문

Config Provider

Config Provider는 전역 설정을 제공하는 데 사용돼요. 이를 통해 전체 애플리케이션이 모든 곳에서 이 설정에 접근할 수 있게 돼요.

i18n 설정

Config Provider를 통해 i18n 관련 속성을 설정해서 언어 전환 기능을 사용할 수 있어요. i18n 관련 설정을 제공하는 두 가지 속성을 사용해요.

import { computed, ref } from 'vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'

const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : en))

const toggle = () => {
  language.value = language.value === 'zh-cn' ? 'en' : 'zh-cn'
}

Button 설정

import { reactive } from 'vue'
import { buttonTypes } from 'element-plus'

import type { ButtonConfigContext } from 'element-plus'

const config = reactive({
  autoInsertSpace: true,
  type: 'default',
  plain: true,
  round: true,
  text: false,
  dashed: false,
})

Link 설정 2.9.11

import { reactive } from 'vue'

import type { LinkConfigContext } from 'element-plus'

const linkTypes = ['primary', 'success', 'warning', 'info', 'danger', 'default']
const underlineOptions = ['always', 'never', 'hover']

const config = reactive({
  type: 'success',
  underline: 'always',
})

Card 설정 2.10.5

Dialog 설정 2.10.7

/* Bounce Animation */
.dialog-bounce-enter-active,
.dialog-bounce-leave-active,
.dialog-bounce-enter-active .el-dialog,
.dialog-bounce-leave-active .el-dialog {
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dialog-bounce-enter-from,
.dialog-bounce-leave-to {
  opacity: 0;
}

.dialog-bounce-enter-from .el-dialog,
.dialog-bounce-leave-to .el-dialog {
  transform: scale(0.3) translateY(-50px);
  opacity: 0;
}

Message 설정

import { reactive } from 'vue'
import { ElMessage } from 'element-plus'

const config = reactive({
  max: 3,
  plain: true,
  placement: 'bottom',
})

const open = () => {
  ElMessage('This is a message from bottom.')
}

Empty Values 설정 2.7.0

지원되는 컴포넌트 목록

• Cascader
• ColorPicker 2.10.3
• DatePicker
• Select
• SelectV2
• TimePicker
• TimeSelect
• TreeSelect

empty-values를 설정해서 컴포넌트의 빈 값을 지원해요. 폴백 값은 ['', null, undefined]예요. 빈 문자열이 의미 있는 값이라면 [undefined, null]로 작성해요. value-on-clear를 설정해서 클리어했을 때의 반환 값을 설정해요. 폴백 값은 undefined예요. date 컴포넌트에서는 null이에요. undefined로 설정하고 싶다면 () => undefined를 사용해요.

import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const value1 = ref('')
const value2 = ref('')
const options = [
  {
    value: '',
    label: 'All',
  },
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

const handleChange = (value) => {
  if ([undefined, null].includes(value)) {
    ElMessage.info(`The clear value is: ${value}`)
  }
}

Table 설정 2.13.3

import { reactive } from 'vue'

import type { TableConfigContext } from 'element-plus'

const config = reactive({
  showOverflowTooltip: true,
  tooltipEffect: 'dark',
})

interface User {
  date: string
  name: string
  address: string
}

const tableData: User[] = [
  {
    date: '2016-05-04',
    name: 'Aleyna Kutzner',
    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
  },
  {
    date: '2016-05-03',
    name: 'Helen Jacobi',
    address: '760 A Street, South Frankfield, Illinois',
  },
  {
    date: '2016-05-02',
    name: 'Brandon Deckert',
    address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
  },
  {
    date: '2016-05-01',
    name: 'Margie Smith',
    address: '23618 Windsor Drive, West Ricardoview, Idaho',
  },
]

실험적 기능

이 섹션에서는 Config Provider를 사용해서 실험적 기능을 제공하는 방법을 배울 수 있어요. 현재는 추가된 실험적 기능이 없지만, 기능 로드맵에서는 몇 가지 실험적 기능을 추가할 계획이에요. 이 설정을 사용해서 원하는 기능을 관리할 수 있어요.

API

Config Provider Attributes

Button Attribute

Link Attribute

Card Attribute

Dialog Attribute

Message Attribute

Table Attribute 2.13.3

Config Provider Slots

더 알아보기 (Learn more)