elementUI 弹框
2019-04-01 本文已影响65人
zlf_j
弹框
一、自定义图标 (通过class名)
屏幕快照 2019-04-01 下午4.42.09.png
const h2 = this.$createElement // 创建元素
this.$msgbox({
title: '导入成功',
message: h2('p', { style: 'margin: 0 30px -50px 30px;' }, [
// 通过 class名添加图标
h2('i', { class: 'el-icon-circle-check', style: 'font-size: 32px;margin-bottom:10px;color: #F5A400;' }, ''),
h2('p', { style: 'font-size: 16px;margin-bottom:10px;' }, '导入完成!')
]),
showCancelButton: false, // 不显示取消按钮
showConfirmButton: false // 不显示确定按钮
}).then(action => {
// 点击确定后执行的方法
}).catch(() => {
// 点击取消后执行的方法
})
二、自定义按钮及点击事件
屏幕快照 2019-04-01 下午4.47.15.png
this.$msgbox({
title: '导入项目',
dangerouslyUseHTMLString: true, // 可以读取html字段
customClass: 'import_custom', // 动态设置这个弹框的class,可以修改样式
message: '<div style="margin: -20px 0 0 30px;text-align:left;">' +
'<p>下载模板</p><p style="color: #A1A1A1;font-size:12px;margin: 10px 0;">为提高导入的成功率,请下载并使用系统提供的模板。</p>' +
'<button style="width:100px;height:30px;background:#F5A400;color: #fff;border-radius:2px;border:none;" id="download">下载模板</button></div>',
showCancelButton: false,
confirmButtonText: '开始导入' // 确定按钮的字,可以自己修改
}).then(action => {
// 点击开始导入,执行的事件
}).catch(() => {
})
弹框按钮的点击事件,可以用jquery
$('body').undelegate('#download', 'click').delegate('#download', 'click', function (evt) {
evt.stopPropagation()
console.log('下载模板')
})
.undelegate('#download', 'click') // 防止按钮点击事件执行2次
evt.stopPropagation() // 防止点击事件执行多次
https://bbs.csdn.net/topics/390602104?page=1
三、文字提示,自动消失
屏幕快照 2019-04-01 下午4.55.34.png
const h1 = this.$createElement
this.$message({
message: h1('p', { style: 'text-align: center;width:100%;' }, [
h1('span', { style: 'color: #F5A400;' }, '导入成功!')
]),
duration: 1000 // 显示事件,1s后自动消失
})
四、动态展示复选框 (监测每个复选框选中的事件 jQuery)
屏幕快照 2019-04-01 下午4.57.52.png
data () {
return {
selectCount: 200, // 选中的数据
exportCount: 300, // 全部数据
checkboxData: [{
name: '字段1',
id: 1
}, {
name: '字段2',
id: 2
}, {
name: '字段3',
id: 3
}, {
name: '字段4',
id: 4
}, {
name: '字段5',
id: 5
}, {
name: '字段6',
id: 6
}, {
name: '字段7',
id: 7
}, {
name: '字段8',
id: 8
}, {
name: '字段9',
id: 9
}, {
name: '字段10',
id: 10
}],
optionalData: [{
name: '字段11',
id: 11
}, {
name: '字段12',
id: 12
}, {
name: '字段13',
id: 13
}, {
name: '字段14',
id: 14
}, {
name: '字段15',
id: 15
}, {
name: '字段16',
id: 16
}, {
name: '字段17',
id: 17
}, {
name: '字段18',
id: 18
}, {
name: '字段19',
id: 19
}, {
name: '字段20',
id: 20
}],
check_val: [] // 选中的复选框
}
},
methods: {
exportData () {
this.$msgbox({
title: '导出项目',
dangerouslyUseHTMLString: true,
customClass: 'import_custom export_custom',
message: '<p class="export_title">导出那些数据</p><p class="export_content"><span>当前筛选的数据(' + this.selectCount + ')</span><span>全部数据(' + this.exportCount + ')</span>' +
'</p><p class="export_title">导出那些数据</p><div id="fixed_checkbox">' + this.getCheckboxs(this.checkboxData, '#fixed_checkbox') + '</div><p class="optional_title">可选字段</p>' +
'<div id="optional_checkbox">' + this.getCheckboxs(this.optionalData, '#optional_checkbox') + '</div>',
showCancelButton: false,
confirmButtonText: '开始导出'
}).then(action => {
console.log('导出')
console.log(this.check_val)
}).catch(() => {
})
},
getCheckboxs (data, id) {
// 延时器,防止方法执行时,请求不到弹框中的元素
setTimeout(function () {
$(id).empty() // 清空该元素中的内容
data.forEach((item, index) => {
let li = document.createElement('li')
let checkbox = document.createElement('input')
if (id === '#fixed_checkbox') { // 默认选中,不可修改
checkbox.setAttribute('checked', true)
checkbox.setAttribute('disabled', true)
} else {
checkbox.className = 'select_checkbox'
}
checkbox.setAttribute('type', 'checkbox')
checkbox.setAttribute('value', item.id)
checkbox.setAttribute('name', item.name)
let span = document.createElement('span')
span.innerHTML = item.name
li.appendChild(span)
li.appendChild(checkbox)
$(id).append(li)
}, this)
}, 100)
}
},
mounted () {
let that = this
$('body').undelegate('.select_checkbox', 'click').delegate('.select_checkbox', 'click', function (evt) {
evt.stopPropagation() // 阻止事件冒泡
let inputs = document.querySelectorAll('.select_checkbox')
that.check_val = []
for (let i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
that.check_val.push(Number(inputs[i].value))
}
}
console.log(that.check_val)
console.log('筛选数据')
})
}
修改原生js 复选框的样式(如上图)
.export_custom input[type="checkbox"]{width:10px;height:10px;display: inline-block;text-align: center;vertical-align: middle; line-height: 14px;position: relative;top: -1px;border-radius: 50%;}
.export_custom input[type="checkbox"]::before{content: "\2713";position: absolute;top: -2px;left: -2px;background: #cabdbd;color: #fff;width: 14px;height: 14px;border: none;border-radius: 50%;}
.export_custom input[type="checkbox"]:checked::before{content: "\2713";background-color: #F5A400;position: absolute;top: -2px;left: -2px;width:14px;height: 14px;border: none;color:#fff;font-size: 13px;border-radius: 50%;}
遇到的问题
element-ui 弹窗的this.$confirm框报错Uncaught (in promise) cancel
this.$confirm('您编辑的内容尚未保存,确定返回吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
center: true,
customClass: 'save_custom',
closeOnClickModal: false
}).then(() => {
window.history.go(-1)
}).catch(() => {
})
结尾没写 .catch(() => {});
https://blog.csdn.net/qq_33769914/article/details/82627911