Vue Element-Ui 需求及解决1

0.单个页面修改Element-Ui组件

知识点： vue中，使用scoped表示它的样式作用于当下的模块，避免造成组件之间的样式污染；用/deep/ 操作符(中间有空格) 穿透scoped。

<style  scoped>
    div /deep/ .el-header {
      background-color: #67c23a;
      line-height: 60px;
    }
</style>
复制代码

1.编辑页面中后端返回数据，其中auto_create_group返回0时el-switch开启，返回1时el-switch关闭。即把控制开关的true和false改成用数字代表。

知识点：:active-value="0"是v-bind:active-value="0"的省略写法，v-bind用于设置元素的属性。

          <el-switch
            v-model="form1.auto_create_group"
            :active-value="0"
            :inactive-value="1"
          >
          </el-switch>
复制代码

2.列表页中后端返回数据，该行status==0时显示“启用”，status==1时显示“停用”。

注意点：带有 slot-scope attribute 的作用域插槽自 2.6.0 起被废弃。

        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0">启用</span>
            <span v-if="scope.row.status == 1">停用</span>
          </template>
        </el-table-column>
复制代码

3.列表页中加进度条，鼠标悬浮时显示进度信息。

总结:
1.进度条的实质是在文字上覆盖不同长度的半透明的颜色块
2.background-color: RGB(25, 136, 252, 0.4);最后一个参数表示透明度范围在[0,1]之间,0完全透明,1完全不透明
3.常见的单行文本溢出显示省略号
  white-space: nowrap;//段落中的文本不进行换行
  text-overflow: ellipsis;//当文本溢出包含元素时显示省略号
  overflow: hidden;//内容溢出时设置不可见
4.实现"覆盖"需要用到相对定位和绝对定位
复制代码

    <el-table-column prop="chat_ids" label="可加入群聊" width="140">
          <template slot-scope="scope">
          <!-- 这部分是Tooltip文字提示 -->
            <el-tooltip placement="right">
              <div slot="content">
                <div v-for="(item, index) in scope.row.chat_ids" :key="index">
                  {{ scope.row.chat_ids[index].name }}&nbsp; 目前是{{
                    scope.row.chat_ids[index].people
                  }}人,进度{{ scope.row.chat_ids[index].progress }}%
                </div>
                <span>说明:进度是以（当前群人数 ÷ 200人）计算</span>
              </div>
              <!-- 这部分是给列表画进度条 -->
              <div>
                <div
                  v-for="(item, index) in scope.row.chat_ids"
                  :key="index"
                  style="
                    border: 1px solid #dcdfe6;
                    border-radius: 3px;
                    margin-top: 4px;
                    display: block;
                    width: 100px;
                    position: relative;
                    box-sizing: border-box;
                  "
                >
                <!--整个进度条为100px，每条数据根据实际情况百分比直接换算成px-->
                  <div
                    style="
                      position: absolute;
                      background-color: RGB(25, 136, 252, 0.4);
                      z-index: 1;
                      left: -1px;
                    "
                    :style="
                      'width:' + scope.row.chat_ids[index].progress + 'px'
                    "
                  >
                    &nbsp;
                  </div>
                  <div
                    style="
                      position: relative;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                      overflow: hidden;
                      z-index: 2;
                    "
                  >
                    {{ item.name }}
                  </div>
                </div>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
复制代码

4.用elementui写移动端的分页组件(第一页和最后一页按钮禁用)

第一页和最后一页按钮禁用:用v-if控制currentPage不同情况——等于1，等于allPage，介于两者之间

        <div class="pagination">
        <div class="pageButton" v-if="currentPage > 1" @click="prevPage">
          上一页
        </div>
        <div class="disButton" v-if="currentPage == 1">上一页</div>
        <div class="pageButton">第{{ currentPage }}页</div>
        <div class="pageButton" v-if="currentPage != allPage" @click="nextPage">
          下一页
        </div>
        <div class="disButton" v-if="currentPage == allPage">下一页</div>
      </div>
      <div>
复制代码

    nextPage() {
      this.currentPage = this.currentPage + 1;
      // this.listpost();
      // this.$emit('setPage', this.currentPage + 1)
    },
    prevPage() {
      this.currentPage = this.currentPage - 1;
      // this.listpost();
      // this.$emit('setPage', this.currentPage - 1)
    },

    setPage(page) {
      this.currentPage = page;
      console.log(this.currentPage);
    },

