@dcloudio/uni-h5 2.0.0 → 2.0.1-32920211122002

package/src/platforms/h5/components/app/popup/modal.vue

@@ -15,7 +15,16 @@
             v-text="title"
           />
         </div>
+        <textarea
+          v-if="editable"
+          ref="editContent"
+          class="uni-modal__textarea"
+          rows="1"
+          :placeholder="placeholderText"
+          :value="content"
+        />
         <div
+          v-else
           class="uni-modal__bd"
           @touchmove.stop
           v-text="content"
@@ -41,7 +50,7 @@
       <keypress
         :disable="!visible"
         @esc="_close('cancel')"
-        @enter="_close('confirm')"
+        @enter="!editable && _close('confirm')"
       />
     </uni-modal>
   </transition>
@@ -86,11 +95,25 @@ export default {
     visible: {
       type: Boolean,
       default: false
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    placeholderText: {
+      type: String,
+      default: ''
     }
   },
   methods: {
     _close (type) {
-      this.$emit('close', type)
+      const res = {
+        [type]: true
+      }
+      if (this.editable && type === 'confirm') {
+        res.content = this.$refs.editContent.value
+      }
+      this.$emit('close', res)
     }
   }
 }
@@ -156,6 +179,19 @@ export default {
 		overflow-y: auto;
 	}
 
