H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue + jq + elementui混用的非脚手架项目里如何触发显示弹窗的事件

一个非常恶心的项目中 不知道是谁用了vue+jq+elementui混用的

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="../../Plugin/Jquery/jquery-2.2.3.min.js"></script>
  <link href="../../Content/Accident/flowChart.css" rel="stylesheet">
  <link href="https://cdn.bootcss.com/element-ui/2.11.1/theme-chalk/index.css" rel="stylesheet">

  <title>企业事故隐患排查</title>
</head>

<body>
  <div class="btn" onclick="goBack()"></div>
  <div class="container">
    <div class="flowLeft"></div>
    <div class="flowRight">
      <div class="letter">
        <div class="letterValue"></div>
      </div>
      <div class="destination ywzx"></div>
      <div class="destination hyhhd1"></div>
      <div class="destination gjzdz"></div>
      <div class="destination hyhhd2"></div>
      <div class="destination gssgl"></div>
      <div class="destination hyhhd3"></div>
      <div class="destination yb"></div>
      <div class="destination info"></div>
      <div class="fixed-div"></div>
      
    </div>
  </div>
  <div id="app">
    <template>
      <div class="show"  @click="dialogFormVisible = true">dfasdfsafs</div>
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="活动名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" :label-width="formLabelWidth">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </template>
  </div>
</body>
<script src="../../Content/Accident/flowChart.js"></script>
<!-- 在element之前引入vue.js -->
<script src="../../Content/Table/js/vue.js"></script>
<!-- import JavaScript -->
<script src="../../Content/Table/js/index.js"></script>
<script>
  function goBack() {
    window.history.go(-1)
  }
  $(".fixed-div").on("click", function () {
    window.location.href = '../SafeTable/DangerRegister.html';
  });
  new Vue({
    el: '#app',
    data: function () {
      return {
        dialogFormVisible: false,
      }
    },
    methods: {
    

    }
  })
</script>

</html>

<div class=”fixed-div”></div> 是一个透明的div 绝对定位在div的背景图上 现在想给这个div绑定一个点击事件 控制 弹出框

不知道 这个方法 是放在methods里面写 还是 写在function里面 而且 如果把这个div放在div #app下 不显示

求写过的大神 指点一下

回答:

排除methods 因为 el: '#app'
jq可以 $(function(){……})

回答:

//定义 全局函数
function init(obj) {
    $(".fixed-div").on("click", function () {
        obj['showDialog'](参数)
      });
}


var vm = new Vue({
  ...
  mounted() {
    let obj = {
        showDialog:this.showDialog //显示弹窗
    } 
    init(obj);
  },
    methods: {
        showDialog(str) {
              this.$message(str);
            },
    }
})

大概就是这样用。

回答:

初始化vue的时候写成这样,然后就可以用 window.globalVue.youMethod()执行vue中的方法了

window.globalVue = new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
});

本文地址:H5W3 » vue + jq + elementui混用的非脚手架项目里如何触发显示弹窗的事件

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址