從0搭建vue3組件庫: Input組件

来源:https://www.cnblogs.com/zdsdididi/archive/2022/11/11/16880256.html
-Advertisement-
Play Games

本篇文章將為我們的組件庫添加一個新成員:Input組件。其中Input組件要實現的功能有: 基礎用法 禁用狀態 尺寸大小 輸入長度 可清空 密碼框 帶Icon的輸入框 文本域 自適應文本高度的文本域 複合型輸入框 每個功能的實現代碼都做了精簡,方便大家快速定位到核心邏輯,接下來就開始對這些功能進行一 ...


本篇文章將為我們的組件庫添加一個新成員:Input組件。其中Input組件要實現的功能有:

  • 基礎用法
  • 禁用狀態
  • 尺寸大小
  • 輸入長度
  • 可清空
  • 密碼框
  • 帶Icon的輸入框
  • 文本域
  • 自適應文本高度的文本域
  • 複合型輸入框

每個功能的實現代碼都做了精簡,方便大家快速定位到核心邏輯,接下來就開始對這些功能進行一一的實現。

基礎用法

首先先新建一個input.vue文件,然後寫入一個最基本的input輸入框

<template>
  <div class="k-input">
    <input class="k-input__inner" />
  </div>
</template>

然後在我們的 vue 項目examples下的app.vue引入Input組件

<template>
  <div class="Shake-demo">
    <Input />
  </div>
</template>
<script lang="ts" setup>
import { Input } from "kitty-ui";
</script>

此時頁面上便出現了原生的輸入框,所以需要對這個輸入框進行樣式的添加,在input.vue同級新建style/index.less,Input樣式便寫在這裡

.k-input {
  font-size: 14px;
  display: inline-block;
  position: relative;

  .k-input__inner {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: none;
    padding: 0 15px;
    width: 100%;
    &::placeholder {
      color: #c2c2ca;
    }

    &:hover {
      border: 1px solid #c0c4cc;
    }

    &:focus {
      border: 1px solid #409eff;
    }
  }
}

image.png

接下來要實現Input組件的核心功能:雙向數據綁定。當我們在 vue 中使用input輸入框的時候,我們可以直接使用v-model來實現雙向數據綁定,v-model其實就是value @input結合的語法糖。而在 vue3 組件中使用v-model則表示的是modelValue @update:modelValue的語法糖。比如Input組件為例

<Input v-model="tel" />

其實就是

<Input :modelValue="tel" @update:modelValue="tel = $event" />

所以在input.vue中我們就可以根據這個來實現Input組件的雙向數據綁定,這裡我們使用setup語法

<template>
  <div class="k-input">
    <input
      class="k-input__inner"
      :value="inputProps.modelValue"
      @input="changeInputVal"
    />
  </div>
</template>
<script lang="ts" setup>
//組件命名
defineOptions({
  name: "k-input",
});
//組件接收的值類型
type InputProps = {
  modelValue?: string | number;
};

//組件發送事件類型
type InputEmits = {
  (e: "update:modelValue", value: string): void;
};

//withDefaults可以為props添加預設值等
const inputProps = withDefaults(defineProps<InputProps>(), {
  modelValue: "",
});
const inputEmits = defineEmits<InputEmits>();

const changeInputVal = (event: Event) => {
  inputEmits("update:modelValue", (event.target as HTMLInputElement).value);
};
</script>

GIF333.gif

到這裡基礎用法就完成了,接下來開始實現禁用狀態

禁用狀態

這個比較簡單,只要根據props的disabled來賦予禁用類名即可

<template>
  <div class="k-input" :class="styleClass">
    <input
      class="k-input__inner"
      :value="inputProps.modelValue"
      @input="changeInputVal"
      :disabled="inputProps.disabled"
    />
  </div>
</template>
<script lang="ts" setup>
//...
type InputProps = {
  modelValue?: string | number;
  disabled?: boolean;
};
//...

