vue 中使用layer.js

2024-10-22

在Vue中使用layer.js弹出层插件

layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue开发.在开发过程中引入layer.js的时候遇到了麻烦.原因是layer.js不支持import导入,这时就需要修改一下它的源码.在看过它的源码后,发现需要修改的地方只有两处, 源码中已经暴露了一个全局变量layer,故只需在脚本末尾处添加 export default layer; 这表示将这个全

FastAdmin 中的 layer js 使用 r.js 压缩出现的问题

FastAdmin 中的 layer js 使用 r.js 压缩出现的问题 https://fly.layui.com/jie/2120/ layer是requirejs压缩文件r.js里面的关键字,换个别名就可以成功压缩了,找了半天才发现,所以应该这样配置 requirejs.config({ "layers":"lib/layer/layer" })

vue中config/index.js:配置的详细理解

当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') module.exports = { build: { index: path.resolve(__dirname, 'dist/index.html'), assetsRoot: path.resolve(__dirname, 'dist'), assetsSubDirectory: 'stati

vue中使用raphael.js实现地图绘制

一.效果图二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 <template> <div> <div id='streetMap'> <div class="tips" v-show="tipsShow" :style="tipsStyle"> <span v-html="tipsContent"

Vue中使用fullpage.js

Vue中使用fullpage.js:https://blog.csdn.net/weixin_34184158/article/details/88672739

微信 vue中使用video.js播放m3u8视频，解决安卓自动全屏的问题。

最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安卓微信浏览器是X5内核与IOS的不同.折腾了好半天还是解决不了,心态已蹦.于是狠下心换个插件,便找到了video.js,港真,简直完美. 1.首先安装,在你的vue项目中 npm install --save video.jsnpm install --save videojs-contrib-hl

vue中使用chart.js

1,安装chart.js和vue-chart.js npm install chart.js --save npm install vue-chart.js --save 2,独立文件,方便修改封装js,这是折线图的,其他也差不多是这样,改一下Line加以区别就好 import { Line, mixins } from ‘vue-chartjs‘ const { reactiveProp } = mixins export default Line.extend({ mixins: [rea

在vue中引入layer弹框的简易方法

npm i --save layui-layer 2.在main.js中引入 import layer from "layui-layer"; 3.然后就可以在各个组件中使用layer了实例: layer.confirm('您是如何看待前端开发?', { btn: ['重要','奇葩'] //按钮 }, function(){ layer.msg('的确很重要', {icon: 1}); }, function(){ layer.msg('也可以这样', { time: 20000,

vue中html、js、vue文件之间的简单引用与关系

有关vue文件记录:index.html在html中运用组件 <body> <app></app>  <script src="build.js"></script>  </body> main.js在这个文件中定义js,引入vue和App.vue im

vue中配置axios.js文件，发送请求

为了统一管理请求,每个项目都会去配置axios:而不是在vue中直接使用,那样不好维护等等下面是我配置的最基础的axios文件第一步:首先新建一个axios文件,我是放在router文件下的 import axios from "axios"; import { Toast } from "mint-ui"; // 我用的mint的框架来弹出我的错误返回大家可以用别的提示(移动端的组件库) import router from "@/router/i

Vue中使用Cropper.js裁剪图片

Cropper.js是一款很好用的图片裁剪工具,可以对图片的尺寸.宽高比进行裁剪,满足诸如裁剪头像上传.商品图片编辑之类的需求. github: https://github.com/fengyuanchen/cropperjs 网站: https://fengyuanchen.github.io/cropperjs/ 简单使用使用很简单,首先需要一个image或者canvas元素: <!-- Wrap the image or canvas element with a block elem

vue 中引入第三方js库

以 jQuery 为例一.绝对路径直接引入,全局可用主入口页面 index.html 中用 script 标签引入: <script src="./static/jquery-1.12.4.js"></script> 这样,其实就已经可以在项目中使用 jQuery 了. mounted () { console.log($) } 我们来看一下调试器截图: 可以看到,我们是可以正常打印出 jQuery 的.由于我的项目开启了 ESLint 检测,所以也会报

vue中使用laydate.js插件

1.到官网下载laydate.js https://www.layui.com/laydate/ 2.下载好后,将包解压好放在index.html同级的地方.我是在public中建立个statick文件夹,放在了里面 3.在index.html中引入 <script src="./static/laydate/layDate-v5.0.9/laydate/laydate.js"></script> 4.在vue组件中使用 <template> <

vue中使用AES.js和crypto.js加密

一:crypto-js加密 1.1:安装依赖 npm install crypto-js --save-dev 1.2 :在项目目录上创建一个js文件里面写入加密,解密的代码 mport CryptoJS from 'crypto-js' /** * * @param {*待加密的字符串} str * @param {*相当于是密钥} strKey * @param {*相当于是双层密钥的意思} strIv * strKey strIv长度需要和后面商量 */ export let encryp

前端技术之：如何在Vue中使用clipboard.js复制服务端数据

第一步创建点击对象页面元素,并绑定业务数据. <el-button type="text" size="mini" class="copy-button" :data-resource-type="scope.data.resource_type" :data-resource-id="scope.data.resource_id"> 复制链接 </el-button> 第二步引

vue中通过hls.js播放m3u8格式的视频

近期做了一个功能,是接入一个海康的摄像头的监控视频,怎么获取m3u8的视频这里就不在叙述了,只说一下怎么将m3u8格式的视频成功播放一.m3u8和HLS介绍 1.M3U8文件是指UTF-8编码格式的M3U文件.M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放. 2.HLS 与 M3U8 HLS(全称:Http Live Streaming)是由Apple公司定义的用于实时流传输的协议二.nuxt项目中使用H

解决vue中使用laydate.js选择日期后再修改其他model时日期会被清空问题

首先描述一下问题,下图中均绑定v-model,例如先选择出生开始时间,然后当再选择地区或其他选项时该时间就会被清空首先看一下我这边开始的默认值,开始我设置都为空当我选择如下图的生日开始时间与结束时间后重新打印得到的结果如下发现虽然选择了时间,demo中也显示了日期,但是打印出来的实际的值确是空的,所以得主这个的主要原因是laydate选好日期后并没有赋值到model中,当修改其他model时该model为空,所以被重新赋值了解决方法解决它的方法是在laydate的done回调中直接给

Vue中如何书写js来渲染页面填充数据的部分代码

new Vue({ el:"#app" , data:{ user:{ id:"", username:"", password:"", age:"", sex:"", }, userList:[] }, methods:{ findAll:function () { //在当前方法中定义一个变量,表明是vue对象 var _this= this; axios.get('/day01_e

vue 中使用driver.js来进行页面分步引导

Driver.js 推荐15款最佳的 jQuery 分步引导插件 11 个超棒的 jQuery 分步指引插件

vue中解决three.js出现内存泄漏丢失上下文问题

在跳转页面时添加以上代码即可. 在spa项目中,跳转页面并不会清楚已经创建的webgl实例,需要手动清楚.

vue 中使用layer.js

热门专题