<template>
  <div>
    <el-alert
      effect="dark"
      :closable="false"
      title="显示更多组件，默认显示一行，超出隐藏。必须设置 width 样式。"
      type="info"
      style="margin-bottom: 20px;margin-top: 20px;"
    />
    <div style="display: flex;">
      <div style="flex: 1;">
        <el-alert
          effect="dark"
          :closable="false"
          title="脱离文档流，只需要添加 height 样式即可。"
          type="info"
          style="margin-bottom: 20px;"
        />
        <More
          :style="{
            width: '600px',
            height: '100px',
            lineHeight: '28px'
          }"
          content="有两个年轻人同在一家车行里工作，两个人关系很好，以兄弟相称。他们在这家车行已经做了两年了，每天除了修理汽车外什么也没有。哥哥总不肯闲着，他一会儿扫地，一会儿擦玻璃，有时还帮助别人干活儿。弟弟却不这么勤快，没有急活儿的时候他总是懒洋洋地躺着。一天，车行里来了一位中年主顾，他说汽车出了点毛病，让他们给修理一下。弟弟刚刚吃完饭，正在休息呢，哪里肯干活。于是，哥哥走了过去，把弟弟手中的抹布接过来，给汽车做了检查。车子没什么大问题，就是很长时间没修养过了，于是他对那位先生说：“您放心地交给我吧，车子明天一定能修好。”客人听到这话，放心地走了。哥哥一刻不停地忙了起来，他不但修理好了汽车的毛病，还把汽车里里外外擦得一尘不染。这时，躺在一旁的弟弟嘲笑他说：“老兄，别太傻了，不该干的活儿也干了，那么勤快有什么用!”哥哥却笑了笑说：“反正我也没事做，擦擦车我并没有受损失呀，等明天顾客来取车时看到车子焕然一新心里一定很高兴。”第二天，那个顾客来取车了，他看到修好的汽车后非常吃惊，连声感谢修车的哥哥，并对他说：“我是一个大公司的董事长，你为我修车的这种勤快、细致、周到的精神，使我深受感动。我认为你是一个优秀的人，你愿意到我的公司去工作吗?”哥哥的命运从此发生了改变，不久，经过努力他当上了这个公司的部门经理;而弟弟却仍然在车行里做着他觉得枯燥的工作。"
        />
      </div>
      <div style="margin-left: 20px; flex: 1;">
        <el-alert
          effect="dark"
          :closable="false"
          title="不脱离文档流。"
          type="info"
          style="margin-bottom: 20px;"
        />
        <More
          :style="{
            width: '600px',
            lineHeight: '28px'
          }"
          content="生活中有许多小的“细节”，通常并不为人们注意。但是遇到特殊机遇，它又会像仙人的魔棒一样，改变人的一生，创造出人间奇迹。美国总统奥巴马，是美国历史上第一位黑人总统。他在《无畏的希望》一书中，曾深情地回忆了一幅画改变他命运的事。这幅深深打动他的画。就是19世纪英国艺术大师乔治-弗雷德里克·瓦兹创作的《希望》。画中，一位年轻女子坐在象征世界的地球上面，身体向前倾斜;低垂着头，眼睛被蒙上绷带，手里弹拨着仅剩下一根弦的古希腊七弦琴，并俯首倾听这根弦发出的微弱乐曲声。画家的意图是表现人类直到最后也不能丧失希望的主题。这幅画使奥巴马看后大受启发，他深情地回忆自己读画后的感受说：“虽然这名女子身有疼伤和血迹，穿着破烂不堪，竖琴也只剩下一根弦，但仍有希望;虽然世界被战争撕裂;虽然世界被仇恨摧残;虽然世界被猜疑蹂躏;虽然世界被疾病惩罚;虽然这个世界上充满了饥饿和贪婪;虽然她的竖琴被毁得只剩下一根琴弦，但这名女子仍有无畏的希望，在她那仅存的一根琴弦上，去弹奏音乐，去赞美世界。”奥巴马把这次看画的机遇当做他人生的转折点。就是在看了这幅画以后，他立志去竞选美国总统，以施展抱负，改变美国，改变自己的人生。经过了一番艰苦努力，他终于如愿以偿地当上了美国第44任总统。"
        />
      </div>
    </div>

    <el-alert
      effect="dark"
      :closable="false"
      title="显示3行，超出隐藏。"
      type="info"
      style="margin-bottom: 20px;margin-top: 20px;"
    />
    <div style="display: flex;">
      <div style="flex: 1;">
        <el-alert
          effect="dark"
          :closable="false"
          title="脱离文档流，只需要添加 height 样式即可。"
          type="info"
          style="margin-bottom: 20px;"
        />
        <More
          :line-clamp="3"
          :style="{
            width: '100%',
            height: '100px',
            lineHeight: '28px'
          }"
          content="20多年前，一位知名企业的总经理想要招聘一名助理。这对于刚刚走出校门的青年们来说是一个非常好的机会，所以一时间，应征者云集。经过严格的初选、复试、面试，总经理最终挑中了一个毫无经验的青年。副总经理对于他的决定有些不理解，于是问他：“那个青年胜在哪里呢?他既没带一封介绍信，也没受任何人的推荐，而且毫无经验。”总经理告诉他：“的确，他没带来介绍信，刚刚从大学毕业，一点经验也没有。但他有很多东西更可贵。他进来的时候在门口蹭掉了脚下带的土，进门后又随手关上了门，这说明他做事小心仔细。当看到那位身体上有些残疾的面试者时，他立即起身让座，表明他心地善良、体贴别人。进了办公室他先脱去帽子，回答我提出的问题时也是干脆果断，证明他既懂礼貌又有教养。”总经理顿了顿，接着说：“面试之前，我在地板上扔了本书，其他所有人都从书上迈了过去，而这个青年却把它捡起来了，并放回桌子上;当我和他交谈时，我发现他衣着整洁，头发梳得整整齐齐，指甲修得干干净净。在我看来，这些细节就是最好的介绍信，这些修养是一个人最最要的品牌形象。”"
        />
      </div>
      <div style="margin-left: 20px; flex: 1;">
        <el-alert
          effect="dark"
          :closable="false"
          title="不脱离文档流。"
          type="info"
          style="margin-bottom: 20px;"
        />
        <More
          :line-clamp="3"
          :style="{
            width: '100%',
            lineHeight: '28px'
          }"
          content="一个青年刚刚大学毕业，凭借着自己的能力，他找到了一份人人羡慕的高薪工作，在一个海上油田钻井队里做技术员。工作的第一天，领班要求青年在限定的时间内登上几十米高的钻井架，把一个包装好的漂亮盒子拿给在井架顶层的主管。青年对这第一个任务信心百倍，他拿着盒子，快步登上狭窄的舷梯，登舷梯是十分累人的，当青年气喘吁吁、满头大汗地登上顶层，把盒子交给主管时，主管只在盒子上面签下自己的名字，又让他送回去。于是，青年按照吩咐又快步走下舷梯，把盒子交给领班，而领班也是同样在盒子上面签下自己的名字，让他再次送给主管。青年此时有些耐烦了，他觉得这项工作一点意义也没有。可是领导的命令不得不执行，于是青年又转身登上舷梯。当他第二次登上井架的顶层时，已经浑身是汗，两条腿抖得厉害。主管和上次一样，只是在盒子上签下名字，又让他把盒子送下去。年轻人擦了擦脸上的汗水，转身走下舷梯，把盒子送下来，然而，领班还是在签完字以后让他再送上去。青年有些生气了，他觉得主管和领班是在跟他开玩笑。他长长地叹了一口气，尽力忍着不发作，擦了擦满脸的汗水，抬头看着那已经爬上爬下了数次的舷梯，拿起盒子，步履艰难地往上爬。当他上到顶层时，浑身上下都被汗水浸透了，汗水顺着脸颊往下淌。他第三次把盒子递给主管，主管看着他慢条斯理地说：“请你把盒子打开。”青年于是打开了盒子——里面竟然是两个玻璃罐：一罐是咖啡，另一罐是咖啡伴侣。年轻人终于无法克制心头的怒火，把愤怒的目光射向主管。主管接着对他说：“请你把咖啡冲上。”这时，青年将所有的愤怒和不满全部发泄了出来，他“啪”地一声把盒子扔在地上，大声地说：“我不干了!”此时，主管摇了摇头，对青年说：“很遗憾，如果你再忍耐一下，你就可以通过这个考验了。刚才我们所做的是一种‘承受极限训练’，因为我们在海上作业，随时会遇到危险，这就要求队员们有极强的承受力，承受各种危险的考验，只有这样才能成功地完成海上作业任务。你已经通过了前面三次，只差最后一关，你没有喝到自己冲的胜利的咖啡。因此，对不起，您不能在这里工作了。”"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import More from '_c/More/index.vue'
export default defineComponent({
  // name: 'MoreDemo',
  components: {
    More
  }
})
</script>

<style>
</style>
