排名
1
文章数
15030
总访问量
216.3万
粉丝数
30
评论数
120
总结 Vue3 的 13 种传参通信方式
props 父传子defineEmits 子传父mitt 兄弟组件传参$attrs （爷孙）refsv-model (双向)provide/inject (多层)路由传参vuex 传参 (全局)pinia 传参 (全局)浏览器缓存 (全局)window (全局)app.config.globalProperties (全局)————————————————
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权...
vue3 微信小程序 uniapp图片上传，图片转base64，base64转图片
vue3 微信小程序 uniapp 图片上传uni-app中上传图片可以使用方法uni.uploadFile:uni.uploadFile官方文档：https://uniapp.dcloud.net.cn/api/request/network-file.html
import { ApiBaseUrl } from '@/common/sysconfig'
const getToken = () => {
let info = uni.getStorageSync('loginInf...
vue3 微信小程序，uni-app 签字版插件sp-sign-board。上传图片
插件地址：https://ext.dcloud.net.cn/plugin?id=14966
文档：https://sonvee.github.io/sv-app-docs/docs-github/src/plugins/sp-sign-board/sp-sign-board.html
基础使用<template>
<view class="upLoadSigns-container">
<view class="sign-area">
<...
vue3 微信小程序，uni-app 基本模板
代码如下：
<template>
<view class="index-container">
6666
</view>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
const state = reactive({
popupShow: false
})
</script&...
vue3 ts uni-app 微信小程序 抽屉菜单的使用。抽屉菜单的打开关闭。基本模板。解决抽屉菜单的滚动穿透
代码如下：
<template>
<!-- 解决滚动穿透 -->
<page-meta
:page-style="'overflow:' + (state.popupShow ? 'hidden' : 'visible')"
></page-meta>
<view>
<view class="pm-ch-more" @tap="o...
vue3 vite ts 使用 uni-app 微信小程序 引入组件。引入扩展组件，引入下载的组件
引入组件还是直接引用即可：
import zbTab from '@/components/zb-tab/zb-tab.vue'
import moduleItem from './component/module-item.vue'
引入下载的组件先下载好组件放入项目中一个位置，比如src下的components：
然后引入的方式就是一样的了:
import zbTab from '@/components/zb-tab...
vue3 ts uni-app 微信小程序 生命周期函数。uni-app 动态修改页面的title,header里边的title
vue3 ts uni-app 生命周期函数import { onLoad, onShow,onUnload } from '@dcloudio/uni-app'
onLoad(() => {
uni.setNavigationBarTitle({
title: '精品课程'
})
})
onShow(() => {})
onUnload(()=>{
console.log("页面关闭了....")
// 注销监听的...
使用grid布局实现每行2个，间距20px，每项占用间距之后剩下宽度的50%
如果直接这样设置：
grid-template-columns: repeat(2, 50%);
grid-column-gap: 20px;
他会影响整体的宽度，因为这样做分成了两份，一份占了50%,然后还多了20px的间距，如何能够做到是整体宽度减去间距之后剩下的宽度在各占50%呢。
使用calc()函数就行了。
.container {
display: grid;
grid-templa...
uni-app 如何修改header的title描述和颜色,修改头部的背景颜色
在page.json中配置即可
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarBackgroundColor": "#ff0000", // 红色背景
...
uni-app 项目 vue3 st vite 版本 怎么配置h5启动的端口号
代码如下：
import { defineConfig } from 'vite';
import uni from '@dcloudio/uni-vite-plugin';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [uni()],
server: {
port: 3000 // 设置为你想要的端口号
}
});
vue,vue3 js,ts实现类似a标签的锚点功能，因为vue路由导致直接html的锚点功能失效
因为vue路由导致直接html的锚点功能失效，可以用js来实现，代码如下：
const toAnchorPoint = (location: string) => {
const dom = document.getElementById(location)
dom.scrollIntoView({ behavior: 'auto', block: 'start' })
}
调用的时候就传递一个id即可...
剪映的基本使用。音频如何删除，音频如何删除某一部分，如何修改某张图片的播放时间
默认一张图片只有三秒钟的时间如果不够的话可以拖动修改时间。
音频如何删除？单击选中后下面就有删除选项了。
音频如何删除某一部分？点击选中需要操作的音频后在点击分割就行了，就可以删除分割后的了。
element ui admin 如何点击按钮关闭当前菜单。vue-element-admin关闭当前标签页。编辑文章或者编写文章后返回上一页
核心代码如下：
// 调用全局挂载的方法(vuex中封装的方法)，关闭当前页
this.$store.dispatch("tagsView/delView", this.$route);
// 关闭之后跳转你要跳转的路由
// this.$router.push({ path: '/contentManage' })
this.$router.push("/contentManagement/content...
element plus table 表格，开启多选，增加复选框。设置忽略可选属性。获取选择的值
element plus table 表格，要开启多选非常简单，手动添加一个 el-table-column，设 type 属性为 selection 即可；
<el-table-column type="selection" width="55" />
[TOC]通过selectable可以设置忽略可选属性比如忽略id为1，和2的<el-table-column type="selection" :s...
vue3组件刷新，手动刷新组件，手动重新加载组件，类似reload方法
一般情况会封装一个refreshData来重新刷新数据，但是有些情况参数比较复杂，写这种刷新方法需要注意很多东西还要注意时机问题，所以可以在某些情况下直接去刷新组件来刷新数据。
如何是调用组件内部的方法这样调用就行了
const projectTeamMembersRef = ref(null)
const getTrainingSubProgramList = async (_tr...
修改element plus Carousel 走马灯 改指示器的样式，变为小圆点的效果。修改切换箭头的样式，位置，颜色等
代码如下：
<!--
修改element plus Carousel 走马灯 改指示器的样式，变为小圆点的效果。
以及切换箭头的颜色加深
-->
<style scoped="scoped" lang="scss">
/*
修改element plus Carousel 走马灯 改指示器的样式，变为小圆点的效果
*/
::v-d...
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：
50010702506256
50010702506256
欢迎加群交流技术