<!-- 工具栏：便签按钮 -->
<template>
    <span title="便签" class="tool-fox" @click="openNote()">
        <el-icon class="note-icon"><el-icon-Edit /></el-icon>
    </span>
</template>

<script setup name="nav-tool-note">
// 打开便签
const openNote = function() {
    var w = (document.body.clientWidth * 0.4) + 'px';
    var h = (document.body.clientHeight * 0.6) + 'px';
    var default_content = '一个简单的小便签, 关闭浏览器后再次打开仍然可以加载到上一次的记录, 你可以用它来记录一些临时资料';
    var value = localStorage.getItem('sa_admin_note') || default_content;
    var index = layer.prompt({
        title: '一个小便签',
        value: value,
        formType: 2,
        area: [w, h],
        btn: ['保存'],
        maxlength: 99999999,
        skin: 'layer-note-class'
    }, function(pass, index){
        layer.close(index)
    });
    var se = '#layui-layer' + index + ' .layui-layer-input';
    var d = document.querySelector(se);
    d.oninput = function() {
        localStorage.setItem('sa_admin_note', this.value);
    }
};

</script>

<style scoped>
  .note-icon{

  }
</style>

<style>

/* 去除掉便签的大边框 */
.layer-note-class .layui-layer-input {
  outline: 0;
  box-shadow: none !important;
  padding: 0.8em !important;
  font-family: 'Times New Roman', Times, serif;
  border: 0px #ddd solid;
  border-bottom: 1px #ddd solid;
}

</style>
