- 博客(32)
- 收藏
- 关注
RSS订阅
原创 Vue Element入门教程
之前的文章已经为大家讲解了如何搭建Vue Element框架，接下来教大家试着自己编写一个自己的页面。这个页面所对应的代码，为src目录下的App.vue文件，我们先把显示图片和按钮这几行行注释掉。注意：不能注释掉 <router-view></router-view>这一行。<template><!-- <img s
2019-03-05 10:07:05
13616
原创 解决uniapp中跳转nvue页面出现白屏的问题
近期在开发uniapp的过程当中，出现了一个问题：真机调试运行app的时候，跳转nvue页面会出现闪一下白屏的问题，跳转vue页面就不会出现这个问题。在pages.json文件中给添加个background背景色和页面的保持一致就行。
2023-07-03 14:33:33
1502
原创 Vue中使用UEditor富文本编辑器
首先我们去官网下载UEditor的压缩包，下载地址。将文件解压到自己项目中的public文件夹，重命名为UEditor(你也可以取其他的名字），目录如下：更改ueditor.config.js文件然后我们安装一下’vue-ueditor-wrap’这个插件npm install vue-ueditor-wrap --save那我们在页面中如何使用呢然后直接以组件形式引用效果如下:之前在网上查找过很多方法，大部分都需要自己写组件，涉及到父子组件之间数据传递过于繁琐，使用这个插件的好
2020-05-26 10:41:39
718
原创 Vue element表格实现拖动排序
最近在vue项目开发时，领导提了一个需求，需要实现自由拖动element表格进行排序，小编上网查了很多方法，最终实现了这个功能。在这里小编跟大家分享一下如何实现这个功能的。首先我们需要安装sortable.js这款插件npm install draggable然后我们在js中引入这个插件import Sortable from "sortablejs";表格加上row-key=“id...
2019-10-23 14:33:18
12382
9
原创 Vue中mixin的理解与使用
有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性，此时的你就像是来到了一个分岔路口：我是把它拆分成两个不同的组件呢？还是保留为一个组件，然后通过props传值来创造差异性从而进行区分呢？使用Mixin。Vue 中的Mixin对编写函数式风格的代码很有用，因为函数式编程就是通过减少移动的部分让代码更好理解（引自 Michael Feathers ）。Mixin允许你封装...
2019-09-09 16:43:32
983
原创 微信小程序设置定时器达到计时效果
很多时候，我们在微信小程序中需要让它过了一段时间自动执行一个方法，这个时候我们就需要利用setInterval来设置定时器。number setInterval(function callback, number delay, any rest)设定一个定时器。按照指定的周期（以毫秒计）来执行注册的回调函数参数function callback回调函数number delay执行回调...
2019-08-02 09:05:53
8952
原创 Vuex中Getter
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。Getter 接受 state 作为其第一个参数：const store = new Vuex....
2019-07-15 15:52:52
725
原创 Vuex中state状态
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。这个状态自管理应用包含以下几个部分：state，驱动应用的数据源；vie...
2019-07-12 14:11:10
271
原创 小程序从手机相册上传图片以及图片预览
wx.chooseImage(Object object)从本地相册选择图片或使用相机拍照。我们先来看下它的一些属性值：话不多说，接下来我们直接看代码。wxml代码：<button bindtap="upload">上传照片</button><view class="photo"> <view wx:for="{{filePath}}"&...
2019-06-13 14:36:32
2043
原创 小程序滚动视图scroll-view
scroll-view:可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。我们先来看下它的一些属性值：以上内容转自微信官方文档小程序组件wxml代码如下：<scroll-view scroll-x="true" class="scroll-header...
2019-05-28 15:43:12
287
原创 js获取input输入框的值
代码如下所示：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="Content-Language" content="zh-cn" /> <title>输入框</title></head&g...
2019-05-22 16:19:51
103075
转载 html&css小白笔记
HTML<!DOCTYPE html>h5的文档声明，声明当前网页是按照html5标准编写的，编写网页时一定要写在最上面，如果不写文档声明，则会导致有些浏览器会进入怪异模式，浏览器解析页面会导致页面无法正常显示。<meta />meta标签用来设置网页的一些元数据，比如玩也字符集，关键字，简介。meta是一个自结束标签，编写一个自结束标签时可以在开始标签中添加一...
2019-05-20 14:23:07
189
原创 小程序分享带参数以及返回首页按钮
很多时候，我们都希望自己写的小程序能够分享给别人。目前微信小程序，如果你不做任何处理的话，你分享给别人的页面，别人打开了就只能停留在那个页面，无法返回到小程序首页。而且，如果你的页面是通过点击其他页面（传参数过去）跳转到你这个页面才有数据的，别人直接打开你分享的页面是没有数据的，因为他根本就不是通过点击其他页面进入的你这个页面。综合以上种种情况，我们需要在分享的时候传一个参数、以及是否通过分享...
2019-05-20 11:44:38
2582
1
原创 计算机本地静态资源用nginx发布
下载软件下载地址：http://nginx.org/en/download.html 下载稳定版本，以http://nginx.org/download/nginx-1.16.0.zip为例，直接下载 nginx/Windows-1.16.0后解压，解压后文件目录结构如下：启动nginx有很多种方法启动nginx1.直接双击nginx.exe，双击后一个...
2019-05-20 10:56:02
930
1
原创 小程序轮播图功能的实现
先简单介绍一下滑块视图swiper组件以下是它的一些属性值，转载自微信公众平台小程序组件对swiper组件有了一个大概的认识后，大家看我写的代码吧。wxml代码如下： <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circ...
2019-05-16 11:11:43
1187
原创 vue里form表单验证
页面部分代码如下： <el-dialog title="老师基本信息修改" :visible.sync="detailVisible" width="500px"> <el-form ref="teacherCheck" :model="form" :rules="teacherRuler"> <el-form-item label="姓名" ...
2019-05-05 17:05:05
1095
原创 微信小程序支付功能
js支付功能代码如下: payNow() { var that = this; var id = app.globalData.id; util.wxRequest('/wxpay', "id=" + id, null, function(result) { wx.requestPayment({ timeStamp: result.time...
2019-05-05 15:21:14
196
原创 axure中文语言包安装
汉化包只是汉化软件，不能破解软件，需要正版授权的同学请到Axure中文网购买>>axure汉化包下载地址下载完以后，接下来就是汉化了汉化方法：首先退出正在运行中的 Axure (如果您正在使用).将 汉化包.rar 文件解压, 得到 lang 文件夹, 然后将其复制到 Axure 安装目录.然后重新启动axure，就能看到简体中文界面了...
2019-04-29 15:06:59
2146
原创 小程序下拉刷新以及导航栏标题显示加载状态
页面json文件加上： "enablePullDownRefresh": true加上这个属性的目的是设置页面允许下拉刷新js部分代码如下： onLoad: function(){ wx.hideNavigationBarLoading();//完成加载 wx.stopPullDownRefresh();//停止下拉刷新 }, // 下拉刷新 on...
2019-04-29 11:52:33
2044
原创 微信小程序—收藏功能
wxml代码如下: <image src="{{isFavorite=='false'?'/images/menu/collect.png':'/images/menu/uncollect.png'}}" class='collect' bindtap='collect'></image><span class="num font_s30 font_c32">...
2019-04-29 11:25:43
3618
4
原创 微信小程序左上角返回按钮去除
页面json文件里加上： "navigationStyle":"custom"这样做的弊端在于去除按钮的同时，也修改了小程序默认的导航栏样式
2019-04-29 10:34:42
23648
原创 微信小程序下拉菜单功能的实现
页面wxml代码如下： <!-- 下拉菜单栏 --> <view class='list'> <ul class="font_s30"> <li bindtap="getNav" data-id='area' style="color:{{c_area}}"> <view> ...
2019-04-28 10:35:12
9270
2
原创 微信小程序自动获取内容高度
页面部分js代码如下： getHeight:function(){ var that = this; const titleHeight = []; const rowHeight = 36 / 750 * wx.getSystemInfoSync().windowWidth; const row = []; // 处理标题和简介的行数 wx.c...
2019-04-28 09:06:29
2544
原创 微信小程序引入组件以及catchtouchmove实现拖动效果
首先我们建一个跟pages同级的一个文件夹components，customer里面就是我们要写的组件，其目录结构如下：wxml代码如下： <view class='customer' catchtouchmove="setTouchMove" style="top:{{top}}rpx;left:{{left}}rpx"> <button open-ty...
2019-04-23 14:23:09
9555
原创 微信小程序输入框字数限制以及计算
wxml代码如下:<textarea class="textarea-bg font_s33 font_c31" id="information" maxlength='150' placeholder="请输入遇到的问题或建议" name="information" value="{{information}}"bindinput="getDataBindTap"> ...
2019-04-22 17:12:54
5593
原创 微信小程序页面在调取到接口数据之前是加载中状态
首先，我们先建一个文件夹，文件目录如下：wxml代码如下：<template name="loading"> <view class="loadingData"> <image src="/images/menu/loadingData.gif"></image> <text>数据加载中</text>...
2019-04-19 17:39:36
7959
6
原创 小程序引入组件以及将页面数据传给组件
要想在页面中引入组件，首先我们在页面json文件里加上： "usingComponents": { "customer": "/components/customer/customer" }然后 wxml文件引用：<customer newPhone="{{phone}}"></customer>注意：此处标签值要与页面jison文件里名称一致、ph...
2019-04-19 10:03:09
1826
原创 微信小程序get方法提交form表单
wxml页面代码如下：<view> <textarea class="textarea-bg font_s33 font_c31" maxlength='500' placeholder="请输入遇到的问题或建议" name="information" value="{{information}}"bindinput="getDataBindTap"/> <...
2019-04-11 14:00:21
760
原创 Vue组件引用以及传值给组件
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用。在src目录下新建一个components文件夹，在里面新建一个Navagtion.vue文件，这就是一个导航组件。代码如下：<template> <div> <ul> ...
2019-03-05 14:28:30
1468
原创 Element 调用接口
博主前面的文章已经为大家讲了Element入门教程，相信大家对Element 框架已经有了一个基本的了解，这次为大家讲一下如何调用接口。以我自己为例子，我想要调用我接口里的图片，并让他在浏览器里显示出来。打开自己的element-starter文件夹，在src目录下新建一个Login文件夹，在里面新建一个Index.vue文件。代码如下：&amp;lt;template&amp;gt; &amp;lt...
2019-03-05 11:51:09
6973
原创 windows系统下安装Vue.js
@1434381275Vue.js安装要下载安装vue首先得下载安装node.js和npm。1. node.js安装node.js安装包下载地址：https://nodejs.org/en/选择左边的版本安装即可。2. npm安装打开电脑命令行界面：#查看版本$ npm -v6.4.1注意：如果你电脑上已经装了npm，底下会出现npm版本号，我的版本是6.4.1。#升级...
2019-03-04 22:35:20
305
原创 Vue Element脚手架搭建
注意：Element脚手架搭建的前提是安装了nodejs（6.0+），npm ，不知道怎么安装的可以去看博主的文章。Element 脚手架 代码git地址：https://github.com/ElementUI/element-starter.git选择克隆下载git clone下来后，进入element-starter目录打开命令行界面，执行以下命令: npm install ...
2019-03-04 22:35:02
614
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人