$utils使用全指南----持续更新

简介: 顾名思义:$utils是基于Jquery的拓展工具函数库,是本人封装的一些常用且实用的方法。 在此只列出使用方式,源码不公开。1. $.createSelect(数组)------创建选择型表单:返回:该选择型表单的jQuery对象let $s1 = $.
顾名思义:$utils是基于Jquery的拓展工具函数库,是本人封装的一些常用且实用的方法。  
在此只列出使用方式,源码不公开。

1. $.createSelect(数组)------创建选择型表单:

返回:该选择型表单的jQuery对象

let $s1 = $.createSelect(["start", "end", "center"]);
$.createSelect

2.$el.inWindow(x占份数,y占份数)------将浏览器显示窗宽高分别分为100份,让控件中心在相应份数上:

$s1.inWindow(50,50);//让上一步的$s1(中心)位置在屏幕宽高各50份处
inWindow

3.$.onSizeChange(callback)------浏览器尺寸变化时回调:

    $.onSizeChange(function () {//这样当浏览器视窗变化,$s1都会自动处于中心位置
        $s1.inWindow(50, 50);
    })
onSizeChange.png

4. $s1.autoInWin(占份数,y占份数)------如果比较懒(比如me),那么2+3综合即此方法

 $s1.autoInWin(50, 50);
注:提供链式调用,你可以这样使用:一句长代码便可实现创建,定位,取值
    $.createSelect(["start", "end", "center"])
        .autoInWin(45, 5)
        .on("input", function () {
            var value=($(this).val());
        })

5.$el.createText:在某个标签下加上svg文字!

返回设置文字的函数

//左顶点为100,100处创建#6D6AFB颜色的文字"toly1994.com"
    $('body').createText({
        str: "toly1994.com",
        font: 15,
        color: "#6D6AFB",
        x: 100,
        y: 100,
    });
$el.createText.png

相关文章
|
移动开发 小程序 JavaScript
uVeiw Parse 富文本解析器
uVeiw Parse 富文本解析器
250 1
|
JavaScript
vue elementUI select下拉框设置默认值
vue elementUI select下拉框设置默认值
1900 0
|
JavaScript 前端开发 jenkins
【前端】vue项目打包Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest解决方案
【前端】vue项目打包Browserslist: caniuse-lite is outdated. Please run: npx update-browserslist-db@latest解决方案
2843 0
|
资源调度 Apache 容器
Vue3使用echarts树图(tree)
本文介绍了如何在 Vue2 项目中使用 Echarts 实现树图(tree)功能。通过按需引入 Echarts 组件和相关依赖,文章详细展示了如何创建一个可自定义配置的树图组件 `TreeChart.vue`,包括树图数据源、容器尺寸、主题色等属性。此外,还提供了在线预览效果及代码示例,帮助读者快速实现树图功能。适用于需要展示层次结构数据的场景。
1278 1
Vue3使用echarts树图(tree)
|
数据可视化 JavaScript
Vue3项目使用G6可视化组件实现一个树形机构图
在Vue 3项目中使用G6可视化组件库实现树形机构图的构建和展示。
2644 1
Vue3项目使用G6可视化组件实现一个树形机构图
|
JavaScript
iframe的父子页面通信
iframe的父子页面通信
326 6
|
JavaScript
VUE——如何兼容IE9|IE10|IE11浏览器
VUE——如何兼容IE9|IE10|IE11浏览器
290 0
VUE——如何兼容IE9|IE10|IE11浏览器
|
JavaScript 开发者
在Vue中引入Message,弹窗提示错误信息
这篇文章讲述了在Vue CLI项目中如何处理异常,通过引入Message组件实现弹窗提示错误信息,帮助开发者排查和解决webpack等问题。
|
前端开发
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
css 实用技巧 —— 文字和图标垂直居中对齐(四种方法)
2873 1
|
前端开发 JavaScript
如何在文本域右下角设置字数限制提示
如何在文本域右下角设置字数限制提示
430 3