教程7 Vue3、Element Plus各种组件案例（TypeScript版本）

Element Plus环境搭建请参考：教程2 Vue3中引入Element Plus

一、Hmtl组件页面效果展示

二、Element Plus组件页面效果

三、参考代码

1、参考代码（TS版本，Element Plus组件）：

<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="400px">
        <el-form
          :inline="true"         
          class="demo-form-inline"
          style="margin-top: 100px; margin-left: 20px"
        >
          <div>
            <el-form-item label="姓名：">
              <el-input v-model="user.name" class="w-50 m-2" placeholder="请输入姓名">
                <template #prefix>
                  <el-icon>
                    <EditPen />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </div>
          <div style="margin-top: 20px">
            <el-form-item label="性别：">
              <el-radio-group v-model="user.gender" size="mini">
                <el-radio v-model="user.gender" label="男" border>男</el-radio>
                <el-radio v-model="user.gender" label="女" border>女</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div style="margin-top: 20px">
            <el-form-item label="籍贯：">
              <el-select v-model="user.nativePlace" style="width: 100px">
                <el-option value="北京">北京</el-option>
                <el-option value="上海">上海</el-option>
                <el-option value="广州">广州</el-option>
                <el-option value="深圳">深圳</el-option>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="生日：">
              <el-date-picker
                v-model="user.birthDate"
                type="date"
                placeholder="请选择您的出生日期"
                :size="size"
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="评分">
              <el-rate
                v-model="user.score"
                allow-half
                :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
                show-text
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="备注">
              <el-input
                v-model="user.remark"
                type="textarea"
                resize="none"
                :rows="5"
                :maxlength="100"
                show-word-limit
                style="width: 300px"
              />
            </el-form-item>
          </div>
          <div>
            <el-form-item label="是否接收站内信">
              <el-switch
                v-model="user.isReceive"
                class="ml-2"
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
              />
            </el-form-item>
          </div>
          <div style="margin-top: 20px">
            <el-form-item>
              <el-button type="warning" round @click="onClick"
                >显示消息框</el-button>
            </el-form-item>
          </div>
        </el-form></el-aside
      >
      <el-main>
        <el-row style="padding-top: 10px">
          <el-tag class="mx-1" effect="dark" round size="large">
            <el-icon>
              <Avatar />
            </el-icon>
            已配置用户信息
          </el-tag>
        </el-row>
        <el-row style="padding-top: 10px">
          <el-tag>姓名：{{ user.name }}</el-tag>
        </el-row>
        <el-row style="padding-top: 10px">
          <el-tag class="ml-2" type="success">性别：{{ user.gender }}</el-tag>
        </el-row>
        <el-row style="padding-top: 10px">
          <el-tag class="ml-2" type="info">心愿：{{ user.wish }}</el-tag
          ><br />
        </el-row>
        <el-row style="padding-top: 10px">
          <el-tag class="ml-2" type="warning">籍贯：{{ user.nativePlace }}</el-tag>
        </el-row>
        <el-row style="padding-top: 10px">
          <el-tag class="ml-2" type="danger">生日：{{ user.birthDate }}</el-tag>
        </el-row>
        <el-row style="padding-top: 10px">
          <el-tag class="ml-2" type="success">备注：{{ user.remark }}</el-tag>
        </el-row>
        <el-row style="padding-top: 10px">
          <el-tag class="ml-2" type="info">评分：{{ user.score }}</el-tag>
        </el-row>
        <el-row style="padding-top: 10px">
          <el-tag class="ml-2" type="warning"
            >是否接收站内信：{{ user.isReceive }}</el-tag
          >
        </el-row>
        <br />
        <el-divider>
          <el-icon><star-filled /></el-icon>
        </el-divider>
        <br />
        <el-row style="padding-top: 10px">
          <el-tag class="mx-1" effect="dark" type="success" round size="large">
            <el-icon>
              <Setting />
            </el-icon>
            插值
          </el-tag>
        </el-row>
        <el-row style="padding-top: 10px">
          <el-tag class="ml-2" type="info">一般函数（获得姓名）：{{ getName() }}</el-tag>
        </el-row>
        <el-row style="padding-top: 10px">
          <el-tag class="ml-2" type="danger"
            >一般函数（获得生日）：{{ getBirthDate() }}</el-tag
          >
        </el-row>
        <el-row style="padding-top: 10px">
          <el-tag class="ml-2" type="info"
            >匿名函数：{{ (() => user.name + "666")() }}</el-tag
          >
        </el-row>
        <el-row style="padding-top: 10px">
          <el-tag class="ml-2" type="warning"
            >对象：{{ { remarkCounter: user.remark.length } }}</el-tag
          >
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from "vue";
const size = ref<'default' | 'large' | 'small'>('default')
const user = reactive({
  // 使用reactive声明对象类型变量，如Object、Array、Date...
  name: "",
  gender: "男",
  wish: ["电脑"],
  nativePlace: "",
  birthDate: "",
  remark: "",
  isReceive: true,
  score: 0,
});