//根據props更改類名
const styleClass = computed(() => {
  return {
    "is-disabled": inputProps.disabled,
  };
});
</script>

然後給is-disabled寫些樣式

//...

.k-input.is-disabled {
  .k-input__inner {
    background-color: #f5f7fa;
    border-color: #e4e7ed;
    color: #c0c4cc;
    cursor: not-allowed;
    &::placeholder {
      color: #c3c4cc;
    }
  }
}

image.png

尺寸

按鈕尺寸包括medium,small,mini,不傳則是預設尺寸。同樣的根據props的size來賦予不同類名

const styleClass = computed(() => {
  return {
    "is-disabled": inputProps.disabled,
    [`k-input--${inputProps.size}`]: inputProps.size,
  };
});

然後寫這三個類名的不同樣式

//...
.k-input.k-input--medium {
  .k-input__inner {
    height: 36px;
    &::placeholder {
      font-size: 15px;
    }
  }
}

.k-input.k-input--small {
  .k-input__inner {
    height: 32px;

    &::placeholder {
      font-size: 14px;
    }
  }
}

.k-input.k-input--mini {
  .k-input__inner {
    height: 28px;

    &::placeholder {
      font-size: 13px;
    }
  }
}

繼承原生 input 屬性

原生的input有type,placeholder等屬性,這裡可以使用 vue3 中的useAttrs來實現props穿透.子組件可以通過v-bind將props綁定

<template>
  <div class="k-input" :class="styleClass">
    <input
      class="k-input__inner"
      :value="inputProps.modelValue"
      @input="changeInputVal"
      :disabled="inputProps.disabled"
      v-bind="attrs"
    />
  </div>
</template>
<script lang="ts" setup>
//...

const attrs = useAttrs();
</script>

可清空

通過clearable屬性、Input的值是否為空以及是否滑鼠是否移入來判斷是否需要顯示可清空圖標。圖標則使用組件庫的Icon組件

<template>
  <div
    class="k-input"
    @mouseenter="isEnter = true"
    @mouseleave="isEnter = false"
    :class="styleClass"
  >
    <input
      class="k-input__inner"
      :disabled="inputProps.disabled"
      v-bind="attrs"
      :value="inputProps.modelValue"
      @input="changeInputVal"
    />
    <div
      @click="clearValue"
      v-if="inputProps.clearable && isClearAbled"
      v-show="isFoucs"
      class="k-input__suffix"
    >
      <Icon name="error" />
    </div>
  </div>
</template>
<script setup lang="ts">
//...
import Icon from "../icon/index";
//...
//雙向數據綁定&接收屬性
type InputProps = {
  modelValue?: string | number;
  disabled?: boolean;
  size?: string;
  clearable?: boolean;
};
//...
const isClearAbled = ref(false);
const changeInputVal = (event: Event) => {
  //可清除clearable
  (event.target as HTMLInputElement).value
    ? (isClearAbled.value = true)
    : (isClearAbled.value = false);

  inputEmits("update:modelValue", (event.target as HTMLInputElement).value);
};

//清除input value
const isEnter = ref(true);
const clearValue = () => {
  inputEmits("update:modelValue", "");
};
</script>

清除圖標部分 css 樣式

.k-input__suffix {
  position: absolute;
  right: 10px;
  height: 100%;
  top: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #c0c4cc;
}

image.png

密碼框 show-password

通過傳入show-password屬性可以得到一個可切換顯示隱藏的密碼框。這裡要註意的是如果傳了clearable則不會顯示切換顯示隱藏的圖標

<template>
  <div
    class="k-input"
    @mouseenter="isEnter = true"
    @mouseleave="isEnter = false"
    :class="styleClass"
  >
    <input
      ref="ipt"
      class="k-input__inner"
      :disabled="inputProps.disabled"
      v-bind="attrs"
      :value="inputProps.modelValue"
      @input="changeInputVal"
    />
    <div class="k-input__suffix" v-show="isShowEye">
      <Icon @click="changeType" :name="eyeIcon" />
    </div>
  </div>
