【项目实践-03】实验室PC

透传属性

透传属性指组件在使用的时候,作用在组件上的属性,会被向下流动,绑定到组件内的标签中。

可以透传的属性:style,class,id,属性,事件

当一个组件有多个根标签节点时,那么这个组件就不会有自动透传绑定属性行为

所以如果想利用组件的透传,就必须保证组件内部只有一个根标签

问题:在实验室项目pc端中想利用 v-hasPermi 为导入按钮增加权限,但发现加了权限之后并未生效,导入组件(SyImport) 代码如下:

html 复制代码
    <el-button type="primary" @click="handleUpload">
      {{ props.label }}
    </el-button>
    <el-dialog
      v-model="uploadDialogVisible"
      title="导入"
      width="40%"
      align-center
      :close-on-click-modal="false"
      :before-close="uploadDialogClose"
    >
      <div class="content-wrap">
        <div class="main-wrap">
          <div class="msg-wrap">
            <div v-if="props.explain" class="explain-wrap">
              导入说明:
              <div class="explain-text">
                {{ props.explain }}
              </div>
            </div>
            <div v-if="props.template.url" class="download-wrap" @click="getExcelTemplate">
              点击下载导入模板
            </div>
          </div>
          <div class="upload-wrap" :class="{ 'drag-wrap': !props.drag }">
            <el-upload
              ref="uploadRef"
              :accept="props.accept"
              :drag="props.drag"
              :http-request="requestUpload"
              :auto-upload="false"
              :multiple="props.multiple"
              :limit="props.limit"
              :on-exceed="handleExceed"
            >
              <el-icon class="el-icon--upload">
                <UploadFilled />
              </el-icon>
              <div class="el-upload__text">
                <span v-if="props.drag">拖拽文件到此 或者 </span><em>点击此处上传</em>
              </div>
              <template #tip>
                <div class="el-upload__tip">
                  请选择导入文件
                </div>
              </template>
            </el-upload>
          </div>
        </div>
        <div class="footer-wrap">
          <el-button type="primary" :loading="submitLoading" @click="submitUpload">
            确认导入
          </el-button>
        </div>
      </div>
    </el-dialog>

由此可看出:组件内部有多个根标签,Vue 不知道为哪个标签绑定透传属性,所以v-hasPermi不会生效。

修改:在组件内部添加一个根标签,将这两个标签都放在根标签里,由此问题解决。

相关推荐
web守墓人38 分钟前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
秋田君6 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
风吹落叶花飘荡7 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则7 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele8 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
天若有情6738 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
烛阴9 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子9 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead9 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
eggcode9 小时前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis