vue.js怎样解决按钮多次点击重复提交

vue.js怎样解决按钮多次点击重复提交,第1张

建议使用ref,给button添加注册ref引用,然后在表单提交的时候,获取button按钮,使其disable置灰。

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件。

<div id="app">

  <button ref="mybutton" type="primary" @click="save">保存</button>

</div> <script>

new Vue({

  el: "#app",

  data: {

  },

  methods: {

   save() {

     this.$refs.mybutton.disabled = true

    }

  }

})

</script>

<style>

:disabled{   

    border: 1px solid #DDD   

    background-color: #F5F5F5   

    color:#ACA899   

}  

</style>

第一步:给el-tree组件标签加上属性highlight-current开启高亮

在这里插入图片描述

加了这个属性,选中的节点的样式才会有highlight-current类,这样接下来才能改变选中的节点的样式。

第二步:在css中修改高亮样式

一个小tip:这里建议是给该页面文件最外层的div加个专有的类,比如我这个页面是“组织配置”,标签就加个class=“organization_configuration”,然后style里的样式全部写在.organization_configuration{}中,这样就不用加scoped了,也更符合vue组件化的开发思路

在这里插入图片描述

<style lang="less">

.organization_configuration {

.el-tree--highlight-current

.el-tree-node.is-current

>.el-tree-node__content {

// 设置颜色

background-color: rgba(135, 206, 235, 0.2)// 透明度为0.2的skyblue,作者比较喜欢的颜色

color: #409eff// 节点的字体颜色

font-weight: bold// 字体加粗

}

1

2

3

4

5

6

7

8

9

10

11

1

2

3

4

5

6

7

8

9

10

11

来看一下页面效果:

在这里插入图片描述

如果想要的效果只是点击时高亮,失去焦点后变回原样的样式,就不用给标签加highlight-current属性了,直接修改css即可:

.el-tree-node:focus >.el-tree-node__content {

background-color: rgba(135, 206, 235, 0.3)

color: #409eff//节点的字体颜色

font-weight: bold

}

1

2

3

4

5

1

2

3

4

5

指定默认高亮树节点,参考:点击链接

使用el-tree组件的setCurrentKey方法,根据树组件的树节点的唯一id来制定某个树节点高亮。当然要搭配node-key="id"给树节点绑定唯一标识id,同时也要开启高亮模式(加上highlight-current属性),然后方式一设置高亮的颜色样式要加上。初始化加载默认高亮,所以在mounted钩子中书写代码即可。

完整代码:

<template>

<div class="box">

<el-tree

ref="myTree"

node-key="id"

:data="data"

:props="defaultProps"

highlight-current

>

</el-tree>

</div>

</template>

<script>

export default {

data() {

return {

data: [

{

name: "西游记",

id: "xiyouji",

children: [

{

name: "孙悟空",

id: "sunwukong",

children: [

{

name: "大猴子",

id: "dahouzi",

children: [],

},

{

name: "二猴子",

id: "erhouzi",

children: [],

},

],

},

{

name: "猪八戒",

id: "zhubajie",

children: [],

},

{

name: "沙和尚",

id: "shaheshang",

children: [],

},

],

},

{

name: "水浒传",

id: "shuihuzhuan",

children: [

{

name: "宋江",

id: "songjiang",

children: [],

},

{

name: "武松",

id: "wusong",

children: [],

},

],

},

],

defaultProps: {

children: "children",

label: "name",

},

}

},

mounted() {

this.$nextTick(function () {

this.$nextTick(() =>{

// myTree 数组件的ref 默认让第一项高亮

// data是树组件对应的数据

// 通过data中的第一项的id找到对应的节点,然后把这个节点设置为高亮

this.$refs.myTree.setCurrentKey(this.data[0].id)

})

})

},

}

</script>

<style lang="less" scoped>

// 设置高亮颜色

/deep/ .el-tree--highlight-current .el-tree-node.is-current >.el-tree-node__content {

background-color: #baf !important

}

</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

setCurrentKey方法是通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性,因为要确定唯一性,node-key="id"因为一般都是id具有唯一性,所以绑定id。

1.字符串

通过 this.refs.demo 来引用真实dom的节点,建议不要使用它,因为字符串引用有一些问题,被认为是遗留问题,很可能会在未来的某个版本中删除。新版好像不推荐这样使用了

<input  ref="demo" type ="text" placeholder='点击之后提示数据'/>

2.回调函数(内联形式)

回调函数就是在dom节点或组件上挂载函数,函数的入参是dom节点或组件实例,达到的效果与字符串形式是一样的,都是获取其引用。(实际开发中使用的比较多)

 <input ref={(currentNode)=>{this.input1=currentNode}} type="text" placeholder='点击之后提示数据'/> 

3.回调函数(外联形式)

<input ref={this.saveInput} type="text" placeholder='点击之后提示数据'/>

saveInput=(current)=>{

    console.log(current)

    this.input1=current

  }

4.React.createRef()

React.createRef()是React 16.3之后引入的新API。如果您使用的是早期版本的React,我们建议您使用回调引用。Refs是使用属性创建的,React.createRef()并通过ref属性附加到React元素。在构造组件时,通常将Refs分配给实例属性,以便可以在整个组件中引用它们。

<input ref={this.myRef1} type="text" placeholder='点击提示createRef'/>

myRef1= React.createRef() //专人专用每次都只能一次,

myRef2= React.createRef() //专人专用每次都只能一次,

获取input的值:console.log(this.myRef.current.value)

React 官方文档中如此声明:"如果你目前还在使用 this.refs.textInput 这种方式访问 refs ,我们建议用回调函数或 createRef API 的方式代替。" 为何如此糟糕?

自行百度吧、因为我也不知道!!!!

以上就是react中ref一些总结、希望能帮到一些同学们


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11638466.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-17
下一篇 2023-05-17

发表评论

登录后才能评论

评论列表(0条)

保存