基础组件总结（以Element UI组件库为例）

一般对一个组件的使用方式：

每一个组件都有被绑定的数据，

（1）首先会对组件的数据初始化（a.data中赋初值 b. 在生命周期函数created或mounted中为变量赋予初值）

（2）由于不同组件的操作方式，会改变组件绑定的数据值

（3）调用接口，将数据作为参数传递给后端，以完成前后端交互。

日期组件

 <el-date-picker
      v-model="value1"
      value-format="yyyy"
      type="year"
      :picker-options="pickerOptions"
      placeholder="请选择年度">
    </el-date-picker>

v-model双向绑定日期字符串

value-format限定绑定的日期字符串的格式

picker-options绑定对象，对象中是一个方法，方法返回日期组件可选择范围不可以被选择的日期范围（此处由于需要引用data选项中的变量，采用计算属性）

 computed: {
    pickerOptions() {
      const _this = this
      return {
        disabledDate(time) {
          //读取到data中currentYear，并定义变量设置下一年
          const NextYear = Number(_this.currentYear) + 1
          // 当前日期组件只可以选择今年和明年的日期范围
          return (time.getTime() > new Date(NextYear + '-12-31').getTime() ||
        time.getTime() < new Date(_this.currentYear + '-01-01').getTime())
        }
      }
    }
  },

value-format

由于日期由一个字符串表示，我们也可以对字符串进一步操作，筛选出年，月，日

涉及到日期的有Date对象和dayjs包

Date对象

Date对象可以用于获取当前日期

let date = new Date();  //获取当前日期
console.log(date.getFullYear()); //年 
console.log(date.getMonth() + 1); //由于月份是0-11计算 所以需要 +1 （获取当前日期的月份）
console.log(date.getDate()); // 日
console.log(date.getDay()); // 星期几  注意：星期日返回的是0
console.log(date.getHours()); // 时
console.log(date.getMinutes()); // 分
console.log(date.getSeconds()); // 秒

还可以通过年月日+时分秒+毫秒构造一个date。注意月份的范围是0-11。

new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

（参考：JavaScript Date（日期）对象 | 菜鸟教程）

var d = new Date(2023,1,31,23,59,59,999);//Tue Jan 31 2022 23:59:59 GMT+0800
var year = d.getFullYear();//2023
var month = d.getMonth();//0 
var day = d.getDate();//31
var hours = d.getHours();//23
var minutes = d.getMinutes();//59
var seconds = d.getSeconds();//59
var mills = d.getMilliseconds();//999

得到number类型，我们可以将它转化成字符串

let date = new Date();  //获取当前日期
console.log(date.getFullYear().toString()); //年 
console.log((date.getMonth() + 1).toString()); //由于月份是0-11计算 所以需要 +1 （获取当前日期的月份）
console.log(date.getDate().toString()); // 日
console.log(date.getDay().toString()); // 星期几  注意：星期日返回的是0
console.log(date.getHours().toString()); // 时
console.log(date.getMinutes().toString()); // 分
console.log(date.getSeconds().toString()); // 秒

我们想要把日期字符串进一步规范格式化，用填充元素填充字符串

• padStart 从原字符串左侧开始填充
• padEnd 从原字符串右侧开始填充

连接成字符串输出出来

console.log(date.getFullYear().toString()+'-'+(date.getMonth() + 1).toString().padStart(2,0)+'-'+date.getDate().toString().padStart(2,0))

通过上述方法，可以将日期Date对象转化为字符串。

下面讲述将字符串转化成Date对象

const str = '2022-06-15';
const date = new Date(str);
console.log(date.getFullYear()); // 2022
console.log(date.getMonth()); // 5,这里月份范围是0-11，因此需要减一
console.log(date.getDate()); // 15
console.log(date); // 2022-06-15T00:00:00.000Z

采用dayjs对象，

（参考：dayjs-入门及常用方法 - 掘金）

dayjs对象可以转化成日期Date对象

dayjs('2019-01-25').toDate()

dayjs可以方便地获取某个周期的第一天，并进行字符串的format格式化

（参考：https://www.cnblogs.com/Airon-wei/p/14362160.html）

dayjs().startOf('month').format('YYYY-MM-DD')

下拉菜单Select选择器

<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

el-select中嵌套有el-option，以v-for的形式遍历出所有选项（每个选项主要分为label显示值和value值）

el-select中v-model双向绑定的值对应el-option的value绑定值

表格table组件

<el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

el-table中的data属性绑定对象数组

每一列el-table-column采用prop属性对应数组的字段名

表单组件el-form

(例1：此处采用小兔鲜vue3电商实战里面的例子)

            <el-form ref="formRef" :model="form" :rules="rules" label-position="right" label-width="60px"
              status-icon>
              <el-form-item prop="account"  label="账户">
                <el-input v-model="form.account"/>
              </el-form-item>
              <el-form-item prop="password" label="密码">
                <el-input v-model="form.password"/>
              </el-form-item>
              <el-form-item prop="agree" label-width="22px">
                <el-checkbox  size="large" v-model="form.agree">
                  我已同意隐私条款和服务条款
                </el-checkbox>
              </el-form-item>
              <el-button size="large" class="subBtn" @click="doLogin">点击登录</el-button>
            </el-form>

规则对象rules

// 2.准备规则对象
const rules = {
    account: [
        {required: true, message: '用户名不能为空', trigger: 'blur'}
    ],
    password: [
        {required: true, message: '密码不能为空', trigger: 'blur'},
        {min: 6, max: 14,  message: '密码长度为6-14个字符', trigger: 'blur'}
    ],
    agree: [
        {
            // 当默认的配置不足以支撑需求，采用自定义校验规则
            validator: (rule, value, callback) => {
                // callback不论成功还是失败，都需要执行
                console.log(value)
                // 自定义校验逻辑
                // 勾选就通过 不勾选就不通过
                if(value) {
                    callback()
                }else{
                    callback(new Error('请勾选协议'))
                }
            }
        }
    ]
}

注意：el-form-item 的prop属性值和内置组件的v-model值相同，否则校验规则会不起效。（疑问？）

例2：element UI中的活动表单组件

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="活动名称" prop="name">
    <el-input v-model="ruleForm.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域" prop="region">
    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质" prop="type">
    <el-checkbox-group v-model="ruleForm.type">
      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源" prop="resource">
    <el-radio-group v-model="ruleForm.resource">
      <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
    <el-button @click="resetForm('ruleForm')">重置</el-button>
  </el-form-item>
</el-form>

<script>
  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

el-input输入框

v-model双向绑定输入框的值

<el-input v-model="input" placeholder="请输入内容"></el-input>

<script>
export default {
  data() {
    return {
      input: ''
    }
  }
}
</script>

el-button按钮

<el-button type="primary">主要按钮</el-button>

Layout布局组件分栏el-row el-col

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

注意：Row 组件 提供 gutter 属性来指定每一栏之间的间隔，默认间隔为 0。

col组件：通过基础的 24 分栏，迅速简便地创建布局。