Nancy617-CSDN博客

原创 flex布局中，input宽度问题

今天使用flex时遇到一个奇怪的小问题。为了好分辨，给input做了个边框。iphone6/7/8时表单如下：切换为iphone5时显示如下：此时去改写input的宽度是无效的，但是将宽度改为0就恢复正常了：不知道这是什么原理...

2021-10-21 15:16:17 581

原创 uni-app 小程序 H5 主体内容和tabbar之间距离的兼容问题

使用uni-app的过程中，将h5页面运行到内置浏览器时内容底部的部分是会被tabbar遮挡掉的，但是在小程序上运行的话会自动留出tabbar高度的空间来适配页面。为了兼容H5端，我们只需要在页面加上uni-app自带的css变量即可html:<view class="page_home"> 页面内容.....</view>css:.page_home{ padding-bottom: var(--window-bottom);}可以看到在内置浏览器中页

2021-06-25 14:48:39 913

原创 uniapp 小程序图片出现多余边距

使用uni-app时，会发现图片下方出现不明边距，并且自己完全没有设置也找不到在哪里其实是uni-image自带的样式导致。只需要在样式中加上uni-image { display: block;}这样图片就正常了。接着，我们把项目运行到微信开发者工具上，可以看到图片又出现了莫名其妙的边距。好吧，这是小程序的image自带的样式导致……那么我们再加上image{display: block;}完成～日后有遇到其他兼容问题再来补充...

2021-06-25 14:09:40 2905

原创 vue-cli中导入、导出excel

1.安装依赖npm i file-saver xlsx -S npm i script-loader -D2.创建js这两个文件的代码我会放在文章的最后。3.html中表格为假数据。实际使用时用后台请求到的数据代替即可。丑了点但不影响。<el-upload action="" :on-change="importChange" :auto-upload="false" :show-file-list="false"> <el-button type="primary"

2021-05-07 14:52:30 438

原创 uniapp 切换语言功能及动态修改tabbar、顶部文字

项目需求：中英切换1.安装vue-i18nnpm install vue-i18n --save2.创建语言包根据设计图随意翻译了下，这里就放图了不放代码了。en.json:zh.json:3.在main.js中导入import VueI18n from 'vue-i18n';Vue.use(VueI18n)；const i18n = new VueI18n({ locale:'zh', //默认语言 messages: { zh: require

2021-05-06 16:10:35 3364

原创 vue节流

第一种1.html部分<el-input v-model.trim="sval"></el-input>2.js部分const delay = (function () { let timer = 0 return function (callback, ms) { clearTimeout(timer) timer = setTimeout(callback, ms) }})()export default { data(){ ret

2021-04-29 14:22:22 130

原创闲来无事，用canvas画个钟

一.创建画布本文参考学习 HTML5 Canvas 这一篇文章就够了开工。这里去一个网站找了渐变色的素材 color.oulu.me<canvas id="myClock" width="500" height="500" style="background-image: linear-gradient(to right, #243949 0%, #517fa4 100%);"></canvas>画布现在长这样：二.绘制表盘找到画布，创建画笔，调用画图的方法。

2021-04-28 15:12:48 110

原创 uniapp 更换导航栏图标并添加事件

1.配置导航栏先看设计图可见：右上角是个加号图标，点击有跳转功能在pages.json中找到对应页面进行配置：（因为图标是个加号所以偷懒用了文字嘻嘻）{ "path": "pages/addrList/addrList", "style": { "navigationBarTitleText": "地址本", "enablePullDownRefresh": false, "app-plus": { "titleNView": { "bu

2021-04-27 15:55:52 1099

原创在uniapp的H5页面中使用复制粘贴功能

在uniapp的H5页面中使用复制粘贴功能1.安装插件命令行npm i clipboard --save在main.js中加入：import Clipboard from 'clipboard';2.在页面中使用html部分：<text class="copy_txt" @tap="copy(code)">复制链接分享</text>js部分：copy(code) { let clipboard = new Clipboard('.copy_txt',

2021-04-27 14:59:10 996

原创 elementui el-table 多行合计、插入标签

1.传参需要获取当前是第几个表格。加ref是为了让表格合计行渲染正常。data是组件自带的参数，index是获取到的外层循环下标。<el-table :data="item.orderFoodList" show-summary :summary-method="data=>summaries(data,index)" ref="detailTable">created() { this.getOrderList()},updated() {// 用于防止表格合计行不显示

2021-01-07 14:41:14 6652 14

原创 vue-cli安装scss,element-ui,md5,vuex

vue-cli安装scss,element-ui,md5,vuexscss:cnpm install node-sass -Dnpm install sass-loader -Dvue.config.js加上：pluginOptions: { 'style-resources-loader': { preProcessor: 'sass', patterns: [ path.resolve(__dirname, './src/styles/common.scss') //

2020-12-24 11:56:48 310

Nancy617的博客