vue 点击文字input_vue点击编辑按钮,内容变成input可以修改,也可以删除

1

2 export default {

3 name: 'official',

4 data () {

5 return {

6 activeButton: 0,

7 dialogTitle: '添加街道', // 控制弹出框title的变量

8 dialogVisible: false, // 弹出框显示隐藏的控制变量

9 isAddStreet: true, // true表示是添加街道数据,false表示添加的是社区工作站的数据

10 streetNameOrCommunityName: '', // 添加的时候用于保存街道的名称获取社区工作站的名称

11 isEditStreet: false, // 编辑街道

12 isEditCommunity: false, // 编辑社区

13 streetsData: [

14 {id: 1, name: '观湖街道'},

15 {id: 1, name: '民治街道'},

16 {id: 3, name: '观澜街道'},

17 {id: 4, name: '龙华街道'},

18 {id: 5, name: '大浪街道'},

19 {id: 6, name: '福城街道'}

20 ],

21 communityData: [

22 ]

23 }

24 },

25 methods: {

26 handleButtonClick (index) {

27 this.activeButton = index

28 },

29 /**

30 * flag:0表示添加街道,1表示添加社区

31 */

32 handleShowDialog (flag) {

33 this.isAddStreet = !flag

34 this.dialogTitle = flag ? '添加社区工作站' : '添加街道'

35 this.$nextTick(() => {

36 this.dialogVisible = true

37 })

38 },

39 addStreetOrCommunity () {

40 // 校验输入的内容不能为空

41 if (!this.streetNameOrCommunityName.length) {

42 this.$message.error('填写的名称不能为空或者空字符串')

43 return

44 }

45 // 1.校验一下当前添加的街道名称是否已经存在??街道名称是唯一的

46 // 2.添加成功之后,关闭弹出框,并且要重新请求数据

47 if (this.isAddStreet) {

48 // 调用添加街道的接口

49 this.streetsData.push({id: 10, name: this.streetNameOrCommunityName})

50 } else {

51 // 调用社区工作站的接口

52 this.communityData.push({id: 10, name: this.streetNameOrCommunityName})

53 }

54 // 清空streetNameOrCommunityName的数据,避免下次添加的时候显示上次的数据

55 this.streetNameOrCommunityName = ''

56 this.dialogVisible = false

57 },

58 handleBeforeClose (done) {

59 this.dialogVisible = false

60 done()

61 },

62 handleEditCommunity () {

63 this.isEditCommunity = true

64 },

65 handleSaveCommunity () {

66 this.isEditCommunity = false

67 },

68 handleEditStreet () {

69 this.isEditStreet = true

70 },

71 handleSaveStreet () {

72 this.isEditStreet = false

73 },

74 enterSystem () {

75 this.$router.push('/dashboard')

76 }

77 }

78 }

79

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值