vue
閉丄眼聆厛倖輻
这个作者很懒,什么都没留下…
展开
-
vue中实现拖拽使用draggable
vue中实现拖拽使用draggable原创 2023-01-12 08:47:10 · 227 阅读 · 1 评论 -
setting
{ // vscode默认启用了根据文件类型自动设置tabsize的选项 "editor.detectIndentation": false, // 重新设定tabsize "editor.tabSize": 2, // #每次保存的时候自动格式化 "editor.formatOnSave": true, // #每次保存的时候将代码按eslint格式进行修复 "eslint.autoFixOnSave": true, // 添加 ..原创 2023-01-12 08:35:44 · 104 阅读 · 0 评论 -
前端实现全屏和关闭全屏
前端学习原创 2022-09-30 14:50:06 · 194 阅读 · 0 评论 -
文章是字符数字类型不换行,JSON跳转报错
样式原创 2022-09-15 10:20:50 · 72 阅读 · 0 评论 -
el-table表格树形结构和懒加载结合:当父节点渲染的东西和子节点渲染的东西不一样
el-table表格树形结构和懒加载结合:当父节点渲染的东西和子节点渲染的东西不一样树结构展开:事件 @expand-change='handledetail'设置:type="expand"<el-table :data="videoList.content" row-key="id" style="width: 100%;background-color: #000; " :show-header='false' @expand-change='handledetail'>原创 2021-12-29 10:13:52 · 1554 阅读 · 0 评论 -
Vue中实现全局监听屏幕宽高
1.要全局实现监听屏幕宽高的话需要使用vue,实现宽度在App.vue中编写,通过window.onresize监听初始宽度,保存进state中 mounted() { let _this = this; window.onresize = function () { // 定义窗口大小变更通知事件 // console.log(document.documentElement.clientWidth, "====12="); _this.原创 2021-11-22 10:29:29 · 1577 阅读 · 0 评论 -
自动适配苹果x底部留痕
给所在页面添加padding-bottom:calc(-16px+env(safe-area-inset-bottom));原创 2021-09-18 09:20:56 · 69 阅读 · 0 评论 -
vue项目中键盘点击enter键页面刷新,如何阻止默认事件
通常我们在使用element中的时候,如果在<el-form >中按下enter键的时候,是默认提交表单的,这时候我们就需要取消默认事件@submit.native.prevent当一个 form 元素中只有一个输入框时,在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为,可以在<el-form>标签上添加@submit.native.prevent。vue中也是有很多的默认事件:如<input @keyup.enter="function"&...原创 2021-09-14 19:07:25 · 2028 阅读 · 0 评论 -
vue中三种不同插槽使用:普通插槽,具名插槽,作用域插槽
{ path: '/', component: User, children: [ { path: '/home', // /user/:id component: userIndex }, ] }原创 2021-09-08 17:34:42 · 883 阅读 · 1 评论 -
web页面跳转支付宝网页支付
首先是需要后端配合的:这是在页面中展示的,只有支付宝支付才行<div class="pay-center" style="padding-left:15px" v-if="payMethod == 'ALIPAY'"> <el-link type="primary" :underline="false" @click="payWeb"> 没有手机,使用网页端支付 </el-link><原创 2021-09-07 11:43:51 · 2612 阅读 · 0 评论 -
vue中高德地图获取锚点信息窗体
直接上代码(描点部分)this.tableData是获取到的锚点数据position是每个锚点的坐标marker.on('click', function (e) {})点击事件 let map = new AMap.Map("container", { zoom: this.zoom, pitch: 50, viewMode: this.viewMode, // 开启3D视图,默认为关闭 });// 构造点标原创 2021-08-27 20:22:58 · 375 阅读 · 0 评论 -
vue3中computed函数,watch函数,watchEffect函数
需要引入函数api才可以使用import{ref,reactive,computed,watch,watchEffect}from'vue'computed函数 setup(){ //数据 let person = reactive({ money:18, num:18 }) //计算属性——简写(没有考虑计算属性被修改的情况) person.fullName = computed(()=>{ return person.mo...原创 2021-08-14 16:19:07 · 211 阅读 · 0 评论 -
vue3中的setup,ref函数,reactive函数
vue3中使用setup,把vue2中的data,watch等都放在了setupzhong首先使用这些函数先引入import{ref,reactive,computed,watch,watchEffect}from'vue'ref函数:使用在字符串或者数字类型数据修改数据的时候需要xxx.value,在view中不用.value <h2>姓名:{{name}}</h2> <h2>年龄:{{age}}</h2>...原创 2021-08-14 16:18:12 · 170 阅读 · 0 评论 -
vue2实现响应式和vue3实现响应式
vue2:vue3:原创 2021-08-13 16:45:06 · 73 阅读 · 0 评论 -
h5前端进行支付,后端返回(from)
前端进行点击按钮跳转到支付宝app,对商品进行支付:首先是我们需要后端的接口,我们去请求,后端会返回from:如下:然后我们就对数据进行处理:这个是跳转支付宝的: const formElement = document.createElement("div"); formElement.style.display = "display:none;"; formElement.innerHTML = res.payData;原创 2021-08-13 16:07:27 · 485 阅读 · 0 评论 -
this.$set(obj, key, value),添加属性,删除,修改
给视图层添加属性第一种方法:this.$set(obj, key, value)第二种方法:引入import vue from 'vue' vue.set(obj, key, value)对象的话:Object.assign(obj1, obj2)删除属性:this.$delete(obj, key, value),vue.delete(obj, key, value)修改属性:this.$set(obj, key, value),或者是sp...原创 2021-08-10 11:37:04 · 1354 阅读 · 0 评论 -
vue中的ref和$ref,mixin
ref:ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向该子组件实例,就好比是id属性,对节点操作:document.getelementbyid("#id")一样,取到节点,但是不同的地方是对子组件的操作上读取ref:this.$refs.xxxmixin混入:1.Vue 插件是一个包含 install 方法的对象2. 通过 instal.原创 2021-08-09 15:50:01 · 364 阅读 · 0 评论 -
vue3项目,vue-cli创建项目和vite创建项目
vue-cli创建项目:## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上vue --version## 安装或者升级你的@vue/clinpm install -g @vue/cli## 创建vue create vue_test## 启动cd vue_testnpm run serve原创 2021-08-09 15:01:27 · 174 阅读 · 0 评论 -
vue中动态绑定css和style
当我们需要动态的改变view中样式的时候:<template> <div class=""> <!-- 第一种: 可以写成三元表达式切换--> <div :class="first"></div> <!-- 第二种 :当为true时显示--> <div :class="{ classA: hasClassA, classB: hasClassB }"></div>原创 2021-08-03 19:57:41 · 245 阅读 · 0 评论 -
vue中的父传子,子传父,兄弟传值,事件总线
父传子:在父组件中定义: <panel-group :sonProduct="fathProduct"/>import PanelGroup from "子组件路径";export default { components: { PanelGroupt }, data() { return { fathProduct:'传给子组件' } }} 然后在子组件接收:这样写props是比较规范的 props: { son原创 2021-08-03 11:58:08 · 254 阅读 · 0 评论 -
创建一个web端的支付密码输入框
效果图直接上代码直接封装成一个组件,哪里需要就直接调用就可以了<template> <div class="am-payPwd" :id="`ids_${id}`"> <input type="password" readonly onfocus="this.removeAttribute('readonly');" maxlength="1" autocomplete="new-password"原创 2021-07-31 14:49:52 · 327 阅读 · 0 评论 -
vue中的watch和computed属性使用详解
watchcomputed原创 2021-07-31 08:35:10 · 127 阅读 · 0 评论 -
vue中的延迟回调:Vue.nextTick( )
当我数据请求比较慢的时候,但是页面已经加载完成了,这是,我们可以使用this.$nextTick(function () { console.log(this.$el.textContent) // => '已更新' })也可以传递一个对象,用来更新对象数据...原创 2021-07-29 20:06:25 · 888 阅读 · 0 评论 -
在vue中实现文件手动上传,用到Upload
实现文件的选择,判定首先是upload模板 <el-upload ref="upload" :limit="1" :before-upload="beforeUpload" :auto-upload="false" :headers="headers" :on-success="handleSuccess"原创 2021-07-28 16:37:37 · 671 阅读 · 0 评论 -
在element中的table表格中运用InputNumber修改不成功
在项目中,在table表格中,使用计数器改变数量的话,只能点击一次,没有改变数组里面的数据,或者改变数据重新渲染的话,checkbox选中的数据也会改变,如何实现可以修改这个bug,直接上代码首先在表格中定义一个:key=‘tablekey’ <el-table :data="products.products" style="width: 100%; margin-top: 20px" >原创 2021-07-26 08:16:16 · 944 阅读 · 0 评论 -
vuex的使用和封装
vuex是一个状态管理工具,可以实现数据的响应式,看下图原创 2021-07-19 17:26:08 · 85 阅读 · 0 评论 -
axios封装和请求
掘金:https://juejin.cn/post/6844903652881072141转载 2021-07-12 16:33:09 · 48 阅读 · 0 评论 -
vue项目实现JSON格式展示内容:json-viewer
效果:方法:第一步:首先映入插件import JsonViewer from "vue-json-viewer"第二步:定义组件components: {JsonViewer,}第三部使用: <json-viewer :value="logDetail"></json-viewer>里面的value原创 2021-07-12 10:39:17 · 312 阅读 · 0 评论