const toast = this.$createToast({ txt: 'Loading...', // 提示信息 type: 'correct', // type 字段决定了 Toast 的显示图标类型 txt纯文本常用 time: 3000, // 显示时间长短 maskClosable: true, // 点击蒙层是否隐藏 mask: true // mask 设置为 true 时会显示遮罩 }) toast.show() // 实例方...
//提示信息type:'correct',//type 字段决定了 Toast 的显示图标类型 txt纯文本常用time:3000,//显示时间长短maskClosable:true,//点击蒙层是否隐藏mask:true//mask 设置为 true 时会显示
可以看出整体的效果,当尺寸较小时,Button 和 Toast 都是比较小的,而当尺寸比较大时,相对应的都会更大,达到了缩放的目的。 上层扩展 这里上层扩展主要是指基于组件库进行二次封装,例如在滴滴内部,我们的很多业务组件库就是在开源的 cube-ui 组件库之上做增强而来的。 这个能力是非常重要的,因为移动端组件库和 PC...
Popup 弹层:底层弹层组件,主要用于基于此组件实现上层组件封装,只提供了基础功能:指定类型、是否有背景层、显示内容(HTML)以及是否居中。 内置所有的弹层类组件都是基于此组件实现,包括:Toast、Picker、TimePicker、Dialog、ActionSheet。 Toast:Toast组件主要用于非模态信息提醒,如显示时间设置,无需用户交互。 Picker组件...
Toast:Toast组件主要用于非模态信息提醒,如显示时间设置,无需用户交互。 Picker组件:Picker组件支持多列选择器及数据联动。 TimePicker组件:TimePicker组件提供了常用的日期选择功能。 Dialog:Dialog模态框组件,提供了多种样式及交互形式。 ActionSheet:ActionSheet操作列表提供了两种常见的样式,灵活可控内容。
$createToast({ txt: this.toastTxt }).show() } } } 两种方式都可以,但是我们推荐后者,通过 $createXxYy API 来调用;通过 API 调用的话,这个弹框是附加到 body 元素下的,这样的好处是可以不受外层样式的影响,因为组件调用的话,很容易受到外层 transform, overflow 等样式的影响。 注意这个 ...
可以看出整体的效果,当尺寸较小时,Button 和 Toast 都是比较小的,而当尺寸比较大时,相对应的都会更大,达到了缩放的目的。 上层扩展 这里上层扩展主要是指基于组件库进行二次封装,例如在滴滴内部,我们的很多业务组件库就是在开源的 cube-ui 组件库之上做增强而来的。
如上代码所示,这里面实际上使用了 2 个 cube-ui 的组件,cube-button和cube-toast。可以看到,cube-button我们是用了声明式的创建,而cube-toast是通过实例上的$createToastAPI 调用。 Vue.js 是比较推崇声明式的方式使用组件,但是考虑到组件嵌套较深的场景,子组件的样式可能被父级样式影响,所以我们针对弹出层类型的...
Toast 提醒 Picker 选择器 TimePicker 时间选择器 Dialog 弹框 ActionSheet 操作菜单 所有的 API 调用都是使用create-api模块暴露出的createAPI函数实现,在定义的时候就决定了该组件是否是单例的,详见create-api文档。 默认情况下,Toast、Dialog 以及 ActionSheet 是单例的,而 Picker 和 TimePicker 是多例的,因为其...
发表于 2019-11-08 17:30阅读:981评论:0推荐:0 摘要:<template> <cube-button icon="cubeic-right" @click="goNext">Button With Icon</cube-button> </template> export default { methods:{ goNext(){ const toast = this.$createToast({ txt: 阅读全文 » MENU 蓝色帅-橙子哥 晚安,打工人...