overflow-x: auto 属性

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37782076/article/details/85248032

当文本长度超出之后  overflow-x: auto 属性自动产生横向滚动条

<template>
  <div class="content-container">
    <title-bar titleName="案例详情">
      <template slot="tool">
        <span class="tool">
          <el-button @click="back" class="el-button-reset">返回</el-button>
          <el-button @click="deleteData" class="el-button-reset">删除</el-button>
          <el-button type="primary" @click="editCase" class="el-button-reset">修改</el-button>
        </span>
      </template>
    </title-bar>
    <div class="content-list">
      <div class="content-list-headline" >
        <p>{{details.title}}</p>
        <div style="margin-top: 30px;">
            <span >{{details.appName}}</span><span>{{details.updateDate}}</span>
        </div>
      </div>
      <div >
          <img class="imag-class" id="logoImg" @click="openPhotoSwipe(0, [logo], 'logoImg')" v-show="logo" :src="logo">
      </div>
      <div class="content-list-details">
        <div class="content-list-details-word" v-html="details.contentHtml">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vuePhotoSwipe from '@/components/photoSwiper';
import apiCase from '@/api/appCaseApi';
import { remoteScript } from '@/utils/index';
import titleBar from './basic/TitleBar';
import Global from '../../../../../global';

export default {
  components: {
    titleBar,
  },
  name: 'FormBlock',

  data() {
    return {
      exampleId: '',
      logo: '',
      details: {
        exampleId: '',
        articleId: '',
        title: '',
        type: '',
        appId: '',
        appZone: '',
        appKind: '',
        appName: '',
        specialId: '',
        specialName: '',
        contentHtml: '',
        status: '',
        articleLogo: '',
        logoFileId: '',
        updateDate: '',
      },
    };
  },
  methods: {
    editCase() {
      this.$router.push({
        name: 'updateCase',
        query: {
          id: this.exampleId,
        },
      });
    },
    getCaseDetailByExampleId(id) {
      apiCase.getCaseDetailByExampleId({
        params: {
          params: {
            exampleId: id,
          },
        },
      }).then((data) => {
        this.details = data.data;
        // 初始化图片
        if (this.details.imgIds) {
          this.logo = `${Global.FSCTX}/api/fs/view/${this.details.imgIds}`;
        }
        this.$nextTick(() => {
          this.loadRemoteScript();
        });
      });
    },
    deleteData() {
      this.$confirm('确认删除本条案例详情？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.delData(this.exampleId);
      }).catch(() => {});
    },
    delData(id) {
      const ids = [];
      ids.push(id);
      apiCase.delCaseData({
        params: {
          data: ids,
        },
      }).then((data) => {
        if (data.state === 0) {
          this.$message({
            message: '删除案例成功',
            type: 'success',
          });
          setTimeout(() => this.$router.go(-1), 1000);
        }
      }).catch((err) => {
        this.$message({
          message: err.response.message,
          type: 'error',
        });
      });
    },
    back() {
      this.$router.go(-1);
    },
    // 点击查看大图
    openPhotoSwipe(index = 0, fids, id) {
      const list = [];
      const clientWidth = document.documentElement.clientWidth;
      fids.forEach((fid) => {
        // 计算图片的长宽比，以免图片放大后变形
        const w = document.querySelector(`img#${id}`).naturalWidth;
        const h = document.querySelector(`img#${id}`).naturalHeight;
        const rate = w / h;
        const wt = clientWidth - 10;
        const wh = wt / rate;
        list.push({
          src: `${fid}`,
          w: wt || clientWidth,
          h: wh || clientWidth,
        });
      });
      vuePhotoSwipe.open(index, list, {
        bgOpacity: 0.75,
        closeOnScroll: false, // 滚动关闭
        errorMsg: '<div class="pswp__error-msg">图片加载失败</div>',
      });
    },
    // 加载富文本有序无序列表格式标签
    loadRemoteScript() {
      const url = `${Global.ueditorPath}ueditor.parse.js`;
      remoteScript(url, 'ueditorOUlScript').then(() => {
        uParse('.content-list-details-word', {
          liiconpath: `${Global.ueditorPath}themes/ueditor-list/`,
        });
      });
    },
  },
  mounted() {
    this.exampleId = this.$route.query.exampleId;
    this.getCaseDetailByExampleId(this.exampleId);
  },
};
</script>

<style lang="less" scoped>
.imag-class {
    width: 178px;
    height: 180px;
    display: block;
    &:hover{
      cursor: pointer;
    }
}
.content-container {
  padding: 0 20px;
  background: #fff;
}
.content-row {
  overflow: hidden;
}
.content-list {
  margin-left: 20px;
  margin-right: 20px;
  &-headline{
    overflow: hidden;
    p {
      font-family: MicrosoftYaHei-Bold;
      font-weight: bold;
      font-size: 20px;
      color: #1F2D3D;
      letter-spacing: 0;
      line-height: 20px;
      margin-top: 30px;
      margin-bottom: 14px;
    }
    span {
      font-family: MicrosoftYaHei;
      font-size: 14px;
      color: #909399;
      letter-spacing: 0;
      line-height: 14px;
      margin-bottom: 20px;
      display: block;
      float: left;
      margin-right: 40px;
    }
  }
  &-details {
    &-word {
      font-family: MicrosoftYaHei;
      font-size: 14px;
      color: #1F2D3D;
      letter-spacing: 0;
    }
    img {
      width: 268px;
      height: 180px;
      margin-top: 8px;
      margin-bottom: 8px;
    }
  }
}
</style>
<style lang="less">
.content-list-details{
  margin-top: 20px;
}
.content-list-details-word{
  margin: 0;
  white-space: initial;
  overflow-x: auto;
  li{
    list-style: inherit;
  }
  p{
    margin: 5px 0;
    clear: both;
    overflow: hidden;
  }
  img{
    width: 268px;
    max-height: 300px;
  }
}
</style>