</template>
<script setup lang="ts">
//...
const attrs = useAttrs();

//...

//顯示隱藏密碼框 showPassword
const ipt = ref();
Promise.resolve().then(() => {
  if (inputProps.showPassword) {
    ipt.value.type = "password";
  }
});
const eyeIcon = ref("browse");
const isShowEye = computed(() => {
  return (
    inputProps.showPassword && inputProps.modelValue && !inputProps.clearable
  );
});
const changeType = () => {
  if (ipt.value.type === "password") {
    eyeIcon.value = "eye-close";
    ipt.value.type = attrs.type || "text";
    return;
  }
  ipt.value.type = "password";
  eyeIcon.value = "browse";
};
</script>

這裡是通過獲取input元素,然後通過它的type屬性進行切換,其中browse和eye-close分別是Icon組件中眼睛開與閉,效果如下

password.gif

帶 Icon 的輸入框

通過prefix-icon和suffix-icon 屬性可以為Input組件添加首尾圖標。

可以通過計算屬性判斷出是否顯示首尾圖標,防止和前面的clearable和show-password衝突.這裡代碼做了

<template>
  <div class="k-input">
    <input
      ref="ipt"
      class="k-input__inner"
      :class="{ ['k-input--prefix']: isShowPrefixIcon }"
      :disabled="inputProps.disabled"
      v-bind="attrs"
      :value="inputProps.modelValue"
      @input="changeInputVal"
    />

    <div class="k-input__prefix" v-if="isShowPrefixIcon">
      <Icon :name="inputProps.prefixIcon" />
    </div>
    <div class="k-input__suffix no-cursor" v-if="isShowSuffixIcon">
      <Icon :name="inputProps.suffixIcon" />
    </div>
  </div>
</template>
<script setup lang="ts">
//...
type InputProps = {
  prefixIcon?: string;
  suffixIcon?: string;
};

//...

//帶Icon輸入框
const isShowSuffixIcon = computed(() => {
  return (
    inputProps.suffixIcon && !inputProps.clearable && !inputProps.showPassword
  );
});
const isShowPrefixIcon = computed(() => {
  return inputProps.prefixIcon;
});
</script>

相關樣式部分

.k-input__suffix,
.k-input__prefix {
  position: absolute;
  right: 10px;
  height: 100%;
  top: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #c0c4cc;
  font-size: 15px;
}

.no-cursor {
  cursor: default;
}

.k-input--prefix.k-input__inner {
  padding-left: 30px;
}

.k-input__prefix {
  position: absolute;
  width: 20px;
  cursor: default;
  left: 10px;
}

在app.vue中使用效果如下

<template>
  <div class="input-demo">
    <Input v-model="tel" suffixIcon="edit" placeholder="請輸入內容" />

    <Input v-model="tel" prefixIcon="edit" placeholder="請輸入內容" />
  </div>
</template>
<script lang="ts" setup>
import { Input } from "kitty-ui";
import { ref } from "vue";
const tel = ref("");
</script>
<style lang="less">
.input-demo {
  width: 200px;
}
</style>

image.png

文本域

將type屬性的值指定為textarea即可展示文本域模式。它綁定的事件以及屬性和input基本一樣

<template>
  <div class="k-textarea" v-if="attrs.type === 'textarea'">
    <textarea
      class="k-textarea__inner"
      :style="textareaStyle"
      v-bind="attrs"
      ref="textarea"
      :value="inputProps.modelValue"
      @input="changeInputVal"
    />
  </div>
  <div
    v-else
    class="k-input"
    @mouseenter="isEnter = true"
    @mouseleave="isEnter = false"
    :class="styleClass"
  >
    ...
  </div>
</template>

樣式基本也就是focus,hover改變 border 顏色

