vue 元素样式修改

ByteCosmicRhapsody
• 阅读 3883

这里是使用错误。ref有两种情况:第一,如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素。第二,如果用在子组件上,引用就指向组件实例。你这种情况,就是第二种,应用在组件上,那么如果想要获取dom,需要使用this.$refs.wrap.$el来获取组建的跟容器dom节点,然后设置样式。当然如果你想设置slot里面的元素,那么在拿到 根容器dom节点后,就可以通过正常的querySelector等方法获取你想要的任何dom节点了如果还有问题,欢迎再次讨论。?

  // this.$nextTick(() => {
  //   let height = this.$refs.bgImg.offsetHeight;
  //   let width = this.$refs.bgImg.offsetWidth;
  //   this.$refs.bgImg.style.height = (height * this.num) / 100 + "px";
  //   this.$refs.bgImg.style.width = (width * this.num) / 100 + "px";
  // });
点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
3年前
vue3中基于script setup语法糖的$refs使用
在用vue3开发项目的时候,需要调用子组件的方法,于是想着用$refs来实现,但是我是使用scriptsetup语法糖,原先vue2的语法已经不适用了。于是一番折腾和查阅资料,终于搞定。vue2语法vue2语法在组件上设置ref属性后,在代码里可以通过this.$refs.ref值访问到对应的子组件。一个设置ref值的组件:html在js代码中可以通
美凌格栋栋酱 美凌格栋栋酱
7个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皮卡皮卡皮 皮卡皮卡皮
4年前
javaScript. Dom 基本操作
DOM节点查找jsdocument.getElementById()//通过id查找document.getElementsByTagName()//通过标签名document.getElementsByName()//通过name名查找document.getElementsByClassName("类名")//通过类名获取元素对象documen
Easter79 Easter79
3年前
taro 组件的外部样式和全局样式
自定义组件对应的样式文件,只对该组件内的节点生效。编写组件样式时,需要注意以下几点:1.组件和引用组件的页面不能使用id选择器(a)、属性选择器(\a\)和标签名选择器,请改用class选择器。2.组件和引用组件的页面中使用后代选择器(.a.b)在一些极端情况下会有非预期的表现,如遇,请避免使用。3.子
Wesley13 Wesley13
3年前
03. react 初次见面
    与浏览器的DOM元素不同,React当中的元素事实上是普通的对象,ReactDOM可以确保浏览器DOM的数据内容与React元素保持一致。1、将元素渲染到DOM中    首先我们在一个HTML页面中添加一个id"root" 的<div:<divid"root"
Wesley13 Wesley13
3年前
JS获取子节点、父节点和兄弟节点的方法实例总结
1.js获取子节点的方式1.通过获取dom方式直接获取子节点varadocument.getElementById("test").getElementsByTagName("div"); 2.通过children来获取子节点利用children来获取子元素是最方便的,他也会返回出一个
可莉 可莉
3年前
06. react 初次见面
    React元素的事件处理和DOM元素的很相似。但是有一点语法上的不同:React事件绑定属性的命名采用驼峰式写法,而不是小写。如果采用JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM元素的写法)    例如,传统的HTML:<buttononclick"activateLas
Stella981 Stella981
3年前
JavaScript DOM编程艺术(第2版)学习笔记1(1~4章)
第一章一些基本概念HTML(超文本标记语言),构建网页的静态结构,由一系列的DOM组成;CSS(层叠样式表),给网页各部分结构添加样式;JavaScript,通过获取DOM给静态结构加上动作,使用户能够与静态网页进行交互;DOM,一种API(应用程序接口),通过这个接口动态的访问和修改结构或样式。浏
Wesley13 Wesley13
3年前
HTML5实现绘制几何图形
HTML5新增了一个<canvas.../属性。该元素自身并不绘制图形,只是相当于一张空画布。如果开发者需要向<canvas.../上绘制图形则必须使用JavaScript脚本进行绘制。为了向<canvas.../元素上绘图,必须经过如下3步。获取<canvas.../元素对应的DOM对象,这是一个Canvas对象。调用Canvas对象
Stella981 Stella981
3年前
Selenium3自动化测试【13】FireFox与Chrome浏览器元素定位
目前大部分浏览器都内置了相关插件或组件,能够帮助我们快速、简洁地展示各类元素的属性定义、DOM结构、CSS样式等属性。本书中使用的浏览器主要是FireFox、Chrome(这2款浏览器也是作为开发者常用的浏览器),因此本节介于这2款浏览器一起看看这些工具(组件)的使用方法。火狐(FireFox)浏览器如果大家对火狐浏览器较为熟知,在旧版本上的
Easter79 Easter79
3年前
TinyForm
TinyForm做一个用起来简单的表单工具库。先说说功能吧,这个工具提供了以下几个接口:通过任意DOM元素创建表单实例(TinyForm)可以自定义表单控件选择器获取表单控件获取(设置)DOM范围内所有(单个)表单控件的数据使用标签式设置验证规则以及提示消息获取(设置)DOM范围内所有(