enementUi 表单

最新推荐文章于 2024-05-22 11:23:12 发布

山丘-

最新推荐文章于 2024-05-22 11:23:12 发布

阅读量220

点赞数

分类专栏： VueJS

本文链接：https://blog.csdn.net/qq_25635139/article/details/88103219

版权

VueJS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

radio与checkbox组件添加点击事件

方法一（:max="1"）：
 
<el-checkbox-group v-model="checkList" :max="1">
    <el-checkbox label="选项 A"></el-checkbox>
    <el-checkbox label="选项 B"></el-checkbox>
    <el-checkbox label="选项 C"></el-checkbox>
</el-checkbox-group>
 
data () {    
    return {
        checkList: ['选项A']
    }
}
 
方法二（@click.native.prevent）：
 
<el-radio-group v-model="radio2">
  <el-radio @click.native.prevent="clickitem(3)" :label="3"> 备选项</el-radio>
  <el-radio @click.native.prevent="clickitem(6)" :label="6"> 备选项</el-radio>
  <el-radio @click.native.prevent="clickitem(9)" :label="9"> 备选项</el-radio>
</el-radio-group>
           
clickitem (e) { 
     e === this.radio2 ? this.radio2 = '' : this.radio2 = e
 },

执行错误回调

callback(new Error('Please enter the correct user name'));

@click.native.prevent

<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">

{{ $t('login.logIn') }}

</el-button>

看到这个@click.native.prevent有点懵逼，

然后查了点资料，还是零零散散的资料。。自己总结一下

1.在封装好的组件上使用，所以要加上.native才能click

2.prevent就相当于..event.preventDefault()

this.$refs.loginForm.validate()