Vue 没有办法让页面高度为 100% 怎么办?

在进行 Vue 后台开发时,一般来说,我们希望我们的应用的首页是 100% 高度,其样式大致如下

效果图

但是一开始,往往会遇到高度没有办法设置为 100%。

这是由于在 Vue 中,并没有给 html,body,#app 设置默认高度

解决方案也很简单,只需要在 App.vuestyle 中添加如下代码

html,
body,
#app {
  height: 100%;
}

小程序的 marker 无法触发 bindmarkertap 事件应该如何处理

TL;DR

如果想要 marker 可以响应 bindmarkertap 事件,需要设定 markerID,这一点文档中并没有标注。

具体情况

在开发美食地图时,出现了一个问题,marker 的点击总是不会触发 bindmarkertap 事件。

我的代码是这样写的

    store.get().then(res => {
      this.setData({
        stores: res.data,
        windowHeight: app.globalData.windowHeight,
      }, () => {
        wx.hideLoading();
        wx.showToast({
          title: '双指缩放可以调整地图可视区域,查看更多美食',
          icon: 'none'
        })
      })
    })

在地图中去调用 stores. marker

在地图上的确可以出现图标,但是无法点击 maker 并触发事件。

通过复制官方的 marker 的数据进行调试后发现,当 maker 有 id 时,marker 就可以触发事件,因此,怀疑是 ID 的问题。

在美食地图小程序中,我使用的是腾讯云提供的小程序·云开发,其使用的是 MongoDB 作为后台的 Database ,默认的主键为 _id,所以,我自己写了代码来转换 _id

      data.map(item => {
        item.id = item._id
      });

对应的 commit :https://github.com/CloudKits/miniprogram-foodmap/commit/5abcad1f756e03a388bb33dd1c699d3cae9ea0c4#diff-f5ea41cdd371d7b65bfdf8d32188e37d

运营用加强 Markdown 编辑器

初衷

我一个朋友需要参与公司针对 V2ex 的运营,而 V2ex 如果想要发富文本,就需要 markdown 语法,对于他一个长期担任运营岗的人来说,Markdown让他十分困扰。虽然有很多不错的编辑器,但是由于他会有一些特殊的需求,所以还是十分不舒服。因此我便打算帮他做一个运营用的插件,帮他完成他所需要的特殊功能

特性

  • 满足运营者常用功能需求(H1-H6)
  • 提供插入新窗口打开连接的功能
  • 提供插入含连接的图片的功能
  • 插入含描述的图片
  • 选中文字标红
  • 快速打开图床

Demo

http://co.ixiqin.com

功能说明

插入新窗口打开连接

可以在打开的对话框中输入标题和连接。自动生成一个基于HTML的新页面打开连接
需要注意的是,此连接的会生成在文章尾部,需要自行复制到适当位置。

插入含连接的图片

可以在打开的对话框中输入连接、标题、图片地址、图片描述生成对应代码。
需要注意的是,此连接的会生成在文章尾部,需要自行复制到适当位置。

插入含描述的图片

可以在打开的对话框中输入图片地址、图片描述生成对应代码。
需要注意的是,此连接的会生成在文章尾部,需要自行复制到适当位置。

选中文字标红

选择要标红的文字,点击特色功能区的按钮,即可对指定文字进行标红处理。

快速打开图床

编辑器未做图片上传,故而提供了一个图床的地址,可以将图片上传到sm.ms,复制其生成的图片的连接,使用菜单栏中的工具添加即可。

源码地址

https://github.com/bestony/CoEditor

涉及技术

前端开发、JavaScriptEditor.md

 

Linux 中国 – LCTT 选题工具

初衷

LCTT 使用 Markdown 来作为翻译原文,但是由于原文均为 HTML 格式,在选题时需要手工处理,要耗费大量的时间,所以便制作了选题工具,希望借助机器来完成

特性

  • 可以根据输入的 html 代码生成对应的 Markdown (表格未支持)
  • 支持数字型 Markdown 语法
  • 加入 Editor.md ,选题完成后可以进行编辑
  • 使用 js 来完成复制工作

Demo

http://lctt.ixiqin.com

源码

https://github.com/LCTT/LCTT-Helper/

阿里云论坛 BBCode 编辑器

初衷

制作这个编辑器是在我担任阿里云论坛版主期间,由于阿里云论坛的编辑器实在难用,且由于 Cookies 很容易过期,导致辛苦编辑很久的帖子会由于实效而丢失。于是我希望能够有个编辑器来帮助我更好的编辑帖子。

特性

  • 兼容 phpwind 的 BBCode
  • 接入了 SM.MS 的图床

Demo

http://edit.ixiqin.com

源码

https://github.com/bestony/Editor