qq_42750608的博客

vue3使用vuex的示例(模块化功能)

vue3简单写导航anchor示例(支持点击高亮和滚动判断高亮)

vue3写nav滚动事件中悬停在顶部

vue3通过ref获取子组件defineExpose的数据和方法

Vue2插槽的简单使用示例

vue3使用v-model控制子组件进行双向数据绑定

vue3父子通信+ref,toRef,toRefs使用示例

首先是主要逻辑文件=>vuex页面keepAliveCtrls.js:const state = { include_arr: []}const getters = { get_clude_arr: state_ => state_.include_arr}const mutations = { setinclude_arr(state_,data) { state_.include_arr = data }}const actions = { add_ro

使用vue写一个picker插件,使用3d滚轮的原理

首先是vue.config.js--主要是在module.exports中加入pages的配置(最重要的一点):module.exports = { pages: { index: { // page 的入口 entry: "src/views/index/main.js", // 模板来源 template: "public/index.html", // 在 dist/index.html 的输出 filename

首先是store目录,目录结构如下:index.js// 组装模块并导出 store 的地方import Vue from 'vue'import Vuex from 'vuex'import loading from './modules/loading'Vue.use(Vuex)export default new Vuex.Store({ modules: { loading, }, strict: process.env.NODE_ENV !== 'p

众所周知,UI设计师是根据ip6的手机尺寸画的设计图,所以一般html宽是375px,所以将html的font-size写为37.5px;html{ font-size: 37.5px;}然后在style标签(记得写lang="scss")中:@function px2rem($px) { $item: 37.5px; @return $px/$item+rem;}/...

项目中经常子组件被引入父组件,有时候父页面会出现错乱样式,原因就是同名元素选择器互相影响,其他页面的样式影响了当前页面的样式,可以参考以下解决方式:1.在style标签中写scoped2.在style不用写scoped,但是最外层的div的class或者id必须是整个项目来看都是唯一的最外层的选择器+空格+元素本身的选择器写样式,当然由于每个元素前面都写太麻烦可以使用less,styl...

已知客户端中,data写的内容能够使子组件中的textarea自动撑高,但是数据返回callback后更改数据赋值就不能随着内容撑高了,因为此时dom已经加载完成,要么通过ref修改dom的style样式,要么可知v-if的true和false在nextTick中触发页面重绘,将textarea元素的高度设置为textarea的scrollHeight:this.text = ?;this...

<button ref="btn">按钮</button>最好不要使用this.$refs.btn.setAttribute('disabled',true);禁用按钮因为这个的效果和this.$refs.btn.setAttribute('disabled',false);是一样的,都禁用按钮了,因为true或者false被转化为了字符串,而这个字符串基本等效于...

现实中,前端前辈们告诉我们少用watch,少用watch,但是我们基于时间紧张的问题,经常不能固守这个规定了,今天的最新发现,nextTick方法,致力于更新了某一个特定的属性值,完成DOM更新后,触发事件,也就是触发dom更新后会回调一个回调函数,有了它,可以替代watch的实时监控功能,减少程序的损耗例如我们要删除数组的某个元素:methods:{ del(e) { this....

使用localStorage模拟保存token,因为localStorage默认保存的是字符串,所以就限制保存isLogin为0就是未登录,要默认直接跳到/login页面,若为1就是默认到/home页面,没有localStorage的也是默认跳转到/login登录页1.router.js--使用beforeEach前置导航判断是否要跳转/login页面/* eslint-disable ...

1.首先说一下v-model,印象中只有input标签使用?太天真,它是进行双向数据绑定的,有了它再不用多写代码了.v-model是 :value和@input的语法糖使用v-model时:<input v-model="sth"/>等效于使用:value和@input时:<input :value="sth" @input="sth=$event.t...

本文章是在rap2模拟接口下实现axios交互功能,axios拦截大部分代码逻辑来自https://blog.youkuaiyun.com/qq_38145702/article/details/815588161.src目录下新建axios文件夹,内有api.js和request.js首先是request.js//对axios的封装/****** 创建axios实例 ******/impo...

首先看文档:https://vue-loader.vuejs.org/zh/guide/css-modules.html#%E5%8F%AF%E9%80%89%E7%94%A8%E6%B3%95把oneOf可以让以下两种方式并存:一种就是module用法,在style标签后面加module,可以用:class="$style.minHeader" ;一种就是普通的scoped...

移动端1px边框的问题

1.新建filter目录,内写index.jslet dataServer = value => { //保留xxxx-xx-xx的格式 // return value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3') var pattern = /^(\d{4})\-(\d{2})\-(\d{2})\s(\d{1,2}...

点击26个字母出现以该字母开头的城市原理:1.获取字母A到顶部的距离startY2.获取当前点击的字母到顶部的距离touchY3.因为一个字母的区域高度已知为20px,所以可以寻找下标indexconst index = Math.floor(( touchY - this.startY) / 20)4.通过this.$emit('change', this.letters...

1.用vue-cli3创建的vue项目2.在vue.config.js配置一下const webpack = require('webpack')const path = require('path')const appData = require('./data.json')const city = require('./city.json')const seller = ap...

1.新建一个store文件夹在src目录下(1)新建index.jsimport Vue from 'vue'import Vuex from 'vuex'import state from './state'import getters from './getter'import mutations from './mutation'import actions from ...

1.利用js的this.$refs拿到dom进行操作<template> <div id="slider"> <div class="window"> <ul class="container" ref="container" v-if="true" @mouseout="play" @mouseover="clear"&...

1.父组件给子组件传递值父组件通过属性传递子组件通过props接收2.子组件给父组件传递值子组件methods: { //点击事件 handleLetterClick(e) { console.log(e.target.innerText) //向外传递change事件,传递值e.target.innerText ...