☰

bsn-utilities

工具箱

当前为 2024-01-30 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/486039/1319685/bsn-utilities.js 

  1. // 随眠
  2. function sleep(time) {
  3.   return new Promise(resolve => setTimeout(resolve, time))
  4. }
  5. // 获取粘贴板文字
  6. async function getClipboardText() {
  7.   if (navigator.clipboard && navigator.clipboard.readText) {
  8.     const text = await navigator.clipboard.readText();
  9.     return text;
  10.   }
  11.   return "";
  12. }
  13. // 在HTML_ELEMENT中查找所有满足条件的元素，参数innerText可以是字符串(判断innerText是否相等)或REG
  14. function findAllIn(ele, selectors, innerText) {
  15.   const arr = Array.from(ele.querySelectorAll(selectors));
  16.   return innerText === undefined
  17.     ? arr
  18.     : typeof innerText === "string"
  19.       ? arr.filter(x => x.innerText.trim() === innerText.trim())
  20.       : arr.filter(x => x.innerText.trim().match(innerText));
  21. }
  22. // 在HTML_ELEMENT中查找第一个满足条件的元素，参数innerText可以是字符串(判断innerText是否相等)或REG
  23. function findIn(ele, selectors, innerText) {
  24.   const arr = findAllIn(ele, selectors, innerText);
  25.   return arr.length > 0 ? arr[0] : null;
  26. }
  27. // 在document中查找所有满足条件的元素，参数innerText可以是字符串(判断innerText是否相等)或REG
  28. function findAll(selectors, innerText) {
  29.   return findAllIn(document, selectors, innerText);
  30. }
  31. // 在document中查找第一个满足条件的元素，参数innerText可以是字符串(判断innerText是否相等)或REG
  32. function find(selectors, innerText) {
  33.   return findIn(document, selectors, innerText);
  34. }
  35. // 选择下拉选项，input为下拉选项元素，wait为等待时间，optionClass为选项的类别，matchFunc为匹配函数(满足条件后触发点击操作)
  36. async function selectOption(input, wait, optionClass, matchFunc) {
  37.   input.click();
  38.   await sleep(wait);
  39.   const optionEles = findAll(optionClass);
  40.   const option = optionEles.find(x => matchFunc(x.innerText));
  41.   if (option) {
  42.     option.click();
  43.   }
  44. }
  45. // 创建naive对话框，增加异步功能，只能在组件的setup函数里调用
  46. function createNaiveDialog() {
  47.   const dialog = naive.useDialog();
  48.   ["create", "error", "info", "success", "warning"].forEach(x => {
  49.     dialog[x + "Async"] = options => {
  50.       return new Promise((resolve,reject) => {
  51.         dialog[x]({
  52.           ...options,
  53.           onNegativeClick: () => resolve(false),
  54.           onPositiveClick: () => resolve(true)
  55.         });
  56.       });
  57.     }
  58.   });
  59. }
  60. // 初始化Vue3，包括naive及自定义BTable组件
  61. function initVue3(Com) {
  62.   const el = document.createElement("div");
  63.   el.innerHTML = `
  64. <div id="app" class="app-wrapper">
  65.   <n-dialog-provider>
  66.     <n-message-provider>
  67.       <n-button class="btn-toggle" type="primary" round @click="toggle">
  68.         <template #icon>⇆</template>
  69.       </n-button>
  70.     <n-drawer v-model:show="showDrawer" resizable class="drawer-wrapper">
  71.       <com @closeDrawer="showDrawer=false"/>
  72.     </n-drawer>
  73.     </n-message-provider>
  74.   </n-dialog-provider>
  75. </div>`;
  76.   document.body.append(el);
  77.  
  78. const BTable = {
  79.   template: `
  80. <table cellspacing="0" cellpadding="0">
  81.   <tr v-for="(row, rowIndex) in rows">
  82.     <td v-for="cell in row" :rowspan="cell.rowspan" :colspan="cell.colspan" :width="cell.width" :class="cell.class">
  83.       <slot :cell="cell">{{cell.value}}</slot>
  84.     </td>
  85.   </tr>
  86. </table>
  87.   `,
  88.   props: {
  89.     rowCount: Number,
  90.     columns: Array, // [{ key: "", label: "", width: "100px", unit: "", editable: false }]
  91.     cells: Array // [{ row: 0, col: 0, rowspan: 1, colspan: 1, value: "", useColumnLabel: false }]
  92.   },
  93.   setup(props) {
  94.     const data = Vue.reactive({
  95.       rows: Vue.computed(() => {
  96.         const arr1 = [];
  97.         for(let i = 0; i < props.rowCount; i++) {
  98.           const arr2 = [];
  99.           for (let j = 0; j < props.columns.length; j++) {
  100.             const column = props.columns[j];
  101.             const cell = props.cells.find(x => x.row === i && x.col === j);
  102.             if (cell) {
  103.               const colspan = cell.colspan ?? 1;
  104.               arr2.push({
  105.                 ...cell,
  106.                 rowspan: cell.rowspan ?? 1,
  107.                 colspan: colspan,
  108.                 value: cell.useColumnLabel ? column.label : cell.value,
  109.                 width: colspan > 1 ? undefined : column.width,
  110.                 column: column
  111.               });
  112.             }
  113.           }
  114.           arr1.push(arr2);
  115.         }
  116.         return arr1;
  117.       })
  118.     });
  119.     return data;
  120.   }
  121. }
  122.   const app = Vue.createApp({});
  123.   app.use(naive);
  124.   app.component('b-table', BTable);
  125.   app.component('com', Com);
  126.   app.mount("#app");
  127. }