vue+cube 评价/意见反馈页面

最新推荐文章于 2024-07-14 15:36:11 发布

宝儿的程序生涯

最新推荐文章于 2024-07-14 15:36:11 发布

阅读量3.5k

点赞数 5

分类专栏： cube-ui

本文链接：https://blog.csdn.net/fengtingYan/article/details/88847542

版权

本文介绍了使用Vue和cube组件库创建一个评价/意见反馈页面的过程，包括星星评分功能的实现，其中通过简单的CSS让星星颜色变化。同时提到了意见反馈部分，该部分允许用户上传图片，但存在一个右上角删除图标显示不出来的bug。源码时间戳为2019年03月27日。

摘要由CSDN通过智能技术生成

2020.3.31
在这里插入图片描述

1 星星

在这里插入图片描述

<!--星星  -->
<div class="star-wrapper"
     style="margin-top: 40px">
  <span class="star">机舱环境</span>
  <cube-rate v-model="value1"></cube-rate>
</div>
<div class="star-wrapper">
  <span class="star">服务态度</span>
  <cube-rate v-model="value2"></cube-rate>
</div>
<div class="star-wrapper">
  <span class="star">整体印象</span>
  <cube-rate v-model="value4"></cube-rate>
</div>

data () {
   
    return {
   
      value1: 0, // 环境
      value2: 0, // 态度
      value4: 0 // 印象
    }
  },

<style lang="stylus" scoped type="text/css">
>>> .cube-rate {
   
  max-width: 60%;
}
.star {
   
  color: #95a9bf;
  display: inline-flex;
  margin-right: 10px;
}
.star-wrapper {
   
  font-size: 12px;
  width: 180px;
  margin-top: 0px;
  margin-left: 30px;
  margin-right: 30px;
  font-weight: 200;
  padding: 3px 0;
  text-align: left;
  line-height: 20px;
  .cube-rate-item {
   
    width: 25px;
    height: auto;
    background-size: 50%;
    background-color: grey;
    .cube-rate-item.active, .rate-item {
   
      background-color: orange;
    }
  }
}
</style>

星星变颜色
在这里插入图片描述

就这几行css就让星星变颜色了，太神奇了叭，

<style type="text/css">
li.cube-rate-item.cube-rate-item_active div.cube-rate-item-def {
   
  background-image: url("../assets/images/system/start_red.png");
}
li.cube-rate-item div.cube-rate-item-def {
   
  /*background: url("..");*/
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url("../assets/images/system/start_unacive.png");
}
</style>

2 意见反馈与上传图片

在这里插入图片描述
改造，这里限制最多九张图

<template>
  <div class="opinion-content">
    <Nav></Nav>
    <div class="info">
      <!--建议 -->
      <div class="suggest">
        <cube-textarea indicator="indicator"
                       v-model="value3"
                       placeholder="请输入您的意见或建议"
                       style="border: none"></cube-textarea>
        <div class="selectPic">
          <!-- <input multiple
                 type="file"
                 ref="file"
                 id="uploadFile"> -->
          <!--  multiple:是否支持多选
                  max:最多上传几张
                  list:编辑反显使用 -->
          <updatefile v-on:fileChange="fileChange"
                      :multiple="true"
                      :list="imgList"
                      ref="upload"
                      v-model='upload'></updatefile>
        </div>
      </div>
      <br>
    </div>
  </div>
</template>
<script>
import registryToast from '../components/common/toast/index'
import Nav from '../components/common/Nav.vue'
import uploadImages from '../components/opinion/uploadImages'
export default {
   
  components: {
   
    updatefile: uploadImages,
    Nav: Nav
  },
  data () {
   
    return {
   
      value1: 0, // 环境
      value2: 0, // 态度
      value4: 0, // 印象
      value3: '', // 意见
      indicator: {
   
        negative: true,
        remain: true
      },
      imgList: [],
      upload: []
    }
  },
  created: function () {
   
  },
  methods: {
   
    fileChange (data) {
   
      this.imgdata = data
    },
    back2: function () {
   
      if (this.value3.length > 1 || this.imgdata.length > 0 || this.phone.length > 0) {
   
        if (confirm('是否确认退出？')) {
   
          this.$router.go(-1) // 返回上一层
        }
      } else {
   
        this.$router.go(-1) // 返回上一层
      }
    }
  }
}
</script>

<style type="text/css">
/* 星星 */
li.cube-rate-item.cube-rate-item_active div.cube-rate-item-def {
   
  background-image: url("../assets/images/system/start_red.png");
}
li.cube-rate-item div.cube-rate-item-def {
   
  /*background: url("..");*/
  background-repeat: no-repeat;
  background-position: 50%;
  background-image: url("../assets/images/system/start_unacive.png");
}
/* 意见不加边框 */
/* 输入框固定 */
textarea::-webkit-input-placeholder {
   
  color: #cad5e2;
  font-weight: 200;
}

.cube-textarea-wrapper {
   
  height: 75px;
}

div.cube-textarea-wrapper:after {
   
  border: none;
}

textarea:-moz-placeholder {
   
  color: #cad5e2;
  font-weight: 200;
}

textarea:-ms-input-placeholder {
   
  color: #cad5e2;
  font-weight: 200;
}
/* 上传图片的X号边框 */
i.iconfont.icon-chahao.upload_warp_img_div_del {
   
  border: none;
}

.opinion-content {
   
  /* background-color: rgba(247, 249, 252, 1); */
}
</style>
<style lang="stylus" scoped>
/* 星星 */
>>> .cube-rate {
   
  max-width: 60%;
}
.star {
   
  color: #95a9bf;
  display: inline-flex;
  margin-right: 10px;