From c720eea83170b36e1b2f4eb8bdaff400e88bf714 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Wed, 26 Aug 2020 16:24:02 +0800
Subject: [PATCH] fix(Image): loading placeholder not work

---
 src/area/index.js                | 2 +-
 src/calendar/components/Month.js | 4 ++--
 src/collapse-item/index.js       | 4 ++--
 src/image/index.js               | 7 +++----
 src/nav-bar/index.js             | 4 ++--
 src/progress/index.js            | 8 ++++----
 6 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/area/index.js b/src/area/index.js
index 15a6b2a58..5558f2bff 100644
--- a/src/area/index.js
+++ b/src/area/index.js
@@ -48,7 +48,7 @@ export default createComponent({
   emits: ['change', 'confirm'],
 
   setup(props, { emit, slots }) {
-    const pickerRef = ref(null);
+    const pickerRef = ref();
 
     const state = reactive({
       code: props.value,
diff --git a/src/calendar/components/Month.js b/src/calendar/components/Month.js
index bd20b89f5..184075556 100644
--- a/src/calendar/components/Month.js
+++ b/src/calendar/components/Month.js
@@ -46,8 +46,8 @@ export default createComponent({
 
   setup(props, { emit }) {
     const [visible, setVisible] = useToggle();
-    const daysRef = ref(null);
-    const monthRef = ref(null);
+    const daysRef = ref();
+    const monthRef = ref();
 
     const title = computed(() => formatMonthTitle(props.date));
 
diff --git a/src/collapse-item/index.js b/src/collapse-item/index.js
index baae9d414..dd482c7a5 100644
--- a/src/collapse-item/index.js
+++ b/src/collapse-item/index.js
@@ -27,8 +27,8 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    const wrapperRef = ref(null);
-    const contentRef = ref(null);
+    const wrapperRef = ref();
+    const contentRef = ref();
     const { parent, index } = useParent(COLLAPSE_KEY);
 
     const currentName = computed(() =>
diff --git a/src/image/index.js b/src/image/index.js
index 5b85a1152..aade22759 100644
--- a/src/image/index.js
+++ b/src/image/index.js
@@ -37,7 +37,7 @@ export default createComponent({
   setup(props, { emit, slots }) {
     const error = ref(false);
     const loading = ref(true);
-    const imageRef = ref(null);
+    const imageRef = ref();
 
     const style = computed(() => {
       const style = {};
@@ -94,11 +94,10 @@ export default createComponent({
     };
 
     const renderPlaceholder = () => {
-      if (props.loading && props.showLoading) {
+      if (loading.value && props.showLoading) {
         return <div class={bem('loading')}>{renderLoadingIcon()}</div>;
       }
-
-      if (props.error && props.showError) {
+      if (error.value && props.showError) {
         return <div class={bem('error')}>{renderErrorIcon()}</div>;
       }
     };
diff --git a/src/nav-bar/index.js b/src/nav-bar/index.js
index 775fdabb9..097079306 100644
--- a/src/nav-bar/index.js
+++ b/src/nav-bar/index.js
@@ -30,8 +30,8 @@ export default createComponent({
   emits: ['click-left', 'click-right'],
 
   setup(props, { emit, slots }) {
-    const height = ref(null);
-    const navBarRef = ref(null);
+    const height = ref();
+    const navBarRef = ref();
 
     onMounted(() => {
       if (props.placeholder && props.fixed) {
diff --git a/src/progress/index.js b/src/progress/index.js
index 2c5799310..acbdcc1f9 100644
--- a/src/progress/index.js
+++ b/src/progress/index.js
@@ -24,12 +24,12 @@ export default createComponent({
   },
 
   setup(props) {
-    const rootRef = ref(null);
-    const pivotRef = ref(null);
+    const rootRef = ref();
+    const pivotRef = ref();
 
     const state = reactive({
-      pivotWidth: 0,
       rootWidth: 0,
+      pivotWidth: 0,
     });
 
     const background = computed(() =>
@@ -38,8 +38,8 @@ export default createComponent({
 
     const setWidth = () => {
       nextTick(() => {
-        state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0;
         state.rootWidth = rootRef.value.offsetWidth;
+        state.pivotWidth = pivotRef.value ? pivotRef.value.offsetWidth : 0;
       });
     };