解决今天吃什么的问题，可以自己添加食物可也以用现成的

使用到的技术：

vue2 + element-ui

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>随机恰饭</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/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>
  <style>
    #app {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      height: 800px;
    }
    .content {
      display: flex;
      flex-direction: row;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    
    <el-input
      style="width: 500px;margin-bottom: 20px;"
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 4}"
      placeholder="请输入小吃"
      v-model="eatData">
    </el-input>
    <div class="content">
      <el-alert
        style="width: 250px;margin-right: 30px;"
        title="请用 ，,；;、 以及空格进行分割"
        center
        type="success"
        effect="dark"
        :closable="false">
      </el-alert>
      <el-button type="primary" round @click="eatClick">随机开始</el-button>
    </div>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        eatData: '火锅，煲仔饭，小龙虾,手抓饭，新疆馕、拉条子、烤包子；薄皮包子;羊肉焖饼,烤全羊,北京烤鸭',
        eatResult: '',
        dataList: []
      },
      methods: {
        eatClick() {
          const h = this.$createElement;
          if(this.eatData){
            this.eatResult = this.eatData.replace(/,|，|、|；|;|\s/g,",")
            this.dataList = this.eatResult.split(',')
            this.eatResult = this.dataList[Math.floor(Math.random() * (this.dataList.length))]
            this.$confirm(this.eatResult, '今天吃：', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              center: true
            }).then(() => {
              this.$message({
                type: 'success',
                message: h('p', null, [
                  h('span', null, '今天就是吃：'),
                  h('i', { style: 'color: red' }, this.eatResult)
                ])
              });
            }).catch(() => {
              this.$message({
                type: 'warning',
                message: h('p', null, [
                  h('span', null, '你真的不吃：'),
                  h('i', { style: 'color: red' }, this.eatResult),
                  h('span',null,' 吗?'),
                  h('span', { style: 'color: #409EFF;'}, ' o(╥﹏╥)o')
                ])
              });
            });
          }else{
            this.$message({
              type: 'error',
              message: h('p', null, [
                h('span', null, '小吃内容为空，请输入内容'),
                h('span', { style: 'color: #409EFF;'}, ' o(╥﹏╥)o')
              ])
            });
          }
        }
      },
      computed: {
        
      }
    })
  </script>
</body>
</html>
文章目录