.k-textarea {
  width: 100%;

  .k-textarea__inner {
    display: block;
    padding: 5px 15px;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    color: #606266;
    background-color: #fff;
    background-image: none;
    border: 1px solid #dcdfe6;
    border-radius: 4px;

    &::placeholder {
      color: #c2c2ca;
    }

    &:hover {
      border: 1px solid #c0c4cc;
    }

    &:focus {
      outline: none;
      border: 1px solid #409eff;
    }
  }
}

image.png

可自適應高度文本域

組件可以通過接收autosize屬性來開啟自適應高度,同時autosize也可以傳對象形式來指定最小和最大行高

type AutosizeObj = {
    minRows?: number
    maxRows?: number
}
type InputProps = {
    autosize?: boolean | AutosizeObj
}

具體實現原理是通過監聽輸入框值的變化來調整textarea的樣式,其中用到了一些原生的方法譬如window.getComputedStyle(獲取原生css對象),getPropertyValue(獲取css屬性值)等,所以原生js忘記的可以複習一下

...
const textareaStyle = ref<any>()
const textarea = shallowRef<HTMLTextAreaElement>()
watch(() => inputProps.modelValue, () => {
    if (attrs.type === 'textarea' && inputProps.autosize) {
        const minRows = isObject(inputProps.autosize) ? (inputProps.autosize as AutosizeObj).minRows : undefined
        const maxRows = isObject(inputProps.autosize) ? (inputProps.autosize as AutosizeObj).maxRows : undefined
        nextTick(() => {
            textareaStyle.value = calcTextareaHeight(textarea.value!, minRows, maxRows)
        })
    }

}, { immediate: true })

其中calcTextareaHeight為

const isNumber = (val: any): boolean => {
    return typeof val === 'number'
}
//隱藏的元素
let hiddenTextarea: HTMLTextAreaElement | undefined = undefined

//隱藏元素樣式
const HIDDEN_STYLE = `
  height:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
  position:absolute !important;
  z-index:-1000 !important;
  top:0 !important;
  right:0 !important;
`

const CONTEXT_STYLE = [
    'letter-spacing',
    'line-height',
    'padding-top',
    'padding-bottom',
    'font-family',
    'font-weight',
    'font-size',
    'text-rendering',
    'text-transform',
    'width',
    'text-indent',
    'padding-left',
    'padding-right',
    'border-width',
    'box-sizing',
]

type NodeStyle = {
    contextStyle: string
    boxSizing: string
    paddingSize: number
    borderSize: number
}

type TextAreaHeight = {
    height: string
    minHeight?: string
}

function calculateNodeStyling(targetElement: Element): NodeStyle {
  //獲取實際textarea樣式返回並賦值給隱藏的textarea
    const style = window.getComputedStyle(targetElement)

    const boxSizing = style.getPropertyValue('box-sizing')

    const paddingSize =
        Number.parseFloat(style.getPropertyValue('padding-bottom')) +
        Number.parseFloat(style.getPropertyValue('padding-top'))

    const borderSize =
        Number.parseFloat(style.getPropertyValue('border-bottom-width')) +
        Number.parseFloat(style.getPropertyValue('border-top-width'))

    const contextStyle = CONTEXT_STYLE.map(
        (name) => `${name}:${style.getPropertyValue(name)}`
    ).join(';')

    return { contextStyle, paddingSize, borderSize, boxSizing }
}

