微信小程序自定义dialog组件

微信小程序自定义dialog组件

前言

项目中经常遇到各种的弹框的需求，为了方便以后使用，简单弄了一个自定义内容及一些样式template模板组件。

效果

美女图片来自百度

准备

新建一个template小程序模板文件，里面定义一个wxml和wxss文件，还有index文件时入口文件，要在index.wxml和index.wxss引入template的样式和结构。大概的目录结构如下图。

index引入：

<import src='../template-dialog/index.wxml'>
@import '../tempate-dialog/index.wxss'

image

功能

大概自定义功能都是通过在qdDialog对象里面进行定义，当然需要更多的自定义的可以自己修改添加，这样大概满足很多需求。

qdDialog: {
      show: false, //是否显示
      content: "内容", 
      title: "标题", 
      buttonsShowVertical:true,//按钮横排还是竖排
      showinput:false,//是否显示输入框
      imgsrc:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532578807508&di=4c389e1bcff86956f80802a179209414&imgtype=0&src=http%3A%2F%2Flol.91danji.com%2FUploadFile%2F20141128%2F1417165228238101.jpg",//图片显示
      buttons: [  //按钮内容
        { text: '取消', color: "#ff8427", types: 1 }, 
        { text: '确定', color: "#ff8427", types: 2 }
      ]
    }

方法

里面定义了两个方法属于弹出和关闭

弹出的自定义内容方法

  openDialog: function () {
    let qdDialog = this.data.qdDialog;
    qdDialog.show = true;
    qdDialog.content = '这是是内容';
    qdDialog.buttons = [{ text: '按钮', color: "#ff8427", types: 2 }];
    this.setData({ qdDialog: qdDialog })
  },

关闭弹框

  closeDialog: function () {
    let qdDialog = this.data.qdDialog;
    qdDialog.show = false;
    qdDialog.buttons = [];
    this.setData({ qdDialog: qdDialog })
  },

具体列子请看GitHub上面例子：GitHub - kingbuwu/dialog: 微信小程序dialog组件