fragments

发表于 | 分类于 | 阅读 次
一些碎片

百度地图控件偏移

1
2
3
4
5
6
7
8
9
10
11
12
13
let map = new BMap.Map('allmapTwo');

let mapType = new BMap.MapTypeControl(
	{
		mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP],
        // anchor: BMAP_ANCHOR_TOP_LEFT
	}
);
mapType.setAnchor(BMAP_ANCHOR_TOP_LEFT)  //控件位置
mapType.setOffset(new BMap.Size(330, 10))  //控件偏移


map.addControl(mapType1);

element previewSrcList 开启预览大图的功能

1
2
3
4
5
6
7
8
<el-image-viewer
    v-if="showViewer"
    style="width: 100%;height:600px;position: relative;"
    :on-close="closeViewer"
    :url-list="srcList" />


<el-button @click="onPreview">查看图片</el-button>
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
<script>
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    export default{
        name: 'preview',
        data(){
            return {
                showViewer: false,
                srcList: [
                    'url1',
                    'url2',
                    'url3'
                ]
            }
        },
        components: {
            ElImageViewer
        },
        methods: {
            onPreview() {
             this.showViewer = true
            },
            closeViewer() {
             this.showViewer = false
            },
        }

    }
</script>

element Popover使用

1
2
3
4
5
6
7
8
9
10
<img src="按钮图标.png" v-popover:popover1>
<el-popover
    placement="bottom-start"
    ref="popover1"
    width="225"
    trigger="hover">

    <!-- img要放在div里 -->
    <div><img src="弹框里的图片.jpg" slot="reference"></div>
</el-popover>

vue 箭头函数使用注意

不要在选项属性或回调上使用箭头函数，例如：

1
created: () => console.log(this.a)

或

1
vm.$watch('a', newValue => this.myMethod())

因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止。
vue文档

vue 模板语法插值使用javascript表达式

vue中所有的数据绑定都支持javascript表达式：

1
2
3
4
5
6
7
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

每个绑定都只能包含单个表达式，所以下面的例子都不会生效：

1
2
3
4
5
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

vue文档

JS中的逻辑运算符 &&、||，位运算符 |， &

  • 在js逻辑运算中， 0、''、null、undefined、NaN、false会判断为false，其他都是true。

  • ||
    只要 || 前面为false，不管 || 后面是true还是false，都返回 || 后面的值；
    只要 || 前面为true，不管 || 后面是true还是false，都返回 || 前面的值。

  • &&
    只要 && 前面是false，不管 &&后面是true还是false，都返回 && 前面的值；
    只要 && 前面是true，不管 && 后面是true还是false，都返回 && 后面的值。

  • |
    转为二进制运算，两个位只要有一个为1，结果为1，否则为0
    例如：3|4 3的二进制为 011，4的二进制为 100， 011 | 100 结果为 111 ，即7

  • &
    转为二进制运算，两个位同时为1得1，只要一个为0得0
    例如：3&4 3的二进制为 011，4的二进制为 100， 011 &100 结果为 000 ，即0

promise中reject和catch

  • reject 后的东西，一定会进入 then 中的第二个回调，如果 then 中没有写第二个回调，则进入 catch
  • resolve 的东西，一定会进入 then 的第一个回调，肯定不会进入 catch
  • throw new Error 和 reject 一样，但是他俩只有一个会发生
  • 网络异常会直接进入 then 的第二个回调，肯定不会进入 catch
  • reject 函数的作用是，将 Promise 对象的状态从未完成变成失败（即从pending变为reject），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去
  • then 方法指定的回调函数，如果运行中抛出错误，也会被 catch 方法捕获

原文