新项目需要用到工作流设定 + 自定义表单控件,这里列出了自定义表单控件的代码实现,可实现自定义表单控件,可拖拽排序,自定义属性

效果预览

20180416 at 23.23.gif

运行使用

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

文件目录

.
├── README.md
├── build
├── config
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   ├── components
│   │   ├── custom_form             //自定义表单组件
│   │   │   ├── FormList.js         //表单列表    
│   │   │   ├── ItemIcon.js         //表单图标配置
│   │   │   ├── Render.js           //表单列表渲染
│   │   │   ├── components          //表单组件
│   │   │   │   └── Uploads         //上传组件
│   │   │   │       ├── index.js
│   │   │   │       └── upload.vue
│   │   │   ├── config              //配置文件
│   │   │   │   ├── area.js         //地区配置
│   │   │   │   └── trigger.js      //表单验证触发事件
│   │   │   └── control             //表单控件列表
│   │   │       ├── Address.js      //地区选择
│   │   │       ├── Cascader.js     //多级联动
│   │   │       ├── CheckBox.js     //多选框
│   │   │       ├── DatePicker.js   //时间选择器
│   │   │       ├── Hr.js           //hr标签
│   │   │       ├── Input.js        //输入框
│   │   │       ├── P.js            //p标签
│   │   │       ├── Radio.js        //单选框
│   │   │       ├── Select.js       //下拉选择框
│   │   │       ├── Text.js         //文本域
│   │   │       ├── Title.js        //标题
│   │   │       └── Uploads.js      //上传控件
│   │   ├── index.vue               //自定义表单页面
│   │   └── render.vue              //表单渲染,数据回填页面
│   ├── main.js                     
│   └── router
│       └── index.js
└── static

相关代码已上传至:

相关插件:

阅读全文

随着Docker技术的不断成熟,越来越多的企业开始考虑使用Docker。Docker五大优势:持续集成、版本控制、可移植性、隔离性和安全性。 -- 参考自 http://dockone.io/article/389

安装很简单,到 docker官网 下载.dmg安装包,拖到application就安装完成了。

在Launchpad找到docker图标打开应用程序,第一次打开会出现对话框

根据提示一直下一步,就算启动成功了。

接下来,我们来看一下docker的版本信息:

$ docker --version
Docker version 18.03, build c97c6d6

$ docker-compose --version
docker-compose version 1.20.1, build 8dd22a9

$ docker-machine --version
docker-machine version 0.14.0, build 9ba6da9

下载的镜像默认储存在 ~/Library/Containers/com.docker.docker/Data/com.docker.driver.amd64-linux/Docker.qcow2 可以在

更改其位置,通过命令docker images查看自己安装的镜像, docker rmi {imageName}则是删除镜像的命令

下面来下载一个mysql镜像试一试效果:

docker pull mysql

运行mysql:

docker run -d -p 3306:3306 --name mysql -e MYSQL_ROOT_PASSWORD=123456 mysql

命令说明:

  • -d:后台运行容器,并返回容器ID;
  • -p 3306:3306:将容器的3306端口映射到主机的3306端口
  • --name mysql:将容器的名称设定为‘mysql’方便之后操作
  • -e MYSQL_ROOT_PASSWORD=123456:初始化root用户的密码
  • mysql:执行mysql镜像

更多命令说明可参考 Docker 命令大全 - 菜鸟教程

当然,用docker默认的仓库下载是很漫长的等待,你可以设置国内仓库镜像地址,这里,我使用的是阿里云的镜像仓库。

打开 https://dev.aliyun.com/search.html 并登陆,点击‘管理中心’,进入‘镜像加速器’,会给你分配一个地址,直接在docker的设置里添加并重新启动docker即可。

阅读全文

zsh-autosuggestion是oh-my-szh的一个插件,作用基本上是根据历史输入指令的记录即时的提示,能够很大的提高效率。

配合Mac端安装shell神器 oh-my-zsh食用效果更佳。

1.安装

git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions

2.配置

vim ~/.zshrc

#找到plugins=(git)这一行,然后再添加zsh-autosuggestions
plugins=(
  git zsh-autosuggestions
)

source ~/zshrc更新一下你的zsh配置

接下来就可以看看zsh-autosuggestion插件的使用效果了

阅读全文

oh-my-zsh是什么不用多解释,百度一下就知道了,如果你觉得Mac下的终端功能太局限,不足以满足你的各种奇怪的需求,就找Oh-myzsh吧。

1.安装

curl -L https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh | sh 

2.创建配置文件

cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

3.设置zsh为默认shell

chsh -s /bin/zsh

至此,oh-my-zsh已经安装完成,现在重新打开shell终端试试看吧。 ~/.oh-my-zsh/themes有很多好看的主题,https://github.com/robbyrussell/oh-my-zsh/wiki/themes 也可以下载

我使用的是agnoster主题, ~/.zshrc修改配置

source ~/zshrc更新一下你的zsh配置

当然,用上这个主题可能会出现乱码,官网已经提出了修复方式: https://github.com/robbyrussell/oh-my-zsh/wiki/Themes#agnoster

我们需要安装字体:

git clone https://github.com/powerline/fonts.git --depth=1
cd fonts
./install.sh

这里我用的是终端工具是Iterm2,需要修改一下配置: Perferences -> Profiles -> Default -> Text -> ChangeFont

这时候再重新打开你的终端,就可以使用oh-my-zsh并看上去美美哒了~!

参考地址:

阅读全文

Bing每日壁纸介绍:作为一款搜索引擎,必应首页图片给人一种焕然一新的感觉,相较于其它搜索引擎仅在节日或纪念日才更换首页LOGO或背景图,每日一换的必应首页美图让人记忆尤新,bing网站每天会更新一张不同的精选图片.

blog.mrabit.com/bing/today 会自动同步更新 http://cn.bing.com 网站每天更新的图片,提供必应每日壁纸预览.

图片地址设置为: //blog.mrabit.com/bing/today

必应每日图片

即可

图片来源: http://cn.bing.com

阅读全文