vue render函数中渲染伪类元素和style中scoped的问题？

最新推荐文章于 2024-04-02 05:25:24 发布
最新推荐文章于 2024-04-02 05:25:24 发布
阅读量1.9k 收藏
点赞数 1
文章标签： javascript ViewUI
原文链接：https://segmentfault.com/a/1190000016037836
版权

使用vue的render生成一个table 需求如下：根据文件类型加载不同的图标

clipboard.png

于是我用css伪类写了几种带折角的图标，起始样式一样，就是颜色和中间文字不一样：

clipboard.png

效果图如下

clipboard.png

然后使用render函数生成表格：

clipboard.png

其实就是根据文件类型不同，加载我写好的class

为了测试我还在table下方单独写了几个div看看效果：

clipboard.png

结果,坑来了。。。。。。。。。。。。。。。。

clipboard.png

下面的静态div一切正常，表格里面的render的没效果？坑我啊？

看一下页面的dom，class已经生成了啊

clipboard.png

对比一下有效果的div

clipboard.png

好像没什么区别，在仔细看看卧槽。。发现问题了。。。。。。。

这是什么鬼

clipboard.png

原来是style scoped生成了css模块化，去掉scoped一切ok

clipboard.png

希望对大家有用

clipboard.png

weixin_34306446
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端开发：CSS中伪类的使用总结
软贱开发攻城狮
04-05 1958
前言 在前端开发的时候，CSS相关的知识点虽然不难，但是想要完全使用好也不是一件简单的事情，尤其是在开发中遇到一些比较复杂或者用常用的方式实现不了的效果，这就涉及到伪类的使用了。那么本篇博文就来分享一下关于伪类常用的知识点，方便以后查阅使用。 定义 伪类是什么？伪类是用于定义元素的特殊状态，或者说伪类是用来添加一些选择器的特殊效果。伪类是实现了类的效果，但是没有实际添加到标签中的类，所以才叫伪类，伪类的代表性构成是使用”:”冒号，如::before、::after等等。 使用场景 伪类
vue组件利用css var(--变量)实现动态修改伪类属性（::before、::after）
c_x_m的博客
09-19 2338
动态修改伪类属性
Vue 动态设置css伪元素content的值，解决不渲染和渲染为数字的问题
疑问 搜索 动手 解决 记录
09-27 1793
直接的赋值为数字的话或者在computed()计算属性中去做toString()依然是不会显示的，如果你在打开控制台时看到 --fraudScoreNum 的值仍然是数字 54，而不是字符串 ‘54’，那可能是因为浏览器对于 CSS 自定义属性的处理方式导致的。如果你想要确保 --fraudScoreNum 的值作为字符串类型传递给 content 属性，你可以在 Vue 模板中使用引号将其括起来。所以无论你是将 --fraudScoreNum 设置为 ‘54’ 还是 54，它们都可以被解析为数值 54。
render vue 添加类_vue函数式组件中的render函数如何添加伪类样式
weixin_39907289的博客
12-20 214
问题描述export default {functional: true,props: {data: {type: String,default() {return '';}},depth: {type: Number}},render: (h, ctx) => {return h('div', {class: ['treeitem'],style: {':hover': {backgrou...
前端之vue的CSS样式
weixin_46372074的博客
04-14 7404
vue的CSS样式vue项目的结构Vue的三种样式化方法：外部CSS文件样式 相关名称： CSS预处理器（如SCSS）或后处理器（如PostCSS）。 vue项目的结构 Vue的三种样式化方法： 外部CSS文件。 单个文件组件（.vue文件）中的全局样式。 单个文件组件中组件范围的样式。 外部CSS文件样式 vue项目中有一个与 components 同级的文件夹 asset，我在这里理解成“有用的东西”，存放资源文件，如，图片、css。 ...
用于在vxetable表格中适配antdesignvue组件的渲染
08-10
- 在VxeTable的列定义中，利用自定义渲染函数（`render`或`scopedSlots`）插入Ant Design Vue的组件。 - 如果使用了插件，根据插件文档配置和引入相关插件代码。 6. **注意事项**： - 要确保VxeTable和Ant ...
Vue函数式组件的应用实例详解
12-11
在 Vue 中，组件可以分为两种类型：普通组件和函数式组件。这篇文章将深入探讨Vue函数式组件的应用实例，帮助开发者更好地理解和运用这一特性。 一、函数式组件与普通组件的区别 1. 渲染速度：函数式组件由于不维护...
Vue自定义render统一项目组弹框功能
10-15
为了解决这些问题，我们可以利用Vue的自定义render函数，创建一个通用的弹框组件。这个组件应该接受必要的配置参数，并提供简单的API来控制弹框的行为。例如，我们可以定义一个`uniDialog.vue`组件，它接收如`title`...
Vue v2.5 调整和更新不完全问题
11-26
Vue.js 是一款流行的前端框架，其版本更新通常伴随着性能优化、新特性和语法改进。Vue v2.5 是一个重要的版本迭代，它引入了几个关键的更新和调整，旨在提高开发者的体验和应用的健壮性。以下是Vue v2.5的一些主要...
vue项目中想把后端传来的color值传到css中的伪类里面去？
weixin_43827779的博客
09-09 1338
对于需要根据变化的动态样式，最简单的方式就是绑定在元素上面绑定syle，形如： <span class="header__title" :style="`color:${scoreStyle.titleColor}`"> 但是，，，让人迷惑的是，如果要改变active、hover、after这些伪类的样式呢，这就显得尴尬了； 解决的方式是：定义css变量，形如： :style="{ '--font-color': dropdownFont }" css中： &:active {
vue中过滤器的使用，CSS的伪类和伪元素
最新发布
m0_60607397的博客
04-02 256
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件。
2020-11-16
qq_51969530的博客
11-16 103
伪类选择器最大的特点是用冒号（：）表示 常用的伪类元素 a:link /选择所有未被访问的链接/ a:visited /选择所有已被访问的链接/ a：hover /选择鼠标指针位于其上的连接 a：active /选择活动链接（鼠标按下未弹起的连接）*/ 注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。 注意： a:active 必须在 a:hover 之后。 所有css伪类元素 checked
前端vue项目实现伪静态 vue SEO优化
baiyang_428的博客
08-12 2160
前端vue项目实现伪静态 vue SEO关键词优化
【Vue】在Vue中的css常见问题，比如less，scoped，&的使用，伪类选择器的使用
qq_51055690的博客
07-18 1446
例如在开发Vue页面时，会出现样式的编写，写样式就是在style标签里面，会出现一些问题
vue应用静态化_vue项目实现伪静态页
weixin_29886825的博客
12-23 4363
vue开发单页面应用时，如何实现博客文章的伪静态，让每一篇文章都相当于是一个html页面，方便百度引擎收入呢？经过查询资料发现可以利用vue-router的params属性来实现。vue-router有两种传参方式，一种是query属性配合着path属性，一种是params属性配合着name属性，详细用法可去官网上看。query的传参会跟在请求的网址后面，到新的页面中刷新传参也还在。而用param...
vue前端刷新404配置伪静态及nginx跳转https:ip/api
m0_52369979的博客
06-13 769
仅本人记录学习使用，
uniapp使用vue打包后ngx开启伪静态
于忠会的博客
12-30 469
proxy_pass http://域名;
vue render函数 context
10-11
在 Vue 的 render 函数中，context 是一个包含了一些有用信息的对象，在组件的 render 函数中可以通过第二个参数 context 来访问这些信息，如当前组件的 props、children、slots、scopedSlots 等。 比如，我们可以通过 context.props 访问当前组件的 props，通过 context.children 访问当前组件的子元素，通过 context.slots 访问当前组件的插槽内容等。 同时，也可以通过修改 context 对象上的属性值来影响到组件的渲染结果，比如可以通过修改 context.data 和 context.children 的值来动态地添加、删除子元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值