总结这几天的前端问题

11111官方文档 = https://element.eleme.cn/#/zh-CN/component/switch

一. switch开关选择

实际使用:

		<el-switch
            v-model="scope.row.changeSchedule"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="是"
            inactive-text="否"
            :active-value="true"
            :inactive-value="false"
            name="changeSchedule"
            @change="toChange(scope.row)">
          </el-switch>

二. loading效果

<el-button type="primary" :loading="true">加载中</el-button>

三. DatePicker 日期选择器

<div class="block">
    <span class="demonstration">月</span>
    <el-date-picker
      v-model="value2"
      type="month"
      placeholder="选择月">
    </el-date-picker>
  </div>

四. form表单

<el-form-item label="占任务权重" prop="weight" style="width: 40%;">
    <el-input v-model="data.weight" placeholder="权重比(%)" clearable />
</el-form-item>

设置这个框格的宽度:
style="width: 40%;

设置校验格式:

		{
           pattern: /^100$|^(\d|[1-9]\d)$/,
           message: '请输入(0-100)整数',
           trigger: 'blur'
        }

五. 百分比内显

<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>

六. alter警告提示文案样式

<template>
  <el-alert
    title="成功提示的文案"
    type="success">
  </el-alert>
</template>

七.消息提示

<template>
	<el-button :plain="true" @click="open">打开消息提示</el-button>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$message('这是一条消息提示');
      }
   }
 }
</script>

八.模态框(写的最多,最需要)

写子组件
先在父组件里面定义子组件的部分,将子组件注册进来
再写子组件的具体实现和展示要求.
触发事件时候弹出子组件,并将父组件的数据带到子组件中去.

前端.好难啊.一入前端深似海.