htmarui

plugin

vue 插件

使用方法

方法1,把本项目的/src/plugin文件夹考到你的本地

// 在main.js文件中
import plugin from './plugin'
Vue.use(plugin)

2,npm install 包名还没想好

// 在main.js文件中
import plugin from 'xxxxxx'
Vue.use(plugin)

目前拥有的插件

• Modal
• Toast
• Loading

每个插件介绍

Modal的用法

• 全局Modal之alert

  this.$modal.alert({
    title: '标题',
    content: "您已报名",
    autoClose: false,
    maskClosable: false,
    closeShow: true,
    // 本插件暴漏了各种样式，下面是根据UI设计的默认样式，如有需要可以随意修改
    // contentFontSize: "17px",
    // contentMargin: "20px 15px",
    // btnFontSize: "17px",
    // btnColor: "#EE6D0F",
    // titleSize: '16px',
    // titlePaddingTop: '15px',
    // titlePaddingBottom: '0px',
    // btnPaddingTop: "16px",
  });

参数	说明	类型	可选值	默认值
autoClose	3秒自动关闭	Boolean	true，false	true
maskClosable	点击遮罩关闭	Boolean	true，false	true
closeShow	显示叉叉	Boolean	true，false	false
title	标题	string	自定义	-
titleSize	标题字号	string	自定义	16px
titlePaddingTop	标题padding-top	string	自定义	15px
titlePaddingBottom	标题padding-bottom	string	自定义	0px
content	内容	string	自定义	-
contentFontSize	内容的字号	string	自定义	17px
contentMargin	内容margin	string	自定义	20px 15px
btnFontSize	按钮字号	string	自定义	17px
btnColor	按钮颜色	string	自定义	#EE6D0F
btnPaddingTop	按钮padding-top	string	自定义	16px

• 全局Modal之confirm

  this.$modal.confirm({
    title: "提示",
    content: "你想怎么样呢？",
    okCallBack() {
      console.log("点击了确定✅");
    },
    cancelCallBack() {
      console.log("点击了取消");
    },
    // 本插件暴漏了各种样式，下面是根据UI设计的默认样式，如有需要可以随意修改
    // closeShow: false,
    // btnColor: "#EE6D0F",
    // contentFontSize: "17px",
    // contentMargin: "20px 15px",
    // btnFontSize: "17px",
    // btnPaddingTop: "16px",
    // titleSize: '16px',
    // titlePaddingTop: '15px',
    // titlePaddingBottom: '0px',
  });

参数	说明	类型	可选值	默认值
autoClose	3秒自动关闭	Boolean	true，false	true
maskClosable	点击遮罩关闭	Boolean	true，false	true
closeShow	显示叉叉	Boolean	true，false	false
title	标题	string	自定义	-
titleSize	标题字号	string	自定义	16px
titlePaddingTop	标题padding-top	string	自定义	15px
titlePaddingBottom	标题padding-bottom	string	自定义	0px
content	内容	string	自定义	-
contentFontSize	内容的字号	string	自定义	17px
contentMargin	内容margin	string	自定义	20px 15px
btnFontSize	按钮字号	string	自定义	17px
btnColor	按钮颜色	string	自定义	#EE6D0F
btnPaddingTop	按钮padding-top	string	自定义	16px
okCallBack	点击确认的回调	Function	自定义	-
cancelCallBack	点击取消的回调	Function	自定义	-

Toast的用法

全局Toast

  this.$toast.txt({
    content: "复制成功",
    direction: "bottom",
    mask: true,
    autoClose: true
  });

参数	说明	类型	可选值	默认值
content	内容	string	自定义	-
direction	位置	string	top，bottom	中间
mask	显示遮罩	Boolean	true，false	false
autoClose	3秒自动关闭	Boolean	true，false	true

Loading的用法

全局loading

loading的使用和前面的plugin不同，因为loading需要暴露出全局的显示和隐藏方法，没有和之前的plugin一起install，需要在main.js中单独引入并install

//main.js中
import loading from 'plugin/globalLoading'
Vue.use(loading)

  // 在需要的地方显示
  this.$loading()
  // 在需要的地方关闭，这里模拟三秒后关闭
  setTimeout(()=> {
    this.$loading.end()
  },6000)