vue中阻止@click事件冒泡

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=240, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, max...

初来乍到到

24069人浏览 · 2019-05-27 16:18:51

初来乍到到 · 2019-05-27 16:18:51 发布

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=240, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
  <title>rem 使用</title>
  <script src="vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div class="box">
    <el-button class="Procedure-btn" type="primary" @click="selectProcedure()">
      <i @click.stop="deleteFlow()" class="el-icon-delete"></i>点击
    </el-button>
  </div>
</body>
<script>
  const app = new Vue({
    el: '.box',
    methods: {
      selectProcedure() {
        console.log('点击了按钮')
      },
      deleteFlow() {
        console.log('点击删除图标')
      }
    }
  })
</script>
</html>

如果我们不使用.stop的话，当点击图标的时候就会执行两个点击事件.

vue官方事件阻止方法https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^