weixin_45121510的博客

父组件<template> <section> <div class="ruleBtn" @click="handleClick($event)">点击按钮</div> <RuleModal v-if="ruleModalVisible" ref="ruleModal" :modalConfig="modalConfig" @close="closeRuleModal" /

toText(html){ return html.replace(/<(style|script|iframe)[^>]*?>[\s\S]+?<\/\1\s*>/gi,'').replace(/<[^>]+?>/g,'').replace(/\s+/g,' ').replace(/ /g,' ').replace(/>/g,' ');}效果如下：

<template><div> <div class="editor_container" :class="{'is-error': isError}"> <div :id="uniqEditorId" class="inner"></div> </div> <div>{{htmlContent}}</div></div></template><scr

我有个习惯，开发vue的时候，懒得写它的格式，就用vbase快捷键，一下就出来了。只需要安装插件： Vue VSCode Snippets 长下面这样：

let envTypeOptions_:any=[];let envOptions_:any={ isA:'腾讯', isB:'微博', isC:'朋友圈'}；Object.keys(envOptions_).forEach(function(key:string){ envTypeOptions_.push({ value:key, label:envOptions_[key] });})

因为h5项目，需要将页面通过微信分享出去，用户可以在微信中通过链接点入查看页面，会出现一些字体大小改变的问题，所以：android 需要重写事件wxFont.js文件(function() { if ( typeof WeixinJSBridge == 'object' && typeof WeixinJSBridge.invoke == 'function' ) { handleFontSize(); } else { if (docume

左侧排序：vuedraggable<template> <div class="theme-list"> <h2> <span>主题管理</span> <b class="iconfont icon-xinzeng" @click="handleAdd"></b> </h2> <div class="search-box"> <e

<div v-show="isShow" class="IT-support" ref='itSupport' @mousedown.capture="mouseDown" > <img class="ITImg" src="@/common/images/IT.png" @click.stop="showOrHideBar"> </div>data: startY:0,//初始移动位置 domBotto...

具名和非具名插槽需要多个插槽时，可以利用 元素的一个特殊的特性：name来定义具名插槽：具名插槽:父组件: <template slot="名字"> 子组件: <slot name="名字">非具名插槽:父组件：直接写或者标签即可不用做其他操作，子组件：直接写1）子组件模板定义：<div class="container"> <header> <slot name="header"></slot> &..

vue的无缝滚动插件vue-seamless-scroll的安装与使用vue-seamless-scroll1.命令行执行:npm install vue-seamless-scroll --save在vue文件中使用：template 文件 <div class="content"> <div class="title"> <div class="total" style="margin-right: 16px"&gt..

知识点：使用html2canvas实现移动端H5页面截图实现canvas图片转为文件阿里云文件上传功能.……<template> <div class="letter_box" id="shareContainer" :style="{ height: height ? height + 'px' : '100vh' }"> <!-- 头部logo --> <div class="header" v-show="isShowHeader

需求：在文件满足条件时直接上传，再次上传时若文件满足条件则覆盖之前的文件上传，否则则提示且不上传不满足条件的文件。<!-- :limit="1" --> // 注意：最大允许上传个数：这里不要置为1，置为1有个问题就是：无论怎么选择文件，页面上展示的始终是第一次选择的文件，这效果和我想的大相径庭。<el-upload ref="upload" :action="$config.baseURL + '/resource/upload/images'" :http-re

<div>{{sync | my-filter}}</div><div>{{mg | ya("优雅地","如厕") | my-filter}}</div><script> Vue.filter('my-filter',function(value) { // 无参数 return value + '哈哈' }) Vue.filter('ya',function(value,arg1,arg2) { // 有参数 retu

官方文档：default-index 单列选择时，默认选中项的索引 number | string 0defaultIndex 这个属性只是一个初始值，如果需要动态改变 index索引：建议使用 picker 实例的 setIndexes 方法通过 ref 可以获取到 Picker 实例并调用实例方法，setIndexes 设置所有列选中值对应的索引 indexes -// 1.给van-picker设置ref，如ref="van_picker" <van-popup v.

Tips: digit 类型从 2.4.2 版本开始支持// 限制只能输入正整数 (可以和digit配合使用)<van-field v-model.trim="submitParams.offset" type="digit" name="offset" autocomplete="off" " label="范围半径(米)" placeholder="输入范围(米)" :rules="[{ required: true}]"/>'submitParams.offset'.

注册局部指令：//VUE文件：<template> <div class="home"> 输入框：<input v-focus> </div></template><script>export default { data() { return { } }, directives: { focus: { // 指令的定义 inserted: func

混入混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。那么如何在项目中使用呢？一/在文件中新建一个mixin文件夹(名字随便取),文件夹中再建一个mixin.js(随便取)用来放混入的代码。二/在mixin.js文件中写入需要混入的代码export default { data() { return { name:'大明'

1.获取对象的长度let len = Object.keys(obj).length//可通过len是否为零来判断对象是否为空: len === 0则对象为空2.获取数组的长度arr.length补充：ES6新增的Object.keys()：Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组；判断对象是否为空：方法一：利用Object.keysdata() { return { objdata:{name:'li',firstn

用 key 管理可复用的元素：Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username"></template&gt

推荐一篇写的很好很仔细的文章，真的超棒！Vue动态组件

1.vue中 key 值的作用key的作用主要是为了高效的更新虚拟DOM。在vue中，当使用***相同标签名元素***的过渡切换时，也会使用到key属性，这样是为了让vue区分它们，否则vue只会替换其内部属性而不会触发过渡效果。2.Vue 组件中 data 为什么必须是函数?在 new Vue() 中，data 是可以作为一个对象进行操作的，然而在 component 中，data 只能以函数的形式存在，不能直接将对象赋值给它。 当data选项是一个函数的时候，每个实例可以维护一份被返回对象的独立的

<van-field readonly name="picker" :is-link="!submitParams.buInfo" :value="submitParams.buInfo" input-align="right" label="所属部分" placeholder="请选择部门信息" @click="showPicker = true" :rules="[{ required: true}]" /> <van-field rea.

有时当我们拷贝数据时，如果包含对象且层级太深，会发生拷贝不完整等的问题，这时可以采用**JSON.parse(JSON.stringfy())**方法实现深拷贝；深拷贝，其过程说白了 就是利用JSON.stringify 将js对象序列化（JSON字符串），再使用JSON.parse来反序列化(还原)js对象；序列化的作用是存储(对象本身存储的只是一个地址映射，如果断电，对象将不复存在，因此需将对象的内容转换成字符串的形式再保存在磁盘上 )和传输（例如 如果请求的Content-Type是 applic

需求： h5表单页面，跳转到指定页面时，表单页面数据储存:1.采用keepAlive坑太多，数据偶尔丢失；2.可以使用vuex：将表单页面数据存入store，回来时再将所需数据取出。表单页面： // 路由离开的时候，判断跳转去的页面路由是否需要缓存 beforeRouteLeave(to, from, next) { if(to.name === "vote-application.vote.avatarPage") { let data = { formData.

截取数组前5个对象arr.slice(0,5)截取字符串后3位（保留除了最后3位前面的部分）val.substring(0,val.length-3)删除指定下标为index的对象arr.splice(index,1)使用map方法将数组处理成我们想要的样子 let arr = [ ] list.map(item => { arr.push({ userId: item.id, //用户id name: item.name,//姓名 }).

不会在地址栏显示参数：传值时：使用name搭配params使用；取值时：使用this.$route.params去获取参数 this.$router.push({ name:'vote-application.vote.createDetail', params:{id:this.id,from:"nopermission",isInvited:this.isInvited} }) let p = this.$route.params if(Object.keys(p).len.

在vue文件中使用<van-image>引用本地图片时，不能直接使用地址，应该在地址前面用require包上：:src=“require(url)”<van-image :src="require('@/common/imgs/more.png')" />

<van-sticky> <van-nav-bar title="投决" :class="{indexNarBar:count() !== 0 && count() !== 1,textBar:item.s=true}" /></van-sticky><!-- 三个权限都没有 --><div v-if="count() == 0"> <div v-if="FUNCTION_JOIN"&gt

效果:实现:data数据模拟: tableData:[ { houseList:[ {house:"新希望乐城-3栋1单元2504",index:1}, {house:"新希望乐城-3栋1单元2503",index:2} ] } ],需求是不用点击切换,然后默认展示第一个,点击展示所有: <el-table :data="tableData" bo

想要下图button可点击跳转的状态：（逻辑写在模板中）<el-table :data="signData.records" style="width: 100%" height="100%" > <el-table-column prop="deviceId" label="设备号" width="400" key="bb"></el-table-column> <el-table-column label="打卡用户" key="aa"&g.

1.为什么要使用is　　在vue的官网组件部分中，有明确的描述：当使用 DOM 作为模板时 (例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上)，你会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意，像 <ul>、<ol>、<table>、<select> 这样的元素里允许包含的元素有限制，而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。通俗一点讲，就

路由出入口文件page-router样式不生效：解决：在router.js文件中：// import pageRouter from '@/views/page-router' （这样写有问题）export default { path: , name: , //component: pageRouter component: () => import('@/views/page-router'), // 这里直接引入 …… }...

<el-tree ref="tree" :data="treeData" :props="propsOption" :load="loadNode" :node-key="nodeKey" lazy :expand-on-click-node="false" :default-expanded-keys="defaultExpandedKeys" ></el-tree>然后： data() { ...