export function calcTextareaHeight(
    targetElement: HTMLTextAreaElement,
    minRows = 1,
    maxRows?: number
): TextAreaHeight {
    if (!hiddenTextarea) {
      //創建隱藏的textarea
        hiddenTextarea = document.createElement('textarea')
        document.body.appendChild(hiddenTextarea)
    }
    //給隱藏的teatarea賦予實際textarea的樣式以及值(value)
    const { paddingSize, borderSize, boxSizing, contextStyle } =
        calculateNodeStyling(targetElement)
    hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`)
    hiddenTextarea.value = targetElement.value || targetElement.placeholder || ''
    //隱藏textarea整個高度,包括內邊距padding,border
    let height = hiddenTextarea.scrollHeight
    const result = {} as TextAreaHeight
    //判斷boxSizing,返回實際高度
    if (boxSizing === 'border-box') {
        height = height + borderSize
    } else if (boxSizing === 'content-box') {
        height = height - paddingSize
    }

    hiddenTextarea.value = ''
    //計算單行高度
    const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize

    if (isNumber(minRows)) {
        let minHeight = singleRowHeight * minRows
        if (boxSizing === 'border-box') {
            minHeight = minHeight + paddingSize + borderSize
        }
        height = Math.max(minHeight, height)
        result.minHeight = `${minHeight}px`
    }
    if (isNumber(maxRows)) {
        let maxHeight = singleRowHeight * maxRows!
        if (boxSizing === 'border-box') {
            maxHeight = maxHeight + paddingSize + borderSize
        }
        height = Math.min(maxHeight, height)
    }
    result.height = `${height}px`
    hiddenTextarea.parentNode?.removeChild(hiddenTextarea)
    hiddenTextarea = undefined

    return result
}

這裡的邏輯稍微複雜一點,大致就是創建一個隱藏的textarea,然後每次當輸入框值發生變化時,將它的value賦值為組件的textarea的value,最後計算出這個隱藏的textarea的scrollHeight以及其它padding之類的值並作為高度返回賦值給組件中的textarea

最後在app.vue中使用

<template>
  <div class="input-demo">
    <Input
      v-model="tel"
      :autosize="{ minRows: 2 }"
      type="textarea"
      suffixIcon="edit"
      placeholder="請輸入內容"
    />
  </div>
</template>

GIFtextarea.gif

複合型輸入框

我們可以使用複合型輸入框來前置或者後置我們的元素,如下所示

image.png

這裡我們藉助 vue3 中的slot進行實現,其中用到了useSlots來判斷用戶使用了哪個插槽,從而展示不同樣式

import { useSlots } from "vue";

//複合輸入框
const slots = useSlots();

同時template中接收前後兩個插槽

<template>
  <div
    class="k-input"
    @mouseenter="isEnter = true"
    @mouseleave="isEnter = false"
    :class="styleClass"
  >
    <div class="k-input__prepend" v-if="slots.prepend">
      <slot name="prepend"></slot>
    </div>
    <input
      ref="ipt"
      class="k-input__inner"
      :class="inputStyle"
      :disabled="inputProps.disabled"
      v-bind="attrs"
      :value="inputProps.modelValue"
      @input="changeInputVal"
    />
    <div class="k-input__append" v-if="slots.append">
      <slot name="append"></slot>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useSlots } from "vue";
const styleClass = computed(() => {
  return {
    ["k-input-group k-input-prepend"]: slots.prepend,
    ["k-input-group k-input-append"]: slots.append,
  };
});
//複合輸入框
const slots = useSlots();
</script>

最後給兩個插槽寫上樣式就實現了複合型輸入框啦

.k-input.k-input-group.k-input-append,
.k-input.k-input-group.k-input-prepend {
  line-height: normal;
  display: inline-table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  .k-input__inner {
    border-radius: 0 4px 4px 0;
  }

  //複合輸入框
  .k-input__prepend,
  .k-input__append {
    background-color: #f5f7fa;
    color: #909399;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 4 0px 0px 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }

  .k-input__append {
    border-radius: 0 4px 4px 0px;
  }
}

.k-input.k-input-group.k-input-append {
  .k-input__inner {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}

在app.vue中使用

<template>
    <div class="input-demo">
        <Input v-model="tel" placeholder="請輸入內容">
        <template #prepend>
            http://
        </template>
        </Input>
        <Input v-model="tel" placeholder="請輸入內容">
        <template #append>
            .com
        </template>
        </Input>
    </div>
</template>

總結

一個看似簡單的Input組件其實包含的內容還是很多的,做完之後會發現對自己很多地方都有提升和幫助。

如果你對vue3組件庫開發也感興趣的話可以關註我,組件庫的所有實現細節都在以往文章里，包括環境搭建，自動打包發佈，文檔搭建，vitest單元測試等等。

如果這篇文章對你有所幫助動動指頭點個贊

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL資料庫的性能分析 ---圖書《軟體性能測試分析與調優實踐之路》-手稿節選
    1 、MySQL資料庫的性能監控 1.1、如何查看MySQL資料庫的連接數 連接數是指用戶已經創建多少個連接，也就是MySQL中通過執行 SHOW PROCESSLIST命令輸出結果中運行著的線程個數的詳情，如圖所示。 SHOW PROCESSLIST預設情況下只顯示前100條記錄的詳情，如果超過1 ...
  • Mysql資料庫函數-函數的用法
    一. 單行函數：可以理解為向函數傳入一個參數，返回一個值。 單行函數是指對每一題記錄輸入值進行計算，並得到相應的計算結果，然後返回給用戶，也就是說，每條記錄作為一個輸入參數，經過函數計算得到每條記錄的計算結果。 單行函數 -- 函數舉例： select empno,ename, lower(enam ...
  • 致謝每一位ChunJun Contributor！這裡有一份禮物等你領取！
    作為一個批流統一的數據集成框架，秉承著易用、穩定、高效的目標，ChunJun於2018年4月29日在Github上將內核源碼正式開放。 從還被叫作FlinkX，寫下第一行代碼開始，ChunJun已經走過了第六個年頭，經歷了從分散式離線/實時數據同步插件，晉級為批流統一數據集成框架的蛻變時刻。越來越多 ...
  • 迴圈練習
    3D儲能、3D配電站、3D太陽能、三維儲能、使用three.js(webgl)搭建智慧樓宇、3D園區、3D廠房、3D倉庫、設備檢測、數字孿生、物聯網3D、物業3D監控、物業基礎設施可視化運維、3d建築,3d消防,消防演習模擬,3d庫房,webGL,threejs,3d機房,bim管理系統 ...
  • uniapp之uni-starter小程式多端研發框架搭建與項目實踐
    隨著移動互聯網的飛速發展，無數移動APP琳琅滿目；在移動App的發展的基礎上，衍生了小程式、輕應用技術，它隨時可用，但又無需安裝卸載。uni-app 是一個使用 Vue.js 開發所有前端應用的框架，開發者編寫一套代碼，可發佈到iOS、Android、Web（響應式）、以及各種小程式等多個平臺。AI... ...
  • 線上客服系統源碼開發實戰總結：需求分析及前端代碼基本技術方案
    在這個系列文章里，我嘗試將自己開發唯一客服系統（gofly.v1kf.com）所涉及的經驗和技術點進行梳理總結。 文章寫作水平有限，有時候會表達不清楚，難免有所疏漏，歡迎批評指正 該系列將分成以下幾個部分 一. 需求分析 二. 初步技術方案選型，驗證 三. 資料庫結構設計 四. WEB訪客前端設計與 ...
  • Vue3 企業級優雅實戰 - 組件庫框架 - 3 搭建組件庫開發環境
    前文已經初始化了 workspace-root，從本文開始就需要依次搭建組件庫、example、文檔、cli。本文內容是搭建 組件庫的開發環境。 ...
  • vue中組件化編程
    組件化編程 什麼是組件化編程 傳統方式的編寫模式 組件化編程的模式 組件是實現應用中局部功能代碼和資源的集合 vue中非單文件組件的基本使用 點擊查看代碼 <!-- Vue中使用組件的三大步驟： 一、定義組件(創建組件) 二、註冊組件 三、使用組件(寫組件標簽) 一、如何定義一個組件？ 使用Vue. ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類