Skip to content

Commit 84b700c

Browse files
RSS1102uyarn
RSS1102
and
uyarn
authored
fix(QrCode): fix SVG QRCode not reactive to value prop changes (#3681)
* fix(QrCode): fix SVG QRCode not reactive to value prop changes * chore: remove useless attr * chore: add canvas devDep * chore: optimize --------- Co-authored-by: Uyarn <[email protected]>
1 parent 6643983 commit 84b700c

File tree

6 files changed

+47
-57
lines changed

6 files changed

+47
-57
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@
141141
"babel-polyfill": "^6.26.0",
142142
"c8": "^7.12.0",
143143
"camelcase": "~6.3.0",
144+
"canvas": "~3.1.2",
144145
"cli-color": "^2.0.0",
145146
"commitizen": "^4.0.3",
146147
"cross-env": "^7.0.2",
@@ -159,7 +160,7 @@
159160
"gray-matter": "^4.0.3",
160161
"husky": "^7.0.4",
161162
"hyphenate": "^0.2.4",
162-
"jsdom": "^25.0.0",
163+
"jsdom": "^26.0.0",
163164
"less": "^4.1.2",
164165
"lint-staged": "^13.2.2",
165166
"mockdate": "^3.0.2",

‎src/qrcode/__tests__/index.test.jsx‎

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -64,18 +64,6 @@ describe('QRCode', () => {
6464

6565
it(':iconSize[number|object]-svg', async () => {});
6666

67-
const level = ['L', 'M', 'Q', 'H'];
68-
level.forEach((item) => {
69-
it(`:level[string]-[${item}]`, async () => {
70-
const wrapper = mount({
71-
render() {
72-
return <QRCode level={item} value="https://tdesign.tencent.com/"></QRCode>;
73-
},
74-
});
75-
expect(wrapper.find('.t-qrcode').attributes('level')).eq(item);
76-
});
77-
});
78-
7967
it(':size[number]', async () => {
8068
const size = 380;
8169
const wrapper = mount({
@@ -111,5 +99,34 @@ describe('QRCode', () => {
11199
await wrapper.setProps({ status: 'expired', statusRender });
112100
expect(statusRender).toBeCalled();
113101
});
102+
103+
it(':value[string] changes - canvas mode', async () => {
104+
const wrapper = mount({
105+
render() {
106+
return <QRCode type="canvas" value="https://tdesign.tencent.com/"></QRCode>;
107+
},
108+
});
109+
110+
expect(wrapper.find('.t-qrcode').find('canvas').exists()).eq(true);
111+
await wrapper.setProps({ value: 'https://github.com/Tencent/tdesign-vue-next' });
112+
expect(wrapper.find('.t-qrcode').find('canvas').exists()).eq(true);
113+
});
114+
115+
it(':value[string] changes - svg mode', async () => {
116+
const wrapper = mount({
117+
render() {
118+
return <QRCode type="svg" value="https://tdesign.tencent.com/"></QRCode>;
119+
},
120+
});
121+
122+
expect(wrapper.find('.t-qrcode').find('svg').exists()).eq(true);
123+
const initialPaths = wrapper.find('.t-qrcode').findAll('path');
124+
expect(initialPaths.length).eq(2); // 背景path + 前景path
125+
126+
await wrapper.setProps({ value: 'https://github.com/Tencent/tdesign-vue-next' });
127+
const updatedPaths = wrapper.find('.t-qrcode').findAll('path');
128+
expect(updatedPaths.length).eq(2);
129+
expect(wrapper.find('.t-qrcode').find('svg').exists()).eq(true);
130+
});
114131
});
115132
});

‎src/qrcode/components/qrcode-svg.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,27 @@ export default defineComponent({
99
name: 'QRCodeSVG',
1010
props: QRCodeSubComponentProps,
1111
setup(props) {
12-
const {
13-
margin, cells, numCells, calculatedImageSettings,
14-
} = useQRCode({
12+
const qrCodeData = computed(() => useQRCode({
1513
value: props.value,
1614
level: props.level,
1715
minVersion: DEFAULT_MINVERSION,
1816
includeMargin: DEFAULT_NEED_MARGIN,
1917
marginSize: props.marginSize,
2018
imageSettings: props.imageSettings,
2119
size: props.size,
22-
});
20+
}));
2321

2422
const cellsToDraw = computed(() => {
23+
const { cells, calculatedImageSettings } = qrCodeData.value;
2524
if (props.imageSettings && calculatedImageSettings.value?.excavation != null) {
2625
return excavateModules(cells.value, calculatedImageSettings.value.excavation);
2726
}
2827
return cells.value;
2928
});
3029

30+
const calculatedImageSettings = computed(() => qrCodeData.value.calculatedImageSettings.value);
31+
const margin = computed(() => qrCodeData.value.margin.value);
32+
const numCells = computed(() => qrCodeData.value.numCells.value);
3133
return {
3234
cellsToDraw,
3335
calculatedImageSettings,

‎src/qrcode/qrcode.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export default defineComponent({
6868
},
6969
render() {
7070
return (
71-
<div value={this.value} class={this.classes} style={this.mergedStyle} level={this.level}>
71+
<div class={this.classes} style={this.mergedStyle}>
7272
{this.status !== 'active' && (
7373
<div
7474
class={[`${this.classPrefix}-mask`, { [`${this.classPrefix}-${this.status}`]: this.status !== 'loading' }]}

‎test/snap/__snapshots__/csr.test.js.snap‎

Lines changed: 0 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -83877,9 +83877,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/base.vue 1`] = `
8387783877
>
8387883878
<div
8387983879
class="t-qrcode"
83880-
level="M"
8388183880
style="background-color: transparent; width: 160px; height: 160px;"
83882-
value="https://tdesign.tencent.com/"
8388383881
>
8388483882
<div
8388583883
style="display: flex; align-self: stretch; flex-basis: auto; min-width: 0;"
@@ -83924,9 +83922,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/customColor.vue 1`]
8392483922
>
8392583923
<div
8392683924
class="t-qrcode"
83927-
level="M"
8392883925
style="background-color: rgb(255, 255, 255); width: 160px; height: 160px;"
83929-
value="https://tdesign.tencent.com/"
8393083926
>
8393183927
<div
8393283928
style="display: flex; align-self: stretch; flex-basis: auto; min-width: 0;"
@@ -83943,9 +83939,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/customColor.vue 1`]
8394383939
>
8394483940
<div
8394583941
class="t-qrcode"
83946-
level="M"
8394783942
style="background-color: rgb(217, 225, 255); width: 160px; height: 160px;"
83948-
value="https://tdesign.tencent.com/"
8394983943
>
8395083944
<div
8395183945
style="display: flex; align-self: stretch; flex-basis: auto; min-width: 0;"
@@ -84031,9 +84025,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/customSize.vue 1`] =
8403184025
>
8403284026
<div
8403384027
class="t-qrcode"
84034-
level="H"
8403584028
style="background-color: transparent; width: 160px; height: 160px;"
84036-
value="https://tdesign.tencent.com/"
8403784029
>
8403884030
<div
8403984031
style="display: flex; align-self: stretch; flex-basis: auto; min-width: 0;"
@@ -84062,9 +84054,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/customStatusRender.v
8406284054
>
8406384055
<div
8406484056
class="t-qrcode"
84065-
level="M"
8406684057
style="background-color: transparent; width: 160px; height: 160px;"
84067-
value="https://tdesign.tencent.com/"
8406884058
>
8406984059
<div
8407084060
class="t-mask"
@@ -84128,9 +84118,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/customStatusRender.v
8412884118
>
8412984119
<div
8413084120
class="t-qrcode"
84131-
level="M"
8413284121
style="background-color: transparent; width: 160px; height: 160px;"
84133-
value="https://tdesign.tencent.com/"
8413484122
>
8413584123
<div
8413684124
class="t-mask t-expired"
@@ -84195,9 +84183,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/customStatusRender.v
8419584183
>
8419684184
<div
8419784185
class="t-qrcode"
84198-
level="M"
8419984186
style="background-color: transparent; width: 160px; height: 160px;"
84200-
value="https://tdesign.tencent.com/"
8420184187
>
8420284188
<div
8420384189
class="t-mask t-scanned"
@@ -84298,9 +84284,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/download.vue 1`] = `
8429884284
<div
8429984285
class="t-qrcode"
8430084286
id="QRCode"
84301-
level="M"
8430284287
style="background-color: transparent; width: 160px; height: 160px;"
84303-
value="https://tdesign.tencent.com/"
8430484288
>
8430584289
<div
8430684290
style="display: flex; align-self: stretch; flex-basis: auto; min-width: 0;"
@@ -84339,9 +84323,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/icon.vue 1`] = `
8433984323
>
8434084324
<div
8434184325
class="t-qrcode t-qrcode-svg"
84342-
level="M"
8434384326
style="background-color: transparent; width: 160px; height: 160px;"
84344-
value="https://tdesign.tencent.com/"
8434584327
>
8434684328
<svg
8434784329
height="160"
@@ -84474,9 +84456,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/level.vue 1`] = `
8447484456
>
8447584457
<div
8447684458
class="t-qrcode"
84477-
level="M"
8447884459
style="background-color: transparent; width: 160px; height: 160px;"
84479-
value="https://tdesign.gtimg.com/site/tdesign-logo.png"
8448084460
>
8448184461
<div
8448284462
style="display: flex; align-self: stretch; flex-basis: auto; min-width: 0;"
@@ -84518,9 +84498,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/status.vue 1`] = `
8451884498
>
8451984499
<div
8452084500
class="t-qrcode"
84521-
level="M"
8452284501
style="background-color: transparent; width: 160px; height: 160px;"
84523-
value="https://tdesign.tencent.com/"
8452484502
>
8452584503
<div
8452684504
class="t-mask"
@@ -84568,9 +84546,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/status.vue 1`] = `
8456884546
>
8456984547
<div
8457084548
class="t-qrcode"
84571-
level="M"
8457284549
style="background-color: transparent; width: 160px; height: 160px;"
84573-
value="https://tdesign.tencent.com/"
8457484550
>
8457584551
<div
8457684552
class="t-mask t-expired"
@@ -84617,9 +84593,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/status.vue 1`] = `
8461784593
>
8461884594
<div
8461984595
class="t-qrcode"
84620-
level="M"
8462184596
style="background-color: transparent; width: 160px; height: 160px;"
84622-
value="https://tdesign.tencent.com/"
8462384597
>
8462484598
<div
8462584599
class="t-mask t-scanned"
@@ -84667,9 +84641,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/type.vue 1`] = `
8466784641
>
8466884642
<div
8466984643
class="t-qrcode"
84670-
level="M"
8467184644
style="background-color: transparent; width: 160px; height: 160px;"
84672-
value="https://tdesign.tencent.com/"
8467384645
>
8467484646
<div
8467584647
style="display: flex; align-self: stretch; flex-basis: auto; min-width: 0;"
@@ -84686,9 +84658,7 @@ exports[`csr snapshot test > csr test ./src/qrcode/_example/type.vue 1`] = `
8468684658
>
8468784659
<div
8468884660
class="t-qrcode t-qrcode-svg"
84689-
level="M"
8469084661
style="background-color: transparent; width: 160px; height: 160px;"
84691-
value="https://tdesign.tencent.com/"
8469284662
>
8469384663
<svg
8469484664
height="160"

0 commit comments

Comments
 (0)