场景 在实际的项目开发中会出现这样的场景，项目中需要多个模块（单页或者多页应用）配合使用的情况，而vue-cli默认只提供了单入口打包，所以就想到对vue-cli进行扩展 实现 首先得知道webpack是提供了多入口打包，那就可以从这里开始改造 新建build/entry.js const path = require(path) const fs = require(fs) const moduleDir = path.resolve(__dirname, ../src/modules) let entryObj = {} let moduleItems = fs.readdirSync(m...
React Native悬浮按钮组件：react-native-action-button，纯JS组件，支持安卓和IOS双平台，支持设置子按钮，支持自定义位置和样式和图标。效果图安装方法npm i react-native-action-button --save react-native link react-native-vector-icons因为用到了react-native-vector-icons图标组件，需要做下link。如果你项目中已经使用了react-native-vector-icons，那就不需要这步了。 示例代码<View style={styles.container}><Text st...
之前开发一个后台管理系统，里面用到了Vue和Element-UI这个组件库，遇到一个挺有意思的问题，和大家分享一下。 场景是这样，在一个列表展示页上，我使用了Element-UI的表格组件，新的需求是在原表格的基础上支持拖拽排序。但是原有的组件本身不支持拖拽排序，而且由于是直接引入的Element-UI，不方便修改它的源码，所以比较可行的方法只能是直接操作DOM。 具体的做法是在mounted生命周期函数里，对this.$el进行真实DOM的操作，监听...
前言 上传下载在 web 应用中还是比较常见的，无论是图片还是其他文件等。在 Koa 中，有很多中间件可以帮助我们快速的实现功能。 文件上传 在前端中上传文件，我们都是通过表单来上传，而上传的文件，在服务器端并不能像普通参数一样通过 ctx.request.body 获取。我们可以用 koa-body 中间件来处理文件上传，它可以将请求体拼到 ctx.request 中。 // app.js const koa = require(koa); const app = new koa(); const koaBody = requ...
全选功能可以说是前端开发中非常常见的一个功能，以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据，用数据驱动dom，也是vue框架的一个核心思想，思想转变过来，对功能的实现自然容易理解一些。 例如下面这个简单的demo按照jQuery的思想来做的话，要选中全选checkbox和所有的checkbox项，分别注册选中事件，判断选...
最近面试，被问到一个题目，vue做一个按钮组件；当时只是说了一下思路，回来就附上代码。 解决思路： 通过父子组件通讯（$refs 和 props）props接受参数, $refs调用子组件的方法来达到点击提交改变按钮状态，如果不成功则取消按钮状态在src/components/ 下建一个button.vue <template> <!-- use plane --> <!-- 传入bgColor改变按钮背景色 --> <!-- state切换button的状态 调用cancel()可以切换 --> <!-- text为按钮文字 --><div c...
todolist demo最近有空重新看了一下vuex,然后又写了一个todolist小demo,原理比较简单,主要是自己规范了一下代码的写法.下载地址 :vue-test_jb51.rar效果图根组件<template><div class=container><h1 class=title>todo list demo</h1><type-filter:types=types:filter=filter:handleUpdateFilter=handleUpdateFilter/><add-todo :handleAdd=handleAdd /><todo-itemv-for=(item,index) in list:key=item.id:index=index:data=item:fi...
前言 曾经在工作上对 vue 路由权限管理这方面有过研究，这几天又看到了几篇相关的文章，再加上昨天电面中又再一次提及到，就索性整理了一下自己的一些看法，希望对大家有帮助。 实现 大体上实现的思路很简单，先上图：无非是将路由配置按用户类型分割为 用户路由 和 基本路由，不同的用户类型可能存在不同的 用户路由，具体依赖实际业务。 用户路由: 当前用户所特有的路由基本路由：所有用户均可以访问的路由实现控制的方式分两种：...
本文介绍了webpack+vuex+axios 跨域请求数据的示例代码，分享给大家，具体如下： 使用vue-li 构建 webpack项目，修改bulid/config/index.js文件dev: {env: require(./dev.env),port: process.env.PORT || 8080,autoOpenBrowser: true,assetsSubDirectory: static,assetsPublicPath: /,proxyTable: {/v2: {target: http://api.douban.com,changeOrigin: true,pathRewrite: {^/v2: /v2} }},} 在action.js 中想跨域请求设置action.js：...
本文介绍了React Native使用fetch实现图片上传的示例代码，分享给大家，具体如下：普通网络请求参数是JSON对象 图片上传的请求参数使用的是formData对象 使用fetch上传图片代码封装如下： let common_url = http://192.168.1.1:8080/; //服务器地址 let token = ; //用户登陆后返回的token /** * 使用fetch实现图片上传* @param {string} url 接口地址* @param {JSON} params body的请求参数* @return 返回Promise */ function up...
一、场景tween.js是一款可生成平滑动画效果的js动画库当你要实现一个返回顶部的功能时候你会怎么做，大部分人会使用document.body.scrollTop =0；这么写就实现了功能， 不过要更加的细腻一点我们不妨用tween的缓动来实现，看看效果如何吧。之前我们写过tween的相关文章，这里不做介绍了。二、代码<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><script src="https://cdn.jsdelivr.net/npm/vue"></script><sty...
本文介绍了如何在vue中使用ts的示例代码，分享给大家，具体如下： 注意：此文并不是把vue改为全部替换为ts，而是可以在原来的项目中植入ts文件，目前只是实践阶段，向ts转化过程中的过渡。ts有什么用？ 类型检查、直接编译到原生js、引入新的语法糖为什么用ts？ TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面...
1、安装swiper npm install swiper@3.4.1 --save-dev2、引用组件 import Swiper from swiper; import swiper/dist/css/swiper.min.css;3、html页面代码<div class="swiper-container" id="swiper"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(item,$index) in detail.imgs"><a v-on:click="showPreview($index,detail.imgs,swiperObj)"><figure class="wp-avatar banner"><img v-cloak :src="item | toQiNiuIm...
上次写了一个简单的图片轮播，这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外，也可以嵌入任何内容的标签进行滚动，里面用了slot进行封装。 父： <template><div id="app"><er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/index.json" :isOrNotButton=false><template scope="props">-----使用子组件传过来的值，封装slot<div class="articleList-box...
有时候因为布局问题，需要子组件 把数据 传给父组件，并执行父级的某个方法，不多说上代码： 子组件： <template> <div class="isShowing" ref="isShowing"> <div class="menu-wrapper" ref="scroll_warpper" v-show="!hid_show_switch"> <ul ref="scroll_warpper_ul"> <li class="menu-item" @click="goToFatherDetail(233)"> </li> </ul> </div> <v-loading class="isloading" v-show="hid_show_switch"></v-loading> </div> </...