Vue:切换class模拟实现tab

实现个切换

其实就是翻译了jQuery的removeClass和addClass,只是在Vue里面使用了变量去切换.

vuejs logo

运行效果

vuejs tab 运行效果

源码

源码比较简单,引用了bootcss的cdn服务.

Element-UI:缓存Tabs打开的页签

竟然不缓存?

在使用Element ui 的时候,发现Tabs挺好用,于是做了这样一个页面:左侧是菜单,右侧顶部是Tabs,右侧下方是iframe.一切就绪,问题出现,就是每次点菜单的时候,Tabs就会新增一个页签,这导致iframe增加不少.于是想了个办法,来解决这个问题.

  1. 在menu菜单中,index直接为页面的名称;
  2. 在Select事件中,拿到index就可以请求页面了;
  3. 请求页面的时候,先判断页面是否已经存在于缓存中.如果存在则直接激活该页签,不存在就先添加到Tabs,然后激活,并放入缓存中.
  4. over……

但这样,存在另外一个问题:如果有几十个菜单,会堆叠几十个iframe.侧面一想,如果共用一个iframe,那么会出现另外一个问题,就是可能在上一个页面只输入了一部分文本,还没处理就切换页签,会丢失上个页面的数据.

于是,在菜单量不多的情况下,还是每个页签一个单独的iframe.便于处理.

html

源码

只有main.html是有实质内容的,其余html都是为了演示数据.

代码可以直接在本地运行,可以保存成文件,进行运行.

main.html

roleList.html

userAdd.html

userList.html

roleAdd.html

Echart:使用AngularJS对Tooltip显示的信息排序

源于

今天遇到一个需求,是这样:需要echart的图表在显示Tooltip的时候对数据进行排序,说干就干.另外一个问题是,项目是用的AngularJS,瞬间想起,我以前也搞过一段时间的AngularJS,无奈当时无用武之地,就此荒废了.于是去找文档补习了下AngularJS.

就搞定了这个需求.

echart中tooltip排序显示

源码

完整源码,效果可以自己运行
如果需要将AngularJS换成jQuery,只需要将formatterTooltip函数中的代码替换成jQuery语法即可.

JavaScript:删除对象无值的属性

来源

首先是不知道object不知道有什么属性,而需要过滤无值的属性.然后……其他处理.

html

源码

博客有点问题,过几天需要修复一下.

Python:抓取One每天一句话作为随机名言

在很多年前…

我以前看到过不少随机名言,但是碍于当时没有技术不会做,虽然很喜欢.但是也不知道怎么去实现.还好现在技术可以实现,而且也有一个比较好的平台.提供了每天一句话.刚好就用来作名言的数据源了.[地址]

如果要查看效果,可以在页面底部看到相应效果(每次刷新显示的内容都不一样).

还需要…

因为使用了Python的两个库,因此必须安装:requests,BeautifulSoup.这两个库.

安装如下:

安装之后,就可以使用了.

python Logo
image-2482

简单说一下…

首先,这个程序并没有做到非常”智能”,有些地方使用了print(大概是两个地方).因此,你需要自行复制到某个地方,在继续…..

简单说一下核心的一个函数:

没错上面这个就是核心函数了,

  1. 首先使用了for循环对数据进行循环读取(self.start_index,self.end_index分别是开始的期号和结束的期号,可以自己设定,具体要看源码(源码在下面)..).
  2. 定义了一个messagedata的dict,dict的key存的是相应期号,value存的是名言内容.(好像这一句才是第一步…)
  3. 在循环中,动态定义url,并且使用了requests第三方库进行网页的获取网页内容.[关于requests]
  4. 拿到内容之后,基本就放心了.
  5. 然后使用了BeautifulSoup对HTML进行解析,话说……BeautifulSoup是个很神奇,很厉害,很霸气的HTML解析库..(反正,正反就是很厉害)
  6. 使用了Python自带的HTML解析引擎,”html.parser”,也有很多第三方的可选.[关于BeautifulSoup]
  7. 这一句可能是最复杂的,message = (str(soup.select(“.one-cita”)[0].contents[0])).strip(),这一句首先是从soup对象中select了class=”.one-cita”的div的数据(select函数是BeautifulSoup提供的使用HTML的class方式选取内容,这一点就方便了很多,select返回的是list,因此使用了[0]获取第一个,跟着使用contents来获取其中的内容,contents继续返回list,接着继续获取[0]),获取到数据之后,str函数将其转换为str类型,并且使用strip()函数对其特殊符号(比如:\t,\n,空格)这些进行清理.返回一个干干净净的文本..OYeah.
  8. 然后就是将期号作为key,名言内容作为value放到dict里面.
  9. 说完了.

源码

源码使用如下:

必须安装requests和BeautifulSoup这两个库,否则..运行不了.

使用步骤如下:

懒得写了,直接看源码里面的吧.

另外,我已经生成了一个了.可以直接用的.

调用方式,将下面的内容保存成mingyan.js,然后在页面中创建一个<p id=”showMingyan”></p>,然后使用js:$(“#showMingYan”).html(getMingYanHref());进行调用即可.

到此.