vue-tips

最新推荐文章于 2024-01-23 17:11:36 发布

南宫梦沉

最新推荐文章于 2024-01-23 17:11:36 发布

阅读量418

点赞数 1

分类专栏： vue 文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_37823003/article/details/127485946

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.监听dom元素的宽高度变化来设置其他dom元素的宽高
npm install element-resize-detector

mounted(){
    // 直接导入使用，也可以在main.js中引入
    //elementResizeDetectorMaker，该全局函数是使元素调整大小检测器实例的maker函数。
    var elementResizeDetectorMaker = require("element-resize-detector")
    // 创建实例，无参数
    var erd = elementResizeDetectorMaker();//使用默认选项（将使用基于对象的方法）。
    // 创建实例带参数
    // 使用基于超快速滚动的方法。
    // 这是推荐的策略。
    var erdUltraFast = elementResizeDetectorMaker({
      strategy: "scroll",
      callOnAdd: true,  //callOnAdd选项，用于确定在添加侦听器时是否应调用它们。默认为true。
      //如果为true，则确保在添加侦听器后将对其进行调用。如果为false，则在添加侦听器时将不保证其
      //被调用（不会阻止其被调用）
      debug: true
    });
    //监听class为staticNextMain的元素 大小变化
    var self = this
    //侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
    //覆盖实例选项
    erd.listenTo(document.getElementById("roleTable"), function(element) {
      this.$nextTick(function () {
        let width = element.offsetWidth;
        let height = element.offsetHeight;
        let maxHeight = this.tableHeight > height ? this.tableHeight : height;
        this.tableHeight = maxHeight + 'px';
      })
    });
  },

2.将treeselect disable 样式跟elementUI disadble 保持一致

// treeselect disable 时样式调整
.vue-treeselect__placeholder{
  line-height: 26px!important;
  font-size: 14px!important;
}

.vue-treeselect--disabled .vue-treeselect__control{
  background-color: #F5F7FA;
  border-color: #E4E7ED;
  color: #C0C4CC;
  cursor: not-allowed
}

.vue-treeselect--disabled .vue-treeselect__single-value{
  color: #C0C4CC;
}

.vue-treeselect__control {
  height: 36px !important;
  line-height: 36px !important;
  font-size: 14px !important;
  text-indent: 4px !important;
}

.vue-treeselect__placeholder,.vue-treeselect__single-value{
  line-height: 36px;
}