如下所示： //1.创建测试模块js文件(我这里命名为test.js)//2.添加测试方法function test(){console.log(Test Success!);}//3.公开该方法到node模块//exports.test(这个是public的方法名,外部调用的时候,使用这个方法名)exports.test = test;//4.测试(在另一个js文件中引入这个模块,并调用对应测试函数,两个js文件在同一目录下)const testModule = require(./test.js);testModule.test(); 以上这篇NodeJS自定义模块写法(详解)就是小...
项目中需要自定义一个下拉框多选插件，业务问题还是自己实现比较好 通过$.fn 向jQuery添加新的方法 下拉数据通过参数传递进去，通过调用该插件时接收，选择后的确定与取消事件采用事件传递方式 代码如下： 1.效果图2.代码 <div id="demo" class="dropdown-container"><div class="dropdown-display"><span></span><input type="text" class="iptdiplay" placeholder="请选择" readonly="readonly" /></div><div class="dropdown-...
javascript自定义提示窗口效果图：源码： 1.demo.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>自定义提示窗口</title><script type="text/javascript" src="js/myAlert.js"></script><script type="text/javascript">function bodyOnload() {var myInput = document.getElementById("myInput");myInput.style.border = "none";myInput.style.backgroundColor = "rgba(223, 230, 2...
自定义vue全局组件use使用(解释vue.use()的原理)我们在前面学习到是用别人的组件：Vue.use(VueRouter)、Vue.use(Mint)等等。其实使用的这些都是全局组件，这里我们就来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理而我们再用Axios做交互，则不能使用Vue.use(Axios)，因为Axios没有install自定义一个全局Loading组件，并使用：总结目录：|-components|-loading|-index.js 导出组件，并且install|-loading.vue 定义Loading...
微信小程序中不能直接操作window对象，document文档，跟html的树结构不相同。 实现类似导航的隐藏显示，如图效果：点击网络显示或隐藏网络中包含的内容。其他类似。 如果是jquery很方便实现，能直接操作document。在微信小程序中实现思路是：在逻辑层定义变量，通过setData赋值。 方法一：通过变量直接赋值，给每一个要控制显示的view定义变量 .wxml 代码： <!--index.wxml--> <view class="navView" bindtap="tigger" data-num="1...
通常我们在vue里面使用别人开发的组件，第一步就是install,第二步在main.js里面引入，第三步Vue.use这个组件。今天我简单的也来use一个自己的组件。 这里我用的webpack-simple这个简单版本的脚手架为例，安装就不啰嗦了，直接进入正题 首先看下目前的项目结构：webpack首先会加载main.js，所以我们在main的js里面引入。我以element ui来做对比说明 import Vue from vue import App from ./App.vue// 引入element-ui组件 import Ele...
微信小程序 自定义Toast实例代码 Toast样式可以根据需求自定义，本例中是圆形<!--按钮--> <view class="btn" bindtap="btn_toast">自定义Toast</view> <!--以下为toast显示的内容 opacity为透明度--> <view class="toast_box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}"> {{toastText}} </view> <view class="toast_box" style="opacity:{{0.9}}" wx:if="{{isShowToast}}"> {{toastText1}} </view> Page...
下面讲一下如何定义动态组件。 Vue.extend 思路就是拿到组件的构造函数，这样我们就可以new了。而Vue.extend可以做到：https://cn.vuejs.org/v2/api/#Vue-extend // 创建构造器 var Profile = Vue.extend({template: <p>{{firstName}} {{lastName}} aka {{alias}}</p>,data: function () {return {firstName: Walter,lastName: White,alias: Heisenberg}} }) // 创建 Profile 实例，并挂载到一个元素上。 new Profile().$mount(#...
前言 之前有篇文章是写的Toast使用，但是有时候官方的样式并不能满足业务要求，怎么办呢，当然有解决办法了。有一个插件可以直接帮我们完成，WeToast。 先来看一下效果图： 怎么用呢，我们来看一下： WeTaost插件源码位于src目录下，包含3个文件。 wetoast.js: 脚本代码wetoast.wxml: 模板结构wetoast.wxss: 样式 使用时只需要加入以上3个文件即可 第一步：在项目的app.js中引入wetoast.js，并注册到小程序上，小程序所有Page页面均...
方法一： // template {{a | data}} //script data:{a: Date.now() } filters: {data:function (input) {var d = new Date(input);var year = d.getFullYear();var month = d.getMonth() + 1;var day = d.getDate() <10 ? 0 + d.getDate() : + d.getDate();var hour = d.getHours();var minutes = d.getMinutes();var seconds = d.getSeconds();return year+ - + month + - + day + + hour + : + minutes + : + seconds;}方法二...
自定义Tab选项卡，具体内容如下 规范HTML格式 在设计选项卡之前，先规范一下HTML的格式。 <div class="m-tab-container"><ul ><li class="active"><a href="#pane1">面板1</a></li><li><a href="#pane2" rel="external nofollow" >面板2</a></li></ul><div><div id="pane1" class="active">这是面板1</div><div id="pane2">这是面板2</div></div> </div>如上述代码所示，这里并没有声明太多类名，只有容器样式类m-tab-Container和激...
假设有一个标签h5, 我们给它添加了一个自定义属性值，（item.id是从动态添加的） 点击h5 标签，如何才能获取当前对应的自定义属性值呢？ 想当然的我最开始这样写：<h5 class="left t-title" @click=getDataId :data-id="item.id"></h5><script>methods: {getDataId() {console.log(this.data-id);}},</script> 显然，这样是拿不到 data-id的值的。。。。 应该这样做：<h5 class="left t-title" @click=getDataId(item.id) :data-id...
通过局部自定义指令实现了一个拖动的指令 html: <div style="position:absolute;width:100px;height:100px;border:1px solid red" v-drag="{set:set}"></div>script:methods:{ set(x,y){ this.data.x=x; this.data.y=y; } }, directives:{ // 拖动的自定义指令 drag(el,binding){ //el为拖动的元素 var oDiv =el;oDiv.onmousedown = function(e){e.preventDefault();e.stopPropagation();var disX = e.offsetX;var disY = e.offset...
RT，一个简单的例子，仅仅讲述原理 代码如下: <div id="menu" style="width: 0;height: 0;background: cadetblue;position: absolute"></menu>假设我要把上面这个div设置为右键菜单，先随意美化一下。 原理就是利用contextmenu事件，右键点击时，会触发这个事件时，该事件对象可以获得鼠标距离页面左上角的距离clientX和clientY， 我们可以利用这两个属性，来控制div的水平，垂直偏移量，并且返回false，取消事件的默认行为，来模...
使用v-on绑定自定义事件可以让子组件向父组件传递数据，用到了this.$emit(‘自定义的事件名称,传递给父组件的数据) <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="../js/vue.js"></script> </head> <body> <div id="app"> <parent-component></parent-component> </div> <template id="parent-component"> <div><p>总数是{{total}}</p><child-component @increment="incrementT...