MrWang

MrWang 查看完整档案

西安编辑山西大学  |  计算机语言 编辑***科技有限公司  |  清洁工 编辑 wangzc.wang/ 编辑
编辑

理想的光芒很难照进现实

个人动态

MrWang 赞了回答 · 4月9日

解决思否认证没响应

已督促工作人员帮你认证。

关注 2 回答 1

MrWang 提出了问题 · 4月9日

解决思否认证没响应

为什么现在认证一直没有响应呢?说是10个工作日?但是都好久了一直没消息

关注 2 回答 1

MrWang 提出了问题 · 4月9日

解决思否认证没响应

为什么现在认证一直没有响应呢?说是10个工作日?但是都好久了一直没消息

关注 2 回答 1

MrWang 回答了问题 · 4月9日

js 如何区分 赋值为 undefined 和 没有值

image.png

没有值可能是null、可能是是空字符串''、也可能是undefined
建议看下js的基本数据类型。

关注 3 回答 2

MrWang 发布了文章 · 4月9日

Element Ui图片预览组件通过按钮触发图片预览

element ui的Image 图片组件的大图预览需要点击一个图片才能进行触发大图预览,那么我们不想通过点击小图进行图片预览要怎么做呢?

预览

先看下DEMO

场景

项目中需要点击按钮去向后台请求图片地址,然后再进行大图预览

实现思路

我们可以把这个默认预览的小图用一个统一的图片进行代替,提前放在项目的静态文件中,
然后把这个图片定位到按钮的上方,再将图片的透明度设置为0,这样点击按钮其实是点击了按钮上方的小图

第一步

我们先实现个表格样式

<table border=1>
    <tr>
      <th>序号</th>
      <th>订单号</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>1</td>
      <td>0356894598</td>
      <td>
        <div class='img'>
          图片预览
          <div class="demo-image__preview">
            <el-image lazy :data-original="url" @click='clickimg' :preview-src-list="srcList">
            </el-image>
          </div>
        </di>
      </td>
    </tr>
</table>

再加点样式

.img {
  width: 100px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  position: relative;
}
.demo-image__preview {
  width: 100%;
  height: 100%;
  top: 0;
  position: absolute;
  cursor:pointer;
}
.demo-image__preview .el-image {
  width: 100%;
  height: 100%;
}

image.png
你会发现图片的小图脱离文档里覆盖在了文字的上方,然后我们加个透明度给他

.demo-image__preview {
 ..省略代码..
 ..省略代码..
 opacity: 0;
}

image.png
这样,点击文字其实就是点击小图达到以假乱真的效果,然后我们加入js

  data() {
    return {
      url:
        "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRLMfiju_jWNy52oXUtPINHL9-PKyGJC6i01w&usqp=CAU",
      srcList: []
    };
  },
  methods: {
    async clickimg() {
      this.srcList = [
        (await this.getimgById(0)).src,
        (await this.getimgById(1)).src,
        (await this.getimgById(2)).src
      ];
    },
    getimgById(id) {
      let imglist = [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
      ];
      return new Promise((res) => {
        res({ src: imglist[id] });
      });
    }
  }

这里模拟了一个根据id请求图片的接口,可以自行替换。
你学会了吗?

查看原文

赞 3 收藏 3 评论 0

MrWang 回答了问题 · 4月9日

vue有没有放大局部dom的插件

Fullscreen_API

全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式,并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占据整个屏幕,并在此期间,从屏幕上隐藏所有的浏览器用户界面以及其他应用。

可以在全屏 API 指南这篇文章了解更多细节。

关注 4 回答 3

MrWang 回答了问题 · 4月8日

解决这样的效果怎么实现?

帮你改造了下代码,你可以参考下
demo
大致思路:
循环给数组对象添加isActive的字段,当个数小于5的时候,点击变为true,当超过5的时候,点击新的标签不会触发,点击已选中的进行取消选中的操作

关注 3 回答 3

MrWang 回答了问题 · 4月8日

vue 如果是JS插入的html事件,能实现吗?

你这么写就有点违背vue数据驱动视图了,你可以更改为如下写法:
查看DEMO

  <ul>
    <template v-for='(item,index) in liList'>
      <li @click='delLi(item.id)' v-if='!item.isDel'>删除{{item.id}}</li>
    </template>
  </ul>
data() {
    return {
      liList: [
        {
          id: 0,
          isDel: false
        },
        {
          id: 1,
          isDel: false
        },
        {
          id: 2,
          isDel: false
        }
      ]
    };
  },
  methods: {
    delLi(index) {
      this.$set(this.liList[index], "isDel", true);
    }
  }

关注 4 回答 3

MrWang 回答了问题 · 4月8日

swiper,翻页箭头如何放到wrapper外面使用

给你写了个demo


你可以看看swipernavigation api,将按钮放在swiper-container外面
image.png
image.png

关注 3 回答 1

MrWang 关注了用户 · 4月8日

思否编辑部 @writers

让我们陷入困境的不是无知,而是看似正确的谬误论断。思考、否定、再思考,出家人不打诳语,撰文者不说空话。

欢迎通过私信投稿、提建议、分享素材、传闲话。

联系邮箱 pr@sifou.com 小姐姐微信:https://segmentfault.com/n/13...

关注 6243

认证与成就

  • 认证信息 北京中电兴发 前端工程师
  • 获得 661 次点赞
  • 获得 30 枚徽章 获得 1 枚金徽章, 获得 1 枚银徽章, 获得 28 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

注册于 2018-05-07
个人主页被 7.5k 人浏览