简介
@nylira/vue-modules 是一个 Vue.js 的插件,它提供了一些常用的功能模块,比如 loading、message、dialog、toast 等。使用 @nylira/vue-modules 可以方便快捷地添加这些功能到你的 Vue.js 项目中。
安装
@nylira/vue-modules 可以通过 npm 安装,使用以下命令:
npm install @nylira/vue-modules --save
使用
使用 @nylira/vue-modules 非常简单。
引用
在 Vue 组件中,可以通过以下方式引用 @nylira/vue-modules:
import Vue from 'vue' import VueModules from '@nylira/vue-modules' import '@nylira/vue-modules/dist/vue-modules.css' Vue.use(VueModules)
使用组件
引用了 @nylira/vue-modules 后,即可使用其中提供的组件了。以下是一些示例:
loading
-- -------------------- ---- ------- ---------- ----- ------- ------------------------------ ------------ ------------------ -- ------ ----------- -------- ------ ------- - ------ - ------ - -------- ----- - -- -------- - --------- - ------------ - ---- ------------- -- - ------------ - ----- -- ----- - - - ---------展开代码
message
-- -------------------- ---- ------- ---------- ----- ------- ---------------------------------- ------- ------------------------------------- ------- ------------------------------------- ------- ----------------------------------- ------ ----------- -------- ------ ------- - -------- - ------------- - ------------------------------ -- ---------------- - --------------------------------- -- ---------------- - --------------------------------- -- -------------- - ------------------------------- - - - ---------展开代码
dialog
-- -------------------- ---- ------- ---------- ----- ------- ----------------------------------------- ----------- ----------------- --------------- ---------------- ------------- ------ ----------- -------- ------ ------- - ------ - ------ - ----- ------ ------ --------- - -- -------- - ------------------- - --------- - ---- - - - ---------展开代码
toast
-- -------------------- ---- ------- ---------- ----- ------- ------------------------ -------------- ------ ----------- -------- ------ ------- - -------- - -------------- - ---------------------- ------- - - - ---------展开代码
配置
可以通过 Vue.use() 传递配置对象来配置 @nylira/vue-modules。以下是一些示例:
自定义 message 样式
-- -------------------- ---- ------- ------------------- - -------- - -------------- ------------- ---- - --------- -------- ---- ------- ----- ------ ---------- ------------------- ---------------- ------- ------ ------- -------- ------- ------------- ----- - - --展开代码
自定义 dialog 样式
-- -------------------- ---- ------- ------------------- - ------- - -------------- ------------ ---- - --------- -------- ---- ------ ----- ------ ---------- ---------------- ------- ---------------- ------- -------- ------- ------------- ------- ---------- -- - ---- - ------- -- -- ----- - - --展开代码
API
@nylira/vue-modules 提供了一些 API,可以在组件中使用。以下是一些示例:
message
this.$message.show('这是一条消息') // 显示一条消息 this.$message.info('这是一条信息消息') // 显示一条信息消息 this.$message.success('这是一条成功消息') // 显示一条成功消息 this.$message.warning('这是一条警告消息') // 显示一条警告消息 this.$message.error('这是一条错误消息') // 显示一条错误消息
dialog
-- -------------------- ---- ------- ---------------------------- ------------------- -- ------------ ----- - ------- ------------------- -- --------------- ------ ---------- -------- ------------------- ------ ---- -- ----------- --- ------- ---- -- ----------- ---- ----------- ----- -- --------------- ---- ---------------- ----- -- -------------- ---- -------------------- ----- -- ------------------- ---- ------- -- -- --- -- -------------- -------- -- -- -- -- -------------- --展开代码
toast
this.$toast.show('这是一个 Toast') // 显示一个 Toast,直接传入 message this.$toast.show({ // 显示一个 Toast,通过对象来配置 message: '这是一个 Toast', visibleTime: 3000, // Toast 显示时间,可选,默认 2000 position: 'center', // Toast 位置,可选,'top'、'center'、'bottom',默认 'bottom' onHide: () => {} // Toast 隐藏时的回调函数,可选 })
结语
@nylira/vue-modules 是一个非常实用的 Vue.js 插件,它提供了一些常用的功能模块,能够大大提高开发效率。希望本篇文章能够对大家的学习和开发工作有所帮助。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005583481e8991b448d5627