@fdnpm/vue-dialog

组件介绍

概述

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

基于 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 参数

Prop	Default	Type	Description
text	toast	String	提示内容
duration	1.5	number	显示的时长
callback	none	Function	toast 消失后的回调

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

confirm 参数

Prop	Default	Type	Description
title	none	String	提示的标题
html	none	String	提示的内容 html(和 text2 选一)
text	none	String	提示的内容
titleColor	#534440	String	title 标题颜色
textColor	#1E1E1E	String	text 文本颜色
sureText	确定	String	确定按钮文本
cancelText	取消	String	取消按钮文本
cancelText	取消	String	取消按钮文本
isRight	true	Boolean	确定按钮位置，默认是在右边
cancelColor	#1E1E1E	String	取消按钮文本颜色
sureBgColor	#ffe83c	String	确定按钮背景颜色
cancelBgColor	#fff	String	取消按钮背景颜色
sureBorderColor	#ffe83c	String	确认按钮边框颜色
cancelBorderColor	#999999	String	取消按钮边框颜色
callback	none	Function	确定的回调
cancel	none	Function	取消的回调
is_mask_close	true	Boolean	点击遮罩层关闭弹窗

alert 参数

Prop	Default	Type	Description
title	none	String	提示的标题
html	none	String	提示的内容 html(和 text2 选一)
text	none	String	提示的内容
titleColor	#534440	String	title 标题颜色
textColor	#1E1E1E	String	text 文本颜色
sureText	确定	String	确定按钮文本
sureColor	#534440	String	确定按钮颜色
callback	none	Function	确定的回调
is_mask_close	true	Boolean	点击遮罩层关闭弹窗

loading 参数

this.$showLoading('xxx')

this.$hideLoading()

explain 参数

Prop	Default	Type	Description
title	none	String	提示的标题
html	none	String	提示的内容 html(和 text2 选一)
text	none	String	提示的内容
textColor	#1E1E1E	String	text 文本颜色
callback	none	Function	确定的回调
is_mask_close	true	Boolean	点击遮罩层关闭弹窗

全局设置样式

可以在 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