一个基于vue3+ts+vite的网页标尺辅助线工具

预览图像

如何使用

安装

npm i vue3-ruler-tool

导入

import { Vue3RulerTool } from 'vue3-ruler-tool'
import 'vue3-ruler-tool/dist/style.css'
export default defineComponent({
  components: {
    Vue3RulerTool
  },
  setup() {
    let presetLine = ref([{ type: 'h', site: 200 }, { type: 'v', site: 100 }]);
    let visible = ref(true);
    const input = (list: any) => {
      presetLine.value = list;
    };
    return { presetLine, visible, input }
  },
})

页面

<vue3-ruler-tool :value="presetLine"
        :step-length="50"
        :parent="true"
        :is-scale-revise="true"
        :visible.sync="visible"
        @input="input">
	<div>我是内容</div>
</vue3-ruler-tool>

预览地址

https://rulertool.yaolunmao.top/

代码源于https://github.com/gorkys/vue-ruler-tool，只是改写成了vue3版本，并没有修复bug。。。。