精华内容
下载资源
问答
  • 场景吾辈在使用 Vuetify 时突然遇到的,明明 img 标签就可以使用相对路径获取到图片,而 Veutify 的组件 v-img 却不能使用。如下面 3 种加载图片的方式吾辈在 segmentfault 上的提问原因是的,居然必须用 require() ...

    场景

    吾辈在使用 Vuetify 时突然遇到的,明明 img 标签就可以使用相对路径获取到图片,而 Veutify 的组件 v-img 却不能使用。

    如下面 3 种加载图片的方式

    吾辈在 segmentfault 上的提问

    原因

    是的,居然必须用 require() 引入图片才能生效,那为什么 img 标签可以直接使用相对路径呢?这和

    官方明确指出会将所有 帮我们转换成 require() 的形式了。

    解决方案

    transformToRequire 改为 transformAssetUrls,而且配置方式也不再是直接修改 webpack 配置文件,而是修改 这个经过包装后的文件。现在,最新的配置方式如下

    module.exports = {

    chainWebpack: config => {

    config.module

    .rule('

    具体参考

    Vue Loader => 从 v14 迁移 => 废弃的选项

    Vue Cli 3 => webpack 相关 => 链式操作 (高级) => 修改 Loader 选项

    vue cli 2

    那么,Veutify 组件中的 src 不能使用相对路径的原因就很明确了。因为 vue-loader 并不知道我们要把 v-img 的 src 属性转换成 require() 依赖。我们找到 vue-loader 配置处,在 options.transformToRequire 中加上 v-img 即可

    // vuetify 框架的 src 标签也需要自动转换为 require

    'v-img': 'src'

    吾辈的配置文件在 build > vue-loader.conf.

    'use strict'

    const utils = require('./utils')

    const config = require('../config')

    const isProduction = process.env.NODE_ENV === 'production'

    const sourceMapEnabled = isProduction

    ? config.build.productionSourceMap

    : config.dev.cssSourceMap

    module.exports = {

    loaders: utils.cssLoaders({

    sourceMap: sourceMapEnabled,

    extract: isProduction,

    }),

    cssSourceMap: sourceMapEnabled,

    cacheBusting: config.dev.cacheBusting,

    transformToRequire: {

    video: ['src', 'poster'],

    source: 'src',

    img: 'src',

    image: 'xlink:href',

    'v-img': 'src',

    },

    }

    vue-loader 官方文档参考

    然后重启 npm run dev 刷新一下就行啦

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持前端开发者。

    展开全文
  • Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来...

    fda7e57b24cc152f8da7ee17dbe7a30b.png

    在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。

    Vue 自定义指令有全局注册和局部注册两种方式。先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] )方式注册全局指令。然后在入口文件中进行 Vue.use()调用。

    批量注册指令,新建 directives/index.js文件

    de625b1bcbb8c03de634be0972afd69f.png

    在 main.js 引入并调用

    838e832440649d823a1775b78e874767.png

    指令定义函数提供了几个钩子函数(可选):

    bind: 只调用一次,指令第一次绑定到元素时调用,可以定义一个在绑定时执行一次的初始化动作。inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值。componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。unbind: 只调用一次, 指令与元素解绑时调用。下面分享几个实用的 Vue 自定义指令

    复制粘贴指令 v-copy长按指令 v-longpress输入框防抖指令 v-debounce禁止表情及特殊字符 v-emoji图片懒加载 v-LazyLoad权限校验指令 v-premission实现页面水印 v-waterMarker拖拽指令 v-draggablev-copy

    需求:实现一键复制文本内容,用于鼠标右键粘贴。

    思路:

    动态创建 textarea标签,并设置 readOnly属性及移出可视区域将要复制的值赋给 textarea标签的value属性,并插入到body选中值textarea 并复制将 body 中插入的 textarea 移除在第一次调用时绑定事件,在解绑时移除事件

    c965d3a4b419a37b4e2776f62676966c.png

    使用:给 Dom 加上 v-copy 及复制的文本即可

    9d21e4c35f00e937ac60752cf7f33c80.png

    v-longpress

    需求:实现长按,用户需要按下并按住按钮几秒钟,触发相应的事件

    思路:

    创建一个计时器, 2 秒后执行函数当用户按下按钮时触发 mousedown 事件,启动计时器;用户松开按钮时调mouseout 事件。如果 mouseup事件 2 秒内被触发,就清除计时器,当作一个普通的点击事件如果计时器没有在 2 秒内清除,则判定为一次长按,可以执行关联的函数。在移动端要考虑 touchstart,touchend 事件

    5ee5c5c07e2e60f0a5a0b9125e2cc504.png

    使用:给 Dom 加上 v-longpress 及回调函数即可

    5e768dcdaca5f6a433db6681150b7fe9.png

    v-debounce

    背景:在开发中,有些提交保存按钮有时候会在短时间内被点击多次,这样就会多次重复请求后端接口,造成数据的混乱,比如新增表单的提交按钮,多次点击就会新增多条重复的数据。

    需求:防止按钮在短时间内被多次点击,使用防抖函数限制规定时间内只能点击一次。

    思路:

    定义一个延迟执行的方法,如果在延迟时间内再调用该方法,则重新计算执行时间。将事件绑定在 click 方法上。

    7f18f2835a5a3c72df0f7d1f029e05dd.png

    使用:给 Dom 加上 v-debounce 及回调函数即可

    50ed34e8539f700a48f7f73f99c106d0.png

    v-emoji

    背景:开发中遇到的表单输入,往往会有对输入内容的限制,比如不能输入表情和特殊字符,只能输入数字或字母等。

    我们常规方法是在每一个表单的 on-change 事件上做处理。

    018ff16fdc77a4082f0423903ef67646.png

    这样代码量比较大而且不好维护,所以我们需要自定义一个指令来解决这问题。

    需求:根据正则表达式,设计自定义处理表单输入规则的指令,下面以禁止输入表情和特殊字符为例。

    5a084b34aad129ba82706d9eb951b805.png

    使用:将需要校验的输入框加上 v-emoji 即可

    2efe75ea53cd437a7ed6918004020bdb.png

    v-LazyLoad

    背景:在类电商类项目,往往存在大量的图片,如 banner 广告图,菜单导航图,美团等商家列表头图等。图片众多以及图片体积过大往往会影响页面加载速度,造成不良的用户体验,所以进行图片懒加载优化势在必行。

    需求:实现一个图片懒加载指令,只加载浏览器可见区域的图片。

    思路:

    图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的拿到所有的图片 Dom ,遍历每个图片判断当前图片是否到了可视区范围内如果到了就设置图片的 src 属性,否则显示默认图片图片懒加载有两种方式可以实现,一是绑定 srcoll 事件进行监听,二是使用 IntersectionObserver 判断图片是否到了可视区域,但是有浏览器兼容性问题。

    下面封装一个懒加载指令兼容两种方法,判断浏览器是否支持 IntersectionObserver API,如果支持就使用 IntersectionObserver 实现懒加载,否则则使用 srcoll 事件监听 + 节流的方法实现。

    7a7e788c80f5a35b09f022ce772f5f4d.png

    使用,将组件内 标签的 src 换成 v-LazyLoad

    cf3ab10a4ddd392ed79914304e672041.png

    v-permission

    背景:在一些后台管理系统,我们可能需要根据用户角色进行一些操作权限的判断,很多时候我们都是粗暴地给一个元素添加 v-if / v-show 来进行显示隐藏,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余。针对这种情况,我们可以通过全局自定义指令来处理。

    需求:自定义一个权限指令,对需要权限判断的 Dom 进行显示隐藏。

    思路:

    自定义一个权限数组判断用户的权限是否在这个数组内,如果是则显示,否则则移除 Dom

    31c69deb2024a863604a7099cff8db87.png

    使用:给 v-permission 赋值判断即可

    de6adb0bce8630c1b819854a5a8eec9c.png

    vue-waterMarker

    需求:给整个页面添加背景水印

    思路:

    使用 canvas 特性生成 base64格式的图片文件,设置其字体大小,颜色等。将其设置为背景图片,从而实现页面或组件水印效果

    3489a32e71d951aafb8dedd8314c9941.png

    使用,设置水印文案,颜色,字体大小即可

    af12d15bd394e0aabc88dbe3ac1d4b6d.png

    效果如图所示

    51fd431852ff20111bee050a50e64103.png

    v-draggable

    需求:实现一个拖拽指令,可在页面可视区域任意拖拽元素。

    思路:

    设置需要拖拽的元素为相对定位,其父元素为绝对定位。鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值,并改变元素的 left 和 top 值鼠标松开(onmouseup)时完成一次拖拽

    0579da737f439a388d929c178ddf96de.png

    使用: 在 Dom 上加上 v-draggable 即可

    e6906cb75e4183eeba37c57a5adefbe8.png

    作者:lzg9527来源:掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • 、1、app.config.ts:自定义TabBar就必须将custom设为true 2、 定义TabBar组件: customTabBar.vue <template> <view class='bottom-tab'> <view class='bottom-tab-item' v-for="(tabItem...

    、1、app.config.ts:自定义TabBar就必须将custom设为true

    2、 定义TabBar组件:

     customTabBar.vue

    <template>
      <view class='bottom-tab'>
        <view class='bottom-tab-item' v-for="(tabItem, index) in list" :key="tabItem.key"  @tap="switchTab(tabItem.pagePath, index)">
            <image class='bottom-tab-item-img' :src="selected == index ? tabItem.selectedIconPath : tabItem.iconPath " />
            <view class='bottom-tab-item-text' :style="{color:(selected==index?selectedColor:color)}" >
              {{tabItem.text}}
            </view>
        </view>
      </view>
    </template>
    <script>
    import './customTabBar.scss'
    import Taro from '@tarojs/taro'
    import commonUtil from "../../utils/util.ts"
    import {
    } from "taro-ui-vue3"
    export default {
      components: {
      },
      data () {
        return {
          selected: 0,
          color: 'rgba(68, 68, 68, 1)',
          selectedColor: 'rgba(68, 68, 68, 1)',
          list: [
            {
              "pagePath": "pages/tabBarPackages/home/home",
              "iconPath": "../../../images/foot_1.png",
              "selectedIconPath": "../../../images/foot_1.png",
              "text": "首页",
            },
            {
              "pagePath": "pages/tabBarPackages/userList/userList",
              "text": "用户",
              "iconPath": "../../../images/foot_2.png",
              "selectedIconPath": "../../../images/foot_2.png"
            },
            {
              "pagePath": "pages/tabBarPackages/userAdd/userAdd",
              "text": "",
              "iconPath": "../../../images/foot_3.png",
              "selectedIconPath": "../../../images/foot_3.png"
            },
            {
              "pagePath": "pages/tabBarPackages/teamList/teamList",
              "text": "小组",
              "iconPath": "../../../images/foot_4.png",
              "selectedIconPath": "../../../images/foot_4.png"
            },
            {
              "pagePath": "pages/tabBarPackages/personal/personal",
              "text": "我的",
              "iconPath": "../../../images/foot_5.png",
              "selectedIconPath": "../../../images/foot_5.png"
            }
          ]
        }
      },
      created () {
      },
      methods: {
        switchTab(pagePath, index){
          this.selected = index
          Taro.switchTab({
              url: '../../../' + pagePath
          })
        }
      },
    }
    </script>

    customTabBar.scss(这段css样式完全copy的这篇文章https://www.jianshu.com/p/ba33d0be8f03/)

    .bottom-tab {
      position: fixed;
      display: flex;
      width: 100%;
      height: 49PX;
      background: white;
      box-shadow: 0PX -5PX 10PX 0PX rgba(0, 0, 0, 0.03);
      bottom: 0;
      &-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        &-img {
          margin: 5PX auto 0;
          width: 24PX;
          height: 24PX;
        }
        &-text {
          height: 14PX;
          line-height: 14PX;
          font-size: 10PX;
          font-family: PingFangSC-Light, PingFang SC;
          font-weight: 300;
          color: rgba(68, 68, 68, 1);
        }
      }
    }

    3、tab页面调用组件

    例:home页面

    home.config.ts

    export default {
      navigationBarTitleText: '用户管理平台',
      "usingComponents": {
        'customTabBar': '../../../components/custom-tab-bar/customTabBar'
      },
    }
    

    home.vue

    <template>
        ......
        <customTabBar></customTabBar>
    </template>
    <script>
    import "./home.scss";
    import Taro, { getCurrentInstance } from "@tarojs/taro";
    import { AtGrid, AtButton, AtNoticebar, AtIcon, AtToast } from "taro-ui-vue3";
    import commonUtil from "../../../utils/util.ts";
    import customTabBar from "../../../components/custom-tab-bar/customTabBar.vue";
    
    export default {
        components: {
            AtGrid,
            AtButton,
            AtNoticebar,
            AtIcon,
            AtToast,
            customTabBar
        },
        data() {
            ......
    };
    </script>
    
    展开全文
  • 想用这种方式实现组件嵌套:目前实现的方式:是在app-content.vue中的template中嵌套的index.htmlmain.jsimport Vue from '../node_modules/vue/dist/vue';import app from './app.js';new Vue(app);app.jsimport ...

    想用这种方式实现组件嵌套:

    目前实现的方式:是在app-content.vue中的template中嵌套的

    index.html

    main.js

    import Vue from '../node_modules/vue/dist/vue';

    import app from './app.js';

    new Vue(app);

    app.js

    import content from '../components/app-content.vue'

    module.exports={

    el:"#app",

    data:{},

    components:{

    appContent:content

    }

    };

    app-content.vue

    #content{

    height: 100vh;

    width: 100vw;

    background: rgb(240,240,240);

    position: relative;

    }

    import myHeader from './app-top.vue';

    import myFooter from './app-bottom.vue';

    export default {

    components:{

    myHeader,

    myFooter

    }

    }

    展开全文
  • Vue自定义指令及使用

    2021-11-10 23:28:31
    学习 vue 的时候肯定会接触指令,那么什么是指令呢? 在 vue 中提供了一些对于页面和数据更为方便的输出,这些操作就叫做指令,以 v-xxx 表示,比如 html 页面中的属性<div v-xxx /div> 比如在 angular 中 以...
  • 简介组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树例如,你可能会有页头、侧边栏、内容区等组件,每个组件又...
  • 场景吾辈在使用 Vuetify 时突然遇到的,明明 img 标签就可以使用相对路径获取到图片,而 Veutify 的组件 v-img 却不能使用。如下面 3 种加载图片的方式原因是的,居然必须用 require() 引入图片才能生效,那为什么 ...
  • <...查阅vue官方文档,得知click事件作用于组件内部,如果组件内没有写click事件,便会无响应。 解决办法:加上 .native原生修饰符 <myheader :title="Position.name" ref="myh" @click.na...
  • 关于自定义指令,事实上在做前端开发第一年时根本就没有任何的了解,第一次接触到这个概念还是在一次面试当中,我讲了一堆如何遍历标签的属性的原生方法,结果面试官直接回答:这不是vue自定义指令吗。。。233 嗯 ...
  • 使用他人组件的正常步骤如下:1、命令行进行安装,执行install;2、在vue项目中的入口文件main.js中,进行导入;3、然后用Vue.use(plugin)引入该组件。我们也可以创造属于自己的组件, 具体步骤如下:1、在...
  • 我们在vue中有时候为给标签加一些特有的属性, 当我们在标签上触发了事件之后, 就可以在 event 对象上面获取 标签的写法 <div class="menu-item" @click="clickMenu('参数一',$event)" :data-mytype="1"> &...
  • 当我们使用vue-quill-editor时(quill也一样),需要添加插入音频和视频资源,这时我们可以自定义video和auido标签,动态赋值并使用 话不多说,立即上代码 引入 import { Quill, quillEditor } from 'vue-...
  • Vue.js 自定义指令

    2020-12-31 09:18:59
    添加一个自定义指令,有两种方式:通过 Vue.directive() 函数注册一个全局的指令。通过组件的 directives 属性,对该组件添加一个局部的指令。创建全局指令:需要传入指令名称以及一个包含指令钩子函数的对象,该...
  • Vue 自定义指令如何使用 自定义指令分为全局自定义指令和局部自定义指令: 全局自定义指令: 使用 Vue.directive()来全局注册指令 局部自定义指令: 也可以注册局部指令,组件或 Vue 构造函数中接受一个 directives 的...
  • 目录在 css 自定义变量的功能以及出来许久了,但实际开发中大家使用并不多。归其原因是因为 less、sass 等预处理器已经拥有定义变量的功能,以及Vue、react很方便设置 style 样式,大家可能觉得使用 css 定义变量不...
  • 动态创建textarea标签,并设置readOnly属性及移出可视区域 将要复制的值赋给textarea标签的value属性,并插入到body 选中值textarea并复制 将body中插入的textarea移除 在第一次调用时绑定事件,在解绑时移除...
  • 但是有些时候vue内置的这些指令并不能满足我们的使用需求,因此vue也允许注册自定义指令,下面讲一下如何注册自定义指令。 一、定义: // 一、在创建根实例之前 即全局自定义指令 // 一个指令定义对象有如下几个钩子...
  • vue自定义组件(超详细)

    千次阅读 2020-12-23 20:17:35
    #vue自定义组件的使用方法
  • 一. 速识概念:   在我们使用 Vue 的过程中,遇到了很多方便我们操作的vue内置指令,以 v-xxx 表示。比如有 v-module,v-for...下面我将以最简单的例子带你认识vue自定义指令。 二.全局注册指令:   比如,我们想要
  • 函数防抖和节流在平时业务中经常会用到,一般都是调用已经封装好的方法,下面介绍一种新的思路:vue自定义指令! 下面这段代码以防抖为例,el-input标签直接写上v-debounce,传入arg参数:search和expression表达式...
  • 默认的属性传递给组件,会赋值在组件的根元素上 赋值在组件自定义标签上: ... (2)使用$attrs,在自定义标签使用 <template> <label> <input v-bind="$attrs" > </label&g
  • Vue自定义封装组件

    2021-03-01 21:28:05
    Vue自定义封装组件 1.在components文件夹下创建一个自定义组件名称的Vue文件,对组件进行相应的布局,添加样式,在script标签中的Vue实例下添加props对象,用来接收动态属性并设置其数据类型,例 props:{ title : ...
  • Vue 自定义图标

    2021-01-23 10:53:35
    Vue 自定义图标 因为elementUI提供的icon有很大的局限性,想要放自己定义的图标,需要繁琐的引入并用img标签展示。不能像ElementUI 引入图标那样,支持类似字体的修改样式,大小和颜色。 所以,思考再三,决定简单的...
  • Vue自定义实现v-html指令 实际项目开发中我们总会遇到各种问题,并且Vue提供给我们的一些特性并不能满足于业务需要。 这时候我们就可以基于Vue提供给我们的各种对外api封装各种针对性组件、指令、或者插件,接下来讲...
  • vue 项目开发中,常常为了,节省代码、高效利用,会封装自定义组件,封装自定义组件,传值就是 prop ,那绑定事件呢? <!-- * @Description: * @Author: 呆呆狗 * @Date: 2021-05-09 10:02:15 * @...
  • 老项目业务代码写的自定义指令,想在指令里面获取vue实例,来提示国际化字段。直接打印this是不行的。需要在bing()里写上第三个参数 const copy = { bind(el, { value }, vNode) { el.$value = value; el....
  • Vue 自定义v-model

    2021-01-20 18:10:32
    接下来我们实现一个自定义 v-model 的组件 - + 因此可以看出v-modal是一个的语法糖 v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件: text 和 textarea 标签使用 value 属性和 input 事件;...
  • Vue自定义指令封装

    2020-12-29 21:46:32
    Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册 自定义指令。它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作。Vue 自定义指令有全局注册和局部注册两种方式。先来...
  • 自定义指令源码 import Vue from 'vue' Vue.directive('poptip', { inserted: function (el, binding, vnode) { //获取元素的纵坐标(相对于窗口) function getTop(e) { var offset = e.offsetTop - e....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,248
精华内容 17,699
关键字:

vue自定义标签使用

vue 订阅