遥远的她'-优快云博客

原创 2021-10-19

简单记录一下vue插槽的使用<child> <template v-slot:child>  <div>456</div> </template></child><template> <div> <div>1

2021-10-19 09:53:40 101

原创监听输入框字符数

<div class="textareaBox"> <textarea id="wishContent" cols="30" rows="10" maxlength="300" placeholder="请输入反馈内容" v-model="feedbackContent" @input="monitor"></textarea> <span ...

2019-12-23 14:27:16 221

原创 css动画实现文字滚动

<div class="container"> <ul> <li>初步搜索非常重要，可以在万维网上相对迅速地进行。</li> <li>作者在写作时毫不费力，必须遵守业务的原则和规则。</li> <li>IT 技术在企业经营中成...

2019-07-24 09:52:23 1105

原创 vue-cli脚手架项目安装less

vue-cli 构建的项目默认是不支持 less 的，需要自己添加。首选，安装 less 和 less-loader ，在项目目录下运行如下命令 npm install less less-loader --save-dev安装成功后，打开 build/webpack.base.conf.js ，在 module.exports = 的对象的 module.rules 后面添加一段：mo...

2019-07-11 14:13:47 4014 1

原创 vue结合elementui实现输入框输入关键词显示下拉列表点击列表中关键字页面滚动到关键字所在位置

因为项目中使用到了elementui所以利用了elementui的el-autocomplete组件来实现输入关键字弹出下拉列表<template> <el-autocomplete style="width: 100%" class="inline-input" v-model="state" :fetch-suggestions="querySe...

2019-07-08 20:17:08 8257 1

原创 vue实现不同页面显示不同标题

我们需要在vue里不同的页面实现不同的标题，可以利用路由的meta标签和路由守卫来实现 // index.js import Vue from 'vue' import Router from 'vue-router' import Index from '@/components/Index' Vue.use(Router) export default new Router...

2019-06-29 13:15:13 4427

原创 vue里实现鼠标点击哪里div定位在哪里

定义个定位的div,需要绑定style <div v-if='showBox'> <div class='show-parent' :style="{left: tranLeft, top: tranTop}"> <div class="shard"> <div class="show-inner"> ...

2019-06-29 12:50:12 9974 1

原创 vue里实现点击显示模态框点击自身以外隐藏模态框

前阵子做到一个需求是要点击某个按钮弹出个模态框，然后点击模态框的时候模态框还在，点击模态框外部任意区域隐藏模态框，我网上找了下关于这方面的博客很少（也可能是我找的方式不对，哈哈）首先自己先做好一个模态框的结构，然后给这个结构赋予类名，用一个自定义变量控制这个模态框显示与隐藏 <div v-if='showBox'> <div class='show-parent'>...

2019-06-29 12:22:41 5363 1

原创 Vue实例的生命周期钩子函数

Vue的生命周期钩子函数有11个,不过我们经常用到就几个而已beforeCreate这是第一个生命周期函数,表示实例初始化之后,完全创建出来之前,它刚初始化一个Vue空的实例对象,这个时候对象身上只有一些默认的事件和生命周期函数,data和methods中数据都还不能被访问到created在实例创建完成之后被立即调用,这时候data和methods中的数据都已经可以被访问和参与运算,不过...

2019-05-18 13:50:34 910

原创 js实现本地图片拖拽到浏览器

将本地图片拖拽到浏览器其实非常简单,主要涉及到的是使用FileReader和html的拖拽事件FileReader中我们主要使用到的是onload事件和readAsDataURL()方法,onload事件主要是用来处理加载的事件,事件会在读取操作完成后触发,readAsDataURL()方法主要是用来读取拖拽的图片信息,在读取完成后内部result属性中将包含一个data: URL格式的...

2019-05-17 17:28:43 2468

遥远的她'的博客