- 博客(17)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 vue-cli 3.x 开发插件并发布到 npm 及使用
1、创建默认项目2、修改目录首先需要创建一个 packages 目录，用来存放组件然后将 src 目录改为 examples 用作示例启动项目的时候，默认入口文件是 src/main.js将 src 目录改为 examples 之后，就需要重新配置入口文件在根目录下创建一个 vue.config.js 文件// vue.config.jsmodule.exports = { // 将 examples 目录添加为新的页面 pages: { index: {
2021-08-19 17:49:49
299
转载 2021-05-28
前言最近项目中用到了Switch开关组件，需求是点击switch开关按钮后，弹出一个确认对话框，根据用户的操作来决定是否改变switch的开关状态。Attributes参数 说明 类型 默认值value / v-model 绑定值 boolean / string / number —disabled 是否禁用 boolean falseactive-color switch 打开时的背景色 string #409EFFinactive-color switch 关闭时的背景色 string
2021-05-28 13:23:13
197
转载 解决 element的el-input 输入框/普通input输入框 浏览器自动填充账号密码问题
一 先说一下普通input输入框保存历史记录的解决方法 在input输入框中加autocomplete=“off” 属性 可去除历史记录二 element的el-input 输入框 填充历史记录 解决方法浏览器会默认将已保存的账号密码 填充到input type值为password的输入框内 在登陆页面 这是正常的但进入系统后 随便打开一个类型为password的输入框 页面就会自动填充对应的账号密码解决方法 ：在type为passworld的input中
2021-04-22 08:49:29
2469
2
转载 router 二级 三级嵌套及选中高亮
1.main.js文件下二级路由和三级路由的引入，以及如何定义他们的路径path、名称name、调用组件component、默认展示组件redirect。路由对象数组routes中存放着所有路由的路径和组件。在这里二级路由，以children数组的形式挂在一级路由对象里面，如下所示。三级路由也挂在二级路由对象中的children数组里面。redirect挂在拥有二级路由的一级组件里表示，当我们打开这个一级路由时，默认展示redirect的路径值，也就是他其中一个二级路由。import Vue f
2021-04-12 10:59:51
767
原创 vue 组件传参 props $attrs
1、props 父组件向子组件、孙组件传递数据，$emit子组件向父组件发送消息，v-on:或是＠父组件监听消息。父组件<template> <div id="app"> <Child1 :pChild1="1111" :p-child2="22222" @test1="onTest1" @test2="onTest2" title="题目" > </Child1>
2021-04-07 13:29:43
410
转载 Vue3.0 directive的使用说明
指令生命周期关键字变更在3.0中指令的注册和其生命周期是这样的import { createApp } from 'vue'const app = createApp({})// 注册app.directive('my-directive', { // Directive has a set of lifecycle hooks: // called before bound element's parent component is mounted beforeMount() .
2021-04-02 17:05:12
1357
转载 vue递归组件的用法(用于多级下拉菜单)
概念：组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。之前在写组件时总有些疑惑，为什么export default导出的对象中有个name属性，今天看过递归组件之后，才发现这个name属性的一个比较重要的作用。（当然。name属性的还有其他的用处）。用法：1、首先我们要知道，既然是递归组件，那么一定要有一个结束的条件，否则就会使用组件循环引用，最终出现“max stack size exceeded”的错误，也就是栈溢出。那么，我们可以使用v-if="false"
2021-04-01 11:10:16
447
转载 vue 利用 lodash Debounce防抖
1、引入import * as _ from 'lodash'2、使用export default { methods: { // 注意，这里debounce中的第一个参数，不能写成箭头函数，否则，取不到this getMessage:_.debounce(function(){ this.setTxt(this.message) //要调用的方法 },1000) }}作者：lovelytong链接：https://www.jia
2021-03-23 13:44:10
822
原创 vue 之 computed、methods、watch
1、computed VS methodscomputed ：计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。methods：调用方法将总会再次执行函数。2、computed VS watchwatch：观察和响应 Vue 实例上的数据变动。有时computed更便捷。var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', ful
2021-03-23 11:10:42
80
原创 vue 抽离公共方法
方法一：1、通过install 方法：js文件编写抽离的方法：const data = { install (Vue){ Vue.prototype.timestampToTime = function (timestamp) { } Vue.prototype.fn2= function () {} //抽离多个公共方法 }}export default data;2、在main.js引入//公共方法import base from "./common/base";
2021-02-04 09:22:40
2165
原创 vue 封装组件
1、创建组件文件夹包含 .vue文件和对应的.js文件如图：2、完成组件模板<!-- 这是一个公共组件 --><template> <div>这是一个公共组件内容</div></template><script>export default { name:"List", data () { return { }; }, methods: {}}</script>
2021-02-03 14:37:03
507
原创 canvas绘制圆形马赛克方法二
因某些项目需求：必须先绘制整出整个图片在打马赛克，“canvas绘制圆形马赛克方法一”中方式不能满足，故用以下方式实现：方法简介：先绘制出整个图片在画布a上，在将马赛克数据copy到画布b，通过裁剪画布b实现圆形马赛克，最后将马赛克部分重新画到画布a上：效果如下：代码如下：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charse
2021-01-29 15:12:41
468
原创 canvas绘制圆形马赛克方法一
在图片上绘制圆形如图：代码示例<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> .canvas1{ position: absolute;
2021-01-22 14:10:16
812
原创 vs code不出现go live
1、需打开整个文件夹不能是单独html文件2、先打开空文件夹在添加html文件也不会出现，添加html文件后重新用编辑器打开文件夹3、检查一下Live Server的版本
2021-01-12 11:19:19
813
原创 vscode设置打开默认浏览器
打开编辑器-》点击左下角设置-》设置-》用户-》扩展-》找到右侧（Open-in-browser:default）
2021-01-12 10:46:48
1201
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人