返回介绍

开发指南

组件

JS

模板

Nvue特性相关

发布于 2021-04-03 05:35:25 字数 5574 浏览 1129 评论 0 收藏 0

前言: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>

事件冒泡

weex事件冒泡相关文档 —— 事件冒泡

weex原文中,需要给给页面(组件)根元素设置bubble="true"才能产生事件冒泡机制,但是在uni-appnvue中,已自动加上类似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>

line-height

nvue中,line-height与字体大小font-size无关,如果赋予数值,单位默认为px,这意味着不可以如下使用:

.box {
    /* vue正常,nvue中会导致行高只有1px */
    line-height: 1;
}

样式穿透

weex(nvue)中有如此描述:在 Weex 里, 每一个 Vue 组件的样式都是 scoped,这说明vue中的的/deep/::v-deepnvue中都是无效,修改子组件样式只能通过传参进行,而不能进行样式穿透。

字体引入不能加引号

nvue下,font-family的字体引入,不能加引号,否则会导致字体图标无法显示,如下:

/* 错误写法 */
font-family: 'uicon-iconfont';

/* 正确写法 */
font-family: uicon-iconfont;

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;

Scss中的:export无效

vue中,我们可以通过*.scss中使用:export进行变量导出,供jscss共同使用变量,但是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;

box-shadow

据关于weex关于box-shadow文档描述,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)
}

border-radius

weex文档中有明确的说明border-radius支持简写形式,但是在nvueandroid端,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;
}

关于<template/> 和 <block/>

以下文字取自uni-app文档原文,点此查看

`<template/>` 和 `<block/>` 并不是一个组件,它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。  
`<block/>` 在不同的平台表现存在一定差异,推荐统一使用 `<template/>`。

上面说,二者不会在页面做任何的渲染,但是在nvue中,<block/>确确实实被渲染成为一个<block/>元素,由于nvue默认flex布局,且为 column竖向布局,这可能会导致<block/>标签下存在多个其他元素时,这些元素会竖向排列,您不得不额外对<block/>元素设置样式,所以我们建议只要是nvue的场景,一律使用<template/>而不是<block/> 标签

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文