请选择 进入手机版 | 继续访问电脑版
 找回密码

上海老站长门户

点击联系客服
客服QQ: 客服微信:
查看: 40|回复: 35

实现vue表白墙效果 大家快学!

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-9-14 07:27:13 | 显示全部楼层 |阅读模式



表白墙

代码:

Template

迪夫

Button

类=“btnadd”

@click='dialogVisible=true  '

添加告白对象/button

Div  class='Confession  '

迪夫

类=“名称”

V-for=' (item,index) inconfession  '

:键=“索引”

P  class=
;"label">{{item.label}}/p>
        div>
          p>{{item.title}}/p>
          p>{{item.content}}/p>
        /div>
      /div>
    /div>
    el-dialog
      title="添加表白对象"
      :visible.sync="dialogVisible"
      width="30%"
    >
      div>
        div>
          p>表白人姓名:/p>
          el-input
            v-model="allcontent.label"
            placeholder="请输入表白人姓名"
          >/el-input>
        /div>
        div>
          p>表白标头:/p>
          el-input
            v-model="allcontent.title"
            placeholder="请输入表白标头"
          >/el-input>
        /div>
        div>
          p> 表白内容:/p>
          el-input
            v-model="allcontent.content"
            placeholder="请输入表白内容"
          >/el-input>
        /div>
      /div>
      span
        slot="footer"
        class="dialog-footer"
      >
        el-button @click="dialogVisible = false">取 消/el-button>
        el-button
          type="primary"
          @click="submit"
        >确 定/el-button>
      /span>
    /el-dialog>
  /div>
/template>
script>
export default {
  name: 'HelloWorld',
  props: {
  },
  data() {
    return {
      allcontent: {
        label: '',
        title: '',
        content: ''
      },
      dialogVisible: false,
      confession: [
        {
          label: '张三',
          title: '爱你',
          content: '我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了'
        },
        {
          label: '张三',
          title: '爱你',
          content: '我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了'
        },
        {
          label: '张三',
          title: '爱你',
          content: '我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了'
        },
        {
          label: '张三',
          title: '爱你',
          content: '我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了'
        },
        {
          label: '张三',
          title: '爱你',
          content: '我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了'
        },
        {
          label: '张三',
          title: '爱你',
          content: '我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了'
        },
        {
          label: '张三',
          title: '爱你',
          content: '我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了我来表白你了'
        }
      ]
    }
  },
  methods: {
    submit() {
      if (this.allcontent.label === '') {
        this.$message('输入表白对象姓名');
      } else if (this.allcontent.title === '') {
        this.$message('输入表白标头');
      } else if (this.allcontent.content === '') {
        this.$message('输入表白内容')
      } else {
        this.confession.push(this.allcontent)
        this.dialogVisible = false
        this.allcontent = {
          label: '',
          title: '',
          content: ''
        }
      }
    }
  }
}
/script>
!-- Add "scoped" attribute to limit CSS to this component only -->
style scoped>
.btnAdd {
  border: none;
  background-color: rgb(247, 27, 27);
  width: 200px;
  height: 60px;
  color: #fff;
  border-radius: 30px;
  cursor: pointer;
}
.Confession {
  width: 80%;
  height: 80%;
  background-color: rgb(230, 178, 68);
  margin: 100px auto;
  padding: 20px;
  color: #fff;
  background: url('./images/bgi.jpg');
  background-size: contain;
  display: flex;
  flex-wrap: wrap;
}
.name {
  width: 200px;
  min-height: 200px;
  background-color: #fff;
  background-image: url('./images/demo2.webp');
  background-size: contain;
  padding: 30px;
  margin: 20px;
}
.label {
  margin-top: -30px;
}
/style>
回复

使用道具 举报

1

主题

652

帖子

200

积分

中级会员

Rank: 3Rank: 3

积分
200
发表于 2021-9-14 08:06:48 | 显示全部楼层
过来看看的
回复

使用道具 举报

1

主题

571

帖子

128

积分

注册会员

Rank: 2

积分
128
发表于 2021-9-14 08:39:48 | 显示全部楼层
LZ真是人才
回复

使用道具 举报

1

主题

643

帖子

146

积分

注册会员

Rank: 2

积分
146
发表于 2021-9-14 09:01:14 | 显示全部楼层
相当不错,感谢无私分享精神!
回复

使用道具 举报

1

主题

636

帖子

192

积分

注册会员

Rank: 2

积分
192
发表于 2021-9-14 10:10:26 | 显示全部楼层
不错不错,很好哦
回复

使用道具 举报

1

主题

641

帖子

241

积分

中级会员

Rank: 3Rank: 3

积分
241
发表于 2021-9-14 10:32:51 | 显示全部楼层
学习了,不错,讲的太有道理了
回复

使用道具 举报

1

主题

610

帖子

185

积分

注册会员

Rank: 2

积分
185
发表于 2021-9-14 11:01:14 | 显示全部楼层
看帖回帖是美德!
回复

使用道具 举报

1

主题

617

帖子

193

积分

注册会员

Rank: 2

积分
193
发表于 2021-9-14 11:22:33 | 显示全部楼层
难得一见的好帖
回复

使用道具 举报

3

主题

688

帖子

300

积分

中级会员

Rank: 3Rank: 3

积分
300
发表于 2021-9-14 11:44:25 | 显示全部楼层
有竞争才有进步嘛
回复

使用道具 举报

2

主题

640

帖子

175

积分

注册会员

Rank: 2

积分
175
发表于 2021-9-14 12:10:24 | 显示全部楼层
好帖,来顶下
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ| 无图版|手机版|小黑屋| 上海@IT精英团

Copyright © 2001-2015 Comsenz Inc.   All Rights Reserved.

Powered by Discuz! X3.4

快速回复 返回顶部 返回列表