Vue

  • 无缝改造vue项目,支持typescript

    改造 vue_cli3+ 的 js 版本支持 ts 生成vue项目的vue_cli版本为 4.0.5 应用场景: 目前已经在开发的项目, 后续想要摸摸 ts 刚开始学习 ts, 不敢完全入坑 安装 {代码...} 书写 vue.config.js 修改 webpack 的 loader vue.config.js 必须是 js 文件 {代码...} 项目根目录下新建 tsconfig.json 文件 配置编译 ts 文件规则.我...

    前端框架 2020-04-12 410 0 0
  • 造轮子-toast组件的实现(下)

    如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。如果数值越大,缩小比例越大。

    前端框架 2020-04-05 437 0 0
  • Vue造轮子-tab组件(中)

    1. 如果给一个标签一个class,标签本身又有class,vue是默认会合并的。只有两个属性是这样一个是class,一个是style。这样就比较好改样式。 {代码...} 2. 组件的结构以及selected的传递过程,见下图。 没有点击的图 发生了点击操作的图,两个item兄弟之间是没有关系的,发生了点击操作之后要做下图中的五件事情。 亮自己 熄...

    前端框架 2020-04-05 427 0 0
  • Vue造轮子-Tabs测试(下)

    test里面也应该期待一个报错,通过google搜索chai expect error得到写法,但是又碰到报错是异步的问题,接下来我们又搜索 chai aysnc error 去解决,发现也没有办法解决,决定退而求其次把error改成warn {代码...}

    前端框架 2020-04-05 434 0 0
  • Vue造轮子-popover组件(上)

    1. popover是什么以及难点在哪 点一下出现一个卡片,也叫气泡卡片 难点在于css的样式 2. 用户会怎么去用 {代码...} 3. 为什么要用用inline-block,因为这样多个popover组件才不会一行 {代码...} 4. 优秀的前端css一定是写的很6的 {代码...} 5. 开始完善功能,实现点外面之后内容消失 {代码...} 6.解决第三次点击不行 第一...

    前端框架 2020-04-05 417 0 0
  • Vue造轮子-popover组件(中)

    关于click事件的,之前解决的方式是写click.stop,但是其实还是会有bug,会打断用户的事件链,用户在外面写@click,点击按钮没有用,但是点击按钮周围空白区域会有,那么就会导致别人用了组件无法自己添加click事件,所以不能用stop解决这个问题。

    前端框架 2020-04-05 416 0 0
  • Vue造轮子-tab组件(下)

    <img src="https://i.loli.net/2020/01/27/gS4ZwP6zfAvULYT.jpg" alt="微信" width="400" height="400" align="bottom" />

    前端框架 2020-04-05 451 0 0
  • Vue造轮子-popover组件(下)

    title: Vue造轮子-popover组件(下)date: 2020-01-29 10:37:44 tags: 前端学习 造轮子 1. 上一次的问题总结。 overflow:hidden -> body.appendChild 关闭重复 -> 分开,document只管外面,popover只管里面 忘了取消监听document -> 收拢close 2. 可以把一个函数哟没有五行作为一个优化的标准,简称为五行定律 3. 接...

    前端框架 2020-04-05 426 0 0
  • Vue造轮子-手风琴组件

    一. 大致的使用方法 {代码...} 二. 完成最外部的样式 {代码...} 三. 进一步调节样式 {代码...} 四. 默认内容折叠起来和点击切换,基本样式和基本功能完成 {代码...} 五. 完善功能第一个点开,第二个就关闭 因为结构比较简单,就父子两个组件,可以用父子通信来做。 {代码...} 六. 增加功能是否可以选择多个 方案一.用 sin...

    前端框架 2020-04-05 433 0 0
  • 造轮子-tab组件(上)

    log+分析代码,mounted和$nextTick是有时间间隙的,得到原因测试用例中mount完了之后立刻click,click之后再$nextTick设置高度,所以可能是click太快了,此时s当$nextTick的时候,已经toast已经被我们关掉了,所以无法设置高度,那么解决方案就是我们就需要模拟用户点击,200ms后再点击

    前端框架 2020-04-05 422 0 0