function getBirthDate() {
  var d = new Date(user.birthDate);
  console.log(d);
  var month = d.getMonth() + 1;
  var day = d.getDate();
  var year = d.getFullYear();
  var shortDate = year + "年" + month + "月" + day + "日";
  if (user.birthDate == "") shortDate = "";
  return shortDate;
}

function getName() {
  return "你好，" + user.name;
}

function onClick() {
  alert("Hi，" + user.nativePlace + "人！");
}

// mounted 是生命周期钩子
onMounted(() => {
  console.log(user.gender);
  // 数据属性也可以被更改
  // user.name = "都都";
  user.gender = "女";
  user.nativePlace = "北京";
  user.wish = ["电脑"];
});
</script>

2、参考代码（JS版本，普通Html组件）：

<template>
 <div class="container">
    <h1>用户信息</h1>
    <div>
      <label>姓名：</label>
      <input type="text" name="name" v-model="user.name">
    </div>
    <div>
      <label>性别：</label>
      <input type="radio" name="gender" v-model="user.gender" value="男">男
      <input type="radio" name="gender" v-model="user.gender" value="女">女
    </div>
    <div>
      <label>心愿：</label>
      <input type="checkbox" name="wishi" v-model="user.wish" value="硬盘">硬盘
      <input type="checkbox" name="wishi" v-model="user.wish" value="电脑">电脑
      <input type="checkbox" name="wishi" v-model="user.wish" value="内存">内存
      <input type="checkbox" name="wishi" v-model="user.wish" value="U盘">U盘
    </div>
    <div>
      <label>籍贯：</label>
      <select v-model="user.nativePlace" style="width:100px">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
        <option value="深圳">深圳</option>
      </select>
    </div>
    <div>
      <input type="button" value="显示消息框" @click="onClick">
    </div>
    <br>
    <hr>
    <br>
    <div>
      <h1>已配置用户信息</h1>
      <p>姓名：{{ user.name }}</p>
      <p>性别：{{ user.gender }}</p>
      <p>心愿：{{ user.wish }}</p>
      <p>籍贯：{{ user.nativePlace }}</p>
    </div>
    <br>
    <hr>
    <br>
    <div>
      <h1>插值</h1>
      <p>一般函数：{{ getName() }}</p>
      <p>匿名函数：{{ (() => 13 + 23)() }}</p>
      <p>对象：{{ { counter: 88 } }}</p>
    </div>
  </div>
</template>
<link
  rel="stylesheet"
  href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<script type="text/javascript">
export default {
  data() {
    return {
      user: {
        name: "",
        gender: "男",
        wish: [],
        nativePlace: "",
        birthDate: "",
        remark: "",
        isReceive: true,
        score: 0,
      },
    };
  },
  methods: {
    getBirthDate() {
      var d = new Date(this.user.birthDate);
      console.log(d)
      var month = d.getMonth() + 1
      var day = d.getDate();
      var year = d.getFullYear();
      var shortDate = year + "年" + month + "月" + day + "日";
      if (this.user.birthDate == "")
        shortDate = ""
      return shortDate;
    },
    getName() {
      return "你好，" + this.user.name;
    },
    onClick() {
      alert("Hi，" + this.user.nativePlace + "人！");
    },
  },
  // mounted 是生命周期钩子
  mounted() {
    // this 指向当前组件实例
    console.log(this.user.gender);
    // 数据属性也可以被更改
    // this.user.name = "都都";
    this.user.gender = "女";
    this.user.nativePlace = "北京";
    this.user.wish = ["电脑"];
  },
};
</script>

<style>
* {
  margin: 0px;
  padding: 0px;
  font-size: 16px;
  line-height: 2em;
}

.container {
  width: 100%;
  height: 100%;
}

.item {
  width: 200px;
}

h1 {
  font-size: 24px;
  color: blue;
}

label,
p,
input {
  font-size: 16px;
}

input[type="radio"] {
  font-size: 16px;
}
</style>