lihaijin8090-CSDN博客

原创 vue3使用＜script setup＞语法糖后如何在父组件用ref调用子组件的方法

vue3使用 setup 语法糖后如何在父组件用ref调用子组件的方法什么是setup语法糖根据vue3.x 官方解释script 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。相比于普通的 script语法，它具有更多优势：更少的样板内容，更简洁的代码。能够使用纯 Typescript 声明 props 和抛出事件。更好的运行时性能 (其模板会被编译成与其同一作用域的渲染函数，没有任何的中间代理)。更好的 IDE 类型推断性能 (减少语言服务器从代码中抽离类

2022-03-28 12:59:25 4433

原创 vue-cli使用ECharts （踩坑篇）

下面讲了两个引入方法一.页面全局引入二.在页面里直接映入一，页面全局引入1.安装echarts依赖npm install echarts --save2.在main文件中引入echartsimport echarts from 'echarts'Vue.prototype.$echarts = echartsVue.use(Echarts)3.在页面中使用html部分//为 ECharts 准备一个具备大小（宽高）的 DOM <div id="main" styl

2020-12-06 16:43:30 934

原创 uniapp三级联动实现

uniapp官方组件uniapp给定了五种模式普通选择器，时间选择器，日期选择器，省市区选择器，多列选择器官方文档省市区选择器不适用5+app、h5和支付宝小程序，必须适用插件更多内容大家自己阅读文档下面就直接上代码<template> <view class="content"> <view class="uni-list"> <view class="uni-list-cell"> <view class="uni-l

2020-12-05 14:26:47 5447 8

原创 vue-template-admin实现oAuth2.0第三方登录，获取用户信息

什么是OAuth2.0?OAuth2.0是一种允许第三方应用程序使用资源所有者的凭据获得对资源有限访问权限的一种授权协议。例如在前面的例子中，通过微信登录豆瓣网的过程，就相当于微信允许豆瓣网作为第三方应用程序在经过微信用户授权后，通过微信颁发的授权凭证有限地访问用户的微信头像、手机号，性别等受限制的资源，从而来构建自身的登录逻辑。需要说明的是在OAuth2.0协议中第三方应用程序获取的凭证并不等同于资源拥有者持有的用户名和密码，以上面例子来说微信是不会直接将用户的用户名、密码等信息作为凭证返回给豆瓣的。

2020-12-04 09:28:19 2247 2

原创 vue-cli实现导出excel

1.安装3个依赖包 npm install -S file-saver npm install -S xlsx npm install -D script-loader2.在src目录下创建文件夹vendor，里面放入Blob.js和Export2Excel.js两个JS文件点击超链接下载文件3.进入Export2Excel.js文件修改文件路径（这里不好说直接上图）4.在main.js里引入这两个文件import Blob from './vendor/Blob'import E

2020-12-04 09:08:42 753 2

原创 uniapp搭建云开发服务项目

1.项目搭建首先我们要新建项目（用HBuilderX）这里的uniCloud必须选中我们在使用uniCloud时，HBuilderX必须处于登陆状态没有登陆的同学去注册登录就可以了2.打开manifest.json 获取uniapp应用标识点击获取3.创建云服务空间右键打开cloudfunctions 创建云服务空间会打开web控制台我们点击创建就创建好了当前项目的云服务空间4.选择云服务空间接下来我们就可以创建我们的云函数了所有的操作都是右键上传或者部署云函数

2020-11-29 12:32:36 1975 1

原创 uniapp富文本解析

利用第三方插件 gaoyia-parse下载地址：https://ext.dcloud.net.cn/plugin?id=1831.引入插件2.使用插件content：需要解析的字符串noData：没有文本的时候

2020-11-28 21:16:20 1015

原创 uniapp云函数实现搜索功能

主要思路：在云函数获取所有字段，根据客户端传来的value值来搜索筛选相应的字段，再去返回给客户端，客户端拿到返回的数据，在输入搜索内容时，调用该云函数，返回相应的字段，渲染到提示列表，实现搜索功能1.云函数部分'use strict';const db = uniCloud.database()const $ = db.command.aggregateexports.main = async (event, context) => { // 接收分类 const { user_i

2020-11-24 19:50:08 2407 2

原创普歌-智音团队 uniapp的Loading样式（加载中）

在请求开始的前添加loading图标在请求完成后取消loading图标const BASE_URL = '根路径'// 同时发送异步代码的次数，防止一次点击中有多次请求，用于处理let ajaxTimes=0;export const request = (options)=>{ ajaxTimes++; // 显示加载中 uni.showLoading({ title: "加载中", mask: true, }); return new Promise((resol

2020-11-14 21:29:58 1285

原创普歌-智音团队小程序引入icon在线图标

用阿里矢量图标库选择好自己需要的图标点击Font class复制上图网址并且打开复制全部代码放到iconfont.css里在全局引入用法：去icon里复制对应的代码放到类名相关内容请浏览《普歌-智音团队小程序内置封装promise的方式》作者：lihaijin8090本文源自：lihaijin8090的《普歌-智音团队小程序引入icon在线图标》本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利

2020-10-27 21:03:28 116

原创普歌-智音团队小程序内置封装promise的方式

我们在做微信小程序的时候，用小程序内置API 会发生嵌套太多的问题，不利于后期的维护工作，最好的优化方案就是用promise封装我们的API原本代码 handGetUserInfo(e) { console.log(e); // 获取用户信息 const { encryptedData, rawData, iv, signature } = e.detail; // 获取小程序登陆成功后的code wx.login({ timeout:10000,

2020-10-23 21:05:25 83

原创普歌-智音团队微信小程序获取用户收货地址全过程

直接调用小程序内置 api 获取用户的收货地址 wx.chooseAddress就可以获取到用户信息，但是有一个问题：用户点击确定授权就可以获取到用户收货地址，但是如果点击失败，那么再点击获取地址，就不会弹出授权框那么下面我们就解决这个问题一. 获取用户的收货地址1 绑定点击事件2 调用小程序内置 api 获取用户的收货地址 wx.chooseAddress二. 获取用户对小程序所授予获取地址的权限状态 scope1 假设用户点击获取收货地址的提示框确定 authS

2020-10-21 19:13:08 339 1

原创普歌-智音团队把原生微信小程序请求改为promise的方式

创建request文件进行封装export const request = (params) => { return new Promise((resolve, reject) => { wx.request({ ...params, success: (result) => { resolve(result) }, fail: (err) => {

2020-10-15 20:30:42 178

原创普歌-智音团队 uni-app请求封装

创建一个http.jsconst BASE_URL = "http://localhost:8082"export const myRequest = (options)=>{ // resplove :成功 // reject ：失败 return new Promise((resolve,reject)=>{ uni.request({ url:BASE_URL+options.url, method: options.method || 'GET', data:

2020-10-06 17:11:30 71

原创普歌智音团队 uni-app路由跳转的两种方式

uni-app的两种路由跳转的方式一.生命周期式导航详细文档浏览：https://uniapp.dcloud.io/component/navigator1.navigator 标签案例<navigator url="../detail/detail">跳转至详情页</navigator>  <navigator url="../message/messag

2020-09-29 18:42:38 157

原创普歌-智音团队 vue在cookie中获取个人数据

做项目中难免会需要用户的一些信息，那抹我们应该怎么拿到用户信息1.在文件中引入js-cookie模块import Cookies from 'js-cookie'const UserKey = 'Admin-User'2.获取用户放在cookie的信息export function getUserInfo() { return Cookies.get(UserKey)}3.在需要用户信息的文件里引入上述文件import { getUserInfo } from "@/utils/au

2020-09-20 22:25:27 411

原创普歌-智音团队 element-ui分页组件的使用

1.我们以element-ui分页组件中最简单的一个为例<el-pagination background layout="prev, pager, next" :total="totals" :page-size="limit" :current-page.sync="page" @current-change="handleCurrentChange" ></el-pagina

2020-09-20 22:06:13 84

原创普歌 -智音团队 Vue用element-ui调用后端API实现删除功能

调用后端接口实现删除功能1.一般根据id删除//先把id传入 deletebanner(id) { return request({ url: `地址 `, method: "delete", }) },2.用自定义插槽做删除按钮</el-table-column><template slot-scope="scope"> <el-button size="mini" type

2020-09-17 19:31:35 1215

原创普歌-智音团队 Vue用element-ui调用后端API实现添加功能

1.请求接口//引入axios的配置import request from '@/utils/request'export default { addbanner(pugebanner) { return request({ url: “后端接口”, method: "post", data: pugebanner }) }, }2.添加按钮  <div class="bu

2020-09-16 21:14:01 652

原创普歌-智音团队 vue后端返回时间，转化为天数

实现这一功能分为4步1.获取后端时间数据，把时间数据转化为秒2.获取当前时间，把当前时间转化为秒3.用当前时间描述减去获取到的时间秒数就等于相隔的时间4.把相隔时间向上取整 // 获取的时间转化为秒 var start = this.pugeUser.gmtCreate; var datastart = new Date(start).getTime(); // 获取当前的时间 var date = new Date(); var se

2020-09-15 21:41:26 412

原创普歌-智音团队 MongoDB用node增删改查

MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。下面我们来用node操作MongoDB数据库1.连接数据库设计集合结构var mongoose = require("mongoose");// 连接数据库mongoose.connect("mongodb://localhost/itcast");// 设计集合结构（表结构）var userSchema = new mongoose.Schema({ usern

2020-09-14 17:22:30 104

原创普歌-智音团队 vue实现图片上传

项目开发中我们会遇到图片上传的需求，那么下面就讲解一下vue如何实现上传图片功能项目需求使用Element-ui的上传组件2.我们还需要云存储（oss）：会把我们本地图片上传到云服务器，把图片地址返回给前端，之后前端就可以把数据提交给后端代码示例 <el-dialog title="提示" :visible.sync="adddialogVisible" width="70%" @close="addDislogClosed"&g

2020-09-06 12:43:14 88

原创普歌-智音团队解决npm被墙问题（npm下载速度慢）

用npm下载依赖包是下载速度非常慢，我们可以按照一下方法执行在任意目录下执行都可以（在cmd里执行）–global表示安装到全局，而非当前目录–global不能省略，否则不管用npm install --global cnpm接下来安装包的时候把npm换成cnpm就可以例子//这里还是走国外的npm服务器，速度比较慢npm install jqueru//使用cnpm就会通过淘宝的服务器来下载jquerycnpm install jquery如果不想安装cnpm又想使用淘宝服务器来

2020-09-03 01:20:57 126

原创普歌-智音团队 vuex里State，Mutation，Action，Getter的使用

1.State定义：State提供唯一的公共源，所有共享的数据都要统一放到Store的State中进行存储2.Mutation定义：用于变更Store的数据3.Action定义：用于处理异步任务4.Getter定义：用于对Store中数据进行加工处理成新的数据State的用法//创建store 的数据源，提供唯一公共数据const store =new Vuex.Store({ State:{ count: 0 }})组件访问State中数据的第一种方式： this.

2020-09-02 01:00:55 98

原创 export和module.exports的区别

export和module.exports的区别每个模块中都有一个module对象module对象中有一个exports对象我们可以把需要导出的成员都挂载到module.exports对象接口中。module.exports.xxx=xxx但每次都module.exports.xxx=xxx很麻烦所以node为了方便，同时在每个模块中都提供了一个成员叫“exports”exports===module.exports//结果为true所以对于module.exports.xxx的方式完

2020-08-18 12:05:31 1150

原创普歌-智音团队 javascript-DOM重点总结

DOM重点内容目录一.元素的操作1.获取元素2.修改元素内容3.事件4.修改样式属性5.className给元素添加类名6.获取自定义属性值7.设置属性值8.移除属性二.节点的操作1.父节点节点操作2.子节点操作3…兄弟节点4.创建节点和添加节点5.删除节点6.复制节点获取元素获取元素有4种方法1.根据id获取doccument.getElementById("标签名")2.根据标签名获取doccument.getElementsByTagName("标签名")

2020-08-10 16:46:06 119

原创普歌—智音团队 VScode 使用vw布局插件（实用）

聊一聊移动端页面适配-vw 在vscode上使用插件vw在移动端屏幕适配是很好用的，但是如果计算起来就会很麻烦，那么下面我讲一下vscode如何使用vw插件1.在vscode下载 px-to-vw2.下载完毕后点击左下角的设置搜索px-to-vw，箭头所指的位置就可以设置我们原型搞的宽度（我这里原型稿是360）3.使用插件我们平时写页面都喜欢用px写，那么写完宽度（px）可以按Alt+Z 自动计算成vw的宽度 > div:nth-child(2) { h2 {

2020-07-29 23:23:54 1859 1

原创普歌—智音团队 vue-element-admin中Mock.js的使用

普歌-智音团队-Mock.js模拟数据一、什么是Mock？1.mock是一个模拟数据生成器。2.团队可根据数据模板生成模板数据3.模拟ajax请求，生成请求数据4.基于html模板生成模拟数据二、在我们开发过程中，前端的数据依靠后端写的API才可以拿到的，那么真的是后端先开发完前端才可以开始工作吗？答案必然是否定的那么这时候就用到了我们的mock模拟后端数据，这样就可以前后端并行开发，大大的提高了工作效率说了这麽多那mock.js到底是怎么使用的呢，下面就进入我们的正题！我下面所讲的

2020-07-22 10:35:58 780

原创普歌—智音团队 Sass的编译以及使用

普歌—智音团队 Sass的编译以及使用一.什么是Sass?1.Sass(Syntactically Awesome Stylesheets),是层叠样式语言2.CSS预处理器/CSS扩展语言3.Sass拥有比其他任何CSS扩展语言更多的功能和特新4.Sass（.scss）文件需要被编译成标准的CSS格式正题：一、Sass如何编译成CSS文件打开项目目录在cmd或者Powershell中这句话的意思是：把scss文件夹下的style.scss文件编译到css文件夹下并且文件命名

2020-07-22 10:33:32 147

weixin_45498167的博客