Vue插件

前言

独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台)，还是有些经验不足，包括对产品的全局思考，对插件的选择等，都有考虑不周的缺点，导致自己中途想换图形界面插件，浪费了点时间，这里记录下，总结下经验，理一下思路。1.对于项目的一些心得与体会首先的一点，就是，对于图形界面框架的选型，这个很重要，对于一项目来说，开始动手前就要对项目的设计图有个完整的了解，以便于自己选择插件或者框架；然后就是，对于交互性操作，比如：上传图片，预览图片啥的，应该选择是否是用图形界面框架来实现还是另选专门的插件来实现在完成项目中，我又新学到了上传图片插件vue-core-image-upload，移动端富文本编辑器vue-quill-editor还有个地址的三级联动mt-picker，(是基于mint-ui图形界面框架的)2.rem与px的转换从同事传授中获到的经验，对于rem与px的转换，就是在index.html模板文件中加入下面的脚本，然后就是1rem=100px(这个可能不准确，有更好的方法，各位大佬请在评论中留下，感激不尽)<script type=“text/javascript”> document.getElementsByTagName(“html”)[0].style.fontSize = 100 / 750 * window.screen.width + “px”;</script>3.对于上传图片插件vue-core-image-upload中遇到的坑对于跨域问题，有好多方法可以解决，这里讲的挺多的前端跨域解决方法还有就是后台设置响应头access-control-allow-origin可以指定特定的域名，我这里的后台设置的就是access-control-allow-origin:，就是因为这样，用这个上传图片的插件就会报错Access to XMLHttpRequest at ‘https://….’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.这个问题我蒙圈了好久，和后台也讲了，就是处于蒙圈状态，已经允许跨域了，怎么还报错呢？很烦然后，终于找了个方法解决（有用过其他的上传插件，感觉不好用，代码或者思路好乱）其实这个插件中的文档也有提示，只是刚用，还不是很会就是在使用这个插件的代码中加上这个字段就可以了<vue-core-image-upload class=“btn btn-primary” :crop=“false” input-of-file=“file” @imageuploaded=“loadMainImg” :max-file-size=“5242880” :url=“serverUrl” :credentials=“false” //允许携带cookie></vue-core-image-upload>对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“”。这是因为请求的首部中携带了 Cookie 信息，如果 Access-Control-Allow-Origin 的值为“”，请求将会失败。也就是说Access-Control-Allow-Credentials设置为true的情况下Access-Control-Allow-Origin不能设置为*4.基于mint-ui的三级地址选择效果图template文件<div class=“modal” @click=“handleCloseAddress”> <div class=“cateContainer” @click.stop> <div class=“operateBtn”> <div class=“cancelBtn” @click=“handleCloseAddress”>取消</div> <div class=“confirmBtn” @click=“handleCloseAddress”>确定</div> </div> <mt-picker class=“addressPicker” :slots=“myAddressSlots” @change=“onAddressChange”></mt-picker> </div></div>js文件// 定义一个包含中国省市区信息的json文件import addressJson from ‘@/assets/common/address’export default { data() { return { myAddressSlots: [ { flex: 1, values: Object.keys(addressJson), className: ‘slot1’, textAlign: ‘center’ }, { divider: true, content: ‘-’, className: ‘slot2’ }, { flex: 1, values: [‘市辖区’], className: ‘slot3’, textAlign: ‘center’ }, { divider: true, content: ‘-’, className: ‘slot4’ }, { flex: 1, values: [‘东城区’], className: ‘slot5’, textAlign: ‘center’ } ], province:‘省’, city:‘市’, county:‘区/县’, } }, methods: { onAddressChange(picker, values) { if(addressJson[values[0]]) { picker.setSlotValues(1, Object.keys(addressJson[values[0]])); picker.setSlotValues(2, addressJson[values[0]][values[1]]); this.province = values[0]; this.city = values[1]; this.county = values[2]; } }, }}5.关于对是否登录的处理开始也有做过登录的管理后台，不过，在进行登录时，总会一闪过登录的界面，这种感觉很不好，在这里记录下相比之前更好点的方法在main.js文件中添加对router的钩子函数router.beforeEach((to, from, next) => { let token = localStorage.getItem(’token’); if (!token && to.path !== ‘/login’) { next(’/login’); } else { next(); }});通过判断缓存里是否有token来进行路由的跳转相对于之前的那种方法，这里对路由的跳转进行的拦截，在路由进行跳转前，进行判断6.上拉加载mescroll.js插件这里对于分页加载第二页使用的上拉加载的插件还是用了原来的插件，还是感觉挺好用的这里有讲述上拉加载，下拉刷新，滚动无限加载7.移动端富文本插件Vue-Quill-Editor效果图这里有相关案例代码vue-quill-editor<template> <quill-editor v-model=“richTextContent” ref=“myQuillEditor” :options=“editorOption” @change=“onEditorChange($event)"> </quill-editor></template><script> import { quillEditor } from “vue-quill-editor”; import ‘quill/dist/quill.core.css’; import ‘quill/dist/quill.snow.css’; import ‘quill/dist/quill.bubble.css’; export default{ data() { return {} }, methods: { onEditorChange(e) {} } }</script>响应事件onEditorChange(e){ console.log(e) this.richTextContent = e.html;},8.移动端图片预览插件vue-picture-preview<img :src=“url” v-preview=“url” preview-nav-enable=“false” />需要在app.vue中加入如下代码<lg-preview></lg-preview>效果图代码挺少的9.总结在以后的项目中，首先的一件事就是要对产品要有完成的了解，然后进行技术、框架的选型对于插件，自己多尝试才能知道是否符合你的要求正在努力学习中，若对你的学习有帮助，留下你的印记呗（点个赞咯^_^）往期好文推荐：判断ios和Android及PC端webpack打包（有面试题）纯css实现瀑布流（multi-column多列及flex布局）实现单行及多行文字超出后加省略号 ...

