- 博客(32)
- 收藏
- 关注
![](https://csdnimg.cn/release/blogv2/dist/pc/img/listFixedTop.png)
原创 Vue Element入门教程
之前的文章已经为大家讲解了如何搭建Vue Element框架,接下来教大家试着自己编写一个自己的页面。这个页面所对应的代码,为src目录下的App.vue文件,我们先把显示图片和按钮这几行行注释掉。注意:不能注释掉 <router-view></router-view>这一行。<template><!-- <img s
2019-03-05 10:07:05
13873
原创 解决uniapp中跳转nvue页面出现白屏的问题
近期在开发uniapp的过程当中,出现了一个问题:真机调试运行app的时候,跳转nvue页面会出现闪一下白屏的问题,跳转vue页面就不会出现这个问题。在pages.json文件中给添加个background背景色和页面的保持一致就行。
2023-07-03 14:33:33
1946
原创 Vue中使用UEditor富文本编辑器
首先我们去官网下载UEditor的压缩包,下载地址。将文件解压到自己项目中的public文件夹,重命名为UEditor(你也可以取其他的名字),目录如下:更改ueditor.config.js文件然后我们安装一下’vue-ueditor-wrap’这个插件npm install vue-ueditor-wrap --save那我们在页面中如何使用呢然后直接以组件形式引用效果如下:之前在网上查找过很多方法,大部分都需要自己写组件,涉及到父子组件之间数据传递过于繁琐,使用这个插件的好
2020-05-26 10:41:39
749
原创 Vue element表格实现拖动排序
最近在vue项目开发时,领导提了一个需求,需要实现自由拖动element表格进行排序,小编上网查了很多方法,最终实现了这个功能。在这里小编跟大家分享一下如何实现这个功能的。首先我们需要安装sortable.js这款插件npm install draggable然后我们在js中引入这个插件import Sortable from "sortablejs";表格加上row-key=“id...
2019-10-23 14:33:18
12582
9
原创 Vue中mixin的理解与使用
有两个非常相似的组件,他们的基本功能是一样的,但他们之间又存在着足够的差异性,此时的你就像是来到了一个分岔路口:我是把它拆分成两个不同的组件呢?还是保留为一个组件,然后通过props传值来创造差异性从而进行区分呢?使用Mixin。Vue 中的Mixin对编写函数式风格的代码很有用,因为函数式编程就是通过减少移动的部分让代码更好理解(引自 Michael Feathers )。Mixin允许你封装...
2019-09-09 16:43:32
1020
原创 微信小程序设置定时器达到计时效果
很多时候,我们在微信小程序中需要让它过了一段时间自动执行一个方法,这个时候我们就需要利用setInterval来设置定时器。number setInterval(function callback, number delay, any rest)设定一个定时器。按照指定的周期(以毫秒计)来执行注册的回调函数参数function callback回调函数number delay执行回调...
2019-08-02 09:05:53
9043
原创 Vuex中Getter
有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数:Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。Getter 接受 state 作为其第一个参数:const store = new Vuex....
2019-07-15 15:52:52
746
原创 Vuex中state状态
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。这个状态自管理应用包含以下几个部分:state,驱动应用的数据源;vie...
2019-07-12 14:11:10
289
原创 小程序从手机相册上传图片以及图片预览
wx.chooseImage(Object object)从本地相册选择图片或使用相机拍照。我们先来看下它的一些属性值:话不多说,接下来我们直接看代码。wxml代码:<button bindtap="upload">上传照片</button><view class="photo"> <view wx:for="{{filePath}}"&...
2019-06-13 14:36:32
2113
原创 小程序滚动视图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
308
原创 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
103421
转载 html&css小白笔记
HTML<!DOCTYPE html>h5的文档声明,声明当前网页是按照html5标准编写的,编写网页时一定要写在最上面,如果不写文档声明,则会导致有些浏览器会进入怪异模式,浏览器解析页面会导致页面无法正常显示。<meta />meta标签用来设置网页的一些元数据,比如玩也字符集,关键字,简介。meta是一个自结束标签,编写一个自结束标签时可以在开始标签中添加一...
2019-05-20 14:23:07
216
原创 小程序分享带参数以及返回首页按钮
很多时候,我们都希望自己写的小程序能够分享给别人。目前微信小程序,如果你不做任何处理的话,你分享给别人的页面,别人打开了就只能停留在那个页面,无法返回到小程序首页。而且,如果你的页面是通过点击其他页面(传参数过去)跳转到你这个页面才有数据的,别人直接打开你分享的页面是没有数据的,因为他根本就不是通过点击其他页面进入的你这个页面。综合以上种种情况,我们需要在分享的时候传一个参数、以及是否通过分享...
2019-05-20 11:44:38
2639
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
942
1
原创 小程序轮播图功能的实现
先简单介绍一下滑块视图swiper组件以下是它的一些属性值,转载自微信公众平台小程序组件对swiper组件有了一个大概的认识后,大家看我写的代码吧。wxml代码如下: <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circ...
2019-05-16 11:11:43
1223
原创 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
1114
原创 微信小程序支付功能
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
217
原创 axure中文语言包安装
汉化包只是汉化软件,不能破解软件,需要正版授权的同学请到Axure中文网购买>>axure汉化包下载地址下载完以后,接下来就是汉化了汉化方法:首先退出正在运行中的 Axure (如果您正在使用).将 汉化包.rar 文件解压, 得到 lang 文件夹, 然后将其复制到 Axure 安装目录.然后重新启动axure,就能看到简体中文界面了...
2019-04-29 15:06:59
2213
原创 小程序下拉刷新以及导航栏标题显示加载状态
页面json文件加上: "enablePullDownRefresh": true加上这个属性的目的是设置页面允许下拉刷新js部分代码如下: onLoad: function(){ wx.hideNavigationBarLoading();//完成加载 wx.stopPullDownRefresh();//停止下拉刷新 }, // 下拉刷新 on...
2019-04-29 11:52:33
2096
原创 微信小程序—收藏功能
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
3713
4
原创 微信小程序左上角返回按钮去除
页面json文件里加上: "navigationStyle":"custom"这样做的弊端在于去除按钮的同时,也修改了小程序默认的导航栏样式
2019-04-29 10:34:42
23725
原创 微信小程序下拉菜单功能的实现
页面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
9337
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
2574
原创 微信小程序引入组件以及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
9714
原创 微信小程序输入框字数限制以及计算
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
5727
原创 微信小程序页面在调取到接口数据之前是加载中状态
首先,我们先建一个文件夹,文件目录如下:wxml代码如下:<template name="loading"> <view class="loadingData"> <image src="/images/menu/loadingData.gif"></image> <text>数据加载中</text>...
2019-04-19 17:39:36
8080
6
原创 小程序引入组件以及将页面数据传给组件
要想在页面中引入组件,首先我们在页面json文件里加上: "usingComponents": { "customer": "/components/customer/customer" }然后 wxml文件引用:<customer newPhone="{{phone}}"></customer>注意:此处标签值要与页面jison文件里名称一致、ph...
2019-04-19 10:03:09
1838
原创 微信小程序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
784
原创 Vue组件引用以及传值给组件
组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用。在src目录下新建一个components文件夹,在里面新建一个Navagtion.vue文件,这就是一个导航组件。代码如下:<template> <div> <ul> ...
2019-03-05 14:28:30
1482
原创 Element 调用接口
博主前面的文章已经为大家讲了Element入门教程,相信大家对Element 框架已经有了一个基本的了解,这次为大家讲一下如何调用接口。以我自己为例子,我想要调用我接口里的图片,并让他在浏览器里显示出来。打开自己的element-starter文件夹,在src目录下新建一个Login文件夹,在里面新建一个Index.vue文件。代码如下:&amp;lt;template&amp;gt; &amp;lt...
2019-03-05 11:51:09
7021
原创 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
341
原创 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
650
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人