复制代码

    .pagination {
      width: 100%;
      margin: 10px auto;
      display: inline-flex;
      justify-content: space-between;
      height: 40px;
    }
    .pageButton {
      line-height: 40px;
      text-align: center;
      width: 32%;
      border-radius: 4px;
      box-shadow: 1px 2px 12px 0 rgb(0 0 0 / 8%);
      color: #003770;
      // font-size: 14px;
      font-weight: 600;
    }
    .disButton {
      line-height: 40px;
      text-align: center;
      width: 32%;
      border-radius: 4px;
      box-shadow: 1px 2px 12px 0 rgb(0 0 0 / 8%);
      color: rgb(0 0 0 / 8%);
      // font-size: 14px;
      font-weight: 600;
    }
复制代码

5.移动端底部导航栏

知识点:路由传值:this.$router.push()

    <template>
      <div class="tab-fill-height">
        <div class="tab-position-fixed">
          <!-- <div class="bar"> -->
          <div class="barItem" @click="runToMain">
            <div class="iconfont icon-faxian"></div>
            <div>观星盘</div>
          </div>
          <div class="barItem" @click="runToEC">
            <div class="iconfont icon-erweima"></div>
            <div>员工活码</div>
          </div>
          <div class="barItem" @click="runToGLC">
            <div class="iconfont icon-erweima1"></div>
            <div>无限群活码</div>
          </div>
          <div class="barItem" @click="runToMF">
            <div class="iconfont icon-yingyong"></div>
            <div>更多应用</div>
          </div>
        </div>
        <!-- </div> -->
      </div>
    </template>

    <script>
    export default {
      methods: {
        runToMain() {
          this.$router.push({
            path: "/mobile/main",
          });
        },
        runToGLC() {
          this.$router.push({
            path: "/mobile/xxx",
          });
        },
        runToEC() {
          this.$router.push({
            path: "/mobile/xxx",
          });
        },
        runToMF() {
          this.$router.push({
            path: "/mobile/xxx",
          });
        },
      },
    };
    </script>

    <style lang="scss" scoped>
    .tab-fill-height {
      width: 100%;
      height: 70px;
    }
    /*兼容iphoneXR底部遮住小黑条*/
    @supports (bottom: env(safe-area-inset-bottom)) {
      .tab-position {
        padding-bottom: calc(-70px + env(safe-area-inset-bottom));
      }
    }
    //绝对定位
    .tab-position-fixed {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 70px;
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: space-around;
      background: #fff;
      color: #409eff;
      border-top: 1px solid #ddd;
    }
    .barItem {
      width: 25%;
      line-height: 35px;
      text-align: center;
      font-size: 14px;
    }
    </style>
复制代码

6.控制附件的添加(使用了weui组件)

思路:

点击添加附件判断是否达到添加附件的最大数量，若无则弹出picker，选择后将相应附件添加进列表,用v-if控制相应附件的显示。

在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

6.1 index.html中引入weui

6.1.1 head中加入

<link rel="stylesheet" href="https://bos.static.bearyu.com/lib/element-ui/2.15.6/theme-chalk/index.min.css">

6.1.2 body中加入

<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>

6.2 在vue.config.js中配置externals

 externals: {
		'vue': 'Vue',
                'weui': 'weui',
		'weui.js': 'weui.js',
	  },`
复制代码

6.3 页面实现

 <div v-for="(item, index) in attachments" :key="index">
          <div class="partTitle" style="height:20px;">
            <span style="line-height:20px;">附件{{index+1}}</span>
            <i
                    class="el-icon-delete"
                    @click="delAttach(index)"
                    style="float:right;color:red;line-height:20px;"
                  ></i>
            </div>
          <div v-if="item.mediaType === 1">
          <el-row> 
            <el-form-item label="图片" >
              <el-upload
              >
                <img
                />
                <i v-else class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-row>
          </div>
</div>
<div @click="addMoreAttach"
          v-show="attachments.length < 9">
          <i class="el-icon-circle-plus" style="margin-right: 5px"></i>
          <span>添加附件(最多9个)</span>
        </div>
        <div class="warn" v-show="attachments.length == 9"
                  >最多可选择9个附件</div
                >
</div>
复制代码

/* 添加附件 */
addMoreAttach(item) {
      if (this.attachments.length === 9) {
        return;
      } else {
        this.addFile(item);
        console.log("qql",item);

      }
    },
/* weui的piker */
addFile(item) {
      var _this = this;
      weui.picker(
        [
          {
            label: "图片",
            value: 1,
          },
          {
            label: "链接",
            value: 2,
          },
          {
            label: "小程序",
            value: 3,
          },
          {
            label: "群聊",
            value: 4,
          },
          {
            label: "视频",
            value: 5,
          },
        ],
        {
          onChange(result) {},
          onConfirm(result) {
            var index = result[0].value;
            _this.$nextTick(() => {
             _this.attachments.push(JSON.parse(JSON.stringify(atchModel)));
          });
          console.log("_this.attachments",_this.attachments);
            atchModel.mediaType=index;
          },
        }
      );
    },
复制代码