返回介绍

126.JEllipsis超长截取显示

发布于 2020-09-14 22:20:38 字数 2513 浏览 1554 评论 0 收藏 0

说明: 遇到超长文本展示,通过此标签可以截取省略号显示,鼠标放置会提示全文本

参数配置

参数类型必填说明
valuestring必填字符串文本
lengthnumber非必填默认25

使用示例

1.组件带有v-model的使用方法

<j-ellipsis :value="text"/>


# Modal弹框实现最大化功能  

1.定义modal的宽度:
```vue
  <a-modal
    :width="modalWidth"


    />

2.自定义modal的title,居右显示切换图标

  <template slot="title">
    <div style="width: 100%;">
      <span>\{\{ title \}\}</span>
      <span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
        <a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
      </span>
    </div>
  </template>

3.定义toggleScreen事件,用于切换modal宽度

  toggleScreen(){
      if(this.modaltoggleFlag){
        this.modalWidth = window.innerWidth;
      }else{
        this.modalWidth = 800;
      }
      this.modaltoggleFlag = !this.modaltoggleFlag;
    },

4.data中声明上述用到的属性

    data () {
      return {
        modalWidth:800,
        modaltoggleFlag:true,

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文