@fdnpm/vue-dialog

v1.1.8

Published

4 years ago

基于vue开箱即用的全局弹窗组件，小巧灵活易用，包括loading，toast，confirm，alert

0High
0Medium
0Low

happytest

dialog loading confirm alert toast

组件介绍

概述

仅限内部使用，外部访问图片可能无法显示

基于 vue 开箱即用的全局弹窗组件，包括 loading，toast，confirm，alert,explain

本组件采用 fd-cli 开发。

示意图：

使用方法

1.安装

npm install @fdnpm/vue-dialog

2.使用

//入口中引用
import {Loading,Toast,Confirm,Alert,Explain} from '@fdnpm/vue-dialog'
Vue.use(Loading)
Vue.use(Toast)
Vue.use(Confirm)
Vue.use(Alert)
Vue.use(Explain)


//页面中直接调用

/**
  * confirm
  */
this.$confirm({
  title: "友情提示", //可以不配置
  text: "你确定此操作吗",
  titleColor: "#534440", //重置title颜色(默认)
  textColor: "#1E1E1E", //重置text颜色(默认)
  sureText: "确定", //(默认)
  cancelText: "取消", //(默认)
  sureColor: "#534440", //重置sureText颜色(默认)
  cancelColor: "#1E1E1E", //重置cancelText颜色(默认)
  callback: () => {
    console.log("你点击了confirm的确定");
  },
  cancel: () => {
    console.log("你点击了confirm的取消");
  },
  is_mask_close:true //点击遮罩层关闭弹窗(默认)
});

/**
  * alert
  */

this.$alert({
  title: "友情提示", //可以不配置
  text: "你确定此操作吗",
  titleColor: "#534440", //重置title颜色(默认)
  textColor: "#1E1E1E", //重置text颜色(默认)
  sureText: "确定", //(默认)
  sureColor: "#534440", //(默认)
  callback: () => {
    console.log("你点击了alert的确定");
  },
  is_mask_close:true //点击遮罩层关闭弹窗(默认)
});

/**
  * toast
  */

this.$toast({
  text: "请输入用户名",
  duration: "2000", //(默认2s)
  callback: () => {
    console.log("哈哈，我是toast后的回调");
  }
});
//如果不需要回调的情况下可以简写：this.$toast('请输入用户名')

/**
* loading 加载中
*/

this.$showLoading("加载中"); //默认“加载中”
this.$hideLoading();


/**
* explain 说明弹窗
*/
this.$explain({
  title: "活动规则",//可以不配置
  text: "活动规则活动规则活动规则",
  textColor: "#1E1E1E", //重置text颜色(默认)
  callback: () => {
    console.log("你点击了alert的确定");
  },
  is_mask_close:true //点击遮罩层关闭弹窗(默认)
});

Toast 参数

+如果不需要回调的情况下可以简写：this.$toast('请输入用户名')

confirm 参数

alert 参数

loading 参数

this.$showLoading('xxx')

this.$hideLoading()

explain 参数

全局设置样式

可以在 main.js 中 use 时统一设置，比如:

Vue.use(Alert,{sureColor:'red',textColor:'green'})

模板开发说明

开发

fd dev

编译

fd build

发布

发布到私服：请先将 package.json 中 name、version、description、keywords、repository 等填写完整，然后使用下面命令发布到指定镜像源

fd npmpublish

发布到 npm 官方：

  npm publish

或

npm publish --access public

项目配置

├── dist 组件编译后的文件存放目录 ├── example 示例目录，本目录调用 src 目录代码，作为展示使用。本目录不参与组件发布时的编译。默认入口 js 为 main.js ├── css 源码样式 ├── pages 源码功能页面 ├── src 源码目录入口 js 为 index.js ├── .babelrc ├── .gitignore 忽略文件 ├── package.json 项目配置文件，发布前需填写 name、version、description、author、keywords 等 └── README.md 项目的说明文档，markdown 格式

library 和 libraryTarget 配置，请参考：https://webpack.docschina.org/guides/author-libraries