Vue.component('map-setting-card', {
    template: `
    <div>
        <div>
              <div class="block">
                <span>地图比例 {{ zoom }}%</span>
                <el-slider v-model="zoom" @change="zoomChange" :min="1"></el-slider>
              </div>
        </div>
    </div>
    `,
    props: ['param'],
    data() {
        return {
            zoom: 70
        }
    },
    created() {

    },
    watch: {
        param: {
            handler(newVal, oldVal) {

            },
            deep: true,       // 深度监听嵌套属性
            immediate: true   // 立即触发一次（可选）
        }
    },
    created() {
        let cache= localStorage.getItem("mapZoom");
        if (cache != null) {
            this.zoom = parseInt(cache)
            this.param.zoom = this.zoom
        }
    },
    methods: {
        zoomChange() {
            this.param.zoom = this.zoom
            localStorage.setItem("mapZoom", this.zoom);
        }
    }
});