element-ui消息组件

目录

一、elementUI的消息组件

1、MessageBox 弹框：是模态框

2、Message 消息提示：非模态框，常用于主动操作后的反馈提示。

3、Notification 通知

二、Form表单：

1、基本结构

 2、表单控件

三、Dialog组件

1、使用方法

一、elementUI的消息组件

1、MessageBox 弹框：是模态框

​ （1）消息提示：当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。

​ this.$alert（’消息框的内容’，’消息框的标题’，{

                ​ confirmButtonText ：’按钮上的文本’，

                ​ callback: ()=>{ } // 回调函数，当用户单击按钮时触发

        ​ }）

（2）确认消息：提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框

        ​ this.$confirm（’消息内容’，’标题’，{

                        ​ confirmButtonText: ‘确定’，

                        ​ cancelButtonText: ‘取消’，

                        ​ type: ‘消息框的类型’ // （sucess、warning、info、error）

                ​ }）.then(()=>{ }) //用户单击’确定’按钮后的操作代码

                     ​ .catch(()=>{}) //用户单击’取消’按钮后的操作

​ （3）引入MessageBox进行消息的提示

        ​ MessageBox.confirm（’消息内容’，{

                        ​ title：’消息框的标题’，

                        ​ confirmButtonText: ‘确定’，

                        ​ cancelButtonText: ‘取消’，

                        ​ type: ‘消息框的类型’ ， // （success、warning、info、error）

               ​ callback: function(){ } //单击确定按钮后的操作

        ​ }）

2、Message 消息提示：非模态框，常用于主动操作后的反馈提示。

        ​ this.$message（{

                        ​ showClose：true，//是否显示关闭按钮

                        ​ message：’内容’,

                        ​ type: ‘消息框的类型’， // sucess、warning、info、error，默认类型是info

                        ​ duration：停留时间 //单位是毫秒，默认是3000毫秒

         }）

3、Notification 通知

悬浮出现在页面角落，显示全局的通知提醒消息。

二、Form表单：

1、基本结构

        <el-form ref="" :model="" rules="">

                <el-form-item label="">

                        表单控件

                </el-form-item>

        </el-form>
//"ref"：表示表单的别名，用于在js中定位form(this.$refs['ref属性值'])
//"rules"：用于定义表单控件的验证规则
//:model：用于绑定form，绑定后表单就是一个对象

//表单验证的语法：
        this.$refs["formName"].validate((valide)=>{

                if(valide){

                        验证通过的操作

                }else{

                        return false

                }

        })

//表单重置的语法：
        this.$refs["formName"].resetFields()

//表单内部控件的宽度设置
<el-col :span="栏数">
    <el-input style="width:100%">
</el-col>

 2、表单控件

​ （1）单行文本框

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

​ （2）密码框

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

​ （3）带图标的文本框

<el-input v-model="input" placeholder="请输入内容" ></el-input>
“suffix-icon”：表示在右边放置图标
“prefix-icon”：表示在左边放置图标

​ （4）文本域

<el-input type="textarea" v-model="textarea" :row="行数" placeholder="请输入内容" ></el-input>

​ （5）开关：表示两种状态的切换

<el-switch
  v-model="value"
  active-color="#13ce66" //活动时的颜色
  inactive-color="#ff4949"> // 关闭时的颜色
</el-switch>

​ （6）复选框组和复选框

<el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
 </el-checkbox-group>

​ （7）单选框组和单选按钮

<el-radio-group v-model="radio">
   <el-radio label=""></el-radio> //普通单选按钮
   <el-radio-button></el-radio-button> //单选按钮
</el-radio-group>

三、Dialog组件

1、使用方法

//对话框关闭之前
这是一段信息

@click="dialogVisible = false">取 消
@click="dialogVisible = false">确 定