mui prompt对话框自定义样式

72 阅读 0 评论 48 点赞

我是靠谱客的博主粗暴水蜜桃，最近开发中收集的这篇文章主要介绍mui prompt对话框自定义样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近项目中的新需求，在原有项目上，增加自定义弹框。说明一下，项目是公司上一个前端用mui框架做的，对于mui我是没有接触过得，在这基础上还要改别人的代码也是很悲剧。

自定义mui prompt弹框在网上找了不少资料，梳理了一下两种写法

 官网写法，有局限性没有详细说明如何自定义样式
//修改弹出框默认input类型为password
mui.prompt('text','deftext','title',['true','false'],null,'div')
document.querySelector('.mui-popup-input input').type='password'
自定义写法
1. 需要增加的内容代码写出来，然后添加在对话框类元素里面
var g = '<input type="text" placeholder="请输入重量(g)" id="weight"/><input type="number" id="price" placeholder="填入价格(元)"/></div>';
var dom = $(".mui-popup-input").append(g);
2. 如上同样方法，使用innerHtml,添加内容到dom元素中
$(".mui-popup-input").innerHtml = g