+	uni-modal .uni-modal__textarea {
+  resize: none;
+  border: 0;
+  margin: 0;
+  width: 90%;
+  padding: 10px;
+  font-size: 20px;
+  outline: none;
+  border: none;
+  background-color: #eee;
+  text-decoration: inherit;
+}
+
 	uni-modal .uni-modal__ft {
 		position: relative;
 		line-height: 48px;

package/src/platforms/h5/components/app/popup/toast.vue

@@ -52,7 +52,7 @@ export default {
     icon: {
       default: 'success',
       validator (value) {
-        return ['success', 'loading', 'none'].indexOf(value) !== -1
+        return ['success', 'loading', 'error', 'none'].indexOf(value) !== -1
       }
     },
     image: {
@@ -80,6 +80,9 @@ export default {
       if (this.icon === 'loading') {
         return 'uni-loading'
       }
+      if (this.icon === 'error') {
+        return 'uni-icon-error'
+      }
       return ''
     }
   },
@@ -168,6 +171,11 @@ uni-toast .uni-icon_toast.uni-icon-success-no-circle:before {
   font-size: 55px;
 }
 
+uni-toast .uni-icon_toast.uni-icon-error:before {
+  color: #ffffff;
+  font-size: 50px;
+}
+
 uni-toast .uni-icon_toast.uni-loading {
   margin: 20px 0 0;
   width: 38px;

package/src/platforms/h5/components/app/tabBar.vue

@@ -12,7 +12,7 @@
         class="uni-tabbar-border"
       />
       <div
-        v-for="(item,index) in list"
+        v-for="(item,index) in visibleList"
         :key="item.isMidButton ? index : item.pagePath"
         :style="item.isMidButton ? {flex:'0 0 ' + item.width,position:'relative'} : {}"
         class="uni-tabbar__item"
@@ -36,14 +36,14 @@
           :style="{height:height}"
         >
           <div
-            v-if="item.iconPath || item.isMidButton"
+            v-if="getIconPath(item,index) || item.iconPath || item.isMidButton"
             :class="{'uni-tabbar__icon__diff':!item.text}"
             class="uni-tabbar__icon"
             :style="{width: iconWidth,height:iconWidth}"
           >
             <img
               v-if="!item.isMidButton"
-              :src="_getRealPath(selectedIndex===index?item.selectedIconPath:item.iconPath)"
+              :src="_getRealPath(getIconPath(item,index))"
             >
             <div
               v-if="item.redDot"
@@ -287,7 +287,8 @@ export default {
   },
   data () {
     return {
-      selectedIndex: 0
+      selectedIndex: 0,
+      visibleList: []
     }
   },
   computed: {
@@ -319,25 +320,45 @@ export default {
   watch: {
     $route: {
       immediate: true,
-      handler (to) {
-        if (to.meta.isTabBar) {
-          this.__path__ = to.path
-          const index = this.list.findIndex(item => to.meta.pagePath === item.pagePath)
-          if (index > -1) {
-            this.selectedIndex = index
-          }
-        }
+      handler () {
+      // 只在此做一次 visibleList 的初始化
+        if (!this.visibleList.length) this._initVisibleList()
+        this.setSelectedIndex()
+      }
+    },
+    list: {
+      deep: true,
+      handler () {
+        this._initVisibleList()
+        this.setSelectedIndex()
       }
     }
   },
   created () {
-    this._initMidButton()
+    this.list.forEach(item => {
+      if (item.visible === undefined) {
+        this.$set(item, 'visible', true)
+      }
+    })
   },
   beforeCreate () {
     this.__path__ = this.$route.path
   },
   methods: {
-    _getRealPath (filePath) {
+    getIconPath (item, index) {
+      return (this.selectedIndex === index ? item.selectedIconPath || item.iconPath : item.iconPath) || ''
+    },
+    setSelectedIndex () {
+      if (this.$route.meta.isTabBar) {
+        this.__path__ = this.$route.path
+        const index = this.visibleList.findIndex(item => this.$route.meta.pagePath === item.pagePath)
+        this.selectedIndex = index
+      }
+    },
+    _initVisibleList () {
+      this.visibleList = this._initMidButton(this.list.filter(item => item.visible !== false))
+    },
+    _getRealPath (filePath = '') {
       const SCHEME_RE = /^([a-z-]+:)?\/\//i
       const DATA_RE = /^data:.*,.*/
       if (!(SCHEME_RE.test(filePath) || DATA_RE.test(filePath)) && filePath.indexOf('/') !== 0) {
@@ -375,8 +396,8 @@ export default {
         UniServiceJSBridge.emit('onTabItemTap', detail)
       }
     },
-    _initMidButton () {
-      const listLength = this.list.length
+    _initMidButton (list) {
+      const listLength = list.length
       // 偶数则添加midButton
       if (listLength % 2 === 0 && isPlainObject(this.midButton)) {
         // 给midButton赋值默认值
@@ -388,8 +409,9 @@ export default {
         for (const key in DefaultMidButton) {
           this.midButton[key] = this.midButton[key] || DefaultMidButton[key]
         }
-        this.list.splice(~~(listLength / 2), 0, Object.assign({}, this.midButton, { isMidButton: true }))
+        list.splice(~~(listLength / 2), 0, Object.assign({}, this.midButton, { isMidButton: true }))
       }
+      return list
     },
     _uniTabbarBdStyle (item) {
       return Object.assign({}, {

package/src/platforms/h5/components/page/index.vue

@@ -7,7 +7,7 @@
     <page-refresh
       v-if="enablePullDownRefresh"
       ref="refresh"
-      :color="refreshOptions.color"
+      :color="refreshOptions.color"
       :offset="refreshOptions.offset"
     />
     <page-body
@@ -35,7 +35,9 @@
 import {
   upx2px
 } from 'uni-helpers/index'
-
+import {
+  initNavigationBarI18n
+} from 'uni-helpers/i18n'
 import {
   NAVBAR_HEIGHT
 } from 'uni-helpers/constants'
@@ -216,7 +218,7 @@ export default {
       titlePenetrate: yesNoParseList[this.titlePenetrate]
     }, titleNView)
     navigationBar.shadow = this.navigationBarShadow
-
+    initNavigationBarI18n(navigationBar)
     const refreshOptions = Object.assign({
       support: true,
       color: '#2BD009',

package/src/platforms/h5/components/page/pageHead.vue

@@ -1,110 +1,117 @@
 <template>
   <uni-page-head :uni-page-head-type="type">
-    <div
+    <div
       :style="{transitionDuration:duration,transitionTimingFunction:timingFunc,backgroundColor:bgColor,color:textColor}"
-      :class="headClass"
-      class="uni-page-head"
+      :class="headClass"
+      class="uni-page-head"
     >
       <div class="uni-page-head-hd">
-        <div
-          v-show="backButton"
-          class="uni-page-head-btn"
-          @click="_back"
+        <div
+          v-show="backButton"
+          class="uni-page-head-btn"
+          @click="_back"
         >
-          <i
-            :style="{color:color,fontSize:'27px'}"
-            class="uni-btn-icon"
+          <i
+            :style="{color:color,fontSize:'27px'}"
+            class="uni-btn-icon"
           >&#xe601;</i>
         </div>
-        <template v-for="(btn,index) in btns">
-          <div
-            v-if="btn.float === 'left'"
-            :key="index"
-            :style="{backgroundColor: type==='transparent'?btn.background:'transparent',width:btn.width}"
-            :badge-text="btn.badgeText"
-            :class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText,'uni-page-head-btn-select':btn.select}"
-            class="uni-page-head-btn"
-          >
-            <i
-              :style="_formatBtnStyle(btn)"
-              class="uni-btn-icon"
-              @click="_onBtnClick(index)"
-              v-html="_formatBtnFontText(btn)"
-            />
-          </div>
-        </template>
+        <div class="uni-page-head-ft">
+          <template v-for="(btn,index) in btns">
+            <div
+              v-if="btn.float === 'left'"
+              :key="index"
+              :style="{backgroundColor: type==='transparent'?btn.background:'transparent',width:btn.width}"
+              :badge-text="btn.badgeText"
+              :class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText,'uni-page-head-btn-select':btn.select}"
+              class="uni-page-head-btn"
+            >
+              <i
+                :style="_formatBtnStyle(btn)"
+                class="uni-btn-icon"
+                @click="_onBtnClick(index)"
+                v-html="_formatBtnFontText(btn)"
+              />
+            </div>
+          </template>
+        </div>
       </div>
-      <div
-        v-if="!searchInput"
-        class="uni-page-head-bd"
+      <div
+        v-if="!searchInput"
+        class="uni-page-head-bd"
       >
-        <div
-          :style="{fontSize:titleSize,opacity:type==='transparent'?0:1}"
-          class="uni-page-head__title"
+        <div
+          :style="{fontSize:titleSize,opacity:type==='transparent'?0:1}"
+          class="uni-page-head__title"
         >
-          <i
-            v-if="loading"
-            class="uni-loading"
+          <i
+            v-if="loading"
+            class="uni-loading"
           />
-          <img
-            v-if="titleImage!==''"
-            :src="titleImage"
-            class="uni-page-head__title_image"
+          <img
+            v-if="titleImage!==''"
+            :src="titleImage"
+            class="uni-page-head__title_image"
           >
           <template v-else>
             {{ titleText }}
           </template>
         </div>
       </div>
-      <div
-        v-if="searchInput"
+      <div
+        v-if="searchInput"
         :style="{'border-radius':searchInput.borderRadius,'background-color':searchInput.backgroundColor}"
-        class="uni-page-head-search"
+        class="uni-page-head-search"
       >
-        <div
-          :style="{color:searchInput.placeholderColor}"
-          :class="[`uni-page-head-search-placeholder-${focus || text ? 'left' : searchInput.align}`]"
-          class="uni-page-head-search-placeholder"
-          v-text="text || composing ? '' : searchInput.placeholder"
+        <div
+          :style="{color:searchInput.placeholderColor}"
+          :class="[`uni-page-head-search-placeholder-${focus || showPlaceholder ? 'left' : searchInput.align}`]"
+          class="uni-page-head-search-placeholder"
+          v-text="showPlaceholder || composing ? '' : searchInput.placeholder"
         />
-        <v-uni-input
-          ref="input"
-          v-model="text"
-          :focus="searchInput.autoFocus"
-          :disabled="searchInput.disabled"
+        <v-uni-input
+          ref="input"
+          v-model="text"
+          :focus="searchInput.autoFocus"
+          :disabled="searchInput.disabled"
           :style="{color:searchInput.color}"
-          :placeholder-style="`color:${searchInput.placeholderColor}`"
-          class="uni-page-head-search-input"
+          :placeholder-style="`color:${searchInput.placeholderColor}`"
+          class="uni-page-head-search-input"
           confirm-type="search"
-          @focus="_focus"
-          @blur="_blur"
-          @update:value="_input"
+          @focus="_focus"
+          @blur="_blur"
+          @update:value="_input"
+        />
+        <i
+          v-if="text"
+          class="uni-icon-clear"
+          @click="_clearInput"
         />
       </div>
       <div class="uni-page-head-ft">
         <template v-for="(btn,index) in btns">
-          <div
-            v-if="btn.float !== 'left'"
-            :key="index"
+          <div
+            v-if="btn.float !== 'left'"
+            :key="index"
             :style="{backgroundColor: type==='transparent'?btn.background:'transparent',width:btn.width}"
-            :badge-text="btn.badgeText"
+            :badge-text="btn.badgeText"
             :class="{'uni-page-head-btn-red-dot':btn.redDot||btn.badgeText,'uni-page-head-btn-select':btn.select}"
-            class="uni-page-head-btn"
+            class="uni-page-head-btn"
           >
-            <i
-              :style="_formatBtnStyle(btn)"
-              class="uni-btn-icon"
-              @click="_onBtnClick(index)"
-              v-html="_formatBtnFontText(btn)"
+            <i
+              :style="_formatBtnStyle(btn)"
+              class="uni-btn-icon"
+              @click="_onBtnClick(index)"
+              v-html="_formatBtnFontText(btn)"
             />
           </div>
         </template>
       </div>
     </div>
-    <div
-      v-if="type!=='transparent'&&type!=='float'"
-      :class="{'uni-placeholder-titlePenetrate': titlePenetrate}"
-      class="uni-placeholder"
+    <div
+      v-if="type!=='transparent'&&type!=='float'"
+      :class="{'uni-placeholder-titlePenetrate': titlePenetrate}"
+      class="uni-placeholder"
     />
   </uni-page-head>
 </template>
@@ -174,7 +181,6 @@
     left: 70px;
     right: 70px;
     min-width: 0;
-    user-select: auto;
   }
 
   .uni-page-head-btn {
@@ -347,6 +353,11 @@
   uni-page-head .uni-page-head-shadow-yellow::after {
     background-image: url("https://cdn.dcloud.net.cn/img/shadow-yellow.png");
   }
+
+  uni-page-head .uni-icon-clear {
+    align-self: center;
+    padding-right: 5px;
+  }
 </style>
 <script>
 import appendCss from 'uni-platform/helpers/append-css'
@@ -442,7 +453,8 @@ export default {
     return {
       focus: false,
       text: '',
-      composing: false
+      composing: false,
+      showPlaceholder: false
     }
   },
   computed: {
@@ -497,6 +509,9 @@ export default {
       input.$watch('composing', val => {
         this.composing = val
       })
+      input.$watch('valueSync', val => {
+        this.showPlaceholder = !!val
+      })
       if (this.searchInput.disabled) {
         input.$el.addEventListener('click', () => {
           UniServiceJSBridge.emit('onNavigationBarSearchInputClicked', '')
@@ -568,7 +583,11 @@ export default {
       UniServiceJSBridge.emit('onNavigationBarSearchInputChanged', {
         text
       })
+    },
+    _clearInput () {
+      this.text = ''
+      this._input(this.text)
     }
   }
 }
-</script>
+</script>