- 博客(24)
- 收藏
- 关注
RSS订阅原创 使用pdf.js插件同时用iframe嵌套方式预览pdf文件
1.在百度搜pdf.js2.把下载好的包放在项目中，我这里是Vue项目，在public文件夹下，新建一个PDF文件夹，把下载的包里的build 和web 文件夹 放到PDF文件夹里3.预览页面中<template> <div> <iframe :src="baseUrl + 'PDF/web/viewer.html?file' + encodeURIComponent(pdfUrl)" width="100%" height="100%" frameborde
2021-03-21 11:13:16
2091
1
原创 iview表格中 colums中使用render函数的几种总结
columns1: [ { title: '姓名', key: 'name' render: (h,params) =>{ let _name = params.row.firstName + params.row.lastName; return h('div',_name); }.
2021-03-09 17:50:57
1150
原创 ivew 表格中列中使用tooltip文字提示,并且文字过长显示...
columns1: [ { title: 'Name', key: 'name' }, { title: 'Age', key: 'age' }, { title: 'Ad.
2021-03-09 16:18:26
317
2
原创 使用vue-cli4.0搭建一个新项目的步骤
1.window+d 回到桌面，右键使用命令行，点击 Git Base Here,先查看vue版本，如果是2.9.几的版本，那么要卸载再重新安装npm uninstall -g vue-cli npm install -g @vue/cli我操作的时候，卸载很痛快， 但是安装一直好慢不动了， 然后就试了下 cnpm install -g @vue/cli，然后就飞速的安装完了接下来就是开始创建项目了,project-web 是我想创建的项目名字vue create project.
2020-11-26 18:03:45
281
1
原创 内容过多时超出部分显示...，鼠标划入时显示提示信息
cdn方式引入vue、iview组件库 <html> <head> <title>内容过多时超出部分显示...，鼠标划入时显示提示信息</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"> </script> <link rel="stylesheet" href="//
2020-10-30 12:53:07
349
原创 解决移动端使用window.open跳转链接时，苹果iOS没有反应的问题
移动端使用window.open跳转链接时安卓可以正常跳转，但是iOS苹果上没有反应，百度了下说是因为苹果的安全机制拦截了，所以不能打开新的标签页，然后就使用了网上的方法： var winRef = window.open(" ","_blank"); //先打开一个标签页 在请求数据成功的回调中： winRef.location = "新的url";在iOS上是跳转了打开了一个新的标签页，但是一直是空白的然后就直接使用window.location.href ,这回苹果可以跳转了，但是安
2020-09-15 14:08:54
10803
3
原创 解决报错You are using the runtime-only build of Vue where the template compiler is not available.
如图这种方法添加组件时报标题中的错误解决方法：在vue.config.js文件中配置const path = require("path");module.exports = { // webpack配置 - 简单配置方式 configureWebpack: { resolve: { alias: { // 别名 vue$: "vue/dist/vue.esm.js", //加上这一句 "@api": path.reso
2020-08-24 16:15:57
1529
原创 img标签动态添加 相对路径地址
如果img标签是遍历循环的， 路径需要动态添加本地的相对路径 如果是这样 <img :src="../../assets/1.jpg"> 此时图片不能显示 需要先把图片都引进来， html中: <div v-for="(item,index) in list" :key="index"> <img :src="imageList[index]" /></div> 在data中 data() { return { imageL
2020-08-07 15:33:45
2266
原创 移动端vant input框点击时禁止弹出手机键盘
html<van-field @focus="noBomBox" readOnly></van-field>metjsmethods:{ noBomBox(Event) { document.activeElement.blur(); }}
2020-07-28 16:10:37
4838
7
原创 vue 项目中使用打印功能
第一种方法：使用window自带的打印功能html<div id="printBox" ref="printContent> 打印内容</div><button @click="print">打印</button>jsprint(){ // 获取要打印的dom内容 let newDomHtml = this.$refs.printContent.innerHTML; // 将要打印的内容赋值给本页 window.document.b
2020-07-08 17:49:22
2271
4
原创 vue treeselect 使用
vue 中如果不想使用elementui 的级联组件， 可以使用vue treeselect，树形下拉组件，效果如图：npm install --save @riophae/vue-treeselect<template> <div id="app"> <treeselect v-model="value" :multiple="true" // 多选 :options="options" :normaliz
2020-07-08 16:08:17
4429
原创 页面列表实现向上无缝滚动
HTML代码:<template> <div class="hello" id="container"> <div id="content1"> <ul> <li v-for="(item,index) in list" :key="index">{{item.text}}</li>...
2020-03-20 15:17:53
2332
原创 Vue 父子组件之间传值的三种方法
方法一: 通过props 和 $emit 父子传值父组件中:<child :id="id" @change="handlerChange"></child>methods:{ handlerChange(val) { console.log(val); // 3435455 }}子组件中props:{ id:{ type:String,...
2020-03-19 23:38:50
457
2
原创 移动端使用vconsole在手机上查看控制台信息
首先安装npm install vconsole在main.js中import Vconsole from "vconsole";const vconsole = new Vconsole();Vue.use(vconsole);然后手机上就会出现 这个绿色的按钮, 点击这个绿色的按钮就出现控制台了...
2020-03-19 22:30:34
1266
原创 elementui上传组件添加token
html代码<el-upload action="https://jsonplaceholder.typicode.com/posts/" :headers= "config" :file-list="fileList"></el-upload>js 代码data() { return { token:"" }},computed:{ c...
2020-03-19 22:03:27
2387
原创 el-select 多选时与表格联动
el-select 多选时与表格联动，表格内容与select框的内容相关，效果如图el-select 选项删除时，表格也跟着对应删除，如图代码如下：HTML:JS代码:var Main = {data() {return {options: [{value: ‘选项1’,label: ‘黄金糕’}, {value: ‘选项2’,label: ‘双皮奶’}, {v...
2019-12-10 17:52:44
1747
原创 vue写的页面title中ico图标不显示的问题
首先把格式为ico的图片放在文件根目录下：如图：然后在根目录下的index.js中加入代码：如图： 中 创建实例6.OK...
2019-05-04 17:22:00
683
1
原创 解决1px的border在移动端变粗的问题
给需要设置下边框的div设置伪类:after2.div给一个相对定位3.伪类给一个决定定位4.div再给一个class名 .border-1px
2019-03-06 19:13:35
1309
原创 移动端app效果开发中在手机端查看的方法
将localhost:8080 中的 localhost 改成 自己电脑的ip地址,同时手机和电脑在同一个局域网内.查看ip地址方法: window + r 输入cmd 回车输入ipconfig
2019-03-06 17:12:10
603
原创 使用Vue时localhost:8080中localhost换成ip地址后无法显示页面的问题
页面显示:解决办法是:在package.json中然后重新启动服务器 npm run dev 就正常显示了.
2019-03-06 17:05:43
1882
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人