vue2.0elementUI

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

上一篇 下一篇

猜你喜欢

热点阅读