本来实现多选单选这个功能，vue组件中在表单方面提供了一个v-model指令，非常的善解“猿”意， 能把我们的多选单选功能很完美的且很强大得双向绑定起来，实现多选单选任意选根本不在话下。 但是，凡事都有一个但是！ 但是奈何这个项目设计稿的缘故，使用原生的表单组件是不可能使用了，请看ui图： 可悲的是，这个项目两个月后，我才来做项目复盘， 话说也就在此时，我才发现有一种更简单的方式来实现并且应用上v-model， 为什么...
.sync修饰组件<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>vue-03</title><!-- 引入Vue --><link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet"><script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head><body><div class="container" style="margin-top: 12px;"><div id="demo" class="...
前言 组件化应用构建是Vue的特点之一，因此我们在Vue的实际开发过程中会经常需要封装自定义组件，以提高开发的效率。 而组件在大部分情况下并不会孤立的存在，它必然会与父组件和兄弟组件产生数据的交互。所以在这里为大家总结两种组件数据交互的方式：EventBus和利用Vuex框架进行状态管理。 我会通过两种不同的交互方式，它们对于父子组件间数据交互和兄弟组件间数据交互。 由于篇幅关系，本文主要介绍EventBus进行数据消息传递；...
目标 <template><my-form v-model="form"></my-form> </template> <script>export default {data() {return {form: }}} <script>实现 // my-form组件 <template><form><input v-model="model.val1" /><textarea v-model="model.val2"></textarea><form> </template> <script>export default {model: {prop: model,event: change},props: {model: Object}watch: {model(val){this.$emit(change, val)}}} <script>总结 以上所述是小编...
前言小程序官方提供了 wx.showModal 方法，但样式比较固定，不能满足多元化需求，自定义势在必行~ 老规矩先上图点击某个按钮，弹出 modal框，里面的内容可以自定义，可以是简单的文字提示，也可以输入框等复杂布局。操作完点击取消或确定关闭 modal. 如何使用将下面的 modal.wxml 、modal.wxss 、modal.js 、modal.json 四个文件复制到对应位置即可。 封装完之后调用起来也很简单，看看调用的代码吧 <modal show="{{showModal}}" h...
小程序最近是越来越火了…… 做小程序有一段时间了，总结一下项目中遇到的问题及解决办法吧。 项目中有个多 tab 嵌套的需求，进入程序主界面下面有两个 tab，进入A模块后，A模块最底下又有多个tab，每个tab上又嵌了2-4个不等的tab。。。 这种变态需求只能自定义tab了。 其实如果项目不是很复杂，没有多tab嵌套的需求，完全可以用小程序官方的 tabBar，方便快捷。 官方 tabBar 地址：https://developers.weixin.qq.... 一、Demo结构...
本文实例讲述了jQuery使用动画队列自定义动画操作。分享给大家供大家参考，具体如下： jQuery的queue()方法和dequeue()方法配合使用，可以完成对函数队列的操作。 实现步骤： 1、新建一个函数数组，把动画函数依次放进去； 2、调用queue()方法将动画函数数组加入队列中； 3、利用dequeue()方法取出函数队列中的第一个函数，并执行它。 示例： <!DOCTYPE html> <html><head><title>jQueryQueueTest.html</title><meta http-equiv="k...
步骤一：新建一个component的文件夹，用来放所有的自定义组件； 步骤二：在该目录下新建一个prompt的文件夹，用来放prompt组件； 步骤三：右击–>新建–>component直接上代码 wxml <view class="prompt-box" hidden="{{isHidden}}"><view class="prompt-content contentFontColor"><view class="prompt-title">{{title}}</view><input class="prompt-input" type="digit" bindinput="_input" value="{{cost}}" /><view class="...
一、前言 之前的博客聊过 vue2.0和react的技术选型；聊过vue的axios封装和vuex使用。今天简单聊聊 vue 组件的封装。 vue 的ui框架现在是很多的，但是鉴于移动设备的复杂性，兼容性问题突出。像 Mint-UI 等说实话很不错了，但是坑也是不少，而且很多功能也是仅凭这些实现不了，这需要我们去封装自己的可复用组件 二、封装组件的步骤 1. 建立组件的模板，先把架子搭起来，写写样式，考虑你的组件的基本逻辑。 os：思考1小时，码码10分...
使用eslint和editorconfig规范代码 为什么要用这些： 代码规范有利于团队协作纯手工规范耗时耗力而且不能保证准确性能配合编辑器自动提醒错误，提高开发效率eslint 随着ECMAScript版本一直更新的Js lint工具，插件丰富，并且能够套用规范，规则非常丰富，能够满足大部分团队的需求。eslint 配合 git 为了最大程度控制每个人的规范，我们可以在git commit代码的时候，使用git hook调用eslint进行代码规范验证，不规范的代码无法提交...
思路： 登录：当用户填写完账号和密码后向服务端验证是否正确，验证通过之后，服务端会返回一个token，拿到token之后（我会将这个token存贮到sessionStorage中，保证刷新页面后能记住用户登录状态），前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息（如用户权限，用户名等等信息）。权限验证：通过token获取用户对应的 role，自定义指令，获取路由meta属性里btnPermissions( 注： meta.btnPermissions是存放按...
要实现下图的效果（自定义多选单选），大多数公司项目的多选框都是自己设计的，所以用原生标签或者组件是不可行的，最简单的是自己绑定事件，然后切换选择和未选择的图片。而小程序和vue一样是没法操作dom的，所以要利用数组的下标和自定义属性来进行三元判断。直接上代码： wxml：<view class="sel-box">/**用wx:for来进行列表渲染**/<view wx:for="{{repContent}}" class="multi-selection"><text>{{item.message}}</text>/**利用...
首先因为elementUI提供的icon太少了，所有自己找找有没有矢量图可以补充的，尝试多种方法，觉得下面方法简单易懂，分享给大家 效果图：推荐使用阿里爸爸矢量图标管理，iconfont使用方法 登录账号，找到需要的图标加入购物车 然后添加到项目 再然后下载代码到本地下载代码文件然后解压出现这列表打开HTML文件，引用方法教程 补充我人的坑，之前想着在style标签里@import ""，结果一直报错，试了很多方法还是没效果，把问题想复杂了 ...
初学框架vue搭配vux使用发现这个UI库使用有些力不从心。下面说说自己在表单验证过程遇到的两个需求问题及解决的方法。 1.使用x-input组件可知，官方只给了三种类型的is-type验证器，分别是：email,china-name,china-mobile，其他需要自己自定义验证器，怎么写验证器？ 解决方法：自定义is-type验证器（试验过可以在valid使用正则验证） <x-input type="number" v-model="code" placeholder="请输入验证码" :is-type="codeValue" />...
v-model指令 所谓的“指令”其实就是扩展了HTML标签功能(属性)。 先来一个组件，不用vue-model，正常父子通信 <!-- parent --> <template> <div class="parent"><p>我是父亲, 对儿子说： {{sthGiveChild}}</p><Child @returnBack="turnBack" :give="sthGiveChild"></Child> </div> </template> <script> import Child from ./Child.vue; export default {data() {return {sthGiveChild: 给你100块};},components: {Child},methods:...