如下所示: //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...