旭哥的博客

容器内内容足够多时才会显示滚动条，发生滚动且到达距离底部指定距离后将会触发onReachBottom事件。容器高度由height控制。距离底部距离由distance控制。其他需求请自行修改相关代码。一、封装组件代码<template> <div class="z-scoll-view-wrapper" :style="{ height: height + 'px' }"> <div class="z-scoll-view-content" :style.

一、安装依赖npm install vue-qr --save二、封装组件1、参数说明appSrc 被生成二维码连接（必填）logoSrc 二维码中间logo图片（选填）默认无size 二维码尺寸（选填）默认1502、组件代码<template> <vue-qr :logo-src="logoSrc" :size="size" :margin="0" :auto-color="true" :dot-scale="

Vue自定义子组件利用model与父组件进行数据双向绑定官方教程传送门父组件代码父组件直接使用v-model对需要双向绑定的数据进行绑定<template> <div> 父组件内容：{{faData}} <hr /> <components-a v-model="faData"></components-a> </div></template><script>i

一、Vuex各部分介绍安装npm install vuex --save1、store中代码import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { // 此处存储数据 }, mutations: { // 此处用于处理state中数据，存放方法类似vue中的methods }, actions: { /

简单的说插槽就是在组件中预留代码空间，其中显示内容由父组件进行控制。Vue插槽可分为以下三种：匿名插槽（匿名代码空间）具名插槽（命名的代码空间）作用域插槽（实际上就是包含数据的代码空间）slot 和 slot-scope 这两个目前已被废弃，尚未移除，推荐使用v-slot。具体使用如下父组件中<template> <div> <component-b> <!-- 对应子组件<slot name="heade

方案一（最简单兄弟组件传参解决方案）：原理：使用一个空的 Vue 实例作为“中转站”，进行发送和接收数据。1、在main.js中添加new一个空的Vue实例，并将其挂载在原型上Vue.prototype.bus=new Vue();2、ComponentA组件中<template> <div class="wrapper"> <h3>这里是组件A</h3> <button @click="sendData"&gt

一、父组件向子组件传参1、父组件代码：注意：因为html对大小写不敏感，所以componentA组件注册后使用时采用component-a这种写法。<template> <div class="wrapper"> <h3>这里是父组件</h3> //使用子组件并在子组件中自定义数据FaData，此行为核心代码 <component-a :FaData="msg"></component-a&gt

Element-ui中如何使用Token一、技术提要涉及element-ui中的validate方法二、具体实现1、表单部分代码 <el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form"> <!-- 用户名 --> <el-form-item prop="username"&