uniapp nvue 踩坑记录

最新推荐文章于 2025-03-27 11:13:34 发布

挚友阳光

最新推荐文章于 2025-03-27 11:13:34 发布

阅读量1.4k

点赞数 1

分类专栏： JavaScript 前端技术文章标签： uni-app javascript js

本文链接：https://blog.youkuaiyun.com/qq_41366114/article/details/119646536

版权

前端技术同时被 2 个专栏收录

52 篇文章

订阅专栏

JavaScript

50 篇文章

订阅专栏

在uniapp的nvue开发中，需要注意不支持复杂的CSS选择器，推荐使用class选择器。内联样式和百分比单位可能受限，推荐使用scss进行样式编写。文字需用text标签包裹，字体样式不会被子元素继承。布局默认为flex，图片应使用image标签并设置resize属性。此外，nvue不支持在组件内直接调用Vue实例的方法，需借助globalData或单独引入js。点击事件阻止冒泡及多行文本溢出省略也有特定要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不支持复杂css选择器，请使用class选择器
可以使用scss
文字应被text标签包裹
字体样式不会被子元素继承
默认布局为flex，且flex-direction默认为column纵向排列
css无法使用百分比、vw / vh
纵向全屏请使用flex: 1；横向全屏可以用width: 750rpx
图片应使用image标签
图片显示模式应给标签设置resize属性，值为 cover（纵向完整） / contain（横向完整） / stretch（缩放）
不支持background-image，需要背景图请使用image标签定位实现
如果需要实现遮罩，请给遮罩设置一个点击事件（空函数即可），否则遮罩会被穿透操作下方元素
不支持nvue文件中调用Vue实例挂载的数据或方法即Vue.prototype，解决方案：使用App.vue下的globalData、单独import引入js到nvue页面使用

不支持@click.stop，防止冒泡请参照下方

//DOM: <div @click="stop"></div>

stop(event) {
    event.stopPropagation();
    console.log('阻止冒泡');
},

多行文本溢出省略必须使用text标签，定义css样式如下

.content{
    /*显示的行数*/
    lines: 2;
    /*设置省略部分如何显示，ellipsis为省略号*/
    text-overflow: ellipsis;
}