Vue 隐藏后再显示出来控件不显示

Posted 2023-04-22

参考技术A 控件不显示可能的原因是：
1、frame属性，是否为0，或者设置的位置不对。在开发中，特别是在自定义某些控件的属性的时候，对于控件的frame如果没有设置，或者设置错误了，控件肯定是不会显示正常的,所以当你遇到控件显示不正常的时候，第一个需要思考的就是控件本身的frame属性是否正常。
2、hidden =YES。多数情况下，我们需要对控件的hidden属性，也就是是否隐藏，作一些自定义，所以，如果你检查了frame属性，确定是对的，但是控件还是不能显示，那么你可以来考虑一下是不是在某个时刻我们对这个控件的hidden属性做了设置；
3、是否添加到了父控件中。还有一种情况，那就是，当我们需要把某个控件添加到一个父容器(父控件)中才会显示的时候，如果忘记了添加的步骤，也是不会显示控件的，所以这个时候不妨来检查一下这个方面。
4、Alpha <= 0.01。通过苹果的官方文档，我们知道，当一个控件的透明度大于>0.01的时候，是可以监听事件的，否则(<=0.01)，是无法监听事件的，所以，如果Alpha<= 0.01。系统就认为这个控件不存在，此时不能监听事件，当然，也就在运行的是无法查看到控件了。
5、被其他控件挡住了。控件与控件之间都是有先后层叠次序的，如果我们需要显示的控件被其他控件给挡住了，那肯定是看不到控件的显示的，也就是我们常说的：后添加的控件默认是添加在最上层的；这个时候，我们可以去检查一下控件的层叠次序。

Vue（26）el-tree树形控件实现鼠标hover显示与隐藏

实现效果与原理

我们希望实现鼠标移动至树型结构的结点上就显示按钮，移出就隐藏按钮
 
实现原理：是通过@mouseenter 和 @mouseleave两个属性来控制鼠标hover的效果，再配合v-show来控制是否展示你需要的控件

 

具体代码

<el-tree
  :data="data"
  ref="tree"
  default-expand-all
  node-key="id"
  :expand-on-click-node="false">
  <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)">
    <span>{{ node.label }}</span>
    <span>
      <el-tooltip v-show="data.show" class="item" effect="dark" content="文字提示" placement="top">
        <el-button
          type="text"
          size="mini"
          @click="() => append(data)"
          icon="el-icon-plus"
        >
        </el-button>
      </el-tooltip>
      <el-dropdown v-show="data.show" @command="handleCommand">
        <span class="el-dropdown-link">
          <i class="el-icon-more"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="addFolder">新增文件夹</el-dropdown-item>
          <el-dropdown-item command="edit">编辑</el-dropdown-item>
          <el-dropdown-item command="delete">删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </span>
  </span>
</el-tree>
<script>
export default {
  data() {
    const data = [{
      id: 1,
      label: \'一级 1\',
      children: [{
        id: 4,
        label: \'二级 1-1\',
      }]
    }, {
      id: 2,
      label: \'一级 2\',
      children: [{
        id: 5,
        label: \'二级 2-1\',
      }, {
        id: 6,
        label: \'二级 2-2\',
      }]
    }, {
      id: 3,
      label: \'一级 3\',
      children: [{
        id: 7,
        label: \'二级 3-1\',
      }, {
        id: 8,
        label: \'二级 3-2\',
      }]
    }]
    return {
      defaultProps: {
        children: \'children\',
        label: \'label\'
      },
      data: JSON.parse(JSON.stringify(data))
    }
  },
  methods: {
    mouseenter(data) {
      this.$set(data, \'show\', true)
    },
    mouseleave(data) {
      this.$set(data, \'show\', false)
    },
  }
}
</script>