可拖拽生成节点的组织结构图-vue+svg+betterscroll+原生js-drag
作者:admin 日期:2020-10-30
查看案例请点击此处:
顺便提一下,这种连线可以跟动画相结合,参见我的另一个小例子:
http://www.contactu.cn/2016/svg/test_svg_2019.html
VUE+TWEENMAX+SVG动画,用来模拟流程控制
http-vue-loader插件让你无需使用webpack也能尝鲜.vue单文件组件
作者:admin 日期:2018-03-25目前利用<script>方式,不使用webpack的开发人员还很多,我之前一直不知道,可以绕过webpack,直接尝鲜.vue的单文件组件方式,直到发现了这个组件。目前我已经在多个项目中使用。
这个插件的用法在百度上基本搜不到。具体使用方式可以看这个中文文档:
https://kuro.tw/posts/2017/07/11/%E4%B8%8D%E9%9C%80%E7%B7%A8%E8%AD%AF%E4%B9%9F%E8%83%BD%E8%BC%89%E5%85%A5-vue-%E5%85%83%E4%BB%B6%E6%AA%94-%E4%BD%BF%E7%94%A8-http-vue-loader/
也可以直接看github官网文档:
https://github.com/FranckFreiburger/http-vue-loader
vue“作用域插槽”来制作通用列表组件
作者:admin 日期:2017-12-13“作用域插槽”的官方定义是:作用域插槽是一种特殊类型的插槽,用作一个 (能被传递数据的) 可重用模板,来代替已经渲染好的元素。这VUE2.5提供的新功能,经我亲自测试,在2.2版本中并不好用。建议直接升到2.5。
官网文档地址:https://cn.vuejs.org/v2/guide/components.html#作用域插槽
vue+tweenmax实现手风琴导航效果
作者:admin 日期:2017-11-14用VUE+localstorage+lodash.js实现购物车本地存储
作者:admin 日期:2017-10-12在任何一个购物页面,只要购买了商品,就可以将购买量存储到缓存,实现跨页面共享数据。这个原理也可以用来管理其它较复杂的跨页面结构。
demo地址:
- 使用js-storage这个js库来实现对localstorage的读写及判断,比自己写原生要简单。因为localstorage默认存储是字符形式,如果要存储对象、数据这些,还要自己写转换,用库就简单得多了。另外还用isEmpty对“空结构”做判断。
- 基于VUE做了一个单独的mixin_cart,要引入购物车的页面都可以使用这个mixin
- 用一个数据结构(cart)来完整的映射“购物车”,针对它写了一些API:
- init_cart----从local读数据来形成cart
- get_cart_item_count----得到某件商品的购买量
- write_cart------新建/改写商品数据
- sum_cart-------汇总购买量
- clear_cart------待加
- 使用watch监听页面中的数据变化,一旦发生变化,就扫描数据结构,把购买量的变化使用write_cart映射到cart-->并存储到localstorage。注意watch监听数组或是对象这样的复杂结构,要使用handler+deep: true写法。
- 一些算法使用了lodash.js,比如:
- 查找符合条件的商品-- _.find
- 从数组中删除商品---_.pull
- 汇总商品购买量------_.sumBy
VUE中用refs实现父子通讯的新方法
作者:admin 日期:2017-09-30近期VUE及周边笔记--YDUI框架
作者:admin 日期:2017-09-24YDUI是基于vue2.0的一个功能齐全的UI框架,就我个人的应用范围来说,比element ui更适合我的需要。可能他的组件配置并没有ele那么强大而齐全,但是简练的风格反而更适合于中小移动端项目。
我主要使用这些组件:
- flexible组件,用于rem-px单位转换,默认单位是10,好转脑子。
- 弹窗,只有几个参数,适用于不复杂的情况。
- 日期选择器,weui风格的,从底部向上弹出。
- 滚动加载(yd-infinitescroll)
- 数字动画 (CountUp)
其它的一些组件,别的库中也有,或是可以自己手写出来,并不是完全依赖。
要注意的事及BUG:
1、这个库的版本更新很快,如果发现参数无效等奇怪的情况,请先检查版本。比如yd-infinitescroll的不同版本写法就不一样。
2、flexible组件,对于窗口宽度的变化是有范围的。
- //ydui.flexible.js,以下的11.2会在宽420像素以上停止变化,改为21.2后,会在768像素以上才停
- return n.style.fontSize = 5 * Math.max(Math.min(t / 750 * 20, 21.2), 8.55) + "px", e
近期VUE及周边笔记--easy mock
作者:admin 日期:2017-09-24easy mock(https://easy-mock.com/)平台的主要作用,是用来模拟生成json文件,在后端未到位的情况下,为前端调试提供数据。我的使用方法:
1、是在开发时将ajax请求,直接指向https://easy-mock.com/mock/59a578f77b7ac306cc2fa863/api这样的远程接口,进行调试。
2、等前后端联调结束后,通过修改axios的axios.defaults.baseURL参数,将数据接口指向真实ajax地址,完成切换。
easy平台提供了丰富的mock.js语法,也可以接收并request参数,模拟真实ajax情况很逼真。比如下面这个范式,就模拟了对”/list?page=*“这样的多页请求的情况:
- {
- res_body: function({
- _req,
- Mock
- }) {
- //page小于3,每页给出20个随机数据
- if (_req.query.page < 3) {
- return Mock.mock({
- "page_num": 4,
- "list|20": [{
- "id": _req.query.page,
- "tt_amount": "@float(200, 2000, 2, 2)",
- "commission": "@float(200, 2000, 2, 2)",
- "final_amount": "@float(200, 2000, 2, 2)"
- }]
- })
- }
- //page==3,给出6个数据,模拟末页情况
- if (_req.query.page == 3) {
- return Mock.mock({
- "page_num": 4,
- "list|6": [{
- "id": _req.query.page,
- "tt_amount": "@float(200, 2000, 2, 2)",
- "commission": "@float(200, 2000, 2, 2)",
- "final_amount": "@float(200, 2000, 2, 2)"
- }]
- })
- }
- }
- }
模拟身份验证
- {
- res_flag: function({
- _req
- }) {
- return (_req.header.token == "1234567890")?true:false;
- }
- }
近期VUE及周边笔记--axios
作者:admin 日期:2017-09-24我将ajax工具栈从vue-resource改为了axios,基本用法类似,但调用格式略有不同。比如vue-resource的response是放在res.body中,而axios放在了res.data中。
值得一提的是,axios的全局设置很方便,包括参数和拦截器。列举:
- // 全局基地址配置
- axios.defaults.baseURL = 'https://easy-mock.com/mock/59a578f77b7ac306cc2fa863/api';
- // 全局token
- axios.defaults.headers = {token: window.localStorage.getItem("jyg_token")};
- // 添加全局请求拦截器
- axios.interceptors.request.use(function (config) {
- // 给每个发出的请求后面加上php后缀
- config.url = config.url + "php";
- return config;
- }, function (error) {
- // 对请求错误做些什么
- return Promise.reject(error);
- });
- // 添加响应拦截器,比如对所有错误代码进行全局统一的出错处理
- axios.interceptors.response.use(function (response) {
- // 对响应数据做点什么
- return response;
- }, function (error) {
- // 对响应错误做点什么
- return Promise.reject(error);
- });
一个典型的电商购物页:VUE2.0/导航列表联动/头部自动收缩/购物车动画效果
作者:admin 日期:2017-08-08这种结构在电商中很常见,比如饿了吗的店铺页。我边写边参考饿站。
vue-resource1.2.0在读取非json文件时出现的问题
作者:admin 日期:2017-05-24vue-resource1.2.0版本,发现只能读取.json后缀的文件,换个后缀就不灵了。最终找到答案:
- <script src="js/vue2.js"></script>
- <script src="js/vue-resource1.3.1.js"></script>
- var call = Vue.http({
- method:'GET',
- responseType:"json",
- url:"mocks/news1"
- });
- call.then(function (e) {
- console.log(e.body);
- });
VUE2.0+vue-finger.js的“新闻条左滑出按钮”组件
作者:admin 日期:2017-05-18vue-finger.js是将alloy_finger.js用于VUE2.0的一个包装小程序。在网上一直找不到跟VUE2.0很无缝搭配的组件,无奈找了个简单替代品。引用时要将两个库都引入:
- <script src="js/alloy_finger.js"></script>
- <script src="js/vue-finger.js"></script>
示例图如下:
DEMO在此:http://258754.cn/2017/jzz/test_swipe.html
用F12模拟手机观看
寻找IOS风格的datapicker在vue2下运行
作者:admin 日期:2017-05-06目前我们做的几个移动端项目,使用vue2多页面方式,js文件用<script>方式引入。因为不能使用import方式引入组件,这就意味着网上大量的VUE2第三方组件,无法使用。
.png)
很实用的一个长宽比锁定组件 for vue2.0
作者:admin 日期:2017-03-17功能点:
1、长宽比锁定,per参数为百分比,如果 高:宽=200:100,则per="200",默认宽高比为100:100(正方形)。
2、参数bg="images/c3.jpg",背景可带图片
3、link="a.html",可以带链接
HTML中调用:
- <div id="app" v-cloak >
- <lock-div bg="images/c3.jpg" link="a.html" per="200"></lock-div>
- <lock-div><img src="images/p3.jpg"></lock-div>
- <lock-div per="50">里面也可以放文字</lock-div>
- </div>
组件定义:
- Vue.component('lockDiv', {
- props:{
- per: {type: [Number,String], default: 100 },
- bg: {type: [String], default: ""},
- link: {type: [String], default: ""}
- },
- data:function (){
- return {
- hh:100
- }
- },
- template: "<div class='lockDiv' :style=\"{height: hh + 'px', backgroundImage: 'url(' + bg + ')'}\" @click='clickH'><slot></slot></div>",
- methods: {
- clickH:function(){
- if(this.link){
- window.location.href=this.link;
- }
- }
- },
- mounted: function() {
- this.hh = this.$el.offsetWidth* this.per/100;
- }
- });
显示效果: