element-ui

 

关于弹窗和消息提示的单独引用

  • main.js中
//   Message的引用
import { Message} from "element-ui"
Message.install = function (Vue, options) {
  Vue.prototype.$message = Message
  Vue.use(Message)
}
// MessageBox的引用
import { MessageBox } from "element-ui"
Vue.prototype.$messageBox = MessageBox
// MessageBox的使用
this.$messageBox.confirm('确定要退出注册嘛?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        lockScroll: false // 用于处理点击后右边会出现body的右内边距
      }).then(() => {
        this.$message({
          type: 'success',
          message: '已退出!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
// 全局引用对比
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {。。。}

对于表单的数据不清空

resetFields : 对整个表单进行重置,将所有字段值重置为初始值并移除校验结果

elementUi提供了resetFields方法,此方法仅将数据初始化,并不是将数据清空 当数据原本是空值时,才有可能将其清空,只是有可能,因为各种原因,导致其初始值并不为空(数据处为空,但是有些方法或者缓存什么的遗留了值)此时便不具备清空的作用了。

表单初始化(不是清空)

表单要加入:rules="rules"(表单验证项)且仅对有 prop="checkPass"的进行重置

表单的输入框的长度是自适应,不要定死