lannieZ的博客

lib-flexible + postcss-plugin-px2rem

vue里实现鼠标签名,支持PC\移动端,返回base64或者file格式的文件流

vue项目使用highcharts3D饼图

vue3使用富文本编辑器VueQuill

vue项目中使用audio

vue子组件之间的传值

更改图标：首先在文件目录下找到public文件夹接着在文件目录中找到favicon.ico改成你想要换的图标（换的图标一定要是ico结尾，可以去百度搜一下icon图标生成器转一下）

//页面加载 created () { this.getCode() }, getCode () { // 非静默授权，第一次有弹框 const code = this.getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId const local = window.location.href console.log(code) if (cod

<div id="qrcode" ref="qrCodeUrl"></div>creatQrCode(userId) { // 即生成二维码之前先将存放二维码的标签清空 document.getElementById("qrcode").innerHTML = ""; let QueryDetail = 'https://xxxxxxx.com' + '/manager/Scrap_bindWxPage' + "?userId=" + userId;

首先第一步：找到vue的项目config文件夹下的index.js第二步：找到dev这个对象里的host的参数，改成你当前电脑的IP地址注意：不要加上http，否则会报错cmd 打开命令运行符，输入“ipconfig”查询本地 IP；第三步：然后重新dev项目，就可以用你当前电脑的IP地址进行访问了...

let routeData = this.$router.resolve({ path: "/manageData"， query: { name:'lili', age: 18, }});window.open(routeData.href, '_blank');

export function uploadFile(param,config) { let axiosConfig = { url: 'https://api.yichengshi.cn/YmUpload_image', method: 'post', data: param, } if(config instanceof Object){ for(let key in config){ axiosConfig[key] = con.

<template> <div> <el-form class="form" ref="refForm" :model="searchData" :rules="rules" :size="size" :label-width="labelWidth" :hide-required-asterisk="isShowRequired" :width="width"> <el-form-item v-for='item

效果图如下：<template> <div class="table"> <el-table :data="tableData" style="width: 100%"> <template v-for="(v, i) in tableConfig"> <!-- self属性用于标记需要做特殊操作的一些列 --> <el-tab

1、下载npm install vue-quill-editor-upload --save2、在main.js中引入// 导入富文本编辑器import VueQuillEditor from 'vue-quill-editor'// 将富文本编辑器，注册为全局可用组件Vue.use(VueQuillEditor)3、使用// 导入富文本编辑器样式import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.c

1、下载npm i --s vue-seamless-scroll1、在全局挂载import scroll from 'vue-seamless-scroll'Vue.use(scroll)3、使用<vue-seamless-scroll class="seamless-warp" :data="companyGovernanceList" :class-option="classOption"> <div class="supervise-tabl

1、下载npm install --save vue-clipboard22、在main.js中引入import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard);3、去使用<el-input :disabled="true" v-model="enterpriseForm.address"></el-input> <el-button v-clipboard:copy="e

运行vue项目时报错：You may use special comments to disable some warnings. Use // eslint-disable由于项目是使用vue-cli4创建的项目，目前里面没有build/webpack.base.conf.js文件。我们在最外层的根目录下新建一个vue.config.js文件在里面配置module.exports = { devServer: { overlay: { warni

<div class="frieght-list"> <ul> <li v-for="(item, index) in freightList" :key="item"> <div class="list-item"> <div class="list-header" @click="show_detail(index)"> <div>{{

<div class="imgList"> <div class="image-item" :class="{'attachment_selected': rSelect.indexOf(item)!=-1}" v-for="(item, index) in imgList" :key="item.recordId" @click="chooseImg(item, index)"> <img :src="item.image" alt="" class=.

与 Vue2中的 provide 和 inject 作用相同，只不过在Vue3中需要手动从 vue 中导入这里简单说明一下这两个方法的作用：provide ：向子组件以及子孙组件传递数据。接收两个参数，第一个参数是 key，即数据的名称；第二个参数为 value，即数据的值inject ：接收父组件或祖先组件传递过来的数据。接收一个参数 key，即父组件或祖先组件传递的数据名称假设这有三个组件，分别是 A.vue 、B.vue 、C.vue，其中 B.vue 是 A.vue 的子组件，C.vue 是

watch：watch( source, cb, [options] )参数说明：source：可以是表达式或函数，用于指定监听的依赖对象cb：依赖对象变化后执行的回调函数options：可参数，可以配置的属性有 immediate（立即触发回调函数）、deep（深度监听）当监听 ref 类型时：<script>import {ref, watch} from 'vue'export default { setup() { const state =

第一种写法<template> <div> <p><input type="text" v-model="age"></p> <p><input type="text" v-model="nextAge"></p> </div></template><script>import { computed, ref } from 'vue'exp

（1）setup（2）refsetup 函数也是 Compsition API 的入口函数，我们的变量、方法都是在该函数里定义的<template> <div> <p>{{ msg }}</p> <button @click="change">改变msg的值</button> </div></template><script>import { ref } from

第一种：使用脚手架搭建vue3.0项目1、vue create vue3-project // [项目名]2、选择手动配置，自选所需3、cd vue3-project4、yarn i / npm i5、yarn servevue -V // 去查vue版本 需大于4.5.0第二种: 使用vite + vue3.0Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。$ np

created() { window.addEventListener("scroll", this.onScroll); // 监听滚动事件}destroyed() { window.removeEventListener("scroll", this.onScroll); // 取消监听滚动事件 }// 滚动到底部onScroll() { let innerHeight = document.querySelector("#app").clientHeig.

<template> <div> <el-table :data="tableData" border style="width: 100%"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column p.

在讲vue-Router中name使用之前我们需要先明白几点：const routes = [{ path:'/Home', component:HomeCom, name:'HomeName'}]1、在单页面应用中，网页具体路径显示是由vue-router配置中 path决定的，path设置的是什么就显示什么，和name无关。2、不同路由路径下页面渲染的内容，是根据component所对应的组件来进行渲染的，和name无关。其实name就相当于给你的path取个别名，方便使用，路由

1、安装依赖npm install v-viewer --save2、全局引入import Vue from 'vue';import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'Vue.use(Viewer)Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': tr

1,stop修饰符，能够阻止冒泡事件，按照案例说明如下：按钮在div容器中。①，点击框中非按钮的位置，会触发div的事件②点击图中 “stop事件” 按钮 ，会发生冒泡事件，执行按钮事件的同时，也会执行div的事件注意：此时还没加stop事件③，代码添加stop事件后（@click.stop）的效果，控制台打印结果如下，stop会阻止事件冒泡行为。<template> <div> <!-- 使用 .stop阻止冒泡 -->

if(res.code == 1) { this.tableData = res.data for (var i = 0; i < this.tableData.length; i++) { if (this.tableData[i].productJson.length > 1) { for (var k = 0; k < this.tableData[i].productJson.length; k++) {

npm install html2canvas -Simport html2canvas from 'html2canvas';第一种方法：<div v-if="ewm" class="img1" v-bind:style="{ top: top+'px', left: left + 'px' }" style="z-index:3" > <div ref="courseInfo"> <span class="shopName

在vue中，在data里建立两个对象。data() { return { dataA:{ a:1 }, dataB:'' }};将dataA的内容赋值给dataB，改变dataB里对象的值，发现dataA里的值也跟着变化了。为什么会出现这种情况呢？其实，这是一个引用传递而不是值传递，dataA和dataB指向的是同一个内存地址。this.dataB = this.dataA;this.dataB.a = 5;console.

import QRCode from 'qrcode'<div class="center column"> <div> <img src="../../assets/icon/yiCity.png" style="height:364px;width:340px" alt /> <canvas id="canvas" style="width: 350px;height: 350px;"></can

如下图：退款金额是在数组里面渲染出来的当任意一个input框内的值发生改变，最下面红色的总退款金额也需要跟着实时变化当我没加上注释的那句代码的时候，我发现从第二次开始，总退款金额就会等于上一次的和加上这次修改之后的和，原因： 需要将totalPrices拿到for循环外面进行初始化，然后将每次循环的值加到totalPrices上，这样就达到我想要的效果了。inputBlur(item, index) { this.totalPrices = 0 // 注释 this.t

<input v-model="payMoney" type="number" v-focus/>directives: { // 注册一个局部的自定义指令 v-focus focus: { // 指令的定义 inserted: function (el) { // 聚焦元素 el.querySelector('input').focus() } } },...

created(){ document.onselectstart = function(){return false;}; }

html, body,{ width: 100%; height: 100%; -webkit-user-select: text;}

<el-tabs v-model="editableTabsValue" type="card" @tab-click="show_upsPage" class="sub"> <el-tab-pane :key="item.name" v-for="item in tabsList" :label="item.categoryName" :id="item.goodsCategoryId" :name="item.otherN

本来就是一个缓存在本地，然后取出来就行但一直赋值成功，页面确一直显示false状态没有考虑到this.scanSwitch打印出来不是布尔值，所以导致一直页面状态不对