helicopters / wc-messagebox Goto Github PK

View Code? Open in Web Editor NEW

202.0 9.0 69.0 618 KB

基于 Vue 2.0 开发的 Alert, Toast, Confirm 插件, UI仿照 iOS 原生

Vue 44.18% JavaScript 38.71% HTML 1.65% CSS 15.46%

alert toast wc-messagebox vue confirm ios wechat android dialog modal

wc-messagebox's Introduction

wc-messagebox

基于 vue 2.x 开发的弹窗插件
包含 Alert, Confirm, Toast
支持用户自定义 Alert, Confirm 组件.
iOS样式来源: (MUI)

说明

新版和旧版在参数传递上面有所区别. 如果是因为升级出现问题可以尝试回退到旧版, 详见旧版文档.

效果

Install

npm i wc-messagebox --save

Quick Start

import {Alert, Confirm, Toast, Loading} from 'wc-messagebox'
import 'wc-messagebox/style.css'
Vue.use(Alert)
Vue.use(Confirm)
Vue.use(Toast, duration)
Vue.use(Loading)

Usage

// alert
this.$alert('这里是内容')  // 如果传递一个字符串给 this.$alert, 则 标题默认为 '提示', 按钮默认为 '确定'

如果参数为对象, 则可接受如下配置选项:
title: '这里是标题',
content: '这里是内容',
btnText: '这里是按钮',
component: Component // 用于用户自行指明 Alert 组件

比如:
this.$alert({
  title: '我是标题',
  content: '我是内容'
})


// confirm
this.$confirm('这里是内容');

如果参数为对象, 则可接受如下配置选项:
title: '这里是标题',
content: '这里是内容',
yesStyle: {}, // 设置左边按钮样式
yesText: '',  // 左边按钮文本,
noStyle: {},  // 设置右边按钮样式,
noText: '',   // 设置右边按钮文本
component: Component // 可不设置, 适用于用户自定义组件.

比如:
this.$confirm({
  title: '我是标题',
  content: '我是内容',
  yesText: '你好'
})

// toast
this.$toast(text, {
    durtaion: 200,
    location: 'bottom|center|top' // 默认在中间
});

// toast 的图文混合模式
this.$toast(text, {
  path: path,
  location: 'center',
  toastStyle: {
    height: '100px',
    width: '100px'
  },
  imgStyle: {
    width: '40px',
    marginBottom: '15px'
  }
})


// loading
this.$loading.show('自定义文字'); //显示
this.$loading.hide(); //隐藏

用户自定义弹窗样式

经常一些情况下, iOS的弹窗样式可能满足不了你. 比如你需要微信的弹窗样式. 更一些时候, 可能用户需要自定义弹窗样式, 比如设计师给出了一套符合项目的弹窗样式. 此时如何操作?

引入下面语句

import D from 'wc-messagebox';
Vue.use(D);

将根目录下面的 wechat-messagebox 拷贝到本地.
引入 wechat-messagebox

import wxAlert from 'yourpath/wechat-messagebox/Alert'
import wxConfirm from 'yourpath/wechat-messagebox/Confirm'

配置

Vue.use(Alert, {
  component: wxAlert
});

Vue.use(Confirm, {
  component: wxConfirm
})

wc-messagebox's People

Contributors

Stargazers

Watchers

Forkers

jzxyouok zhy0313 bug-lollipop ofroad lawyerwebber libin1991 moment3784 mishe twoer wcx14311 chenymin kaeyleo cluo hitgou zhao812 loveyedie dbk-bestfriend benmo1602 ilovezy kimi009 fffff0001 angleguan idhong ntro zhaoxunyong newsning vincent-cong skinou crazyyang97 luorijin fooller leeoric zjna lanfen100 chencheng365 tanmengmeng xuhengfeng luodanyalian yshxw cucumbersunny littleseven007 kuaidinan delktsai hope891116 sky315sky yangjinrui325 wangxiaolei5 liangxm xiaocat irislian199092 yanjing1109 unclemeric vue-components stonecc massimoselvi q312700254 dddsswu 316891815

wc-messagebox's Issues

以这样的方式注册无效 Vue.use(Toast, {location: 'bottom', duration: 10000});
以这样的方式注册无效 Vue.use(Toast, 10000);
以这样的方式调用无效 this.$toast('手机号码不能为空',10000);
以这样的方式调用有效 this.$toast('手机号码不能为空',{ duration: 10000,location: 'top'});

使用下面rem布局，任何人的ui都会变化，包括你的，虽然不该提issues，但是还是想知道，我这么布局行不行

(
function (doc, win) {
/** 获取像素比 /
var pixelRatio = 1 / window.devicePixelRatio
/* 通过js动态设置视口(viewport) /
document.write('')
// document.write('')
/* 条件：尺寸越大，则字体大小越大。尺寸越小，则字体大小越小。
获取html节点 */
var html = document.getElementsByTagName('html')[0]
// 获取屏幕宽度
var pageWidth = html.getBoundingClientRect().width
// 屏幕宽度 / 固定数值 = 基准值
html.style.fontSize = pageWidth / 16 + 'px'
}
)(document, window)

/* 在动画结束之后, 删掉元素 */
s('.wc-messagebox__popup---').addEventListener('transitionend', ()=>{
  this.show = false;
}, false);

正常安装, 并引用
才用最简单的方式引入: this.$alert('这里是内容')
在控制台可以正常打印出函数, 并且函数正常执行. 但是页面并没有弹框出现.