vue实现带放大镜的搜索框

2024-07-29 15:08:29

本文实例为大家分享了vue实现带放大镜的搜索框，供大家参考，具体内容如下

字体图标在input单标签中的用法：

第一步，先在main.js 中全局引入iconfont图标；
第二步，给input 标签动态绑定一个属性，设置值为data中的变量；
第三步，将字体图标代码中的 &#x 改为 \u

代码如下：

<template>
    <div class="login">
        <!--头部搜索  -->
       <div class="top">
           <div class="top-text iconfont">广州</div>
           <div class="top-btn">
               <input type="text" :placeholder="icon" class="iconfont">
           </div>
           <div class="top-x iconfont iconlingdang1"></div>
       </div>
    </div>
</template>

<script>
    export default {
        name:"Login",
        data(){
           return {
               icon:'\ue637 请输入关键词'
           }
        }
    }
</script>

<style scoped>
    .login{
        width: 100%;
        height: 100%;
    }
    .top{
        width: 100%;
        height: 0.8rem;
        background-color: pink;
        display:flex;
        align-items: center;
        font-size:0.35rem;
    }
    .top-text{
        margin-left:0.3rem;
    }
    .top-btn{
        width: 4.8rem;
        height: 0.5rem;
        margin-left:0.2rem;
        margin-right:0.55rem;
    }
    .top-btn>input{
        width: 100%;
        height:0.5rem;
        border-radius:1rem;
        border:none;
        outline: none;
        padding-left:0.3rem;
    }
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

一个手写的vue放大镜效果

组件使用less,请确保已安装loader 本组件为放大镜组件,传参列表为: •width: 必传,设置放大镜的宽高(正方形),放大区域等同,放大倍数为2倍 •picList:必传,传入图片列表使用示例: script: import mirror from 'xx/mirror' export default { components:{ mirror }, data(){ return { width:300, picList:[ xxxxxx, xxxxxx ], } } } html:
Vue3实现图片放大镜效果

本文实例为大家分享了Vue3实现图片放大镜效果的具体代码,供大家参考,具体内容如下实现效果代码 <template> <div class="goods-image">  <div class="large" :style="[ { backgroundImage: `url(${imageList[curId]})`, backgroundPositionX: position.ba
vue实现商品详情页放大镜功能

本文实例为大家分享了vue实现商品详情页放大镜的具体代码,供大家参考,具体内容如下 templates中内容 <div class="productLeft">  <div class="mdImg"> <img :src="require('../assets/imgs/details/'+mdImgUrl)" alt=""> </div>
基于Vue的商品主图放大镜方案详解

前言在做电商类应用时,难免会遇到商品主图实现放大镜效果的场景,现有的基于 Vue 的第三方包不多并且无法直接复用,今天,我来分享一种高稳定性的基于 Vue 的图片放大镜方法. 实现原理放大镜的原理用一句话概括,就是根据小图上的鼠标位置去定位大图. 图1 原理图(以2倍放大为例) 相信原理图已经画的很明白了, 图中,左侧框是小图框,其蓝色区域为图片遮罩层(需放大区域),右侧框是整个大图目前所在区域,其蓝色区域是放大区域,设置超出隐藏,就实现了放大遮罩区域的效果. 显然,两块蓝色区域存在着某种对
基于vue2.x的电商图片放大镜插件的使用

最近在撸一个电商网站,有一个需求是要像淘宝商品详情页那样,鼠标放在主图上,显示图片放大镜效果,找了一下貌似没有什么合适的vue插件,于是自己撸了一个,分享一下.小白第一次分享,各位大神莫见笑. vue-piczoom picture magnifier component for Vue.js 2.x 基于vue2.x的电商图片放大镜插件 GIF 动画截图 Build Setup 使用步骤 # 安装 install npm install vue-piczoom --save 使用 use --
Vue3.0 自己实现放大镜效果案例讲解

需要实现的效果是: 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏. css中的cursor https://www.runoob.com/cssref/pr-class-cursor.html 鼠标跟随效果如何实现: (子绝父相)绝对定位 + 修改top,left控制移动在@vueuse中,有一个工具方法:useMouseInElement <template> <div ref="target"> <h1>H
Vue图片放大镜组件的封装使用详解

基于Vue的图片放大镜组件封装,供大家参考,具体内容如下图片放大镜的实现过程是将一个小图放置在一个盒子里,当鼠标在小图盒子里移动时,出现一个移动块(阴影区域/遮罩层),右侧大图片盒子出现一个等比例放大的在小图盒子移动块中的图片内容.效果图如下: 实现图片放大镜效果的Vue组件代码如下: <template> <div> <div class="move" @mouseover="over()" @mouseout="out(
vue实现简单放大镜效果

本文实例为大家分享了vue实现简单放大镜效果的具体代码,供大家参考,具体内容如下 <template> <div> <div class="imgMerror"> <div class="smallDiv" @mousemove="move($event)" @mouseenter="enter()" @mouseleave="leave()"> <im
vue实现tab切换的放大镜效果

本文实例为大家分享了vue实现tab切换的放大镜效果的具体代码,供大家参考,具体内容如下废话不多说先看效果图 1.我这里并没有加遮罩层,如有需要请自行加上 2.图片建议使用4k高清图片,不然放大后模糊,影响观看心情 3.不用拘泥于样式,关注实现原理即可 4.可能我的方法并不简便,但是也是一种思路,请大家参考实现原理第一肯定需要vue.js 第二需要两张图片左边为现实图片,右边放大后的效果图其实一直存在,只不过鼠标移入现实,鼠标移出消失放大的图片并不是真正的放大,而是在img标签外套了一
vue实现放大镜效果

本文实例为大家分享了vue实现放大镜效果的具体代码,供大家参考,具体内容如下实现类淘宝放大镜效果前端小白一枚,最近在进行 vue 方面的学习,逛淘宝闲来无事想试试做个放大镜,结果虽然做出来了,但其中有一些问题让我无法解决,四处搜索也没有找到满意的答案,很是心烦,希望能有大佬帮忙解答,谢谢步骤思路对原图的显示空间(left) 可以将显示原图的 img 换成 canvas,来对图片进行保护跟随鼠标移动时显示放大的指示区(鼠标层罩top) 显示层罩区域选中放大的显示空间(right) HTM

vue实现带放大镜的搜索框

相关推荐

随机推荐