util 封装合集(按需使用)

/**
 * 解析url参数
 * 例: url(https://www.baidu.com?username=xiaoming&password=123&token=456)
 * 解析后: {username:'xiaoming', password:'123', token: '456'}
 * @param url url格式的字符串
 * @return {{}}
 */
export function parseUrl(url) {
    let param = {};
    let reg = /(?:\?|&)([^?&=]+)=([^?&=#]+)/g;
    let match = url.match(reg);
    match.forEach((item) => {
        let arr = item.slice(1).split(/=/g);
        param[arr[0]] = arr[1]
    });
    return param
}

/**
 * 超出文本处理
 * @param  {String,Number} (val, lang)
 * @returns
 */
// eslint-disable-next-line consistent-return
export function getContent(val, lang) {
  if (String(val).length > lang) {
    return `${String(val).substring(0, lang - 1)}...`;
  }

  return val;
}

/**
 * 通过url下载文件
 * @param {string} url
 * @param {string} fileName 可选参数
 */
export function downloadFileByUrl(url, fileName) {
  const suffix = extname(url);
  let name = fileName;

  const a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;

  // name 没有传递,生成默认文件名
  if (!name) {
    name = `${Date.now()}${suffix}`;
  }
  // 从url中没有解析到文件后缀,尝试从用户传递的文件名中解析出文件后缀
  if (!suffix) {
    name = `${name}${extname(name)}`;
  }

  a.setAttribute('download', name);
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue 中,我们可以通过自定义指令的方式来封装一个公共的 `oninput` 工具函数。 1. 在项目中创建一个新的文件夹,例如 directives,用于存放自定义指令的代码。 2. 在 directives 文件夹中创建一个新的文件,例如 `oninput.js`,用于编写 `oninput` 指令的代码。 3. 在 `oninput.js` 中定义 `oninput` 指令的行为: ```javascript export const oninput = { mounted(el, binding) { el.oninput = (event) => { binding.value(event.target.value); }; }, updated(el, binding) { el.value = binding.value; }, }; ``` 在上面的代码中,我们定义了 `oninput` 指令的两个钩子函数,分别是 `mounted` 和 `updated`。`mounted` 钩子函数在指令绑定到元素上时调用,用于绑定 `oninput` 事件处理器,并在输入内容发生变化时触发 `binding.value` 函数。`updated` 钩子函数在指令所在的组件更新后调用,用于更新输入框的值。 4. 在使用 `oninput` 指令的组件中,通过以下方式引入: ```javascript import { oninput } from '@/directives/oninput.js'; ``` 5. 在组件的 `directives` 选项中注册 `oninput` 指令: ```javascript export default { directives: { oninput, }, methods: { handleInput(value) { console.log(value); }, }, template: ` <input v-oninput="handleInput"> `, }; ``` 在上面的代码中,我们在组件的 `directives` 选项中注册了 `oninput` 指令,并在模板中使用 `v-oninput` 指令将 `handleInput` 函数绑定到输入框上。当输入框的值发生变化时,`handleInput` 函数会被调用,传入输入框的值。 通过以上步骤,我们就可以封装一个公共的 `oninput` 工具函数,并在使用的组件中引入和注册。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值