codecamp

ElementPlus Config Provider

Config Provider 被用来提供全局的配置选项,让你的配置能够在全局都能够被访问到,Config Provider 使用了 Vue 的 provide/inject 特性

<template>
  <el-config-provider :locale="locale">
    <app />
  </el-config-provider>
</template>

<script>
  import { defineComponent } from 'vue'
  import { ElConfigProvider } from 'element-plus'

  import zhCn from 'element-plus/lib/locale/lang/zh-cn'

  export default defineComponent({
    components: {
      ElConfigProvider,
    },
    setup() {
      return {
        locale: zhCn,
      }
    },
  })
</script>

代码演示

<template>
  <div>
  <el-config-provider :locale="locale1">
    <div style="margin: 8px;">
      <el-empty />
    </div>
    <div style="margin: 8px;">
      <el-transfer />
    </div>
  </el-config-provider>
  <el-button @click="toggle" style="margin-left: 8px; vertical-align: middle;">
    切换语言
  </el-button>
</div>
</template>

<script>
  import { ref } from 'vue'
  // import { ConfigProvider } from 'element-plus'
  export default {
    setup() {
      const locale1 = ref({
        name: 'zh-cn',
        el: {
          table: {
            emptyText: '无数据',
          },
          transfer: {
            titles: ['列表1', '列表2'],
            noData: '无数据',
          },
        },
      })
      const locale2 = ref({
        name: 'en',
        el: {
          table: {
            emptyText: 'no data',
          },
          transfer: {
            titles: ['list 1', 'list 2'],
            noData: 'no data',
          },
        },
      })
      const toggle = () => {
        const temp = locale1.value
        locale1.value = locale2.value
        locale2.value = temp
      }
      return {
        locale1,
        locale2,
        toggle,
      }
    },
  }
</script>

ConfigProvider 属性

参数说明类型可选值默认值
locale翻译文本对象Object<Language>languagesEnglish


ElementPlus Scrollbar 滚动条
ElementPlus Radio 单选框
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ElementPlus 配置

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }