Content Table
2016-11-08

Vue 使用 v-for 和设置属性及事件处理

Vue 中使用 v-for 遍历数组，设置属性使用指令 v-bind，输入和数据绑定用 v-model，事件处理则用 v-on。

插值时需要用 { { } }，但是使用指令时不用，指令用 v- 作为前缀，例如

  • v-for
  • v-if
  • v-show
  • v-bind
  • v-on: v-on:click="say" or v-on:click="say('参数', $event)"

v-bind 和 v-on 有简写形式 : 和 @

  • 例如设置属性 data-name 使用指令 v-bind:data-name，其简写为 :data-name
  • 点击事件使用 v-on:click，其简写为 @click

事件修饰符

  • .stop 阻止冒泡，调用 event.stopPropagation()
  • .prevent 阻止默认事件，调用 event.preventDefault()
  • .capture 添加事件侦听器时使用事件捕获模式
  • .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
  • .once 事件只触发一次

阅读全文

2016-11-08

鼠标放到 View 的 item 上时显示 tool tip 

1
2
3
4
5
6
7
8
9
10
11
12
// [1] View 需要启用 mouse tracking
ui->listView->setMouseTracking(true); 

// [2] 处理 mouse enter 事件
connect(ui->listView, &QListView::entered, [] (const QModelIndex &index) {
    if (!index.isValid()) {
        qDebug() << "Invalid index";
        return;
    }

    QToolTip::showText(QCursor::pos(), index.data(Qt::UserRole + 1).toString());
});
2016-11-07

Vue-ArtTemplate-jQuery 一起使用

Vue 和 ArtTemplate 绑定数据的格式都是一样的 { { } }，但是 Vue 有个缺点，例如使用类选择器选择 element 时，只有第一个匹配的 element 会生效，ArtTemplate 能做到，当然 ArtTemplate 不是 MVVM 模式的，所以 Vue 的优点也是 ArtTemplate 不能比的，所以把它们一起结合起来灵活使用看起来不错。

不过，Vue 连 IE 8 都不兼容，移动端还好，PC 端的很多业务还是不能用 Vue 的，做做管理端的功能还行。

阅读全文

2016-11-06

自定义 QListView

使用 QListView 实现如图效果:

  • 多行文本
  • 显示图标
  • 文本在图标下面
  • HTML 格式的 Tool Tip
  • 可以固定每个 item 的大小
  • 窗口大小变化时每行显示的 item 数自动调整

阅读全文

2016-11-05

QSS 实现的扁平滚动条

使用 QSS 实现扁平滚动条，只有几个简单的颜色，并且去掉了箭头，圆角等，尽量的简约，简约而不简单

  • 滚动条的背景色
  • handle 的背景色
  • 鼠标放到 handle 上的背景色

阅读全文

2016-11-02

HttpServletResponse 返回图片 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
@GetMapping("/image/foo.jpg")
public void enrollRegPhoto(HttpServletResponse response) {
    InputStream in = null;
    OutputStream out = null;

    try {
        response.setContentType("image/png"); // 如果是 jpg 则为 image/jpeg，svg 为 image/svg+xml 等
        in = new FileInputStream("/imageDir/foo.jpg");
        out = response.getOutputStream();
        IOUtils.copy(in, out);
    } catch (Exception ex) {
        logger.warn(ex.getMessage());
    } finally {
        IOUtils.closeQuietly(in);
        IOUtils.closeQuietly(out);
    }
}
2016-10-31

JS 关闭当前标签页 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function closeWindow() {
    var browserName = navigator.appName;
    var browserVer = parseInt(navigator.appVersion);

    if (browserName == "Microsoft Internet Explorer") {
        var ie7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false;
        if (ie7) {
            // This method is required to close a window without any prompt for IE7 & greater versions.
            window.open('', '_parent', '');
            window.close();
        } else {
            // This method is required to close a window without any prompt for IE6
            this.focus();
            self.opener = this;
            self.close();
        }
    } else {
        // For NON-IE Browsers except Firefox which doesnt support Auto Close
        try {
            this.focus();
            self.opener = this;
            self.close();
        } catch (e) {

        }

        // For Firefox
        try {
            window.location.replace("about:blank");
        } catch (e) {

        }
    }
}
2016-10-21

时间选择器 Laydate

LayDate 包含了

  • 日期范围限制
  • 开始日期设定
  • 自定义日期格式
  • 时间戳转换
  • 当天的前后若干天返回
  • 时分秒选择
  • 智能响应
  • 自动纠错
  • 节日识别
  • 快捷键操作

阅读全文

2016-10-20

解析身份证

身份证号码有 15 位和 18 位的，下面解释 18 位身份证号码不同部分数子的含意:

  1. 前 1、2 位数字表示：所在省份的代码
  2. 第 3、4 位数字表示：所在城市的代码
  3. 第 5、6 位数字表示：所在区县的代码
  4. 第 7~14 位数字表示：出生年、月、日
  5. 第 15、16 位数字表示：所在地的派出所的代码(也有说不是，如图)
  6. 第 17 位数字表示性别：奇数表示男性，偶数表示女性
  7. 第 18 位数字是校检码：也有的说是个人信息码，用来检验身份证的正确性。校检码可以是 0~9 的数字，有时也用 x 表示(尾号是10，那么就得用 x 来代替)，一般是随计算机的随机产生

阅读全文

2016-10-19

Lean Modal

LeanModal 是一个用于创建模式对话框的超级简单 jQuery插件。可以展示隐藏的页面内容，整个插件大小只有不到 1K，可灵活变化高度和宽度，没有用到任何图片，支持在一个页面中创建多个实例，非常适合于创建：登录框，注册框，警告对话框等。

阅读全文