# Nvue特性相关
前言:uView在1.x版本,只有部分组件支持nvue
,不推荐在nvue
项目中使用,目前uView研发组正在研发2.0版本,将会全面兼容nvue
,我们在这里做一个专题,列出一些nvue
上的坑,希望能帮助到您。
# Text组件
我们在
vue
中,可以将文本相关的内容放到view
或者text
组件,这都是没问题的,但是在nvue
中,需要动态响应(双向绑定)的内容,必须放在text
标签,如果放在view
可以正常显示,但是无法双向绑定。在
nvue
中,文本的样式无法继承父元素的颜色(color),必须具体到给每一个text
元素定义类名,在通过指定的类名给赋予颜色值,其他类似出现不能继承父组件的情况,也可参考此做法。在
nvue
中,text
组件不能换行写内容,否则会出现无法去除的周边空白内容(类似被加上了padding
或者margin
的效果),如下:
<!-- nvue中错误写法 --> <text> 桃花潭水深千尺 </text> <!-- nvue中正确写法 --> <text>不及汪伦送我情</text>
✅ Copy success!
# 事件冒泡
weex
事件冒泡相关文档 —— 事件冒泡 (opens new window)
在weex
原文中,需要给给页面(组件)根元素设置bubble="true"
才能产生事件冒泡机制,但是在uni-app
的nvue
中,已自动加上类似bubble="true"
的操作,无需用户额外干预,自动就会获得事件冒泡的机制。另外,在nvue中,我们可以通过如下方式阻止事件冒泡:
<template> <view @tap="parentClick"> <text @tap="childClick"> </view> </template> <script> export default { methods: { childClick(e) { console.log('内部被点击') e.stopPropagation() }, parentClick() { console.log('父元素将不会捕获冒泡事件') } } } </script>
✅ Copy success!
# line-height
在nvue
中,line-height
与字体大小font-size
无关,如果赋予数值,单位默认为px
,这意味着不可以如下使用:
.box { /* vue正常,nvue中会导致行高只有1px */ line-height: 1; }
✅ Copy success!
# 样式穿透
在weex
(nvue
)中有如此描述:在 Weex 里, 每一个 Vue 组件的样式都是 scoped (opens new window),这说明vue
中的的/deep/
和::v-deep
在nvue
中都是无效,修改子组件样式只能通过传参进行,而不能进行样式穿透。
# 字体引入不能加引号
nvue
下,font-family
的字体引入,不能加引号,否则会导致字体图标无法显示,如下:
/* 错误写法 */ font-family: 'uicon-iconfont'; /* 正确写法 */ font-family: uicon-iconfont;
✅ Copy success!
# Nvue不支持全局Mixin,Prototype
在nvue
中,不支持在类似main.js
中进行全局mixin
,如有需要,可以在每一个nvue
文件中,独立引入使用,如下:
// main.js中如下写法nvue页面无效 Vue.mixin({...}) // 可以在页面中进行mixin,比如test.nvue中 export default { mixins: [...] } // 另外,nvue页面中,定义在main.js中的Vue.propertype无效 Vue.propertype.xxx = xxx;
✅ Copy success!
# Scss中的:export无效
在vue
中,我们可以通过*.scss
中使用:export (opens new window)进行变量导出,供js
和css
共同使用变量,但是nvue
中不支持此写法,请勿使用。
# transition属性不能简写
在vue
中,我们可以很方便的简写transition
属性,但是nvue
中,必须分开写才有效,如下:
/* 如下写法,vue有效,nvue无效 */ transition: opacity 0.3s ease-in; /* nvue页面需要拆分成如下写法 */ transition-property: opacity; transition-duration: 0.3s; transition-timing-function: ease-in;
✅ Copy success!
# box-shadow
据关于weex关于box-shadow文档 (opens new window)描述,weex
不支持android
上的box-shadow
属性,但是经实测,在nvue
(uni-app改良后台的weex
)上android
,是支持的box-shadow
属性效果的。
需要说明的是,在IOS
上,目前(2020-10-30)不允许将box-shadow
值设置为none
,否则会出现锐利的高亮白色边框,由于nvue
支持rgba
透明度,我们可以通过如下方式实现类似none
的效果:
.box { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) }
✅ Copy success!
# border-radius
在weex
文档中有明确的说明 (opens new window),border-radius
支持简写形式,但是在nvue
的android
端,border-radius
必须分开写才有效,如下:
/* nvue下,安卓不支持此写法 */ .box { border-radius: 10px; } /* 必须如下写法才能兼容 */ .box { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
✅ Copy success!
# 关于<template/> 和 <block/>
以下文字取自uni-app文档原文,点此查看 (opens new window):
`<template/>` 和 `<block/>` 并不是一个组件,它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。 `<block/>` 在不同的平台表现存在一定差异,推荐统一使用 `<template/>`。
✅ Copy success!
上面说,二者不会在页面做任何的渲染,但是在nvue
中,<block/>
确确实实被渲染成为一个<block/>
元素,由于nvue
默认flex
布局,且为
column
竖向布局,这可能会导致<block/>
标签下存在多个其他元素时,这些元素会竖向排列,您不得不额外对<block/>
元素设置样式,所以我们建议只要是nvue
的场景,一律使用<template/>
而不是<block/>
标签