- 博客(28)
- 收藏
- 关注
RSS订阅原创 vue-弹窗数据刷新时强制渲染
<script> export default{ data(){}, methods:{ refresh(){ ... this.$forceUpdate()//在数据刷新的方法内调用该函数即可 } } }</script>这样就能实现数据刷新却没有渲染的问题...
2021-11-08 14:04:31
974
原创 css-给div设置不换行，超出部分省略号显示
div{ white-space:nowrap; text-overflow:ellipsis; word-break:break-all; overflow:hidden;}
2021-11-08 14:00:17
600
原创 Ant Design Vue 下拉框随页面滚动而分离的问题
遇到了个下拉框随页面滚动而分离的问题，后面查找资料，只需要在a-select里面配置以下内容即可:getPopupContainer="triggerNode => triggerNode.parentNode"
2021-09-30 10:57:35
865
原创 js-从服务器获取资源文件后重命名
遇到个需求，记录下找到的解决方案<script> export default{ name:'demo', data(){ return{} }, methods:{ //重命名函数 saveFile(blob, filename) { if (window.navigator.msSaveOrOpenBlob)
2021-09-30 10:42:03
171
原创 Ant Design Vue-upload 获取音频/视频时长
结合a-upload使用时，只需要在上传前调用以下代码即可 let url = URL.createObjectURL(this.file); let audioElement = new Audio(url); let duration = parseInt(audioElement.duration); audioElement.addEventListener("loadedmetadata", () =&
2021-09-29 15:44:43
1047
原创 vue-vuedraggable实现表格行拖拽
首先下载依赖包 npm install vuedraggable -Snpm install vuedraggable -S然后在需要的页面引入并注册，使用即可<template> <div class="demo"> <table class="dataTabble"> <thead> <tr> <th w
2021-09-10 18:44:32
485
原创 js-清空字段前后空格
利用正则可以对一个字段进行空格清除clearSpace(str) { return str.replace(/(^\s*)|(\s*$)/g, "");}只需要在使用的时候这样let str = this.clearSpace(this.demoStr);
2021-09-06 13:54:24
128
原创 vue-使用过滤器给v-html限制长度
今天遇到个需求，需要在展示v-html的时候限制其长度并用省略号替代。记录一下<template> <div> <!--这里的content是获取到的数据--> <span v-html=""$options.filters.setContent(content)""></span> </div></template><script> export
2021-09-01 19:52:46
830
1
原创 vue-轻量级富文本编辑器推荐
最近遇到个需求，需要在页面中引入富文本编辑器。最后选择使用wangEditor，直接引入即可使用，因此记录一下。引入方式如下：import E from 'wangeditor'const editor = new E('#div1')editor.create()更多配置可以参考官方使用文档更多内容可以去官网...
2021-08-31 18:02:38
655
原创 vue-如何获取上一个路由地址
今天遇到需要调用上一个路由地址，并根据不同地址进行跳转。记录一下：<template> <div> <a-button @click="routeBack()">返回</a-button> </div></template><script> export default{ name:'demo', data(){ ret
2021-08-26 11:13:50
10702
3
原创 Antd Vue-Warning: You cannot set a form field before rendering a field associated with the value
今儿遇到这种错，记录一下出错主要原因有两种：调用setFieldsValue()传入表单的值与表单不对应/调用setFieldsValue()需要在需要放在$nextTick()函数中执行先看第一种，有多少传多少this.form.setFieldsValue({ demo: '1' })第二种，放在$nextTick()中执行this.$nextTick(()=>{ this.form.setFieldsValue({demo:'1'})})...
2021-08-24 19:43:57
176
原创 js-如何判断一个对象为空对象
<script>export default{ name:'demo', data(){ return{} }, methods:{ checkObject(obj){ if (JSON.stringify(obj) === '{}') { return false // 如果为空 返回false } .
2021-08-23 20:00:07
74
原创 js-使用filter进行对象数组去重
今儿遇到个bug，有个地方会重复添加已有的东西。因此去学习了filter的使用方法，记录一下。<script> export default{ name:'demo', data(){ return{ demoList:[ { id:1, name:'demo'
2021-08-18 17:29:51
2159
原创 vue-axios的安装及四个常见方法
特征基于Promise 用于浏览器和 nodejs ，特征如下：从浏览器中创建 XMLHttpRequest 支持 Promise API 从 node.js 发出 http 请求 拦截请求和响应 转换请求和响应数据 自动转换JSON数据 取消请求 支持防止 CSRF/XSRF安装axios可以通过npm安装或者cdn引入npm：npm install axios --savecdn:<script src="https://unpkg.com/
2021-08-18 13:36:51
14472
原创 vue-获取路由携带参数
一般vue项目跳转路由时，往往跳转时会携带一些参数。那么在新的页面如何获取该参数？只需要在新页面中的computed里面这么写即可：<script>export default{ name:'demo', computed:{ id(){ return this.$route.query.id } }}</script>...
2021-08-11 12:15:56
2014
原创 Ant Design Vue-tree：默认展开到第几层
遇到个需求，每次打开页面时tree组件需要默认展开到第几层，记录一下。先看看基础用法，展示可勾选，可选中，禁用，默认展开等功能。更多用法可以去看树形控件 Tree - Ant Design Vue (antdv.com)<template> <a-tree checkable :tree-data="treeData" :default-expanded-keys="['0-0-0', '0-0-1']" :default-selecte.
2021-08-10 14:16:05
2916
原创 js-indexOf()的使用
如果要在一个字符串数组里面查找对应字符串的下标，可以使用indexOf。语法：stringObject.indexOf(searchvalue,fromindex)searchvalue是要搜索的字符串的值fromindex是开始检索的位置如果找到对应的字符串则会返回对应的下标，反之返回 - 1如果想要在对象数组里面查找对应数据的对象下标，可以使用以下方法<script> export default{ name:'demo',
2021-08-09 20:13:26
113
原创 Ant Design Vue-cascader：修改默认值
今天遇到个需求，需要在选择一个内容后填充其他信息到级联选择器中。记录一下。首先看一下级联选择器的基本用法：<template> <a-cascader :options="options" placeholder="Please select" @change="onChange" /></template><script>export default { data() { return { options: [
2021-08-09 20:02:26
2622
原创 js-export的常用用法
最近有用到关于js的模块化，有利于封装各种js函数或者数据，记录一下。首先是导出数据或者函数：//直接导出数据、函数export let demo1 = 2;export let demo2 = function(x,y){ return x+y };//或者可以这样写：let demo1 = 2;let demo2 = function(x,y){ return x+y};export {demo1,demo2}//在其他文件时这样引用：import
2021-08-07 18:39:21
13314
原创 vue-router如何以新窗口标签形式打开
<router-link>实现：vue2版本的 <router-link> 可以在里面添加一个target="_blank" 属性如下所示，这样就能实现以新的标签页面打开该页面<router-link target="_blank" :to="{path:'/demo',query:{value1:'1',value2:'2'}}">open</router-link>使用router.resolve实现我们可以使用window.op
2021-08-07 14:13:32
893
原创 vue-封装组件
平时经常遇到需要封装一个组件的情况，因此记录一下为什么要封装组件？能够把页面抽象成多个相对独立的模块 实现代码重用，提高开发效率和代码质量，使得代码易于维护步骤：这里我主要是将一个vue实例给封装起来，也算比较简单。新建一个vue实例文件，并写好代码 在需要使用的页面进行引入，我使用的是import demo from '@/components/demo.vue' 进行注册，这里分为全局注册和局部注册两种。全局注册则需要在Vue.component('demo')注册；局部注册
2021-08-06 15:52:46
379
原创 Ant Design Vue-Table报错：warning.js?2149:7
今儿使用蚂蚁组件库的table时，遇到个问题：warning.js?2149:7 Warning: [antdv: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.] 。记录一下这是因为columns中定义的默认key值在返回的数据中没有当前的这个字段造成的，一个是使用rowKey默认指定一个对应的键值对，或者使用类似v-for循环中的下标index来代替
2021-08-06 14:27:00
3068
原创 js-全屏显示
今儿遇到个需求，需要使用JavaScript来实现全屏显示的功能，因此记录一下。首先js部分如下：<script> export default{ name:'demo', data(){ return{} }, methods:{ function FullScreen(el) { let isFullscreen = docu
2021-08-05 17:59:50
283
原创 js-时间获取
如何利用js获取时间数据，以下有一些常用方法：方法 描述 getDate() 返回Number,1-31 getDay() 返回Number，0-6 getYear() 返回当前年份，2位 getFullYear() 返回年份yyyy getHours() 返回小时（24小时制，即0-23） getMilliseconds() 返回毫秒，0-999 getMinutes() 返回分，0-59 getMonth() 返回
2021-08-04 20:34:54
173
原创 js-手机号码验证
之前做表单时遇到需要进行手机号码的验证的情况。粗心的我在<a-input>里面写了type="number"，最后测试的时候发现不对劲，我查了下资料并将其更改过来，过程如下首先我使用的ant-design-vue的a-input结合v-decorator，<template> ... <a-form-item> <a-input allowClear placehold
2021-08-04 18:43:04
11658
原创 vue-组件通信
vue组件通信父子组件：props：在父组件对子组件上赋值，:vmodel指的是传给子组件的变量名，vmodel指的是data对象里面的vmodel属性值，可以写成一个对象的某个值，比如car.light等等<children :vmodel="vmodel"></children>然后在子组件中，通过设定props便可以直接引入该变量<script> new Vue({ el:"#app", props:["vmodel"],
2021-08-01 17:06:15
75
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人