这段时间在进行一个新项目的前期搭建，新项目框架采用vue-cli3和typescirpt搭建。因为项目比较轻量，所以基本没有使用额外的ui组件，有时候我们需要的一些基础组件我就直接自己开发了。今天就来介绍一下如何利用vue的自定义指令directive来开发一个表单验证插件的过程。 1.vue插件开发 关于vue的插件开发，官方文档里有很清晰的说明，详情可以去阅读开发文档。我自己开发的表单验证插件validate.ts和loading，messageBox插件都是利...
具备基础 vue框架：vue官方文档 mpvue框架：mpvue官方文档 全局配置 ?找到全局的app.json文件，在配置中添加如下内容： "navigationStyle": "custom" "window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black","navigationStyle": "custom" // 这个配置 }组件思维 ?使用mpvue开发小程序，src目录下默认会生成一个components文件...
本文将帮助：将自己写的Vue组件打包到npm进行代码托管，以及正常发布之后如何使用自己的组件。本文讲述的仅仅是最基础的实现，其他复杂的操作需要非常熟悉webpack的相关知识，作者将继续学习。按照大佬文中写的一步步操作，够细心的话基本可以一步到位。下面总结一下发布步骤：1. 利用Vue的脚手架新建一个简易版的Vue项目my-project：vue init webpack-simple my-project -> cd my-project -> npm i -> npm run dev2. 编写组件：sr...
以select为例，如果select写在循环里，触发change事件时可能不只需要传递被选中项的值，还要传递index过去，来改变同一循环中的其他标签的状态。 下面这样写是无效的： @change="changeStatus(val, index)"<div v-for="(item,index) in itemList"><el-select v-model="item.value" @change="changeStatus(val, index)"><el-option v-for="op in options" :key="op.key"::label="op.label":value="op.label"></el-option></el-selec...
最近项目中做表格比较多，对element表格的使用，只需要传递进去数据，然后写死表头即可渲染。 但现实中应用中，如果写死表头，并且每个组件中写自己的表格，不仅浪费时间而且消耗性能。这个时候需要动态渲染表头。 而官方例子都是写死表头，那么为了满足项目需求，只能自己来研究一下。 1、自定义表头代码如下，其实就是分了两部分，表格主数据是在TableData对象中，表头的数据保存在headerDatas，headerDatas.label其实就是表头的...
本文实例讲述了JS实现的自定义map方法。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com JS自定义map方法</title> </head> <body> <script>window.onload = function() {function Map() {var obj = {};this.put = function(key, value) {obj[key] = value;//把键值绑定到obj对象上}//size方法，获取Map容器的个数this.size = function() {var count = 0;fo...
偶尔还是会陷入到DOM操作上面去，其实你应该关心的是数据传递，而不是操作DOM。如果你是想获取data-num的数据，可以这样写： <span @click="getData($event,21)">55</span>getData:function (e,num) {console.log(num) }这样就可以取到这个值了，如果你是确实想操作DOM，那你可以这样写： <span data-num="21" ref="dataNum" @click="getData($event)">55</span>getData:function (e) {console.log(this.$refs.dataNum.dataset.num...
本文实例讲述了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能。分享给大家供大家参考，具体如下：顶部滚动选项卡 话不多说，直接上代码 pages/home/home.wxml <scroll-view scroll-x="true" style=width: 100%; white-space:nowrap; > <!-- tab --> <view class="tab"> <view class="tab-nav" style=font-size:12px> <view wx:for="{{tabnav.tabitem}}" bindtap="setTab" data-tabindex="{{index}}" style="min-width:2...
本文实例讲述了微信小程序自定义toast组件的方法。分享给大家供大家参考，具体如下： 怎么创建就不说了，前面一篇有 微信小程序自定义prompt组件 直接上代码 wxml <!-- components/toast/toast.wxml --> <view class="toast-box {{isShow? show:}}" animation="{{animationData}}"><view class="toast-content" ><view class="toast-img"><block wx:if="{{type===success}}"><image class="toast-icon" src="xxx" /></block><block...
1. 将下载好的字体放到本地目录 分别是两种字体放到项目的 assets 目录中2. 引入字体文件 首先创建一个 styles 文件夹，之后也可以用于存放一些公共的样式文件。再新建一个 index.less 文件，引入字体。@font-face {font-family: Snickles;src: url(../assets/Snickles-webfont.ttf); } @font-face {font-family: Ronda;src: url(../assets/RondaITCbyBT-Roman.otf); }3. 在项目中（main.js）引入刚刚加载进来的字体4. 测试效果图：...
本文实例讲述了微信小程序自定义组件传值 页面和组件相互传数据操作。分享给大家供大家参考，具体如下： 要想在组件中调到页面中的方法，并且想要组件中传数据到页面去，emmmm，可以酱紫： 用组件事件 triggerEvent！ 首先，在页面中定义组件 ，json文件中记得加上： {"usingComponents": {"user-btn": "/pages/component/userInfo/userInfo"} },然后，index.wxml~ index.wxml ... <user-btn show="{{userShow}}" bind:showTab="sh...
本文旨在给大家提供一种构建一个完整 UI 库脚手架的思路：包括如何快速并优雅地构建UI库的主页、如何托管主页、如何编写脚本提升自己的开发效率、如何生成 CHANGELOG 等 前言 主流的开源 UI 库代码结构主要分为三大部分： 组件库本身的代码：这部分代码会发布到 npm 上预览示例和查看文档的网站代码：类似 Vant、ElementUI 这类网站。配置文件和脚本文件：用于打包和发布等等编写此博文的灵感 UI 框架库（ vue-cards ）,PS:此 UI框...
定义一个banner.js文件，代码如下 ;window.requestAnimationFrame = window.requestAnimationFrame||function(a){return setTimeout(a,1000/60)}; window.cancelAnimationFrame = window.cancelAnimationFrame||clearTimeout; var FragmentBanner = function(option) {//实例化时，可传的参数this.whiteList = [container,controller,size,imgs,size,grid,index,fnTime,boxTime,type];//容器将包容控制器this.container = .banner;...
思路 实现该组件有两个思路，一个使用v-model进行双向绑定，一个是使用prop的.sync修饰符、父子组件通信。 1.v-model形式 v-model的实现需要在自定义组件中自定义一个inputvalue值，因为vue中的父子组件传递机制问题，在组件中直接修改props注入的key字段时，vue会给出错误。子组件中定义inputvalue字段，用于子组件中input元素的值的双向绑定，子组件中的input数据绑定可以使用v-model，也可以使用实现v-model的原理语法糖，下面两...
如果我们的Vue项目中没有用到任何UI框架的话，为了更好的用户体验，肯定会用到loading和toast。那么我们就自定义这两个组件吧。 1、Toast组件 首先，在common下新建global文件夹，存放我们的toast.vue和toast.js两个文件（当然文件的具体位置你可以自行安排）。 (1). toast.vue <template lang="html"><div v-if="isShowToast" class="toast-container" @touchmove.prevent><!-- 这里content为双花括号 --><span class="loading-tx...