-
定义全局组件 ................. main.js
// 引入SvgIcon.vue组件
import SvgIcon from "@/components/SvgIcon.vue";
app.component(svg-icon , SvgIcon );
页面使用,不用引入，直接使用
<svg-icon />
-
路由切换时候滚动条置顶
router/index.js
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), //提供一个环境变量，，用来区分开发环境和生产环境
routes:[],
// 滚动行为:控制滚动条的位置
scrollBehavior() {
return {
left: 0,
top: 0,
};
},
});
深度选择器
::v-deep(.el-form){
width:300px;
height:100px;
}
element plus自定义滚动条样式 ..............App.vue
<template>
<!-- namespace="el" 修改组件css样式前缀 -->
<el-scrollbar>
<el-config-provider size="large" :locale="locale" :message="config">
<router-view></router-view>
</el-config-provider>
</el-scrollbar>
</template>
base64格式图片展示
<img :src="data:image/jpeg;base64,{{item.url}}"
动态class
:class="{active:a==1}"
子传父 自定义事件
任意组件通信emit
npm i mitt
son1.vue 发送方
<template>
<div class="box">
<h2>子组件2</h2>
玩具:{{ toy }}
<el-button @click="sendToy">发送玩具</el-button>
</div>
</template>
<script setup>
import { ref } from "vue";
import emmitter from "@/utils/emmiter";
const toy = ref("奥特曼");
const sendToy = () => {
emmitter.emit("send-toy", toy.value);
};
</script>
son2.vue 接收方
<template>
<div class="box">
<h2>子组件1</h2>
<div>游戏:{{ games }}</div>
<div>
弟弟传来的数据： <span v-if="toy">{{ toy }}</span>
</div>
</div>
</template>
<script setup>
import emmitter from "@/utils/emmiter";
import { ref,onUnmounted } from "vue";
const games = ref("王者荣耀");
const toy = ref("");
emmitter.on("send-toy", (val) => {
toy.value = val;
});
//组件卸载时候解绑事件
onUnmounted(()=>{
emmitter.off('send-toy')
})
</script>
购物车总价案例
设备底部安全区
.box{
position: fixed;
bottom: 40rpx;
right: 40rpx;
padding-bottom: env(safe-area-inset-bottom);}
去除button自带样式
button {
border: 0;
font-size: 28rpx;
outline: none;
padding: 0;
color: #737373;
background-color: transparent;
}button::after {
border: 0;
}
grid布局
<template>
<view class="layout">
<view class="box" v-for="item,index in 10" :key="index">
{{item}}
</view>
</view>
</template><script setup>
</script><style lang="scss" scoped>
.layout {
padding: 20rpx;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20rpx;
background-color: #dadd15;.box {
border: 1px solid #ddd;
background: #ddd;
}
}
</style>
<template>
<div class="layout">
<div class="box" v-for="(item, index) in 10" :key="index">
{{ item }}
</div>
</div>
</template>
<script setup></script>
<style lang="less" scoped>
.layout {
padding: 0.4rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 0.4rem;
justify-content: center;
height: 50rem;
background: #6ba3e4;
.box {
background: #4ad187;
font-size: 0.5333rem;
text-align: center;
text-align: center;
}
:nth-child(5) {
grid-column: 2（第几行的盒子） / 6（想占几份，就用行数加几）;
grid-row: 2 （第几列的盒子）/ 6（想占几份，就用列数加几）;
}
}
</style>
// 不指定列宽，自动分配
display: grid;
width: 80%;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
图片不被压缩
img{
width: 100%;
height: 100%;
object-fit: cover;
}
- object-fit: contain; 保持宽高比，缩放保持图片完整性。会有空白
- object-fit: cover; 保持宽高比，填充元素的整个内容框。会裁剪
- object-fit: fill; 不保证保持原有的比例，内容拉伸填充整个内容容器。会拉伸
浏览器不支持css兼容性问题
移动端富文本解析器
<mp-html :content="msg" /> ----------------------uniapp插件市场
移动端 富文本编辑器
https://ext.dcloud.net.cn/plugin?id=14726npm install mp-html发送页代码
<template>
<view class="home">
<view class="editor-box">
<sp-editor :toolbar-config="{
excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
iconSize: '18px'
}" @init="initEditor" @input="inputOver" @upinImage="upinImage" @overMax="overMax" @addLink="addLink"
@exportHtml="exportHtml"></sp-editor>
</view>
</view>
</template>
<script setup>
import {
reactive,
ref
} from "vue"
const editorIns = ref(null)
const inputOver = (e) => {
// 可以在此处获取到编辑器已编辑的内容
console.log('==== inputOver :', e)
}
const overMax = (e) => {
// 若设置了最大字数限制，可在此处触发超出限制的回调
console.log('==== overMax :', e)
}
const initEditor = (editor) => {
editorIns.value = editor // 保存编辑器实例
// 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
preRender()
}
const preRender = () => {
setTimeout(() => {
// 异步获取后端数据后，初始化编辑器内容
editorIns.value.setContents({
html: `<div> 猫猫<img src="https://img.yzcdn.cn/vant/cat.jpeg"/>
<img src="https://img.yzcdn.cn/vant/cat.jpeg"/>
<img src="https://img.yzcdn.cn/vant/cat.jpeg"/>yaho giao</div>`
})
}, 1000)
}
const upinImage = (tempFiles, editorCtx) => {
// #ifdef MP-WEIXIN
// 注意微信小程序的图片路径是在tempFilePath字段中
editorCtx.insertImage({
src: tempFiles[0].tempFilePath,
width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
success: function() {}
})
// #endif
// #ifndef MP-WEIXIN
editorCtx.insertImage({
src: tempFiles[0].path,
width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
success: function() {}
})
// #endif
}
const exportHtml = (e) => {
uni.navigateTo({
url: '/pages/out/out',
success(res) {
// 传至导出页面解析即可
res.eventChannel.emit('e-transmit-html', {
data: e
})
}
})
}
const addLink = (e) => {
console.log('==== addLink :', e)
}
</script>
<style lang="less" scoped>
.home {
width: 100%;
.editor-box {
width: 94%;
height: 1000rpx;
background-color: aqua;
margin: 20rpx auto 0;
}
}
</style>接收页代码
<template>
<view class="content">
<view class="uni-common-mt" style="">
<mp-html :content="nodes" />
</view>
</view>
</template>
<script>
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
export default {
components: {
mpHtml
},
onLoad: function(options) {
const eventChannel = this.getOpenerEventChannel();
eventChannel.on('e-transmit-html', (data) => {
console.log(data.data, 'data');
this.nodes = data.data
})
},
data() {
return {
nodes: null
}
}
}
</script>
<style lang="scss" scoped>
.uni-common-mt {
margin: 0 auto;
width: 95%;
}
</style>
移动端路由激活时样式
// 导出路由 export default createRouter({ history: createWebHashHistory(), routes, linkActiveClass: 'active', // 路由激活时添加的类名 linkExactActiveClass: 'cur-active' // 链接被精确匹配激活时添加的类名 })
map方法使用
const imgList = (uni.getStorageSync('previewList') || []).map(item => { return { ...item, bigPicUrl: item.smallPicurl.replace('_small.webp', '.jpg') } })
h5在线预览文件
let url = "https://view.officeapps.live.com/op/view.aspx?src=" + 文档url;
window.open（url）; //新建窗口打开链接预览
或者
window.location.href = url; //本页面内跳转链接实现预览
PDF好像要单独处理，用了一下感觉不太爽放弃了
截取在线文件名
filters: {
formatFileName(val) {
if (val) {
return val.split('/').pop()
}
}
},
展示富文本部分文字作详情
<view class="content" style="font-size: 20rpx;">
{{contentHtml(item.detail,index)}}
</view>methods: {
contentHtml(content, index) {
// 富文本编辑器的内容如何只获得文字去掉标签
content = content.replace(/<[^>]+>/g, "");
// 在上面的基础上还去掉了换行<br/>
// content = content.replace(/<[^>]+>/g, "").replace(/(\n)/g, "");
// 请注意，我这个是自定义全局方法，用于超过字数显示省略号的...
// 之前文章有写过，下面也放上了链接，自行查看
return this.noticelist[index].detail = this.getEllipsis(content)
},}
挂在再原型上
// value代表内容（value不能为空），num是限制我们多少字符进行显示省略号（num=20意思是不传默认是等于20）
Vue.prototype.getEllipsis = (value, num = 20) => {
if (!value) {
return ''
}
if (value.length > num) {
return value.slice(0, num) + '...'
}
return value
}
uniapp软键盘弹起顶起tabbar
uni.hideTabBar()
uni.showTabBar()
扫一扫
1071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
