vue组件清单回顾

vue组件清单回顾

一、循环组件

循环的div块，其他组件也可以

<div v-for="o in dbData" :key="o">
</div>

二、jS遍历数组重新组值两种方法

1、
for (let i = 0; i < res.length; i++) {
            const percentage = (res[i].next_value / res[i].max_value) * 100
            res[i].name = parseInt(percentage)
            cDate.push(new Date(res[i].create_time))
          }
2、data是数组，重新组值
success: function(data) {
          var tableData = []
          let obj = {}
          // 重新构建新的
          for (const key in data) {
            ++this.rowNum
            obj = data[key]
            obj.row = this.rowNum
            obj.ip = key
            obj.desk_use = parseInt(toPointNoBest(data[key].disk_Used_rate))
            obj.mem_use = parseInt(toPointNoBest(data[key].rate_mem))
            obj.cpu_use = parseInt(toPointNoBest(data[key].sys_cpu_rate))
            var ipimg = sulast(key)
            // 服务器图片
            obj.imgurl = this.serverImgBck(ipimg)

            tableData.push(obj)
          }
          this.tableData = tableData
        },

三、vue使用图片控件进度条

<img :src="item.imgurl" class="one-img"/>

serverImgBck(ipimg) {
      if (parseInt(ipimg) < 75) {
        return require('../../../../assets/img/server/servera.jpg')
      } else if (parseInt(ipimg) <= 100) {
        return require('../../../../assets/img/server/serverb.jpg')
      } else if (parseInt(ipimg) <= 200) {
        return require('../../../../assets/img/server/serverc.jpg')
      } 
    },

四、对于这样实现注意几点样式问题

1、左右对齐，使用：align=“center” 和 text-align: center;
2、上下对齐，使用高度
3、每一块之间宽度使用百分比
4、不换行：display: inline-block;
5、margin-top: 15px; 和 padding-top: 6px; 区别

五、vuex传值控制弹框

1、编写弹窗页面：ExchangeJudge1.vue

<template>
</template>
<script>
// 监听属性 类似于data概念
computed: {
  isExchangeJudge1: function () {
    return this.$store.state.isExchangeJudge1
  },
},
methods: {
handleCancel: function () {
      this.$store.commit('ispopupExchange1', { isExchangeJudge1: false });
    }
}
</script>

2、编写仓库js：store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 定义默认为false
const isPopupCardNum2 = false

const state = {
  isPopupCardNum2: JSON.parse(isPopupCardNum2)
}

const mutations = {
  ispopupCNum2: function (state, isPopupCardNum2) {
    state.isPopupCardNum2 = isPopupCardNum2.isPopupCardNum2
  }
}

// 注册参数
export default new Vuex.Store({
  state,
  mutations
})

六、徒手写table表格

<section class="content-detail">
        <div id="table_wrap" >
          <table class="table" width="800" cellspacing="0" cellpadding="0">
            <thead class="table_head">
            <tr>
              <th>兑换日期</th>
              <th>兑换内容</th>
              <th>消耗内容</th>
            </tr>
            </thead>
            <tbody class="table_tbody">
            <tr v-for="his in list" class="tabContent">
              <td v-text="his.arriveTime"></td>
              <td v-text="his.exchangeName"></td>
              <td v-text="his.moonCakeData"></td>
            </tr>
            </tbody>
          </table>
        </div>
      </section>

.content-detail {
      text-align: center;

      #table_wrap > table {
        color: #eac56b;
        margin: 8rem auto;
        width: 80%;
        font-size: 10px;
        border-collapse: separate;
        border-spacing: 0;
        border: 1px #000;
      }
      .table tbody{
        // 表格高度
        height: 16.8rem;
        overflow-y: auto;
      }

      .table thead, .table tbody {
        display: block;
      }
      .table thead{
        display: block;
        color: #ECE0BD;
      }

      .table th{
        width: 400px;
      }

      .table td{
        width: 150px;
      }

      table thead tr,table tbody tr {
        height: 30px;
        line-height: 18px;
        /*background-color: pink;*/
      }
      table tr th:first-child,table tr td:first-child {/*设置table左边边框*/
        border-left: 1px solid #60528C;
      }
      table tr th:last-child,table tr td:last-child {/*设置table右边边框*/
        border-right: 1px solid #60528C;
      }
      table tr td:first-child,
      table tr td:nth-child(2),
      table tr td:nth-child(3),
      table tr td:last-child{/*设置table表格每列底部边框*/
        border-bottom: 1px solid #60528C;
      }
      /*设置table表格最后一列底部边框*/
      table tr:last-child td:first-child,
      table tr:last-child td:nth-child(2),
      table tr:last-child td:nth-child(3),
      table tr:last-child td:last-child{
          border-bottom: 2px solid #60528C;
      }
      table tr th {
        background: #202671;
      }
      table tr:first-child th:first-child {
        border-top-left-radius: 12px;
      }

      table tr:first-child th:last-child {
        border-top-right-radius: 12px;
      }
      table tr:last-child td:first-child {
        border-bottom-left-radius: 12px;
      }

      table tr:last-child td:last-child {
        border-bottom-right-radius: 12px;
      }
    }

效果图

七、element栅栏五等分

<el-col :xs="12" :sm="12" :lg="{span: '4-8'}" class="card-panel-col">
</el-col>

.el-col-lg-4-8 {
  width: 20%;
}

八、Js动态控制css样式

页面

<div class="el-card__body" v-bind:class="isActive?'colorFall':'colorRise'">

</div>

样式

.colorRise {
  color: green;
}

.colorFall {
  color: red;
}

data () {
  return {
    isActive: true
  }
},
// 我这里是页面加载时候的事件
mounted () {
    let _this = this
    if (_this.riseFallNum < 0) {
      _this.isActive = false
    }
  },

九、click点击事件作用在自定义组件上无效果

需要加上.native

@click.native="handleClick(value.id)"