#vue-task-node在线Demo 1.0.x 版本 https://codesandbox.io/s/9413yop49r1.1.x 版本 https://codesandbox.io/s/2wv588orlrvue-task-node 是一个基于Vue的任务节点图绘制插件（vue-task-node is a Vue based task node mapping plug-in）此文章是续之前1.0.x(https://segmentfault.com/a/11… 的更新版本▲ 1.0.x -> 1.1.x①重新组织了节点，使节点具有可扩展性。②新增节点可拖拽。③样式使用less编写，提高了后期样式的维护成本。④通过阅读 iview（https://github.com/iview/iview） 及 element（https://github.com/ElemeFE/el…）的源码，目录结构，传参等都借鉴了其中的方法。✉：liwenbingmsc@qq.com一、安装npm install vue-task-node -S二、引入import Vue from ‘vue’;import VueRouter from ‘vue-router’;import Routers from ‘./router.js’;import VueTaskNode from ‘vue-task-node’import “vue-task-node/dist/css/vnode.css"Vue.use(VueRouter);Vue.use(VueTaskNode);// The routing configurationconst RouterConfig = { routes: Routers};const router = new VueRouter(RouterConfig);new Vue({ el: ‘#app’, router: router, render: h => h(App)});三、教程http://vidanao.com/vnode四、版本版本说明更新时间是否支持拖拽是否支持节点连线1.0.0开端,根据数据绘制任务节点2019年1月16日否否1.0.1修改代码规范Eslin2019年1月17日否否1.0.2调试入口文件2019年1月17日否否1.0.3npm下载包错误修改2019年1月17日否否1.0.4添加鼠标右击后返回右击的node数据2019年1月18日否否1.0.x优化配置文件2019年1月x日否否1.1.0代码结构调整，组件重新封装，样式使用less写2019年2月28日是否#####1.1.1解决dist文件无法上传问题2019年2月28日是否1.1.2解决dist文件无法上传问题2019年2月28日是否1.1.3解决index.js找不到组件问题2019年2月28日是否1.1.4解决index.js找不到组件问题2019年2月28日是否1.1.5调整工作区样式问题2019年3月1日是否1.1.6调整节点的事件传递2019年3月1日是否1.1.x优化样式，及配置文件2019年3月x日是否未来版本说明更新时间是否支持拖拽是否支持节点连线1.2.x新增节点间连线2019年4月x日是是

前言vue-split-table应用的效果图vue-split-table开源地址,欢迎star,现在已经开源和同步到npm上轻松搞定表格拆分或者合并,编辑,再也不怕被产品怼啦1.核心源码分析<td>里面嵌套<table>实现表格拆分;原生实现复选框的单选和全选功能;props属性像父组件暴露属性值;$emit自定义事件方法向父组件传值;作用域插槽<template slot-scope>由父向子传入html标签;嵌套<input>实现表格编辑,v-for不允许<input>里面使用v-model改变item值问题解决;webpack打包配置vue-split-table开源地址,欢迎star和pr2.暴露的Attributes参数说明类型是否必传DefaultheadData表头内容Array必传-bodyData表体内容Array必传-checkFlag是否有复选列Boolean可选TruetableEditFlag表格是否可编辑Boolean可选TrueoperFlag是否有操作列Boolean可选True3.暴露的Eventsname说明参数multipleData当选项发生变化触发multipleDataeditData表格编辑文本框失焦触发editData4.slot事件名说明operate配置操作列后就可通过设置slot来配置操作的内容5.撸起示例代码基于vue工程<template> <split-table :headData=“headData” :bodyData=“bodyData” @multipleData=“multipleData” @editData=“editData”> <template slot=“operate” slot-scope=“props”> <span @click=“splitEdit(props.rowData)">修改</span> <span @click=“splitAdd(props.rowData)">新增</span> <span @click=“splitDel(props.rowData)">删除</span> </template> </split-table></template><script> import SplitTable from ‘vue-split-table’; export default { components: { SplitTable }, data () { return { headData: [“城市”, “美食”, “好玩的地方”], bodyData: [ { city: “北京”, food: “北京烤鸭”, fun: [“故宫”, “颐和园”, “长城”] }, { city: “深圳”,food: [“肠粉”, “牛肉火锅”],fun: [“西冲”, “华侨城”, “世界之窗”] }, { city: [“重庆”, “成都”, “武汉”], food: [“重庆老火锅”,“重庆烤鱼”,“重庆小面”,“成都小吃”,“武汉热干面”], fun: [“洪崖洞”, “峨眉山”, “黄鹤楼”] } ], } }, methods: { splitEdit(rowData) { console.log(“rowData值为”, rowData); }, editData(data) { console.log(“编辑所在行的值为”, data); } splitAdd(data) { console.log(“新增所在行的值为”, data); }, splitDel(data) { console.log(“删除所在行的值为”, data); }, multipleData(data) { console.log(“复选框选择的值为”, data); } } }</script>参考文章:时钟组件 ...