浏览模式: 标准 | 列表分类:Javascript
Submitted by gouki on 2020, February 28, 10:03 PM
用sortable处理排序,代码真的很少,不需要引用什么vue-sortable之类的。但会有个问题。。实际的DOM和Vnode可能会显示不一致。往往拖完了,序号变了,数据变了(可以通过console.log来查看),但就是DOM没变。
后来是搜索到这篇文章,写的比较详情:https://www.jianshu.com/p/d92b9efe3e6a,我就不多写了。我的几行代码类似如下:
JavaScript代码
- dragable() {
- let contentRow = document.querySelector('.content-row');
- Sortable.create(contentRow, {
- onEnd: ({newIndex, oldIndex}) => {
- let newline = contentRow.children[newIndex],
- oldline = contentRow.children[oldIndex];
-
-
- contentRow.removeChild(newline);
- contentRow.insertBefore(newline, newIndex > oldIndex? oldline : oldline.nextSibling);
-
- let currRow = this.items.splice(oldIndex, 1)[0];
- this.items.splice(newIndex, 0, currRow);
-
- }
- });
- },
这个方法是vue的methods中的。不复杂。看看就行。记录一下。原来我觉得很简单。这个方法的最后两行就行了。。。但就是DOM不变。参考了上面链接中的内容才加了那两行。
Javascript | 评论:0
| 阅读:8901
Submitted by gouki on 2020, February 25, 8:59 AM
wechaty是目前看来最优雅的机器人库了。使用方式也很简单,官方的demo例子就几行代码,不过看到他们的hot-import-bot.js就感觉慌了。毕竟在同一个页面里,还能直接使用bot变量(例子中实例化的时候,用的是bot,const bot = new Wechaty());但分拆成单独的文件后就没有相应的用法。
看源码中是有这样的代码:
JavaScript代码
- public on (event: 'dong', listener: string | ((this: Wechaty, data?: string) => void)) : this
是看到确实对每一个件事都是传入两个参数,然而demo里都是类似这样:
JavaScript代码
- async function onLogin (user) {
- console.log(`${user} login`)
- }
也没有看到有传入第二个变量。如果你主动 传入第二个参数,会直接报undefined。在这样分拆的页面怎么使用bot呢?
我找了一下node的全局变量,发现nodejs有一个global变量。嗯,变量名就叫:global.....,于是将除了message以外的事件放到主文件index.js中。并在onlogin中赋值:global.bot = bot;
然后在分拆后的message中,const bot = global.bot; 果然就可以用了。
问了一下群里,发现有人也这样用,但。。。Huan Li(Huan (李卓桓))说了,其实可以在方法里面直接 const wechaty = this;就可以用了。。。
这么说。。。this就可以直接用?果然不会Ts就是不懂。然后 他还更新了一下 git,并在里面加入了使用方法,详见:https://github.com/wechaty/wechaty-getting-started/blob/master/examples/professional/hot-import-bot/listeners/on-friend.js
JavaScript代码
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- async function onFriend (contact, request) {
-
-
-
-
-
-
- if(request){
- let name = contact.name()
-
-
- console.log(`Contact: ${name} send request ${request.hello()}`)
- }
- }
-
- module.exports = onFriend
看到 if(request) 上的注释了么。。。就是这样简单。
最后想说的是,感觉
- public on (event: 'dong', listener: string | ((this: Wechaty, data?: string) => void)) : this
这个this的用法就象python的self一样。虽然不懂,但是感觉很厉害的样子。
最近在尝试使用他做了个小机器人,就是当群里有人问天气的时候自动回复了一下。。。目前只是demo。没有细纠,但这时候发现 Room.alias(Contact)。没有拿到群昵称,准备这两天再看看问题是啥。
Javascript | 评论:0
| 阅读:8079
Submitted by gouki on 2020, February 23, 1:03 PM
yarn add laravel-echo-server
yarn add v1.19.0
[1/4] ? Resolving packages...
[2/4] ? Fetching packages...
error Incorrect integrity when fetching from the cache
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
解决方法:
1、yarn config set unsafe-disable-integrity-migration false
2、yarn cache clean
3、yarn install -f 或者 直接 yarn add ..
问题解决。
Javascript | 评论:0
| 阅读:9449
Submitted by gouki on 2020, February 18, 2:27 PM
setWechatTitle 指的是这个插件:https://juejin.im/post/5cff17f45188252dd239943a
在微信里,涉及到后续改title总会有不能刷新,或者不能显示动态title的问题。这个插件就是为了解决它的。
然而,今天遇到的问题是。过早的设置this.wechat.title,导致input框无法输入(用的是element-ui)。测试过。普通 的input框可以(估计两者在CSS上会有冲突,没有细究)
最后简单偷懒的方法是将 这个触发放到了wx.ready(里)。至少表明,我页面元素都加载完了,才触发的。此时不再有任何冲突。
没有时间查问题出在哪里,是哪个语句导致的(因为只有IOS上有这个问题,android没有。而且,IOS上的 -webkit-user-select:auto 这个CSS也设置了,所有的都是无效)
Javascript | 评论:0
| 阅读:8871
Submitted by gouki on 2019, December 24, 9:07 AM
做后台,还真是首推ElementUI,毕竟规范,虽然东西比其他的少了一点,比如没有默认的ul/li效果之类的,但这些标准元素你可以引用一些第三方库,比如bootstrap,只要用他的CSS就行了。
当然,elementui也会有小问题,比如这次新版里推出的PopConfirm,好看是好看,但@confim/@cancel都没有(看官方的issue,有人提出是@onConfirm/@onCancel,但都没有用,也有人说是@on-confirm。。。。没有一一试,先用popup解决了)
这一篇说的是element-ui的Table组件,每个column都可以设置width,但这个width,因为没有单位,说不准是px?还是rem,如果一个表格的列不多,你这样设置的话,在大屏和小屏上面就很尴尬,要么全部偏左,要么撑破页面。因为他默认居然没有百分比设置(应该说width不支持百分比),但确实有人发现是可以支持,原来,el-table-column还有一个 min-width,这个就支持百分比,你可以设置<el-table-column min-width="15%"></el-table-column>,记得总数不要超过100%,否则还是会撑出或者会不起作用(总感觉有点妖)
Tags: element-ui
Javascript | 评论:0
| 阅读:12098