Element-ui 2.13.2 遇到的问题（Message,Cascader...补充)

一、element-ui 中 Message 的显示时间全局修改

原使用方式

1. 导入全局挂载

import Vue from 'vue'
import { Message } from 'element-ui'
Vue.prototype.$message = Message

2. 使用

// 方式1 调方法
this.$message.success('message~~我成功了') // success,error,warning,info

// 方式2 传对象
this.$message({
    type: 'success',
    message: 'message...',
    duration: 1000,
    showClose: true
})

如果想全局修改 duration 为 1000ms,默认是 3000ms

Vue.prototype.$message = function (msg) { // 传入一个对象
  Message({ ...msg, duration: 1000 })
}

// error success info warning 
Vue.prototype.$message.error = function (msg) {
  return Message.error({
    message: msg,
    duration: 1000
  })
}

二、element ui Cascader 组件选中一级列表

• 默认情况下只能选中二级列表，如何选中一级列表呢？比如选中下图的大家电

在element ui 2.82的文档中对于Cascader组件还有一个属性change-on-select的描述为：“是否允许选择任意一级的选项，默认值为false”,但 2.82版本后就没有了，看下现在的解决方案

1. 一级菜单可以被选中了

<el-cascader
  :options="parentCateList"
  :props="cascaderProps"
  v-model="selectedKeys"
  @change="parentCateChanged()"
  clearable
></el-cascader>

// 级联选择器的属性配置对象
cascaderProps: {
  // 是否严格的遵守父子节点不互相关联，这样就可以让一级菜单也可以被选中了
  checkStrictly: true,
}

2. 出现的问题

• 虽然能选中了但是多了个 radio选框，如何去掉呢？

3. 去掉小圆圈

• 方法1

  /*第一种css方法：使用css将小圆圈变透明然后覆盖在整个文字上方，点击文字的时候其实是在点击小圈圈。*/
  /*以下样式将单选框隐藏，并绝对定位与文字内容一样大小，这样点击时可以点击整行文字*/
  .el-cascader-panel .el-radio{
     position:absolute;
     z-index:10;
     padding:0 10px;
     width:132px;
     height:34px;
     line-height:34px;
  }
  .el-cascader-panel .el-radio__input{
      visibility:hidden;
  }
  .el-cascader-panel .el-input-node__postfix{
      top:10px;
  }
  

  

4. 可是选完后cascader浮层没有自动关闭啊？

• 看了别人说this.$refs.refHandle.dropDownVisible = false; //监听值发生变化就关闭它 这个有用，自己试了怎么都没效果，不知道大神怎么会有效果？？？这里找到办法了再补充