<script setup>
// ① 引入这个文件用到的组件（组件名就是 el-xxx 的大驼峰写法）
import { ElButton, ElInput, ElDatePicker } from 'element-plus'
// ② 引入样式（本课程放在每个文件里，保证单独粘贴即可运行）
import 'element-plus/dist/index.css'
</script>

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

<script setup>
import { ref } from 'vue'
import { ElConfigProvider, ElButton, ElPagination } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
import 'element-plus/dist/index.css'

const size = ref('default')
const locale = ref(zhCn)
</script>

<template>
  <el-config-provider :size="size" :locale="locale">
    <el-button>按钮会跟着尺寸变</el-button>
    <el-pagination :total="100" layout="total, prev, pager, next" />
  </el-config-provider>
</template>

<script setup>
import { ref, computed } from 'vue'
import {
  ElConfigProvider, ElCard, ElRow, ElCol, ElRadioGroup, ElRadioButton,
  ElButton, ElButtonGroup, ElInput, ElSelect, ElOption, ElDatePicker,
  ElPagination, ElSwitch, ElTag, ElDivider, ElAlert, ElSpace,
  ElMessage, ElNotification, ElMessageBox
} from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
import 'element-plus/dist/index.css'

// 全局默认尺寸与语言
const size = ref('default')       // large | default | small
const lang = ref('zh')            // zh | en
const locale = computed(() => (lang.value === 'zh' ? zhCn : en))

// 受控数据
const kw = ref('')
const city = ref('')
const date = ref('')
const page = ref(1)
const autoRefresh = ref(true)

function hello() {
  ElMessage.success(lang.value === 'zh' ? '你好，Element Plus！' : 'Hello, Element Plus!')
}
function notify() {
  ElNotification({
    title: lang.value === 'zh' ? '通知标题' : 'Notification',
    message: lang.value === 'zh' ? '这是一条右上角通知' : 'This is a notification',
    type: 'success'
  })
}
function confirm() {
  ElMessageBox.confirm(
    lang.value === 'zh' ? '确定要执行这个操作吗？' : 'Are you sure?',
    lang.value === 'zh' ? '提示' : 'Tip',
    { type: 'warning' }
  ).then(() => ElMessage.info(lang.value === 'zh' ? '已确认' : 'Confirmed'))
   .catch(() => ElMessage.info(lang.value === 'zh' ? '已取消' : 'Cancelled'))
}
</script>

<template>
  <!-- ElConfigProvider 包住全部内容：里面的组件都继承这里的默认设置 -->
  <el-config-provider :size="size" :locale="locale">
    <div class="page">
      <h1 class="title">Element Plus 能力检查页</h1>

      <el-card class="block">
        <template #header>全局配置（改这里，整页跟着变）</template>
        <div class="bar">
          <span class="label">默认尺寸：</span>
          <el-radio-group v-model="size">
            <el-radio-button value="large">large</el-radio-button>
            <el-radio-button value="default">default</el-radio-button>
            <el-radio-button value="small">small</el-radio-button>
          </el-radio-group>

          <span class="label">界面语言：</span>
          <el-radio-group v-model="lang">
            <el-radio-button value="zh">中文</el-radio-button>
            <el-radio-button value="en">English</el-radio-button>
          </el-radio-group>
        </div>
        <el-alert
          title="注意：下面凡是自己写了 size 属性的组件，不会被全局尺寸覆盖（就近优先）。"
          type="info" :closable="false" show-icon style="margin-top: 12px"
        />
      </el-card>

      <el-row :gutter="16">
        <el-col :span="12">
          <el-card class="block">
            <template #header>基础组件</template>

            <p class="label">按钮（含按钮组）</p>
            <el-space wrap>
              <el-button type="primary">主要按钮</el-button>
              <el-button>普通按钮</el-button>
              <el-button type="success" plain>成功</el-button>
              <el-button type="danger" disabled>禁用</el-button>
              <el-button size="large">我显式写了 large</el-button>
            </el-space>

            <el-divider />

            <p class="label">输入框 / 下拉 / 日期</p>
            <el-space direction="vertical" fill style="width: 100%">
              <el-input v-model="kw" placeholder="请输入关键字" clearable />
              <el-select v-model="city" placeholder="请选择城市" style="width: 100%">
                <el-option label="北京" value="bj" />
                <el-option label="上海" value="sh" />
                <el-option label="广州" value="gz" />
              </el-select>
              <el-date-picker v-model="date" type="date" placeholder="选择日期" style="width: 100%" />
            </el-space>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="block">
            <template #header>反馈类组件（文字会跟着语言变）</template>

            <el-space wrap>
              <el-button type="primary" @click="hello">消息提示 Message</el-button>
              <el-button @click="notify">通知 Notification</el-button>
              <el-button @click="confirm">确认框 MessageBox</el-button>
            </el-space>

            <el-divider />

            <p class="label">分页（“共 N 条”会随语言变化）</p>
            <el-pagination
              v-model:current-page="page"
              :total="268"
              :page-size="20"
              layout="total, prev, pager, next, jumper"
              background
            />

            <el-divider />

            <p class="label">其他</p>
            <el-space wrap>
              <el-switch v-model="autoRefresh" active-text="自动刷新" />
              <el-tag type="success">标签</el-tag>
              <el-tag type="warning" effect="dark">深色标签</el-tag>
              <el-tag type="info" closable>可关闭</el-tag>
            </el-space>
          </el-card>
        </el-col>
      </el-row>

      <el-card class="block">
        <template #header>当前状态（自查用）</template>
        <p>默认尺寸：<code>{{ size }}</code>　语言：<code>{{ lang }}</code></p>
        <p>关键字：<code>{{ kw || '（空）' }}</code>　城市：<code>{{ city || '（未选）' }}</code>　日期：<code>{{ date || '（未选）' }}</code></p>
        <p>当前页：<code>{{ page }}</code>　自动刷新：<code>{{ autoRefresh }}</code></p>
      </el-card>
    </div>
  </el-config-provider>
</template>

<style>
html, body, #app {
  margin: 0; padding: 0; max-width: none; width: auto; height: auto;
  display: block; place-items: initial; text-align: left; background: #f5f7fa;
}
</style>

<style scoped>
.page { max-width: 1100px; margin: 28px auto; padding: 0 16px; }
.title { font-size: 22px; color: #303133; margin: 0 0 18px; }
.block { margin-bottom: 16px; }
.bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.label { color: #606266; font-size: 13px; margin: 0 0 8px; }
code { background: #f0f2f5; padding: 1px 5px; border-radius: 4px; color: #c7254e; }
</style>

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

npm install element-plus

<script setup>
import { ElButton } from 'element-plus'
import 'element-plus/dist/index.css'
</script>

<template>
  <el-button type="primary">我是一个组件库按钮</el-button>
</template>

<script setup>
import { ref } from 'vue'
import { ElConfigProvider, ElButton } from 'element-plus'
import 'element-plus/dist/index.css'
const size = ref('large')
</script>

<template>
  <el-config-provider :size="size">
    <el-button>跟着变</el-button>
    <el-button size="small">不跟着变（我自己写了）</el-button>
  </el-config-provider>
</template>